@charset "utf-8";

/* basic settings
====================================== */
html {
	font-size: 10px;
}
@media (max-width: 1050px) {
	html {
		font-size: 0.952vw;
	}
}
@media (max-width: 640px) {
	html {
		font-size: 1.563vw;
	}
}
* {
	box-sizing: border-box;
	max-height: 100%;
}
.clearfix::after {
	content: ' ';
	display: block;
	clear: both;
}
.sp {
	display: none;
}
.exo {
	font-family: 'Exo', sans-serif;
	letter-spacing: .2em;
}
.b {
	font-weight: 700;
}
.n {
	font-weight: 300;
}
.fr {
	font-size: 125%;
}
.fs {
	font-size: 80%;
}
.fss {
	font-size: 50%;
}
.denial {
	text-decoration: line-through;
}

@media (max-width: 640px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}


/* --------------------------------
	common
-------------------------------- */
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	width: 100%;
	color: #000;
	font-size: 18px;
	-webkit-font-feature: "palt";
	font-feature-settings: "palt";
	letter-spacing: .05em;
}
body:before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background: url(/2021/img/bg_day.jpg) no-repeat top center;
	background-size:cover;
}
a {
	transition: opacity 0.2s ease-out;
}
a:hover {
	opacity: 0.7;
}
a:active {
	opacity: 0.7;
}
.ja {
	display: none!important;
}
.en {
	display: none!important;
}
.ja.active {
	display: block!important;
}
.en.active {
	display: block!important;
}
.wrapper {
	width: 100vw;
	text-align: center;
	overflow: hidden;
}
@media (min-width: 1024px) {
	body {
		-webkit-animation: fadeBody 2s ease-in 0s 1 normal;
		animation: fadeBody 2s ease-in 0s 1 normal;
	}
	@keyframes fadeBody {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	@-webkit-keyframes fadeBody {
		0% {opacity: 0}
		100% {opacity: 1}
	}
}
@media (max-width: 1023px) {
	body {
		font-size: 2.5rem;
	}
}

/* --------------------------------
	nav
-------------------------------- */
nav {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	margin: 10px;
	font-size: 2em;
	text-align: right;
	z-index: 1;
}
nav.show {
	display: block;
}
#mb {
	position: relative;
	margin: auto;
	margin-right: 0;
	text-align: right;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#mb .obj {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	transform: rotate(0);
	transition: all .3s;
}
#mb .obj::before,
#mb .obj::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #222;
}
#mb .obj::before {
	top: 0;
	left: 50%;
	margin-left: -2px;
	width: 4px;
	height: 100%;
}
#mb .obj::after {
	top: 50%;
	left: 0;
	margin-top: -2px;
	width: 100%;
	height: 4px;
}
nav .menu {
	position: absolute;
	right: -27vw;
	padding: 0;
	margin: 0;
	transition: all .3s;
}
nav .menu li {
	margin-top: 15px;
	font-size: 30px;
	line-height: 1;
}
nav .menu li:first-child {
	margin-top: 10px;
}
nav .menu li > a {
	display: inline-block;
	padding: .25em .5em .25em 1em;
	color: #FFF;
	background-color: #000;
	text-align: center;
	text-decoration: none;
}
nav ul li > a:hover {
	background-color: #666;
	opacity: 1;
}
/* nav - active */
#mb.open .obj {
	transform: rotate(135deg);
}
#mb.open .obj::before,
#mb.open .obj::after {
	background-color: #666;
}
nav.act .menu {
	right: 0;
}

@media (max-width: 1023px) {
	nav .menu {
		right: -40vw;
	}
}
@media (max-width: 640px) {
	nav {
		margin: 1vw;
	}
	nav .menu {
		right: -50vw;
	}
	nav .menu li {
		margin-top: 2vw;
		font-size: 4vw;
	}
	nav .menu {
		right: -55vw;
	}
}

@media (max-width: 480px) {
	#mb {
		width: 9.417vw;
		height: 9.417vw;
	}
}

/* --------------------------------
	header
-------------------------------- */
header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	background: url(/2021/img/bg_night.jpg) no-repeat top center;
	background-size: cover;
}
header.show {
	height: 151.109vw;
	max-height: 4769px;
}
.typing h1 {
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	color: #FFF;
	background-color: #000;
	font-size: 50px;
	letter-spacing: .15em;
}
.langSwitch > p a:hover {
	display: block;
	opacity: 1;
}

