@charset "UTF-8";

/**
 *	
 *	Apply Style： top
 *	Style Name： /css/top/style.css
 *	
 */

/*------------------------------------------

 *	container,section,共通タイトル

------------------------------------------*/

.container {
	background:#009c53;
	overflow:hidden;	

}
.contents-wrapper {
	border:6px solid #d5c2a2;
	border-radius:10px;
	background:#fff;
}
.section {
	margin:80px 0 0 0;	

}
.section .ttl-area {
	margin:0 0 24px 0;
	position:relative;
	z-index:1;	

}
.section .ttl {
	color:#fff;
	text-align:center;
	font-size:39px;
	font-size:3.9rem;
	font-weight:bold;
}
.section .sub-ttl {
	color:#fff;
	text-align:center;
	font-size:18px;
	font-size:1.8rem;
	margin:16px 0 0 0;
	font-weight:normal;
}

/*------------------------------------------

 *	mainimg

------------------------------------------*/

.img-wrapper {
	background:#009c53;
	padding:96px 0 0 0;
}
.img-main {
	width:960px;
	margin:0 auto;
	padding:90px 0 0 0;
	position:relative;
	overflow:hidden;
}
.img-resonya {
	width:476px;
	float:left;
}
.img-resonya .logo {
	text-align:center;
	margin:0 20px 27px 0;
}
.img-resonya .logo img {
	width:234px;
	height:auto;
}
.img-main .scroll {
	width:72px;
	position:absolute;
	left:64%;
	bottom:16px;
 	-webkit-transition:opacity 0.3s ease 0s;
	transition:opacity 0.3s ease 0s;
	display:block;
}
.img-main .scroll a {
	padding:47px 0 0 0;
	color:#fff;
	display:inline-block;
}
.img-main .scroll a {
	padding:47px 0 0 0;
}
.img-main .scroll:hover {
	opacity:0.7;
}
.img-main .scroll span {
	border:3px solid #fff;
	border-radius:12px;
	box-sizing:border-box;
	width:26px;
	height:40px;
	margin:0 0 0 -13px;
	position:absolute;
	top:0;
	left:50%;
}
.img-main .scroll span:before {
	background-color:#fff;
	border-radius:100%;
	box-sizing:border-box;
	content:"";
	width:6px;
	height:6px;
	margin:0 0 0 -3px;
	position:absolute;
	left:50%;
	top:7px;
	-webkit-animation:move 2.5s infinite;
	animation:move 2.5s infinite;	

}
@-webkit-keyframes move {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 17px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}

}
@keyframes move {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 17px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}

}
.img-tail {
	position:absolute;
	right:-32px;
	bottom:0;
	display:block;
}
/*------------------------------------------

 *	twitter,banner

------------------------------------------*/

