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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Orbitron:wght@400..900&display=swap');

html {scroll-behavior: smooth;}

body{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 0;
    background-color: #FFF;
	}

/*text link*/
main, footer{font-size: 1em; line-height: 1.6em; color: #646e6d; font-family: "Noto Sans JP", serif;}
a{outline: none; text-decoration: none;}
#Campaign a{color: #feda00;}
#Campaign a:hover{color: #feef92;}
ul{list-style-type: none;}
li{padding: 0.25em 0.5em;}
img{max-width: 100%;}
br.sp{display: none;}

.small{font-size: 0.8em;}
.center{text-align: center;}
.red{color: #e00016;}
.bold{font-weight: 600;}
.lead{margin-right: 1em;}

@media only screen and (max-width: 480px) {main{font-size: 0.9em;} br.sp{display: block;}}


/*animation*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
	
	&.fadein-left{transform: translate(-30px,0);}
	&.fadein-right{transform: translate(30px,0);}
	&.fadein-up{transform: translate(0,-30px);}
	&.fadein-bottom{transform: translate(0,30px);}
	&.scrollin{opacity: 1 !important; transform: translate(0, 0) !important;}
	}

.anime_02{animation-delay: 2s;}
.anime_04{animation-delay: 4s;}
.anime_06{animation-delay: 6s;}
.anime_08{animation-delay: 8s;}


:hover{transition: all  0.5s ease;}


/*-----NAVI-----*/
.hamburger-morph {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1100;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	padding: 5px;
	border: none;
	cursor: pointer;
	background: #0096ff;
	}

	.hamburger-morph__icon {width: 100%; height: 100%;}
	.hamburger-morph__line {
		fill: none;
		stroke: #FFF;
		stroke-width: 6;
		transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
		}

	.hamburger-morph__line:nth-child(1) {stroke-dasharray: 60 207;}
	.hamburger-morph__line:nth-child(2) {stroke-dasharray: 60 60;}
	.hamburger-morph__line:nth-child(3) {stroke-dasharray: 60 207;}

	.hamburger-morph.active .hamburger-morph__line:nth-child(1) {stroke-dasharray: 90 207; stroke-dashoffset: -134;}
	.hamburger-morph.active .hamburger-morph__line:nth-child(2) {stroke-dasharray: 1 60; stroke-dashoffset: -30;}
	.hamburger-morph.active .hamburger-morph__line:nth-child(3) {stroke-dasharray: 90 207; stroke-dashoffset: -134;}

.nav-morph {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #0096ff;
	clip-path: circle(0% at calc(100% - 44px) 44px);
	transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	}

	.nav-morph.active {clip-path: circle(150% at calc(100% - 44px) 44px);}

	.nav-morph__wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		}

	.nav-morph__list {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		}

	.nav-morph__item {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.4s ease, transform 0.4s ease;
		}

	.nav-morph.active .nav-morph__item {opacity: 1; transform: translateY(0);}
	.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
	.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
	.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
	.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }
	
	.nav-morph__link {
		position: relative;
		display: inline-block;
		padding: 5px 20px 0;
		margin: 10px 0;
		font-size: 1.4em;
		text-decoration: none;
		overflow: hidden;
		}

	.nav-morph__text, .nav-morph__hover {display: block; transition: transform 0.3s ease; color: #fff;}

	.nav-morph__hover {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		transform: translateY(0%);
		font-size: 0.8em;
		}

	.nav-morph__link:hover{color: #FFF;}
	.nav-morph__link:hover .nav-morph__text {transform: translateY(-100%);}
	.nav-morph__link:hover .nav-morph__hover {transform: translateY(-100%);}

.nav-morph__text{font-family: "Orbitron", serif; font-weight: 500;}
.nav-morph__hover{font-family: "Noto Sans JP", serif; font-weight: 600;}

@media only screen and (max-width: 480px) {.hamburger-morph {top: 10px; right: 10px;}}


/*Swiper*/
.swiper{padding: 0 0 20px;}
.swiper-slide {transition: transform 0.6s;}
.swiper-slide p{text-align: center; margin-bottom: 1em;}

.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {transform: scale(0.95);}


.swiper-pagination-bullet {background-color: #ff5ac8;}

.swiper-button-next, .swiper-button-prev{color: #ff5ac8!important; z-index: 99999;}
.swiper-pagination{bottom: 0;}

@media only screen and (max-width: 1200px) {#Character .swiper-button-next, #Character .swiper-button-prev{top: 85%!important;}}
@media only screen and (max-width: 480px) {#Character .swiper-button-next, #Character .swiper-button-prev{top: 95%!important;}}



/*---------- mainVisual ----------*/
#mainVisual{
	padding: 10% 0 20%;
	margin-bottom: 5em;
	background-image: url(../images/QQQbeats/mainVisual_chara.webp), url("../images/QQQbeats/background.webp");
	background-repeat: no-repeat;
	background-size: 70%, contain;
	background-position: top right 12% ,top center;
	position: relative;
	}

.platform{
	max-width: 100px;
	margin: 0;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 999;
	}

#mainVisual div{width: 45%; margin-left: 5%;}

#mainVisual h1 {
	margin: -1.5em 0 0;
	height: 0;
	padding-top: 27%;
	background-repeat: no-repeat;
	background-size: contain !important;
	overflow: hidden;
	display: block;
	background-image: url("../images/QQQbeats/logo.webp");
	background-position: top left;
	}

.catchcopy{width: 80%; margin: 0 2em 0 auto;}


@media only screen and (max-width: 1100px) {
	.platform{max-width: 80px; top: 15px; left: 15px;}
	#mainVisual h1 {margin: -1em 0 0;}
	.catchcopy{width: 75%; margin: 0 1em 0 auto;}
	}

@media only screen and (max-width: 900px) {.platform{max-width: 60px;}}

@media only screen and (max-width: 580px) {
	#mainVisual{
		padding: 0;
		margin-bottom: 5em;
		background-image: url(../images/QQQbeats/mainVisual_chara.webp), url("../images/QQQbeats/background_sp.webp");
		background-repeat: no-repeat;
		background-size: 170%, contain;
		background-position: top -1em right 37.5% ,top center;
		position: relative;
		}

	.platform{
		max-width: 70px;
		top: 10px; left: 10px;
		}

	#mainVisual div{width: 90%; padding-top: 68.5%; padding-bottom: 12.5%;}

	#mainVisual h1 {margin: -1em 0 0; height: 0;}
	#mainVisual h1 + p{margin-top: 0.25em;}
	.catchcopy{width: 70%; margin: 0 auto 0 0;}
	}
	

/*----------　CATEGORY ----------*/
#Category{
	width: 100%;
	padding: 5px 0 5px 20px;
	position: fixed;
	z-index: 100;
	top: 0;
	background: #FFF;
	}

#Category h1 {max-width: 280px; margin: 0.25em;}
#Details{margin-top: 110px; padding: 0;}


/*---------- NEWS MOVIE ----------*/
#News{max-width: 1380px; margin: auto; padding-bottom: 8em;}
#News > div{display: flex; flex-wrap: wrap; padding: 0.75em;}
#News > div div:first-child{flex: 0 1 25%;}
#News > div div:last-child{flex: 0 1 75%;}

@media only screen and (max-width: 860px) {#News > div{display: block;} #News h2{max-width: 180px;}}
@media only screen and (max-width: 480px) {#News > div{display: block;} #News h2{max-width: 160px;}}


/*News*/
ul.topicsList{height: 280px; margin: 0; padding: 0; overflow-y: scroll;}
ul.topicsList li{padding: 0; border-bottom: dotted 1px #7f7f7f;}
ul.topicsList li > a{padding: 1em; display: block; color: #869291;}
ul.topicsList li > a > p{margin: 0;}
ul.topicsList li > a > time{font-weight: 600;}
ul.topicsList li > a > p{margin: 0.5em 0 0 1em;}

ul.topicsList li > a:hover{background: rgba(45,160,240,0.1);}
ul.topicsList li > a.nolink:hover{background: #FFF;}


/*PV*/
#Movie > div{
	max-width: 1100px;
	margin: auto;
	padding: 0 1em 10em;
	}

.pv, .youtube{width: 100%; aspect-ratio: 16 / 9;}
.pv iframe, .youtube iframe{width: 100%; height: 100%;}


/*NintendoLink*/
.shop{padding: 3em 0;}
.shop .ShopLink {padding: 2rem 1rem 3rem;}

.ShopLink {
	width: 80%;
	max-width: 600px;
	margin: 0 auto;
	display: block;
	font-weight: 700;
	line-height: 2.4em;
	text-decoration: none;
	text-align: center;
	padding: 1.5rem 1rem;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid transparent;
	border-radius: 6px;
	box-sizing: border-box;
	position: relative;
	}

.ShopLink span {
	font-size: 1.9rem;
	text-align: 2.4rem;
	position: relative;
	display: block;
	transform: translate(-3px, -3px);
	transition: 0.3s;
	z-index: +1;
	}

.ShopLink a{color: #ffffff;}
.ShopLink br{display: none;}

.ShopLink:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background: #e60012;
	border-radius: 6px;
	box-sizing: border-box;
	transform: translate(-3px, -3px);
	transition: 0.3s;
	}

.ShopLink:hover span {transform: translate(0, 0);}
.ShopLink:hover:after {transform: translate(0, 0);}
.ShopLink img{max-width: 400px;}

@media only screen and (max-width: 480px) {.ShopLink{padding: 1.5rem 1rem 2rem;} .ShopLink img{max-width: 100%;} .ShopLink span{font-size: 1.6rem;} .ShopLink br{display: block;}}
@media only screen and (max-width: 380px) {.ShopLink span{font-size: 1.4rem;}}



/*---------- SECTION ----------*/
#About, #Story, #Details{
	color: #FFF;
	border-top: solid 5px #fd78f2;
	background-image: linear-gradient(120deg, rgba(89, 87, 231, 1), rgba(25, 191, 227, 1));
	}

#About{margin-bottom: 5em;}

#About > div, #Story > div, #Details > div {
	background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(255, 255, 255, 0.25) 26px,  rgba(255, 255, 255, 0.25) 26px,
      transparent 27px,  transparent 51px, 
      rgba(255, 255, 255, 0.25) 52px,  rgba(255, 255, 255, 0.25) 52px,
      transparent 53px,  transparent 77px, 
      rgba(255, 255, 255, 0.25) 78px,  rgba(255, 255, 255, 0.25) 78px,
      transparent 79px,  transparent 103px, 
      rgba(255, 255, 255, 0.25) 104px,  rgba(255, 255, 255, 0.25) 104px,
      transparent 105px,  transparent 129px, 
      rgba(255, 255, 255, 0.25) 130px,  rgba(255, 255, 255, 0.25) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(255, 255, 255, 0.25) 26px,  rgba(255, 255, 255, 0.25) 26px,
      transparent 27px,  transparent 51px, 
      rgba(255, 255, 255, 0.25) 52px,  rgba(255, 255, 255, 0.25) 52px,
      transparent 53px,  transparent 77px, 
      rgba(255, 255, 255, 0.25) 78px,  rgba(255, 255, 255, 0.25) 78px,
      transparent 79px,  transparent 103px, 
      rgba(255, 255, 255, 0.25) 104px,  rgba(255, 255, 255, 0.25) 104px,
      transparent 105px,  transparent 129px, 
      rgba(255, 255, 255, 0.25) 130px,  rgba(255, 255, 255, 0.25) 130px);
	}

#About h2, #Story h2{margin: -5px 0 0;}
#About h2 + div{padding: 1em;}

#Details h2{margin: -5px auto 0; text-align: center;}

h3{margin: 0 0 1em;}
.QQQbeats h3{text-align: center;}
.charaList h3{margin: 1em 1.5em 2em; text-align: center;}
.bio h3{text-align: center;}

@media only screen and (max-width: 480px) {
	#About, #Story, #Details{border-top: solid 4px #fd78f2;}
	.charaList:last-child h3{margin: 1em 3em 2em;}
	#About h2, #Story h2{max-width: 320px; margin: -4px 0 0;}
	#Details h2{max-width: 360px; margin: -4px auto 0;}
	}


h4{
	margin: 0;
	padding: 0.35em 0.75em;
	border-left: solid 8px #7bdefa;
	border-bottom: solid 2px #7bdefa;
	}

#Details h5{
	margin: 3em 0 0;
	padding: 0.15em 0.75em;
	border-left: solid 8px #7bdefa;
	font-size: 1em;
	}

ul.list{margin: 1em 0.5em; padding: 0; list-style: none;}
ul.list li{margin: 0; padding: 0.35em 0.5em 0.35em 1em;}
ul.list li:before{color:#7bdefa; content:"■"; font-size: 0.75em; margin-left: -1em; margin-right: 0.5em;}

ul.list li ul{margin: 0.5em; padding: 0; list-style: none;}
ul.list li ul > li:before{color:#7bdefa; content:"□"; font-size: 0.75em; margin-left: -1em; margin-right: 0.5em; font-weight: 800;}



.LinkButton{margin: 1.5em;}

.LinkButton a {
	background: #FFF;
	border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 380px;
    padding: 10px 25px;
    color: #1d2087;
    transition: 0.3s ease-in-out;
    font-weight: 800;
	}

.LinkButton a:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 2rem;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: right 0.3s;
	width: 8px;
	height: 8px;
	border-top: solid 3px currentColor;
	border-right: solid 3px currentColor;
	transform: translateY(-50%) rotate(45deg);
	}

.LinkButton a:hover {background: #1d2087; color: #FFF;}
.LinkButton a:hover:after {right: 1.4rem;}


.Box{max-width: 1480px; margin: 2em auto;}
#Story .Box{padding: 0 2em;}

.musicList{max-width: 1480px; margin: auto; padding: 2em;}
.charaList{padding: 3em 0;}

.FlexBox{display: flex; flex-wrap: wrap;}
.collabo{padding: 2em 1em; display: flex; flex-wrap: wrap;}
.block02 > div,.block02 > p{flex: 0 1 48%; margin: 0.5em 1%;}
.block04 > div,.block04 > p{flex: 0 1 23%; margin: 0.5em 1%;}
.block06 > div,.block06 > p{flex: 0 1 14.5%; margin: 0.5em 1%;}

.more{font-family: "Orbitron", serif;}

@media only screen and (max-width: 860px) {
	.FlexBox{display: block; flex-wrap: wrap;}
	.FlexBox > div, .FlexBox > p{margin-bottom: 2.5em}
	.block06 > div,.block06 > p{flex: 0 1 31%; margin: 0.5em 1%;}
	}

/*BG_black*/
.BBox{background-color: rgba(0,0,0,0.3);}
#About > div >div:nth-child(3){margin-bottom: 6em;}
#Story .BBox{margin-top: -65px; margin-bottom: 3em; padding-top: 100px; padding-bottom: 3em;}
.cp .BBox > div{padding: 3em 0;}

@media only screen and (max-width: 480px) {#Story .BBox{margin-top: -55px;}}

/*black frame*/
.frame{
	padding: 20px;
	position: relative;
	}

.frame::before, .frame::after {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	}

.frame::before {
	border-left: solid 3px rgba(0,0,0,0.3);
	border-top: solid 3px rgba(0,0,0,0.3);
	top: 0;
	left: 0;
	}

.frame::after {
	border-right: solid 3px rgba(0,0,0,0.3);
	border-bottom: solid 3px rgba(0,0,0,0.3);
	bottom: 0;
	right: 0;
	}

.frame article{padding: 2.5em 1.5em; background-color: rgba(0,0,0,0.3);}

.QQQbeats{max-width: 1000px; margin: 5em auto;}
.QQQbeats p{max-width: 660px; margin: auto;}


/*character*/
.charaPage{position: relative;}

#Character > div{max-width: 1480px; margin: auto; padding: 3em 1.5em 6em;}
.charaPage #Character > div{padding: 1em 1.5em 6em;}

.charaPortal{display: flex; flex-wrap: wrap;}
.charaPortal > p{flex: 0 1 23%;	margin: 0.5em 1%;}

.charaPortal > p:nth-child(-n + 4) {animation-name: chara; animation-duration: 0.5s;}

@keyframes chara {
	from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

.Profile{display: flex; flex-wrap: wrap; align-items: center;}
.Profile div{flex: 0 1 48%;}
.Profile div:first-child{animation-name: charaImg; animation-duration: 0.5s; text-align: center;}

@keyframes charaImg {
	from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }


.button a {
	font-family: "Orbitron", serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	color: #fff;
	font-weight: 400;
	border: solid 1px #FFF;
	border-radius: 999px;
	display: flex;
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	padding: 10px;
	text-align: center;
	align-items: center;
	margin-inline: auto;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
	position: absolute;
	}

.button a:hover {
	color: #FFF;
	background: rgba(29,32,135,0.75);
	border: solid 1px rgba(29,32,135,0.5);
	transition: all 0.3s;
	}

.prev a{left: 10px; top: 65%; z-index: 99;}
.next a{right: 10px; top: 65%; z-index: 99;}


@media only screen and (max-width: 1100px) {.Profile{display: block;} .prev a{top: 36.5%;} .next a{top: 36.5%;}}
@media only screen and (max-width: 860px) {.charaPortal > p{flex: 0 1 31%; margin: 0.5em 1%;}}
@media only screen and (max-width: 480px) {
	.charaPortal > p{flex: 0 1 48%; margin: 0.5em 1%;}
	.button a {font-size: 9px; width: 50px; height: 50px; padding: 8px;}
	.prev a{top: 50vh; left: 15px;}
	.next a{top: 50vh; right: 15px;}
	}



/*creator*/
.member {
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
	background-image: repeating-linear-gradient(0deg, #6d79ec, #6d79ec 1px, #626fea 1px, #626fea 3px);
	}

.member svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 104px;
	}

.member .shape-fill {fill: #FFFFFF;}

.member > div{max-width: 960px; margin: auto; padding: 3.5em 2em;}
.member h3{margin: 0 0 3em; text-align: left;}

.member p{margin-bottom: 3em;}

.sp{display: none;}

.illust{display: flex; flex-wrap: wrap;}
.illust p{flex: 0 1 50%;}



@media only screen and (max-width: 860px) {.illust p:first-child img{width: 60%;}}


@media only screen and (max-width: 480px) {
	.member h3{width: 45%;}
	.member h3 + p img{width: 50%;}
	.long{display: none;}
	.sp{display: block;}
	.sp img{width: 80%;}
	
	.illust{display: block;}
	.illust p:first-child img{width: 35%;}
	.illust p:last-child img{width: 50%;}
	}


/*overview*/
.Top section:last-child{padding: 1em;}

.Overview{
    max-width: 960px;
    margin: 5em auto 0;
    padding: 1.5em;
    display: flex;
    align-items: center;
    background: rgba(134,146,145,0.05);
    }

.Overview article{flex: 0 1 46%; margin: 0 2%;}

.Overview ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

.Overview li{margin-bottom: 0; padding: 0.25em; font-size: 0.8em;}

@media only screen and (max-width: 480px) {
	.Overview{display: block;}
	.Overview article{margin: 1em 0;}
	}

/*-----Campaign-----*/
#Campaign{padding-bottom: 3em;}
#Campaign > div{max-width: 1480px; margin: 3em auto 0; padding: 3em 1.5em;}



/*-----Footer-----*/
footer{padding-bottom: 3em; background: #FFF;}
footer section{max-width: 1380px; margin: auto; padding: 0 1.5em;}

/*mc_copyright*/
.musicCopy{padding: 8% 1em; display: flex;}
.musicCopy div{flex: 0 1 48%; margin: 0 1%;}

.musicCopy h5{margin: 1em; padding: 0!important; font-size: 1em; color: #2f359e; font-family: 'Orbitron', sans-serif;}
.musicCopy ul{margin: 0 1em; padding: 0; list-style-type: none;}
.musicCopy li{font-size: 0.8em; line-height: 1.2em; margin-bottom: 0.75em;}

@media only screen and (max-width: 860px) {
	.musicCopy{display: block;}
	.musicCopy div:last-child{margin: 2em 1% 0;}
	.musicCopy h5{margin: 1em 0;}
	.musicCopy ul{margin: 0 0.5em;}
	}

@media only screen and (max-width: 480px) {.musicCopy{padding: 8% 1em 15%;} .piapro{max-width: 65px;}}


/*SNS*/
#shareBox {
    margin: 10% auto;
	padding: 1em 1em 3em;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(45% - 60px);
		display: flex;
		justify-content: space-between;
		width: 270px;
		height: auto;
		margin: 0 auto;
		padding: 0 0 50px;
		clear: none;
		z-index: 888;
		}

    .mainVisual #shareBox {margin-top: 3em;}

	.shareButtons > div > a {
		display: block;
		width: 50px;
		height: 50px;
        margin: 0 20px;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons > div.fbBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_01_fb.svg");}
	.shareButtons > div.tweetBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_02_tw.svg");}
	.shareButtons > div.lineBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_03_line.svg");}

@media only screen and (max-width: 860px) {.shareButtons {left: calc(40% - 60px);}}
@media only screen and (max-width: 480px) {#shareBox {padding: 1em 1em 8em;}.shareButtons {left: calc(30% - 60px);}}


/*corp*/
#Corp p:first-child{font-size: 0.8em; margin: 2em 0;}
#Corp .taito{margin-top: 3em; max-width: 150px;}

ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px #e0e2e2;}
	
ul.taitoLink li{
	font-size: 1.0em;
	margin-right: 1.0em;
	display: inline-block;
	}
	
ul.taitoLink a{color: #758180;}
ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	margin-top: 2em;
	font-size: 0.8em;
	text-align: center;
	}

@media only screen and (max-width: 480px) {footer{padding: 10% 0;} ul.taitoLink li{font-size: 0.9em;}}