@media (min-width: 1024px) {
	header .inner {
		position: absolute;
		right: 0;
		bottom: 0;
		max-width: 550px;
	}
	.typing {
		text-align: right;
	}
	.typing h1 {
		display: inline-block;
		padding: 0 1em;
	}
	header .btnBox {
		display: flex;
		margin-top: 10px;
		padding: 40px;
		background-color: #000;
		width: 55rem;
	}
	.langSwitch {
		display: flex;
	}
	.langSwitch > p:nth-of-type(1) button {
		background-color: #517583;
		transition: background-color 0.2s ease-out;
	}
	.langSwitch > p:nth-of-type(2) button {
		margin-left: 15px;
		background-color: #E89492;
		transition: background-color 0.2s ease-out;
	}
	.langSwitch > p a:hover {
		display: block;
		opacity: 1;
	}
	.langSwitch button {
		padding: .8em 1em;
		min-width: 150px;
		height: 110px;
		color: #FFF;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: .05em;
	}
	.langSwitch > p:nth-of-type(1) > button span {
		color: #E89492;
	}
	.langSwitch > p:nth-of-type(2) > button span {
		color: #517583;
	}
	.langSwitch p button:hover {
		color: #000;
		background-color: #FFF;
	}
	.appLink {
		margin-left: 15px;
		width: 14rem;
	}
	.appLink li {
		width: 14rem;
		height: 47.5px;
	}
	.appLink li:last-child {
		/* margin-left: 10px; */
		margin-top: 15px;
	}
	.appLink li > a {
		display: inline-flex;
		position: relative;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: #6A5D77;
		transition: all .2s;
	}
	.appLink li > a:hover {
		opacity: 1;
		background-color: #FFF;
	}
	.appLink li > a > img {
		width: 32px;
		height: auto;
	}
}
@media (max-width: 1023px) {
	/* header {
		background: url(/2021/img/bg.jpg) no-repeat center;
		background-size: contain;
	} */
	.typing {
		padding-top: 42vh;
		/* display: flex;
		justify-content: center; */
	}
	.typing h1 {
		color: #FFF;
		font-size: 5.883vw;
		text-shadow: 1px 2px 8px #333;
		background-color: unset;
	}
	.typing .name {
		width: 100%;
		animation: fadeIn 4s ease-in 0s 1 normal;
		-webkit-animation: fadeIn 4s ease-in 0s 1 normal;
	}
	@keyframes fadeIn {
		0% {opacity: 0}
		50% {opacity: 0.8}
		100% {opacity: 1}
	}
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		50% {opacity: 0.8}
		100% {opacity: 1}
	}
	.langSwitch {
		display: flex;
		justify-content: center;
		padding-top: 15vh;
	}
	.langSwitch > p button {
		background-color: rgba(0, 0, 0, 0.6);
		transition: background-color 0.2s ease-out;
	}
	.langSwitch button {
		padding: .8em 1em;
		min-width: 150px;
		color: #FFF;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: .05em;
	}
	.langSwitch button:hover {
		color: #FFF;
		background-color: #000;
	}
	.langSwitch > p:nth-of-type(2) {
		margin-left: 2em;
	}
	.appLink {
		display: flex;
		justify-content: center;
		position: relative;
		margin-top: 5vh;
		z-index: 1;
	}
	.appLink::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -50px;
		width: 100px;
		height: 1px;
		background-color: #000;
		transform: rotate(120deg);
	}
	.appLink li {
		display: inline-block;
		width: 50px;
		height: 50px;
	}
	.appLink li:last-child {
		margin-left: 10px;
		margin-top: 40px;
	}
	.appLink li > a {
		display: inline-flex;
		position: relative;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: unset;
		transition: all .2s;
	}
	.appLink li > a::before {
		content: "";
		position: absolute;
		background-color: rgba(255, 255, 255, 0.5);
		width: 0;
		height: 0;
		border-radius: 50%;
		z-index: -1;
		transition: all .2s;
	}
	.appLink li > a:hover {
		opacity: 1;
		background-color: unset;
	}
	.appLink li > a:hover::before {
		width: 100%;
		height: 100%;
	}
	.appLink li > a > img {
		width: 32px;
		height: auto;
	}
}