.twitter-widget {
	width:306px;
	height:365px;
	background:#fff;
	border:3px solid #eae4c0;
	border-radius:5px;
	box-sizing:border-box;
	position:absolute;
	top:31px;
	left:500px;	
}
.twitter-widget:before {
	background:url(/resonya/imgs/top/arrow_balloon.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:-46px;
	top:203px;
	z-index:2;
	width:46px;
	height:44px;
}
.follow-btn {
	text-align:right;
	margin:10px 19px 10px 19px;	

}
.timeline-wrapper {
	height:317px;
}
.banner-top {
	width:306px;
	background:#fff;
	border:3px solid #eae4c0;
	border-radius:5px;
	box-sizing:border-box;
	padding:21px 10px 5px 10px;
	position:absolute;
	top:31px;
	left:500px;
	text-align:center;
}

/*.banner-top a:hover {
	opacity:0.7;
}*/

.banner-single {
	top:192px;	
}
.banner-double {
	top:56px;	
}
.banner-single:before {
	background:url(/resonya/imgs/top/arrow_balloon.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:-46px;
	top:49px;
	z-index:2;
	width:46px;
	height:44px;
}
.banner-double:before {
	background:url(/resonya/imgs/top/arrow_balloon.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:-46px;
	top:185px;
	z-index:2;
	width:46px;
	height:44px;
}
.banner-top .ttl {
	display:inline-block;
	padding:0 32px 0 32px;
	background:url(/resonya/imgs/top/illust_banner01.jpg) 0 0 no-repeat,url(/resonya/imgs/top/illust_banner02.jpg) right 0 no-repeat;
	background-size:22px 25px, 22px 25px;
	line-height:19px;
	height:25px;
	font-size:18px;
	font-size:1.8rem;
	font-weight:bold;
	margin:0 0 11px 0;
}
.banner-top div {
	margin:0 0 16px 0;
}


/*------------------------------------------

 *	sec-event

------------------------------------------*/

.sec-event {
	background:#fff;
	padding:16px 0 64px 0;	

}
.sec-event .sns-area {
	width:960px;
	margin:0 auto;	

}
.sec-event .sns-area:after {
	visibility:hidden;
	clear:both;
	display:block;
	content:" ";
	height:0;
	font-size:0;
}
.sec-event .ttl {
	width:917px;
	font-size:28px;
	font-size:2.8rem;
	margin:31px auto 7px;
	padding:0 0 0 43px;
	background:url(/resonya/imgs/top/illust_eventtitle.png) 0 0 no-repeat;
	background-size:34px 39px;
	line-height:32px;
	height:39px;
}
.sec-event .main-wrapper {
	box-sizing:border-box;
	padding:0 151px 0 0;
	background:url(/resonya/imgs/top/img_resonya_event.jpg) right bottom no-repeat;
	background-size:139px 281px;
	min-height:281px;
}
.sec-event .tbl-event {
	border:2px solid #dfd3bf;
    width:800px;
	margin:0 0 32px 0;
}
.tbl-event .col01 {
	width:20%;
}
.tbl-event .col02 {
	width:25%;
}
.tbl-event .col03 {
	width:25%;
}
.tbl-event .col04 {
	width:30%;
}
.tbl-event th {
	background:#f3e6d5;
	border-right:1px solid #dfd3bf;
	color:#ed6d34;
	font-weight:bold;
	padding:14px 0 14px 0;
}
.tbl-event .tbl-col .ttl-tbl {
	display:none;
}
/*.tbl-event .tbl-head th:last-child {
	border-right:none;
}*/

.tbl-event td {
    border-bottom:1px solid #dfd3bf;
    border-right:1px solid #dfd3bf;
    padding:10px 0 10px 10px;
    vertical-align:middle;
	line-height:1.7;
}
.sec-event .event-none {
	width:707px;
	margin:31px auto -64px;
	overflow:hidden;
}
.event-none .img {
	float:left;
}
.event-none .balloon {
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:-0.04em;
	line-height:1.8;
	width:490px;
	box-sizing:border-box;
	border:6px solid #d5c2a2;
	border-radius:10px;
	background:#fff;
	margin:24px 0 0 0;
	padding:32px 40px;
	float:right;
	position:relative;
}
.event-none .balloon:before {
	background:url(/resonya/imgs/top/arrow_balloon_event.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:-42px;
	bottom:37px;
	z-index:1;
	width:42px;
	height:28px;
}

/*------------------------------------------

 *	sec-profile

------------------------------------------*/

.sec-profile p {
	color:#292828;
	font-size:18px;
	font-size:1.8rem;
	text-align:center;
	margin:33px 0 25px 55px;
	line-height:1.8;
	letter-spacing:-0.04em;
	position:relative;
	z-index:2;
}
.sec-profile .contents-wrapper {
	padding:0 0 34px 0;
	position:relative;
}
.sec-profile .contents-wrapper:before {
	background:url(/resonya/imgs/top/img_resonya_profile.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	z-index:1;
	width:170px;
	height:262px;
	border-radius:0 0 0 4px;
}
.sec-profile .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_profile.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	right:20px;
	top:-49px;
	z-index:1;
	width:128px;
	height:44px;
}
/*------------------------------------------

 *	sec-movie

------------------------------------------*/

.sec-movie .contents-wrapper {
	padding:26px 18px 34px 18px;
	position:relative;
}
.sec-movie .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_movie01.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:39px;
	top:-58px;
	z-index:1;
	width:105px;
	height:54px;
}
.sec-movie .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_movie02.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	right:8px;
	top:-90px;
	z-index:1;
	width:158px;
	height:98px;
}
.sec-movie .movie-list {
	display:-webkit-flex;
	display:-ms-flex;
	display:-o-flex;
    display:flex;
	-webkit-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-o-flex-wrap:wrap;
	flex-wrap:wrap;
	width:100%;
	margin:0 0 4px 0;
}
.movie-list li {
	-webkit-flex:0 0 286px;
	-ms-flex:0 0 286px;
	-o-flex:0 0 286px;
	flex:0 0 286px;
	margin:0 0 27px 0;
}
.movie-list li a {
	display:block;
	-webkit-transition:opacity 0.3s ease 0s;
	transition:opacity 0.3s ease 0s;
}
.movie-list li a:hover {
	opacity:0.7;
}
.movie-list li .img {
	margin:0 0 15px 0;
	position:relative;
}
.movie-list li .img .btn-play {
	width:41px;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}
.movie-list li p {
	color:#292929;
	font-size:14px;
	font-size:1.4rem;
	line-height:1.5;
	letter-spacing:-0.03em;
	text-align:center;
}
/*------------------------------------------

 *	sec-collection

------------------------------------------*/

.sec-collection .contents-wrapper {
	padding:26px 18px 34px 18px;
	position:relative;
}
.sec-collection .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_collection01.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:-93px;
	z-index:1;
	width:158px;
	height:98px;
}
.sec-collection .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_collection02.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	right:45px;
	top:-35px;
	z-index:1;
	width:67px;
	height:32px;
}
.sec-collection .collection-list {
	display:-webkit-flex;
	display:-ms-flex;
	display:-o-flex;
    display:flex;
	-webkit-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-o-flex-wrap:wrap;
	flex-wrap:wrap;
	width:100%;
	margin:0 0 31px 0;
}
.collection-list li {
	-webkit-flex:0 0 154px;
	-ms-flex:0 0 154px;
	-o-flex:0 0 154px;
	flex:0 0 154px;
}
.collection-list li:last-child {
	-webkit-flex:0 0 394px;
	-ms-flex:0 0 394px;
	-o-flex:0 0 394px;
	flex:0 0 394px;
}
/*------------------------------------------

 *	sec-sns

------------------------------------------*/

