


/** -------------------------------
 * mainview
 */

#mainview {
	padding-bottom: 0;
	background-color: #000;
}

#mainview > .wrap {
	position: relative;
	width: 100%;
}

#mainview .swiper-container {

}

#mainview .swiper-wrapper {

}

#mainview .swiper-slide {
	position: relative;
	padding-top: 39.375%;
}

#mainview .bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

#mainview .swiper-slide > .wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#mainview .inner {
	position: relative;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
}
        /* item01 */

#mainview .item01 {

}

#mainview .item01 .bg {
	background-image: url(../IMAGES/PC/mainview01_img.jpg);
}


#mainview .swiper-button-prev {
	width: 28px;
	height: 54px;
	margin-top: -27px;
	background-image: url(../IMAGES/mainview_prev.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mainview .swiper-button-prev.none {
	display: none;
}

#mainview .swiper-button-next {
	width: 28px;
	height: 54px;
	margin-top: -27px;
	background-image: url(../IMAGES/mainview_next.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mainview .swiper-button-next.none {
	display: none;
}

#mainview .swiper-pagination {
	display: none;
}


#mainview + .articleBasicModule {
	margin-top: 4%;
}





/** -------------------------------
 * panel
 */

.panel {
	clear: both;
	padding-top: 0;
}

.panel > .wrap {
	position: relative;
	width: 100%;
	padding-top: calc((321/1440) * 100%);
	overflow: hidden;
	margin: 0 auto;
	transform: translate3d(0);
}

.panel .image {
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100.5%;
}

.panel .content {
	position: absolute;
	top: 0;
	height: 100.5%;
}

.panel .content > .wrap {
	position: relative;
	width: 100%;
	height: 100.5%;
	margin: 0;
	overflow: hidden;
	background-color: #fff;
}

.panel .content .inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100.5%;
	z-index: +2;
	transform: translate3d(0, 0, 0) perspective(0);
}

.panel .content .inner .bg {
	position: absolute;
	top: 0;
	background-color: #C3082E;
	height: 100.5%;
	transition: width 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-o-transition: width 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-moz-transition: width 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-webkit-transition: width 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
}

.panel > .wrap.show .content .inner .bg {
	width: 100% !important;
}

.panel .content .copy {
	width: 85%;
	font-size: 2.2em;
	font-weight: normal;
	color: #000;
	line-height: 1.6;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: +3;
	transition: 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-o-transition: 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-moz-transition: 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-webkit-transition: 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	transition-property: top, color;
}

.panel > .wrap.show .content .copy {
	top: 24.922%;
	color: #fff;
}

.panel .content .lead {
	font-size: 1.35em;
	font-weight: normal;
	color: #fff;
	line-height: 1.5;
	width: 75%;
	position: absolute;
	top: calc((120/321) * 100%);
}

.panel .content .button {
	display: table;
	width: 200px;
	height: 27px;
	background-color: #c3002c;
	border: 1px solid rgba(255, 255, 255, 1);
	position: absolute;
	bottom: calc((65/321) * 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-o-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-moz-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-webkit-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
}

.panel > .wrap.show .content .button {
	opacity: 1;
	pointer-events: auto;
}

.panel .content .button::after {
	content: '';
	display: block;
	width: 2%;
	padding-top: 2%;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	top: 50%;
	right: calc((16/240) * 100%);;
	transform-origin: center;
	transform: translate(50%, -50%) rotate(45deg);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-o-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-moz-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
	-webkit-transition: opacity 0.4s cubic-bezier(0.31, 0.11, 0.19, 0.98) .10s;
}

.panel > .wrap.show .content .button::after {
	opacity: 1;
}

.panel .content .button span {
	display: table-cell;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 1.4em;
	color: #fff;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}

.panel .content .button:hover {
	background-color: rgba(255, 255, 255, 1);
}

.panel .content .button:hover::after {
	border-top: 2px solid #C3082E;
	border-right: 2px solid #C3082E;
}

.panel .content .button:hover span {
	color: #C3082E;
}

/* tablet */

@media screen and (min-width: 581px) and (max-width: 1279px) {
	.panel .content .button {
		width: calc((200/1440) * 100vw);
		height: calc((27/1440) * 100vw);
	}

	.panel .content .button span {
		padding: 0 calc((20/1440) * 100vw);
	}
}


/** -------------------------------
 * panel : panelAttraction
 */

.panel#panelAttraction {
	padding-top: 0;
}

.panel#panelAttraction > .section + .wrap {
	margin-top: calc((50/1440) * 100%);
}