@media (max-width: 640px) {
	header {
		background: url(/2021/img/bg_night.jpg) no-repeat center top;
		background-size: cover;
	}
	header.show {
		height: 100vh;
	}
	.typing h1 {
		font-size: 7.692vw;
	}
	.langSwitch button {
		min-width: unset;
		width: 30.395vw;
		font-size: 2.736vw;
	}
	.appLink {
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 1;
	}
	.appLink::after {
		margin-left: -8.599vw;
		width: 15.198vw;
	}

	.appLink li:last-child {
		margin-left: 1.538vw;
		margin-top: 6.154vw;
	}
	.appLink li {
		width: 8.599vw;
		height: 8.599vw;
	}
	.appLink li > a > img {
		width: 4.923vw;
	}
}

@media (max-width: 608px) {
	/* header.show {
		height: 100vh;
	} */
}


/* --------------------------------
	article
-------------------------------- */
.inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
.sec {
	display: flex;
	flex-direction: column;
	padding-bottom: 60px;
	width: 100%;
}
.sec > h2 {
	margin: 0 auto;
	margin-bottom: 55px;
	max-width: 1200px;
	width: 100%;
	font-family: 'Exo', sans-serif;
	text-align: center;
	font-size: 3rem;
	letter-spacing: .2em;
}
.sec .inner {
	padding: 0 5vw;
}

@media (max-width: 1023px) {
	.wrap {
		margin-top: 0;
		padding-top: 0;
	}
	.sec > h2 {
		padding-top: 15vw;
		font-size: 4.5vw;
	}
}

@media (max-width: 640px) {
	.sec {
		padding-bottom: 12vw;
	}
	.sec > h2 {
		margin-bottom: 11.458vw;
		padding: 0 4vw;
		padding-top: 17.708vw;
	}
}


/* event
--------------- */
#event {
	color: #FFF;
	background-color: #527584;
}
#event h2 {
	padding-top: 110px;
}
#event .inner {
	width: 80vw;
	max-width: 1050px;
}
#event .box {
	padding-top: 3em;
}
#event .box:nth-of-type(1) {
	padding-top: 0;
}
#event .box {
	text-align: left;
}
#event .box .ttl {
	display: block;
	font-weight: 700;
}
#event .box.date .ttl {
	padding-top: 0;
}
#event .box .txt a {
	color: #FFF;
	padding-bottom: .02em;
	border-bottom: 1px solid #FFF;
}
#event .box .txt a:hover {
	border-bottom: none;
}
#event .inBox {
	display: flex;
	justify-content: space-between;
	margin: 8px 0 18px;
}
#event .inBox > span {
	display: block;
	width: 40vw;
}
#event .inBox > span:first-of-type {
	margin-right: 4vw;
	width: 56vw;
}
#event .items {
	display: block;
	margin: 8px 0 18px;
}
#event .tt {
	margin-top: 4.5em;
}
#event .tt span > a {
	display: inline-block;
	padding: .4em 5em;
	color: #FFF;
	border: 1px solid #FFF;
}
#event .tt span > a:hover {
	background-color: #000;
	opacity: 1;
}
#event .box.venue + .tt {
	margin-top: 2em;
	margin-bottom: 1em;
}

@media (max-width: 1023px) {
	#event {
		position: relative;
	}
	#event::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		border-style: solid;
		border-width: 10vw 0 0 100vw;
		border-color: #04090b transparent transparent transparent;
	}
	#event h2 {
		padding-top: 12.695vw;
	}
	#event .inBox {
		flex-direction: column;
		margin: 0;
	}
	#event .inBox > span {
		margin: 2.5vw 0;
		width: 100%;
	}
	#event .inBox > span:first-of-type {
		margin: 1.5vw 0 0;
		width: 100%;
	}
	#event .items {
		margin: 0;
	}
	#event .tt {
		margin-top: 5em;
	}
}

@media (max-width: 640px) {
	#event h2 {
		padding-top: 18.695vw;
	}
	#event .inner {
		padding: 0px 6vw;
		width: 85%;
	}
	#event .tt {
		margin-top: 5em;
	}
}