.sec-sns .contents-wrapper {
	padding:26px 18px 34px 18px;
	position:relative;
}
.sec-sns .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_sns01.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:97px;
	top:-72px;
	z-index:1;
	width:186px;
	height:66px;
}
.sec-sns .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_sns02.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	right:97px;
	top:-38px;
	z-index:1;
	width:118px;
	height:34px;
}
.sec-sns .sns-list {
	display:-webkit-flex;
	display:-ms-flex;
	display:-o-flex;
    display:flex;
	-webkit-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-o-flex-wrap:wrap;
	flex-wrap:wrap;
	width:100%;
	margin:0 0 31px 0;
}
.sns-list h3 {
	color:#009c53;
	font-size:24px;
	font-size:2.4rem;
	font-weight:bold;
	text-align:center;
	margin:0 0 20px 0;
}
.sns-list li {
	-webkit-flex:0 0 264px;
	-ms-flex:0 0 264px;
	-o-flex:0 0 264px;
	flex:0 0 264px;
	padding:0 20px 0 20px;
	background-image:-webkit-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:2px 4px;
	background-position:right;
	background-repeat:repeat-y;
}
.sns-list li:last-child {
	background:none;
}
/*------------------------------------------

 *	sec-special

------------------------------------------*/

.sec-special .contents-wrapper {
	padding: 0 30px 30px 30px;
	position:relative;
}
.sec-special .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_special01.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	left:26px;
	top:-48px;
	z-index:1;
	width:112px;
	height:44px;
}
.sec-special .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_special02.png) 0 0 no-repeat;
	content:"";
	display:block;
	position:absolute;
	right:14px;
	top:-98px;
	z-index:1;
	width:101px;
	height:92px;
}
.sec-special .contents-area1 {
	background:url(/resonya/imgs/top/img_themesong01.png) 0 0 no-repeat;
	background-size: contain;
}
.sec-special .contents-area1 .special-list {
	width:100%;
	height:243px;
	padding:30px 0 24px 0;
	background-image:-webkit-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
	float:none;
}
.sec-special .contents-area1 .special-list .img {
	margin: -78px -30px 0 -30px;
	position: absolute;
}
.sec-special .contents-area1 .special-list .btn-link {
	position: absolute;
	left: 232px;
	top: 220px;
}
.sec-special .contents-area1 .special-list .btn-link a {
	width: 460px;
}
.sec-special .contents-area2 {
	overflow:hidden;	
}
.sec-special .contents-area2:nth-child(2) {
	background-image:-webkit-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
}
.sec-special .contents-area2 .special-list:nth-child(1) {
	width:425px;
	padding:30px 18px 30px 0;
	background-image:-webkit-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:2px 4px;
	background-position:right;
	background-repeat:repeat-y;
	float:left;
}
.sec-special .contents-area2 .special-list:nth-child(2) {
	width:425px;
	padding:30px 0 30px 18px;
	background:none;
	float:right;
}
.special-list h3  {
	text-align:center;
	color:#009c53;
	font-size:24px;
	font-size:2.4rem;
	font-weight:bold;
	text-align:center;
	margin:0 0 10px 0;
}
.special-list p {
	color:#343434;
	text-align:center;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(1) .img {
	width:304px;
	margin:20px auto 0 auto;
	text-align:center;
	min-height:200px
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(1) .img img {
	padding-bottom: 8px;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(2) .img {
	margin:20px 0 0 0;
	text-align:center;
	min-height:200px;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(2) .img img {
	width:190px;
	height:auto;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) {
	padding:30px 18px 0 0;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) {
	padding:30px 0 0 18px;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) .img {
	margin:30px 0;
	text-align:center;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) .img img {
	width:220px;
	height:auto;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) .img {
	margin: 0 0 14px 0;
	text-align:center;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) .img img {
	width:280px;
	height:auto;
}
.special-list .img-area .img p {
	margin:8px 0 0 0;
}

/**
 *	
 *	レスポンシブスタイル
 *	
 */

@media all and (max-width: 767px) {
/*------------------------------------------

 *	container,section,共通タイトル

------------------------------------------*/

.container {
	padding:0 0 40px 0;	

}
.contents-wrapper {
	border:4px solid #d5c2a2;
	border-radius:8px;
	background:#fff;
	margin:0 10px 0 10px;
}
.section {
	margin:40px 0 0 0;	

}
.section .ttl-area {
	margin:0 0 20px 0;
	position:relative;
	z-index:1;	

}
.section .ttl {
	color:#fff;
	text-align:center;
	font-size:26px;
	font-size:2.6rem;
	font-weight:bold;
}
.section .sub-ttl {
	color:#fff;
	text-align:center;
	font-size:14px;
	font-size:1.4rem;
	margin:10px auto 0;
	font-weight:bold;
	width:70%;
	line-height:1.5;
}

/*------------------------------------------

 *	mainimg

------------------------------------------*/

.img-wrapper {
	background:#009c53;
	padding:50px 0 0 0;
}
.img-main {
	width:100%;
	margin:0;
	padding:0;
}
.separate {
	width:100%;
	overflow:hidden;
	border-bottom:9px solid #fff;
	position:relative;
	padding:0 20px 0 20px;
	box-sizing:border-box;
}
.img-resonya {
	width:100%;
	float:none;
}
.img-resonya .resonya img {
	margin:0 0 -1px 0;	

}
.img-resonya .logo {
	text-align:left;
	margin:0 0 0 8%;
	width:50%;
	box-sizing:border-box;
}
.img-resonya .logo img {
	width:auto;
	height:auto;
}
.img-main .scroll {
	display:none;
}
.img-tail {
	display:none;
}
/*------------------------------------------

 *	twitter,banner

------------------------------------------*/

.twitter-wrapper {
	padding:0 20px 30px 20px;
}
.twitter-widget {
	width:auto;
	height:320px;
	border:3px solid #eae4c0;
	border-radius:6px;
	position:relative;
	margin:30px 0 0 0;
	left:0;
	top:0;
	box-sizing:border-box;
}
.twitter-widget:before {
	background:url(/resonya/imgs/top/arrow_balloon_mobile.png) 0 0 no-repeat;
	background-size:37px 22px;
	left:24px;
	top:-22px;
	z-index:2;
	width:37px;
	height:22px;
}
.follow-btn {
	margin:9px 10px 9px 10px;
}
.timeline-wrapper {
	height:auto;
	width:100%;
}
.timeline-wrapper iframe {
	height:262px !important;
	width:100% !important;
}
/* For iPhone Retina 4, 4S, 5, 5s, 5c, iPod touch 4, 5 */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) and (-webkit-min-device-pixel-ratio: 2) {	
	.timeline-wrapper iframe {
   		width:568px !important;
  	}
}
/* Landscape */
@media only screen and (min-device-width: 480px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	.timeline-wrapper iframe  {
    	width:286px !important;
 	}
}
/* For iPhone Retina 6*/
/* Portrait */
@media screen and (min-device-width: 375px) and (max-device-width: 413px) and (-webkit-min-device-pixel-ratio: 2) {	
	.timeline-wrapper iframe  {
   		width:667px !important;
  	}
}
/* Landscape */
@media only screen and (min-device-width: 667px) and (max-device-width: 735px) and (-webkit-min-device-pixel-ratio: 2) {
	.timeline-wrapper iframe {
   		width:320px !important;
  	}
}
/* For iPhone Retina 6Plus*/
/* Portrait */
@media only screen and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3)  {
	.timeline-wrapper iframe  {
   		width:736px !important;
  	}
}
/* Landscape */
@media only screen and (device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)  {
	.timeline-wrapper iframe  {
   		width:380px !important;
  	}
}
.banner-top {
	width:100%;
	border:3px solid #eae4c0;
	border-radius:5px;
	padding:13px 10px 0px 10px;
	position:relative;
	text-align:center;
	width:auto;
	margin:30px 10px 30px 10px;
	left:0;
	top:0;
}
.banner-single:before {
	background:url(/resonya/imgs/top/arrow_balloon_mobile.png) 0 0 no-repeat;
	background-size:37px 22px;
	left:24px;
	top:-22px;
	z-index:2;
	width:37px;
	height:22px;
}
.banner-double:before {
	background:url(/resonya/imgs/top/arrow_balloon_mobile.png) 0 0 no-repeat;
	background-size:37px 22px;
	left:24px;
	top:-22px;
	z-index:2;
	width:37px;
	height:22px;
}
.banner-top .ttl {
	display:inline-block;
	padding:0 30px 0 30px;
	background:url(/resonya/imgs/top/illust_banner01.jpg) 0 0 no-repeat,url(/resonya/imgs/top/illust_banner02.jpg) right 0 no-repeat;
	background-size:22px 25px, 22px 25px;
	line-height:25px;
	height:25px;
	font-size:17px;
	font-size:1.7rem;
	font-weight:bold;
	margin:0 0 10px 0;
}
.banner-top div {
	margin:0 0 18px 0;
}
.banner-top a {
	-webkit-transition:opacity 0.4s ease 0s;
	transition:opacity 0.4s ease 0s;
}
.banner-top a:hover {
	opacity:1;
}

/*------------------------------------------

 *	sec-event

------------------------------------------*/

.sec-event {
	background:#fff;
	padding:15px 10px 30px 10px;	
}
.sec-event .sns-area {
	width:100%;
	box-sizing:border-box;
}
.sec-event .sns-area .sns-btn {
	padding:0;
}
.sec-event .ttl {
	width:auto;
	font-size:20px;
	font-size:2rem;
	margin:20px 0 15px 0;
	padding:0 0 0 32px;
	background:url(/resonya/imgs/top/illust_eventtitle.png) 0 0 no-repeat;
	background-size:24px 28px;
	line-height:27px;
	height:28px;
}
.sec-event .main-wrapper {
	box-sizing:border-box;
	padding:0;
	background:none;
	min-height:inherit;
}
.sec-event .tbl-event {
	border:2px solid #dfd3bf;
   width:100%;
	margin:0;
	display:block;
}
.sec-event .tbl-event tbody {
	display:block;
}
.tbl-event colgroup {
	display:none;	
}
.tbl-event .tbl-head {
	display:none;
}
.tbl-event tr {
	display:block;
}
.tbl-event td {
	display:table;
	width:100%;
    border-bottom:1px solid #dfd3bf;
    border-right:none;
    padding:10px 0 10px 10px;
    vertical-align:inherit;
	line-height:1;
	box-sizing:border-box;
}
.tbl-event .tbl-col a:hover {
	color:#009c53;
	text-decoration:underline;
}
.tbl-event .tbl-col .ttl-tbl {
	display:table-cell;
	width:35%;
	padding:10px;
	box-sizing:border-box;
	border-right:1px solid #dfd3bf;
	font-weight:bold;
}
.tbl-event .tbl-col .detail {
	display:table-cell;	
	width:65%;
	padding:6px;
	line-height:1.5;
}
.tbl-event .tbl-col td:first-child {
	background:#f3e6d5;	
}
.tbl-event .tbl-col td:first-child .ttl-tbl {
	color:#ed6d34;
}
.tbl-event .tbl-col td:first-child .detail {
	font-weight:bold;
}
.sec-event .btn-link {
	height:150px;
	padding:34px 91px 0 0;
	background:url(/resonya/imgs/top/img_resonya_event.jpg) right top no-repeat;
	background-size:91px 184px;
	margin:20px 0 0 0;
	font-weight:bold;
}
.sec-event .btn-link a {
	width:95%;
	padding:16px 0 16px 0;
}
.sec-event .event-none {
	width:auto;
	margin:31px auto -30px;
	overflow:hidden;
}
.event-none .img {
	width:40%;
	float:left;
	text-align:center;
	margin:0 3% 0 0;
}
.event-none .img img {
	width:100%;
	height:auto;
}
.event-none .balloon {
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:-0.04em;
	line-height:1.5;
	width:55%;
	border:3px solid #d5c2a2;
	border-radius:6px;
	margin:10px 0 0 0;
	padding:10px;
	float:right;
	position:relative;
}
.event-none .balloon:before {
	background:url(/resonya/imgs/top/arrow_balloon_event.png) 0 0 no-repeat;
	background-size:21px 14px;
	content:"";
	display:block;
	position:absolute;
	left:-21px;
	bottom:25%;
	z-index:1;
	width:21px;
	height:14px;
}

/*------------------------------------------

 *	sec-profile

------------------------------------------*/

.sec-profile p {
	color:#292828;
	font-size:14px;
	font-size:1.4rem;
	text-align:left;
	margin:20px 10px 20px 0;
	line-height:1.5;
	letter-spacing:-0.04em;
	position:relative;
	z-index:2;
}
.sec-profile .contents-wrapper {
	padding:0 0 25px 110px;
	position:relative;
	min-height:150px;
}
.sec-profile .contents-wrapper:before {
	background:url(/resonya/imgs/top/img_resonya_profilemobile.png) 0 0 no-repeat;
	background-size:103px 211px;
	content:"";
	display:block;
	position:absolute;
	left:-5px;
	bottom:0;
	z-index:1;
	width:103px;
	height:211px;
	border-radius:0 0 0 0;
}
.sec-profile .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_profile_mobile.png) 0 0 no-repeat;
	background-size:44px 37px;
	content:"";
	display:block;
	position:absolute;
	right:0;
	top:-39px;
	z-index:1;
	width:44px;
	height:37px;
}
.sec-profile .btn-link {
	margin:0 0 0 -7%;
	padding:0 10px 0 0;
	text-align:right;
}
.sec-profile .btn-link a {
	width:100%;
	text-align:center;
}

/*------------------------------------------

 *	sec-movie

------------------------------------------*/

.sec-movie .contents-wrapper {
	padding:23px 30px 23px 30px;
	position:relative;
}
.sec-movie .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_movie01_mobile.png) 0 0 no-repeat;
	background-size:43px 27px;
	content:"";
	display:block;
	position:absolute;
	left:5px;
	top:-30px;
	z-index:1;
	width:43px;
	height:27px;
}
.sec-movie .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_movie02_mobile.png) 0 0 no-repeat;
	background-size:54px 49px;
	content:"";
	display:block;
	position:absolute;
	right:6px;
	top:-46px;
	z-index:1;
	width:54px;
	height:49px;
}
.sec-movie .movie-list {
    display:block;
}
.movie-list li {
	margin:0 0 30px 0;
	text-align:center;
}
.movie-list li a {
	display:block;
	-webkit-transition:opacity 0.3s ease 0s;
	transition:opacity 0.3s ease 0s;
}
.movie-list li a:hover {
	opacity:1;
}
.movie-list li .img {
	margin:0 0 15px 0;
	position:relative;
}
.movie-list li .img .btn-play {
	width:41px;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}
