@charset "UTF-8";

@-webkit-keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

@keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

:root {
--easing: cubic-bezier(.2, 1, .2, 1);
--transition: .8s var(--easing);
}


/*PC*/
@media print, screen and (min-width: 768px) {
.slide-media,
.thumb-media {
position: relative;
overflow: hidden;
}
.slide-media img,
.thumb-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}


.swiper-button-prev, .swiper-button-next {
display: grid;
place-content: center;
width: 6.4rem;
height: 6.4rem;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.swiper-button-disabled {
pointer-events: none;
opacity: 0;
}

.mv04 {
}
.mv04 .l-inner {
padding-bottom: 0;
}
.mv04 .swiper {
background-color: #333;
position: relative;
}
.mv04 .swiper-fade .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
pointer-events: inherit;
}
.mv04 .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.mv04 .progressbar {
position: absolute;
width:83%;
height: 1px;
left: 5%;
bottom:5%;
background-color:rgba(255,255,255,.3);
z-index: 1;
}
.mv04 .progressbar-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left top;
transform-origin: left top;
background-color:#e60216;
z-index: 2;
}
.mv04 .swiper-slide {
height: auto;
}
.mv04 .slide-media {
height:700px;
}
.mv04 .slide-media img {
-webkit-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

.mv04 .slide-content {
width:50%;
color: #fff;
position: absolute;
top:10%;
left:45%;
}

.mv04 .slide-title2 {
font-size:2.6rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin:20px 0 30px;
text-shadow:0px 0px 4px rgba(0,0,0,.25);
}

.mv04 .slide-title2 span{
display: block;
font-size: .66rem;
margin-bottom: 10px;
margin-left: 5px;
}

.mv04 .slide-title {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.01em;
text-shadow: 0px 0px 4px rgba(0,0,0,.3);
}

.mv04 .slide-fraction {
font-weight: bold;
position: relative;
text-align: center;
--size: 70px;
}

.mv04 .slide-fraction .circle {
display: block;
width: var(--size);
height: var(--size);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.mv04 .slide-fraction .circle svg {
width: 100%;
height: 100%;
fill: none;
}

.mv04 .slide-fraction .circle-01 {
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 1px;
}

.mv04 .slide-fraction .circle-02 {
stroke:#e60216;
stroke-width: 2px;
stroke-dasharray: 201.056px;
stroke-dashoffset: 201.056px;
}

.mv04 .slide-fraction .current {
font-size: 2.4rem;
line-height: var(--size);
position: absolute;
top: 0.05em;
left: 0;
width: var(--size);
text-align: center;
color:#e60216;
}
.mv04 .slide-fraction .total {
font-size: 1.6rem;
}
.mv04 .slide-fraction .total::before {
position: relative;
display: block;
width: 3px;
height: 1em;
margin: -3px auto 0.5em;
content: "";
background-color:#e60216;
}

.mv04 .swiper-slide[class*=-active] .slide-media img {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
}

.mv04 .swiper-slide[class*=-active] .slide-fraction .circle-02 {
-webkit-animation: mv04-circle linear both;
animation: mv04-circle linear both;
}

.c-swiperButtonArea--transparent {
}

.case__body-slider-nextBtn {
position:absolute;
height:100%;
right:0;
top:0;
bottom:0;
width:27.5rem;
z-index:10
}

.case__body-slider-nextBtn {
display:none
}
.case__body-slider-nextBtn-button {
display:block;
width:100%;
height:100%;

}

.case__body-slider-buttonArea {
bottom: 5rem;
right: 12%;
height:3rem;
position:absolute;
z-index:1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border:1px solid rgba(255,255,255,.2);

}

.c-swiperButtonArea .c-swiperButtonArea__pagination {
font-size:1.2rem;
position:static;
display:flex;
justify-content:center;
gap:.1rem;
order:2;
flex:1
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev,
.c-swiperButtonArea .c-swiperButtonArea__button-next {
height:100%;
width:4rem;
position:static;
display:block;
opacity:1!important;
margin:0;
display:flex;
align-items:center;
justify-items:center
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev.swiper-button-disabled,
.c-swiperButtonArea .c-swiperButtonArea__button-next.swiper-button-disabled {
opacity:.4!important
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev {
order:1
}
.c-swiperButtonArea .c-swiperButtonArea__button-next {
order:3
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev,
.c-swiperButtonArea .c-swiperButtonArea__button-next {
width:3.2rem;
position:static;
display:block;
opacity:1!important;
margin:0;
display:flex;
align-items:center;
justify-items:center
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev.swiper-button-disabled,
.c-swiperButtonArea .c-swiperButtonArea__button-next.swiper-button-disabled {
opacity:.4!important
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev {
order:1
}
.c-swiperButtonArea .c-swiperButtonArea__button-next {
order:3
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev:after,
.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
display:block;
width:1.2rem;
height:1.2rem;
content:"";
background:url(../images/com/icon_arrow-left.svg) no-repeat center/contain;
filter: brightness(0) invert(1);
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev:after {
transform:rotate(180deg)
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev:after,
.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
display:block;
width:1.2rem;
height:1.2rem;
content:"";
background:url(../images/com/icon_arrow-right.svg) no-repeat center/contain;
filter: brightness(0) invert(1);
}

.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
transform:rotate(360deg)
}

}
/*sp*/
@media only screen and (max-width: 767px) {

/*history
------------------------------------------*/
.slide-media,
.thumb-media {
position: relative;
overflow: hidden;
}
.slide-media img,
.thumb-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}


.swiper-button-prev, .swiper-button-next {
display: grid;
place-content: center;
width: 6.4rem;
height: 6.4rem;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.swiper-button-disabled {
pointer-events: none;
opacity: 0;
}

.mv04 {
margin-bottom: 60px;
}
.mv04 .l-inner {
padding-bottom: 0;
}
.mv04 .swiper {
background-color: #333;
position: relative;
}
.mv04 .swiper-fade .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
pointer-events: inherit;
}
.mv04 .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.mv04 .progressbar {
position: absolute;
width:83%;
height: 1px;
left: 5%;
bottom:5%;
background-color:rgba(255,255,255,.3);
z-index: 1;
}
.mv04 .progressbar-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left top;
transform-origin: left top;
background-color:#e60216;
z-index: 2;
}
.mv04 .swiper-slide {
height: auto;
}
.mv04 .slide-media {
height:700px;
}
.mv04 .slide-media img {
-webkit-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

.mv04 .slide-content {
width: 90%;
color: #fff;
position: absolute;
top:10%;
left: 5%;
}

.mv04 .slide-title2 {
font-size:1.8rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin:20px 0 30px;
text-shadow:0px 0px 4px rgba(0,0,0,.25);
}

.mv04 .slide-title2 span{
display: block;
font-size:.5rem;
margin-bottom: 10px;
margin-left: 5px;
}

.mv04 .slide-title {
font-size: .8rem;
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.01em;
text-shadow: 0px 0px 4px rgba(0,0,0,.3);
}

.mv04 .slide-fraction {
font-weight: bold;
position: relative;
text-align: center;
--size: 40px;
}

.mv04 .slide-fraction .circle {
display: block;
width: var(--size);
height: var(--size);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.mv04 .slide-fraction .circle svg {
width: 100%;
height: 100%;
fill: none;
}

.mv04 .slide-fraction .circle-01 {
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 1px;
}

.mv04 .slide-fraction .circle-02 {
stroke:#e60216;
stroke-width: 2px;
stroke-dasharray: 201.056px;
stroke-dashoffset: 201.056px;
}

.mv04 .slide-fraction .current {
font-size: 1rem;
line-height: var(--size);
position: absolute;
top: 0.05em;
left: 0;
width: var(--size);
text-align: center;
color:#e60216;
}
.mv04 .slide-fraction .total {
font-size: 1rem;
}
.mv04 .slide-fraction .total::before {
position: relative;
display: block;
width: 3px;
height: 1em;
margin: -3px auto 0.5em;
content: "";
background-color:#e60216;
}

.mv04 .swiper-slide[class*=-active] .slide-media img {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
}

.mv04 .swiper-slide[class*=-active] .slide-fraction .circle-02 {
-webkit-animation: mv04-circle linear both;
animation: mv04-circle linear both;
}

.c-swiperButtonArea--transparent {
}

.case__body-slider-nextBtn {
position:absolute;
height:100%;
right:0;
top:0;
bottom:0;
width:27.5rem;
z-index:10
}

.case__body-slider-nextBtn {
display:none
}
.case__body-slider-nextBtn-button {
display:block;
width:100%;
height:100%;

}

.case__body-slider-buttonArea {
bottom: 5rem;
right: 12%;
height:3rem;
position:absolute;
z-index:1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border:1px solid rgba(255,255,255,.2);

}

.c-swiperButtonArea .c-swiperButtonArea__pagination {
font-size:1.2rem;
position:static;
display:flex;
justify-content:center;
gap:.1rem;
order:2;
flex:1
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev,
.c-swiperButtonArea .c-swiperButtonArea__button-next {
height:100%;
width:4rem;
position:static;
display:block;
opacity:1!important;
margin:0;
display:flex;
align-items:center;
justify-items:center
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev.swiper-button-disabled,
.c-swiperButtonArea .c-swiperButtonArea__button-next.swiper-button-disabled {
opacity:.4!important
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev {
order:1
}
.c-swiperButtonArea .c-swiperButtonArea__button-next {
order:3
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev,
.c-swiperButtonArea .c-swiperButtonArea__button-next {
width:3.2rem;
position:static;
display:block;
opacity:1!important;
margin:0;
display:flex;
align-items:center;
justify-items:center
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev.swiper-button-disabled,
.c-swiperButtonArea .c-swiperButtonArea__button-next.swiper-button-disabled {
opacity:.4!important
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev {
order:1
}
.c-swiperButtonArea .c-swiperButtonArea__button-next {
order:3
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev:after,
.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
display:block;
width:1.2rem;
height:1.2rem;
content:"";
background:url(../images/com/icon_arrow-left.svg) no-repeat center/contain;
filter: brightness(0) invert(1);
}
.c-swiperButtonArea .c-swiperButtonArea__button-prev:after {
transform:rotate(180deg)
}

.c-swiperButtonArea .c-swiperButtonArea__button-prev:after,
.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
display:block;
width:1.2rem;
height:1.2rem;
content:"";
background:url(../images/com/icon_arrow-right.svg) no-repeat center/contain;
filter: brightness(0) invert(1);
}

.c-swiperButtonArea .c-swiperButtonArea__button-next:after {
transform:rotate(360deg)
}



}