/* artist
--------------- */
#artist {
	position: relative;
	background-color: #E89493;
}
#artist::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	border-style: solid;
	border-width: 0 0 10vw 100vw;
	border-color: transparent transparent transparent #527584;
}
#artist h2 {
	padding-top: 180px;
}
#artist .content{
	margin: 0 auto;
	/* padding: 0 50px; */
	width: 100%;
}
.slider{
	margin: 0 auto;
	width: 100%;
}
.slider img{
	width: 100%;
	height: auto;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
	color: #000;
}
#artist .slider .item a {
	display: block;
	position: relative;
	overflow: hidden;
}
#artist .slider .item a::before {
	content: "";
	position: absolute;
	top: 79%;
	right: 79%;
	width: 145%;
	height: 145%;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.78);
	font-weight: bold;
	transform: rotate(45deg);
	transition: all .4s;
}
#artist .slider .item a:hover {
	opacity: 1;
}
#artist .slider .item a.active::before {
	top: -22.5%;
	right: -22.5%;
}
#artist .slider .item a .name {
	position: absolute;
	top: 50%;
	left: -40%;
	width: 100%;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	-webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	transition: all .3s ease-in-out;
}
#artist .slider .item a.active .name {
	left: 50%;
}
#artist .lineup {
	margin-top: 4rem;
	padding-bottom: 6rem;
	font-weight: 500;
}
#artist .lineup .ttl {
	margin-bottom: 1.5rem;
	font-weight: 100;
}
#artist .lineup ul {
	display: flex;
	flex-wrap: wrap;
	font-style: italic;
	justify-content: center;
}
#artist .lineup ul li {
	padding: .5em 1em;
}
#artist .lineup ul li a {
	transition: color .2s;
}
#artist .lineup ul li a.active {
	color: #ab4645;
}
#artist .lineup ul + .ttl {
	margin-top: 4rem;
}
@media (max-width: 1023px) {
	#artist h2 {
		padding-top: 16.578vw;
	}
	#artist .slider .item a .name {
		left: 4%;
		top: auto;
		bottom: 0;
		width: auto;
		font-size: 1.3rem;
		-webkit-transform: none;
		transform: none;
		text-shadow: 0 0 1rem rgb(0 0 0 / 90%);
		text-align: left;
	}
	#artist .slider .item a.active .name {
		left: 4%;
	}
	#artist .lineup {
		font-size: 1.6rem;
	}
}
@media (max-width: 768px) {
	#artist .lineup {
		margin-top: 5rem;
		padding-bottom: 0;
	}
}

/* modal */
#artist .modal{
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}
#artist .modal_bg{
	position: absolute;
	background: rgba(0,0,0,0.8);
	height: 100vh;
	width: 100%;
}
#artist .modal_content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 1200px;
	height: auto;
	max-height: 90%;
	background: #bfacac;
	transform: translate(-50%, -50%);
	overflow: scroll;
	text-align: left;
}
#artist .modal_content .closeBtn {
	display: block;
	position: sticky;
	top: 0;
	right:0;
	padding-top: 1rem;
	padding-right: 1.5rem;
	margin-left: auto;
	width: calc(1em + 1.5rem);
	font-size: 7rem;
	line-height: 1;
	z-index: 2;
	cursor: pointer;
}
#artist .modal_content > span {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 19rem;
	overflow: hidden;
}
#artist .modal_content > span::after {
	content: "";
	display: block;
	position: absolute;
	top: -23rem;
	left: -7rem;
	width: 150%;
	height: 30rem;
	background-color: #da8b8a;
	transform: rotate(-8deg);
}
#artist .modal_content .modalinner {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	padding: 0 7rem 8rem;
}
#artist .modal_content .modalinner .pic {
	width: 40rem;
}
#artist .modal_content .modalinner .txt {
	margin-left: 6rem;
	width: 60rem;
	font-size: 1.5rem;
}
#artist .modal_content .modalinner .name {
	display: block;
	margin-bottom: 2rem;
	font-size: 3.6rem;
	font-weight: bold;
	letter-spacing: .05em;
	line-height: 1;
}
#artist .modal_content .modalinner .name > span {
	font-size: 57%;
}
#artist .modal_content .modalinner .name.sp {
	display: none;
}
#artist .modal_content .modalinner .links {
	display: flex;
	justify-content: flex-end;
	margin-top: 2.5rem;
}
#artist .modal_content .modalinner .links li {
	width: 5.4rem;
	height: 5.4rem;
}
#artist .modal_content .modalinner .links li + li {
	margin-left: 1.3rem;
}
#artist .modal_content .modalinner .links li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #e2e1e0;
	border-radius: 3rem;
}
#artist .modal_content .modalinner .links li a img {
	width: 3.2rem;
}
#artist .modal_content .modalinner .links li.music a img {
	padding: 0 .3rem 0 .1rem;
}
#artist .modal_content .modalinner .links li.web a img {
	width: 3.6rem;
}
#artist .modal_content .modalinner .links li.ra a img {
	width: 4rem;
	padding-left: .3rem;
}