.movie-list li p {
	color:#292929;
	font-size:14px;
	font-size:1.4rem;
	line-height:1.5;
	letter-spacing:-0.03em;
	text-align:center;
}
.movie-list li p a:hover {
	color:#009c53;
	text-decoration:underline;
}
.sec-movie .btn-link {
	margin:0 -20px 0 -20px;
}
.sec-movie .btn-link a {
	width:100%;
	text-align:center;
}

/*------------------------------------------

 *	sec-collection

------------------------------------------*/

.sec-collection .contents-wrapper {
	padding:23px 30px 23px 30px;
	position:relative;
}
.sec-collection .sub-ttl {
	width:68%;
	padding:0 0 0 15px;
}
.sec-collection .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_collection01_mobile.png) 0 0 no-repeat;
	background-size:61px 66px;
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:-65px;
	z-index:1;
	width:61px;
	height:66px;
}
.sec-collection .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_collection02.png) 0 0 no-repeat;
	background-size:33px 16px;
	content:"";
	display:block;
	position:absolute;
	right:3px;
	top:-18px;
	z-index:1;
	width:33px;
	height:16px;
}
.sec-collection .collection-list {
	display:-webkit-flex;
	display:-ms-flex;
	display:-o-flex;
    display:flex;
	-webkit-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-o-flex-wrap:wrap;
	flex-wrap:wrap;
	width:100%;
	margin:0 0 31px 0;
}
.collection-list li {
	-webkit-flex:0 0 30%;
	-ms-flex:0 0 30%;
	-o-flex:0 0 30%;
	flex:0 0 30%;
	text-align:center;
}
.collection-list li:last-child {
	margin:30px 0 0 0;
	-webkit-flex:0 0 100%;
	-ms-flex:0 0 100%;
	-o-flex:0 0 100%;
	flex:0 0 100%;
}
.sec-collection .btn-link {
	margin:0 -20px 0 -20px;
}
.sec-collection .btn-link a {
	width:100%;
}

