@charset "UTF-8";
/*------------------------
一覧
------------------------*/
.page-ttl{
	margin-bottom: 0;
}
.contact{
	background: var(--bgcolor);
	padding: 60px 0 80px;
}
.contact .contents-wrap{
	width: 1000px;
	margin: 0 auto;
}
.contact .contents-wrap .block{
	background: #fff;
	padding: 25px 30px;
	box-shadow: 1px 1px 10px rgb(0 0 0 / 10%);
	margin-bottom: 30px;
}
.contact .contents-wrap .block h2{
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.3;
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 2px solid var(--btncolor);
}
.contact .contents-wrap .block h2 span{
	width: 20px;
	height: 20px;
	background: var(--btncolor);
	display: inline-block;
	position: relative;
	margin-right: 10px;
}
.contact .contents-wrap .block h2 span::before {
	content: '';
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 100%;
	height: 1px;
	background: var(--btncolor);
}
.contact .contents-wrap .block h2 span::after {
	content: '';
	position: absolute;
	top: 3px;
	right: -3px;
	width: 1px;
	height: 100%;
	background: var(--btncolor);
}
.contact .contents-wrap .block .l-btn a {
	display: block;
	position: relative;
	width: 378px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 1;
	margin-left: 35px;
	background: var(--txtcolor);
	padding: 24px;
}

.contact .contents-wrap .block .l-btn a::before {
	content: '';
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 100%;
	height: 1px;
	transition: .2s ease 0s;
	background: var(--txtcolor);
}
.contact .contents-wrap .block .l-btn a::after {
	content: '';
	position: absolute;
	top: 3px;
	right: -3px;
	width: 1px;
	height: 100%;
	transition: .2s ease .2s;
	background: var(--txtcolor);
}
.contact .contents-wrap .block .l-btn a:hover::before {
	width: 0%;
}
.contact .contents-wrap .block .l-btn a:hover::after {
	height: 0%;
}
.contact .textarea{
	flex: 1;
}
.contact .textarea p{
	font-size: 1.6rem;
	text-align: justify;
	margin-bottom: 15px;
}
.contact .textarea .min{
	font-size: 1.4rem;
	display: block;
}
/*offer*/
.offer {
	padding-bottom: 30px;
	margin-bottom: 60px;
	border-bottom: 1px solid #000; 
}
.offer .btn-area .l-btn:not(:last-of-type) {
	margin-bottom: 10px;
}
/*line*/
.contact .contents-wrap .block.line .l-btn a {
	background: #06c655 url(/pc/img/fanclub/icon_line.png) no-repeat center left 80px;
	padding: 23px 20px 25px 60px;
}
.contact .contents-wrap .block.line .l-btn a::before{
	background: #06c655;
}
.contact .contents-wrap .block.line .l-btn a::after{
	background: #06c655;
}
.contact .contents-wrap .block.line .l-btn a:hover{
	background: var(--mygray);
}
.contact .contents-wrap .block.line .l-btn a:hover{
	background: url(/pc/img/fanclub/icon_line.png) no-repeat center left 80px;
	background-color: var(--mygray);
}
.contact .mail-link{
	display: flex;
	padding-bottom: 60px;
	margin-bottom: 60px;
	border-bottom: 1px solid #000;
}
.contact .mail-link p{
	font-size: 1.8rem;
}
.contact .mail-link a{
	color: var(--btncolor);
	font-weight: bold;
	display: block;
	margin-left: 40px;
	transition: .2s ease .2s;
	position: relative;
}
.contact .mail-link a::after{
	content: '';
	position: absolute;
	bottom: -3px;
	right: 0;
	width: 100%;
	height: 1px;
	transition: .2s ease 0s;
	background: var(--btncolor);
}
.contact .mail-link a:hover:after{
	width: 0;
}
/*ファンレター*/
.contact .contents-wrap .block.fanletter p{
	font-weight: bold;
	margin-bottom: 0;
}