@charset "utf-8";


/*===================================================================

	001. common

===================================================================*/

.art__date{
	margin-bottom: 50px;
}

.art__img{
	max-width: 100%;
    height: auto;
    margin-bottom: 50px;
    display: block;
}

.art__inner p{
	margin-bottom: 1em;
}

.pager{
	display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 100px auto;
}

/*===================================================================

	009. responsive

===================================================================*/

@media screen and (max-width: 768px){
	/*=============================================

		001. common

	=============================================*/


	/*---------------------------------------
		001. box
	---------------------------------------*/

	.wrapper::before{
		width: 100%;
	}

	.box{
		width: 150%;
		transform: rotate(5deg);
		background: rgba(170,93,112,.5);
		position: relative;
		margin: 0 0 0 -25%;
		padding: 100px 20%;
	}

	.box:nth-of-type(even){
		transform: rotate(-5deg);
	}

	.box:nth-of-type(even) .section{
		transform: rotate(5deg);
	}

	.section{
		max-width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transform: rotate(-5deg);
	}

	.cont{
		max-width: 100%;
	}

	.inner{
		position: relative;
		margin-bottom: 30px;
	}

	/*---------------------------------------
		002. text
	---------------------------------------*/

	.sect-title{
		font-size: 30px;
		margin-bottom: 20px;
	}

	.sect-subtitle{
		margin-bottom: 20px;
	}

	.gray{
		color: rgba(255,255,255,.8);
	}

	/*---------------------------------------
		003. button
	---------------------------------------*/

	*[role="button"]{
		outline: none;
	}

	.button a{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background: #aa5d70;
		padding: .75em;
		font-size: 12px;
	}

	/*---------------------------------------
		004. swiper
	---------------------------------------*/

	.swiper__arrow{
		width: 75%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: calc(50% - 25px);
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 80;
	}

	.swiper__next, .swiper__prev{
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent;
		cursor: pointer;
		transition: .5s;
		position: absolute;
	}

	.swiper__next{
		border-width: 15px 0 15px 15px;
		border-left-color: #fff;
		right: -50px;
	}

	.swiper__prev{
		border-width: 15px 15px 15px 0;
		border-right-color: #fff;
		left: -50px;
	}

	.swiper__next:hover, .swiper__prev:hover{
		opacity: .7;
	}

	.swiper-container-initialized{
		overflow: hidden;
	}

	/*=============================================

		002. header

	=============================================*/

	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		padding: 30px 0;
		position: relative;
	}

	.logo{
		width: 25%;
		max-width: 120px;
		color: #fff;
		text-shadow: 0 0 5px #aa5d70;
		font-size: 10px;
		text-align: center;
	}

	.logo img{
		width: 50%;
		display: block;
		margin: 0 auto 10px;
	}

	/*---------------------------------------
		001. menu
	---------------------------------------*/

	#trigger{
		display: none;
	}

	.overlay{
		display: flex;
		justify-content: center;
		overflow: auto;
		position: fixed;
		width: 100%;
		height: 100%;
		background: transparent;
		opacity: 0;
		transition: .5s;
		transform: scale(0);
		z-index: 100;
		top: 0;
		left: 0;
	}

	.menu__modal{
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.menu__cont{
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}

	.menu__close, .menu__open{
		cursor: pointer;
		transition: .5s;
	}

	.menu__close{
		right: 10px;
		top: 20px;
		width: 40px;
		height: 40px;
	}

	.menu__close span{
		display: block;
		width: 2px;
		height: 40px;
		background: #fff;
		transform: rotate(45deg);
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.menu__close span::before{
		display: block;
		content: "";
		position: absolute;
		top: 18px;
		left: -18px;
		background: #fff;
		width: 40px;
		height: 2px;
	}

	.menu__close:hover, .menu__open:hover{
		opacity: .7;
	}

	.menu__open{
		width: 40px;
		height: 40px;
		top: 30px;
	}

	.menu__open span{
		width: 25px;
	}

	.menu__open span::before, .menu__open span::after{
		display: block;
		content: "";
		width: 25px;
	}

	.menu__open span::before{
		top: 10px;
	}

	.menu__open span::after{
		bottom: 10px;
	}

	#trigger:checked ~ .overlay{
		opacity: 1;
		transform: scale(1);
		transition: .5s;
	}


	/*=============================================

		003. mv, profile

	=============================================*/

	.mv{
		margin: 0 auto;
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.mv__read{
		font-size: 14px;
		color: #fff;
		text-shadow: 0 0 5px #aa5d70;
	}

	.mv__read strong{
		font-size: 18px;
	}

	.mv__anchor li{
		margin: 0 .5em;
	}

	#profile{
		margin-top: 125px;
	}

	#profile .sect-title{
		margin-bottom: 0;
	}

	.prof__image{
		width: 250px;
		margin: 0 auto;
	}

	.prof__image img{
		display: block;
		width: 100%;
		border-radius: 50%;
	}

	.prof__link{
		margin: 20px auto 0;
		display: flex;
		justify-content: center;
	}

	.p-link__list{
		margin: 0 .5em;
	}

	/*=============================================

		004. news

	=============================================*/

	/*=============================================

		005. request

	=============================================*/

	#lyric .swiper__arrow{
		width: 75%;
	}

	.swiper__lyric .swiper-slide img{
		width: 75vw;
		min-width: initial;
	}

	/*=============================================

		006. history

	=============================================*/

	.history__pagination{
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		font-size: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #fff;
	}

	.history__pagination .swiper-pagination-bullet-active, .history__pagination .swiper-pagination-bullet{
		background: transparent;
		width: auto;
		height: auto;
		transition: .5s;
	}

	.history__pagination .swiper-pagination-bullet{
		opacity: .4;
	}

	.history__pagination .swiper-pagination-bullet-active{
		opacity: 1;
	}

	.history__pagination .swiper-pagination-bullet:hover{
		opacity: .7;
	}

	.history__cont{
		display: flex;
		flex-wrap: wrap;
		padding: 0 3.125%;
	}

	.history__list{
		width: 50%;
		padding: 1.5%;
		font-size: 10px;
		margin-bottom: 30px;
	}

	.history__title{
		position: relative;
		font-size: 14px;
		line-height: 2;
		margin-bottom: 10px;
		padding-left: .25em;
	}

	.history__title::before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 2px);
	}

	.history__inner.link{
		margin-top: 20px;
	}

	.history__inner.link img{
		width: 100%;
		max-width: 200px;
	}

	/*=============================================

		007. link

	=============================================*/

	.link__cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.link__list{
		width: 45%;
		margin: 0 .25em 2em .25em;
		text-align: center;
		font-size: 10px;
	}

	.link__list a{
		display: block;
		margin-bottom: .5em;
	}

	.link__list img{
		width: 100%;
	}

	/*=============================================

		008. footer

	=============================================*/

	.footer{
		margin: 100vh 0 25px;
		text-align: center;
		font-size: 10px;
		text-shadow: 0 0 5px #aa5d70;
	}
}