/*------------------------------------------

 *	sec-sns

------------------------------------------*/

.sec-sns .contents-wrapper {
	padding:23px 10px 23px 10px;
	position:relative;
}
.sec-sns .ttl-area {
	margin:0 0 25px 0;
}
.sec-sns .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_sns01.png) 0 0 no-repeat;
	background-size:93px 33px;
	content:"";
	display:block;
	position:absolute;
	left:5px;
	top:-37px;
	z-index:1;
	width:93px;
	height:33px;
}
.sec-sns .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_sns02.png) 0 0 no-repeat;
	background-size:59px 17px;
	content:"";
	display:block;
	position:absolute;
	right:5px;
	top:-20px;
	z-index:1;
	width:59px;
	height:17px;
}
.sec-sns .sns-list {
    display:block;
	margin:0;
}
.sns-list h3 {
	font-size:22px;
	font-size:2.2rem;
	margin:0 0 10px 0;
}
.sns-list li {
	padding:0 20px 25px 20px;
	background-image:-webkit-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
	text-align:center;
	margin:0 0 30px 0;
}
.sns-list li:last-child {
	background:none;
	padding:0 10px 0 10px;
}
.sec-sns .btn-link a {
	width:100%;
	text-align:center;
}

/*------------------------------------------

 *	sec-special

------------------------------------------*/