@media (max-width: 640px) {
	#artist .modal_content::before {
		top: -4rem;
		left: -3rem;
	}
	#artist .modal_content::after {
		top: -20rem;
		transform: rotate(-10deg);
	}
	#artist .modal_content > span {
		height: 13rem;
	}
	#artist .modal_content .closeBtn {
		top: 0;
		right:0;
		padding: 0;
		width: 1em;
	}
	#artist .modal_content .modalinner {
		flex-direction: column;
		padding: 0 5rem 5rem;
	}
	#artist .modal_content .modalinner .pic,
	#artist .modal_content .modalinner .pic img {
		width: 100%;
	}
	#artist .modal_content .modalinner .txt {
		margin-top: 4rem;
		margin-left: 0;
		width: 100%;
		font-size: 2rem;
	}
	#artist .modal_content .modalinner .name {
		margin-bottom: 3rem;
		padding: 3rem ​0 2rem;
		font-size: 3.3rem;
	}
	#artist .modal_content .modalinner .name.pc {
		display: none;
	}
	#artist .modal_content .modalinner .name.sp {
		display: block;
	}
}


/* access
--------------- */
#access {
	position: relative;
	padding: 15vw 0;
	z-index: 0;
}
#access::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	border-style: solid;
	border-width: 10vw 0 0 100vw;
	border-color: #E89493 transparent transparent transparent;
}
.sec#access h2 {
	margin-bottom: 0;
	padding: 4rem 4rem 3rem;
	text-align: center;
	background-color: #FFF;
	width: 98rem;
}
#access .inner {
	display: flex;
	justify-content: space-between;
	padding: 0 9rem;
	padding-bottom: 8rem;
	width: 98rem;
	background-color: #FFF;
}
#access .map {
	overflow: hidden;
	width: 38rem;
	height: 45rem;
}
#access .map > iframe {
	margin-top: -15rem;
	margin-left: -12rem;
	height: 79rem;
	max-height: none;
}
#access .toMapApp {
	margin-top: 1rem;
	font-size: 90%;
	text-align: left;
}
#access .txt {
	padding-left: 4.9rem;
	width: 42rem;
	text-align: left;
	line-height: 2.5;
}
#access .txt .ttl {
	line-height: 1.5;
	margin-bottom: 1rem;
}
#access .txt .ad {
	line-height: 1.5;
	font-size: 80%;
}
#access .txt .ac {
 margin-top: 3rem;
 font-size: 75%;
 line-height: 1.7;
}
#access .txt .ac > p > span {
	display: block;
	margin-top: .5rem;
}
#access .txt .ac > p > span.type {
	margin-top: 1.5rem;
	font-weight: 400;
}
#access .txt .ac > p > span.indent1em {
	padding-left: 1em;
	text-indent: -1em;
}
#access .txt .ac > p > span.indent1Hem {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
#access .txt .ac a.link {
	display: inline-block;
	margin-bottom: .5rem;
	padding-bottom: .02em;
	border-bottom: 1px solid #000;
}
#access .txt .ac a.link:hover {
	border-bottom: none;
	margin-bottom: calc(.5rem + 1px);
}
@media (max-width: 1023px) {
	#access .inner {
		flex-direction: column;
	}
	#access .map {
		width: 100%;
		height: 37rem;
	}
	#access .map > iframe {
		margin-top: -29rem;
		margin-left: -14rem;
		width: 133%;
		height: 99rem;
	}
	#access .toMapApp {
		font-size: 70%;
		text-align: right;
	}
	#access .txt {
		margin-top: 1.5rem;
		padding-left: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.sec#access > h2 {
		margin-top: 0;
		padding: 4rem;
		padding-bottom: 3rem;
		width: 80%;
	}
	#access .inner {
		padding: 0 5rem 5rem;
		width: 80%;
	}
	#access .txt .ttl {
		margin-top: 2rem;
	}
	#access .map {
		width: 100%;
		height: 25rem;
	}
	#access .map > iframe {
		margin-top: -16rem;
		margin-left: -3.5rem;
		width: 120%;
		height: 60rem;
	}
}