.panel#panelAttraction > .wrap {
	position: relative;
}

.panel#panelAttraction > .wrap .image {
	width: calc(888/1440 * 100%);
}

.panel#panelAttraction > .wrap .content {
	width: calc(553/1440 * 100%);
}

.panel#panelAttraction .attraction_item_1 .image {
	/*width: calc((888/1440) * 100%);*/
	background-image: url(../IMAGES/PC/panel_img01.jpg);
	right: 0;
}

.panel#panelAttraction .attraction_item_1 .content {
	/*width: calc((553/1440) * 100%);*/
	left: 0;
}

.panel#panelAttraction .attraction_item_1 .copy,
.panel#panelAttraction .attraction_item_1 .lead,
.panel#panelAttraction .attraction_item_1 .button {
	left: calc((70/553) * 100%);
}


.panel#panelAttraction .attraction_item_1 .bg {
	width: 0.9%;
	right: 0;
}


.panel#panelAttraction .attraction_item_2 .image {
	/*width: calc((836/1440) * 100%);*/
	background-image: url(../IMAGES/PC/panel_img02.jpg);
	left: 0;
}

.panel#panelAttraction .attraction_item_2 .content {
	/*width: calc((605/1440) * 100%);*/
	right: 0;
}

.panel#panelAttraction .attraction_item_2 .copy,
.panel#panelAttraction .attraction_item_2 .lead,
.panel#panelAttraction .attraction_item_2 .button {
	/*left: calc((75/605) * 100%);*/
	left: calc((70/553) * 100%);
}

.panel#panelAttraction .attraction_item_2 .lead {
	top: calc((120/321) * 100%);
}

.panel#panelAttraction .attraction_item_2 .bg {
	width: 0.826%;
	left: 0;
}

.panel#panelAttraction .attraction_item_3 .image {
	/*width: calc((800/1440) * 100%);*/
	background-image: url(../IMAGES/PC/panel_img03.jpg);
	right: 0;
}

.panel#panelAttraction .attraction_item_3 .content {
	/*width: calc((641/1440) * 100%);*/
	left: 0;
}

.panel#panelAttraction .attraction_item_3 .copy,
.panel#panelAttraction .attraction_item_3 .lead,
.panel#panelAttraction .attraction_item_3 .button {
	/*left: calc((70/641) * 100%);*/
	left: calc((70/553) * 100%);
}

.panel#panelAttraction .attraction_item_3 .lead {
	top: calc((140/321) * 100%);
}

.panel#panelAttraction .attraction_item_3 .bg {
	width: 0.78%;
	right: 0;
}


/** -------------------------------
* 2021.07.30追記
*/
#brand {
	margin: 4% auto;
}
#brand .info-outline {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3%;
}
#brand .info-outline .info-l {
	width: 50%;
	margin-right: 2%;
}
#brand .info-outline .info-l img {
	width: 100%;
}
#brand .info-outline .info-r {
	width: 48%;
}
#brand .info-outline .info-r p {
	margin: 1em 0;
	font-size: 1.6rem;
	line-height: 1.5;
}
#brand .info-outline .info-r .cta-list {
	margin: 22px 0 14px;
}
#brand .info-outline .info-r .cta-list li{
	list-style-type: none;
	line-height: 0;
}
#brand .info-outline .info-r .cta-list li a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 0 0 1.5em;
	width: calc(52% + 45px);
	min-width: 224px;
	height: 36px;
	background-color: #c3002f;
	font-size: 1.6rem;
	color: #fff;
	line-height: 1;
}
#brand .info-outline .info-r .cta-list li a span {
	white-space: nowrap;
}
#brand .info-outline .info-r .cta-list li a::after {
	content: "";
	color: #fff;
	position: absolute;
	width: 6px;
	height: 6px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 20px;
	transform: translate(0) rotate(45deg);
	transition: all .3s ease-in-out;
}
#brand .info-outline .info-r .cta-list li a:hover::after {
	transform: translateX(5px) rotate(45deg);
	transition: all .3s ease-in-out;
}