.sec-special .contents-wrapper {
	padding:23px 10px 0 10px;
	position:relative;
}
.sec-special .contents-wrapper:before {
	background:url(/resonya/imgs/top/illust_special01.png) 0 0 no-repeat;
	background-size:56px 22px;
	content:"";
	display:block;
	position:absolute;
	left:-3px;
	top:-26px;
	z-index:1;
	width:56px;
	height:22px;
}
.sec-special .contents-wrapper:after {
	background:url(/resonya/imgs/top/illust_special02.png) 0 0 no-repeat;
	background-size:50px 46px;
	content:"";
	display:block;
	position:absolute;
	right:0;
	top:-50px;
	z-index:1;
	width:50px;
	height:46px;
}
.sec-special .contents-area {
	overflow:visible;
}
.sec-special .contents-area1 {
	background: none;
}
.sec-special .contents-area1 .special-list {
	height:auto;
	padding: 0 0 30px 0;
	background-image:-webkit-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(bottom, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
}
.sec-special .contents-area1 .special-list .img {
	margin: 15px 0 0 0;
	position: static;
}
.sec-special .contents-area1 .special-list .btn-link {
	margin: 0;
	position: static;
}
.sec-special .contents-area1 .special-list .btn-link a {
	width: 100%;
}
.sec-special .contents-area1 .special-list:nth-child(1) .btn-link a {
	width:100%;
	padding:16px 0 16px 0;
	font-weight:bold;
}
.sec-special .contents-area2:nth-child(2) {
	background:none;
}
.sec-special .contents-area2 .special-list:nth-child(1) {
	width:auto;
	float:none;	
	overflow:visible;
	background-image:-webkit-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
	padding: 30px 0;
	text-align:center;
}
.sec-special .contents-area2 .special-list:nth-child(2) {
	width:auto;
	float:none;	
	overflow:visible;
	background-image:-webkit-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:-ms-linear-gradient(top, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-image:linear-gradient(to right, #d5c2a2, #d5c2a2 2px, transparent 2px, transparent 2px);
	background-size:4px 2px;
	background-position:bottom;
	background-repeat:repeat-x;
	padding:0 0 30px 0;
	text-align:center;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(2) {
	padding: 30px 0;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) {
	padding: 30px 0;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) {
	padding: 30px 0;
	background:none;
}
.special-list h3  {
	text-align:center;
	color:#009c53;
	font-size:22px;
	font-size:2.2rem;
	font-weight:bold;
	text-align:center;
	margin:0 0 15px 0;
}
.special-list p {
	color:#343434;
	text-align:center;
	line-height:1.5;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(1) .img {
	width:auto;
	margin:20px auto 0 auto;
	text-align:center;
	min-height:inherit;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(1) .img img {
	padding-bottom: 8px;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(2) .img {
	margin:20px 0 0 0;
	padding:0 20px 0 20px;
	text-align:center;
	min-height:inherit;
}
.sec-special .contents-area2:nth-child(2) .special-list:nth-child(2) .img img {
	width:auto;
	height:auto;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) .img {
	margin:30px 0;
	text-align:center;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(1) .img img {
	width:auto;
	height:auto;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) .img {
	text-align:center;
}
.sec-special .contents-area2:nth-child(3) .special-list:nth-child(2) .img img {
	width:auto;
	height:auto;
}
.sec-special .btn-link {
	margin:30px 0 0 0;
}
.special-list:nth-child(4) .btn-link,
.special-list:nth-child(5) .btn-link {
	margin:0;
}
.sec-special .btn-small a {
	width:100%;
	padding:16px 0 16px 0;
	font-weight:bold;
}


}