/* guide
--------------- */
#guide {
	position: relative;
	background-color: #BDB1C7;
	text-align: left;
}
#guide::before {
	content: "";
	display: block;
	position: absolute;
	top: -10vw;
	border-style: solid;
	border-width: 10vw 0 0 100vw;
	border-color: transparent transparent transparent #BDB1C7;
}
#guide > h2 {
	margin-bottom: 30px;
	padding-top: 60px;
}
#guide .inner {
	max-width: 1050px;
}
#guide .inner dl {
	margin-bottom: 20px;
	font-size: 80%;
}
#guide .inner dl dt,
#guide .inner dl dd {
	padding-left: 1em;
	text-indent: -1em;
}
#guide .inner dl.en dd {
	padding-left: .5em;
	text-indent: -.5em;
}
#guide .inner dl dt {
	font-weight: 500;
}
#guide .inner dl dd ul {
	margin-top: .3em;
	line-height: 1.5;
}

@media (max-width: 1023px) {
	#guide .inner {
		width: 85%;
	}
}

@media (max-width: 640px) {
	#guide > h2 {
		margin-bottom: 2.458vw;
		padding-top: 10vw;
	}
	#guide .inner {
		font-size: 80%;
	}
	#guide .inner dl dt {
		margin-top: .5em;
		font-weight: 500;
		cursor: pointer;
	}
	#guide .inner dl dt span::after {
		content: "";
		display: inline-block;
		margin-bottom: .3rem;
		margin-left: 1rem;
		width: .6rem;
		height: .6rem;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		transform: rotate(45deg);
		transition: all .3s;
	}
	#guide .inner dl dt.act > span::after {
		margin-bottom: 0;
		transform: rotate(-135deg);
	}
	#guide .inner dl dd {
		display: none;
		margin-bottom: 20px;
	}
	#guide .inner dl dd ul li {
		line-height: 1.5;
	}
	#guide .mail {
		margin-top: 1em;
	}
}

/* sns
--------------- */
#sns {
	position: relative;
	padding-top: 10vw;
}
#sns::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	border-style: solid;
	border-width: 0 0 10vw 100vw;
	border-color: transparent transparent transparent #BDB1C7;
}
#sns .inner {
	margin-top: 200px;
	padding-bottom: 30px;
}
.fbWrap {
	margin: 0 auto;
	max-width: 500px;
	width: 100%;
}
.fbWrap iframe {
	width: 100%;
}

@media (max-width: 1023px) {
	#sns {
		padding-top: 17rem;
	}
}

@media (max-width: 640px) {
	#sns {
		padding-top: 13rem;
	}
	.fbWrap {
		max-width: 340px;
	}
}

/* footer
--------------- */
footer {
	display: none;
	background-color: #EEE;
	text-align: center;
}
footer.show {
	display: block;
}
footer .inner {
	position: relative;
}

footer>.about {
	display: flex;
	justify-content: space-between;
	margin-top: 170px;
	padding: 0 97px 0 120px;
}

footer>.about li {
	font-size: 22px;
}

footer>.about li>a:hover {
	opacity: 1;
}

footer>.about li a>span {
	position: relative;
	left: -10px;
	transition: left 0.2s ease-out;
}

footer>.about li>a:hover>span {
	left: 0;
}

footer>.about li>a:active>span {
	left: 0;
}

.pagetop {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	margin-right: 3vw;
}
.pagetop > a {
	display: block;
	width: 100%;
	height: 4.3rem;
	margin: 0 auto;
	border-width: 0 8px 13px 8px;
}

.pagetop > a span {
	display: block;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent #2C7A9E transparent;
}

.pagetop > a span::after {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 50px;
	background-color: #2C7A9E;
}
.copylight {
	padding: 1em 0;
	height: 100%;
	font-size: 15px;
}

@media (max-width: 640px) {
	.pagetop {
		margin-right: 6rem;
	}
	.pagetop > a {
		height: 5.3rem;
	}
	.copylight {
		font-size: 3vw;
	}
}