@charset "utf-8";
/* ===================================================================
	style.css
=================================================================== */
/*----------------------------------------------------
	メインビジュアル 
----------------------------------------------------*/
#mv {
	background-image: url("../img/mv.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #000000;
	height: 1200px;
	margin: 60px 0 0;
}
#mv.normal {
	background-image: url("../img/mv_02.jpg");
}
@media only screen and (max-width: 1240px) {
#mv {
	background:none;
	height: auto;
	margin: 60px auto 0;
}
#mv .sp_view {
	display: block;
}
}
@media only screen and (max-width: 748px) {
#mv {
	margin: auto;
}
}
/*----------------------------------------------------
	exfight
----------------------------------------------------*/
#exfight {
	border-top: solid 1px #626262;
	color: #ffffff;
	padding: 3% 3% 3%;
}
#exfight h2 {
	text-align: center;
	margin-bottom: 1%;
}
#exfight h2 img {
	max-width: 450px;
	vertical-align: 0;
	margin-right: 10px;
}
#exfight h2 span {
	font-size: clamp(12px, 2.8vw, 41px);
	letter-spacing: -3px;
}
#exfight .text1 {
	font-size: clamp(13px, 2.1vw, 20px);
	text-align: center;
	line-height: 2.2;
}
#exfight .text1 span {
	display: inline-block;
	background: linear-gradient(90deg,rgba(226, 180, 99, 1) 0%, rgba(238, 206, 133, 1) 21%, rgba(250, 232, 168, 1) 44%, rgba(226, 180, 99, 1) 75%, rgba(250, 232, 168, 1) 100%);
	margin-right: 5px;
	padding: 8px 5px;
	font-size: clamp(15px, 2.4vw, 25px);
	font-weight: bold;
	color: #301417;
	text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.3);
	line-height: 1;
}
@media only screen and (max-width: 748px) {
#exfight {
	padding: 5% 3% 4%;
}
#exfight .text1 {
	margin-top: 2%;
	text-align: left;
	line-height: 1.8;
}
#exfight .text1 span {
	background: linear-gradient(90deg,rgba(226, 180, 99, 1) 0%, rgba(238, 206, 133, 1) 21%, rgba(250, 232, 168, 1) 44%, rgba(226, 180, 99, 1) 75%, rgba(250, 232, 168, 1) 100%);
	margin: 0 3px;
	padding: 5px 4px;
	font-size: clamp(13px, 2.4vw, 24px);	
}
#exfight h2 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin-bottom: 3%;	
}
#exfight h2 img {
	max-width: 45%;
}
#exfight h2 span {
	letter-spacing: 0;
}

}
/*----------------------------------------------------
	about
----------------------------------------------------*/
#about h2 {
	padding: 3% 10%;
	background: url(../img/about_back_01.jpg) center top / cover repeat-x;
	text-align: center;
}
#about h2 img {
	margin: 8px 8px;
}
#about .text1 {
	background: #62000d;
	border-bottom: solid 2px #a5021b;
	padding: 2% 3% 3%;
	color: #ffffff;
	font-size: clamp(13px, 2.5vw, 24px);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	text-align: center;
	line-height: 2;
}
@media only screen and (max-width: 748px) {
#about h2 img {
	max-height: 40px;
	margin: 3px 0;
}
#about .text1 {
	text-align: left;
	line-height: 1.6;
	padding: 4% 3% 5%;
}
}
/*----------------------------------------------------
	lineup
----------------------------------------------------*/
#lineup {
	background: #000000;
	overflow: hidden;
}
.item_frame {
	padding-bottom: 3%;
}
.item_frame h2 {
	margin: 4% 5%;
	text-align: center;
}
.item_frame figure {
	display: flex;
	flex-wrap: wrap;
}
.item_frame figure p {
	width: 50%;
}
.item_frame figure p img {
	width: 100%;
}
.item_frame .text1 {
	margin: 2% 2% 1%;
	color: #ffffff;
	text-align: center;
	font-size: clamp(13px, 2.5vw, 31px);
}
.item_frame .button1 {
	text-align: center;
}
#item2 {
	background: url(../img/lineup_back_01.jpg) center top / auto no-repeat;
	border-top: solid 1px #4d4d4d;
	border-bottom: solid 1px #4d4d4d;
}
#item3 figure {
	width: 100%;
	height: 554px;
	background: url(../img/lineup_img_03_01.jpg) center top / auto no-repeat #f1f0f3;
}
@media only screen and (max-width: 950px) {
#item2 {
	background-size: cover;
}
#item3 figure {
	height: auto;
	background: none
}
#item3 figure .sp_view {
	display: block;
	width: 100%;
}
}
@media only screen and (max-width: 748px) {
.item_frame h2 img {
	max-width: 90%;
	max-height: 120px;
}
.item_frame .text1 {
	margin: 2% 2% 3%;
	text-align: left;
}
.item_frame .button1 img {
	max-width: 80%;
}
.item_frame figure p {
	width: 100%;
}
}
/*----------------------------------------------------
	benefits
----------------------------------------------------*/
#benefits {
	overflow: hidden;
	background: url(../img/benefits_back_01.jpg) center top / cover no-repeat;
}
#benefits h3 {
	margin: 4% 5%;
	text-align: center;
}
#benefits ul {
	text-align: center;
	margin: 0 3%;
	z-index: 1;
	position: relative;
}
#benefits ul li {
	margin: 2% 0;
}
#benefits ul li img {
	box-shadow: 7px 7px 14px rgba(0,0,0,0.6);
}
#benefits .backimg {
	margin-top: -5%;
}
#benefits .backimg img {
	width: 100%;
}
@media only screen and (max-width: 748px) {
#benefits h3 img {
	max-height: 70px;
}
#benefits ul li {
	margin: 3% 0;
}
}
/*----------------------------------------------------
	charm
----------------------------------------------------*/
#charm {
	overflow: hidden;
	border-top: solid 10px #880011;
	padding: 0 0 4%;
}
#charm h3 {
	margin: 4% 5% 0;
	text-align: center;
	position: relative;
	z-index: 1;
}
#charm .text1 {
	margin: -3% 3% -3%;
	text-align: center;
}
#charm ul {
	text-align: center;
	margin: 0 3%;
	z-index: 1;
	position: relative;
}
#charm ul li {
	margin: 2% 0;
}
#charm ul li img {
	box-shadow: 7px 7px 14px rgba(0,0,0,0.6);
}
@media only screen and (max-width: 748px) {
#charm {
	border-top: solid 5px #880011;
}
#charm .text1 {
	margin: -3% -3% -3% 3%;
}
#charm ul li {
	margin: 3% 0;
}
}