@charset "utf-8";

/*-------------------------------------------------
animation css
-------------------------------------------------*/

.ani_fadein {
visibility: hidden;
}
.ani_fadein.on {
animation-name: fadein;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}

.ani_fadeinup {
visibility: hidden;
}
.ani_fadeinup.on {
animation-name: fadeinup;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadeinup {
0% {
opacity:0;
transform:translateY(20px); 
}
100% {
opacity:1;
transform: none;
}
}

.ani_fadeinblur {
visibility: hidden;
}
.ani_fadeinblur.on {
animation-name: fadeinblur;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinblur {
0% {
opacity:0;
filter: blur(6px);
transform: scale(1.1);
}
100% {
opacity:1;
filter: none;
transform: none;
}
}


/*.ani_fadeinblur.on {
animation-name: fadeinblur;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinblur {
0% {
opacity:0;
filter: blur(5px);
transform: scale(1.03);
}
100% {
opacity:1;
filter: none;
transform: none;
}
}*/


.ani_fadeinscale {
visibility: hidden;
}
.ani_fadeinscale.on {
animation-name: fadeinscale;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinscale {
0% {
opacity:0;
transform: scale(1.04);
}
100% {
opacity:1;
transform: none;
}
}


.ani_fadeinleft {
visibility: hidden;
}
.ani_fadeinleft.on {
animation-name: fadeinleft;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinleft {
0% {
opacity:0;
transform: translateX(-20px);
}
100% {
opacity:1;
transform: none;
}
}

.ani_fadeinright {
visibility: hidden;
}
.ani_fadeinright.on {
animation-name: fadeinright;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinright {
0% {
opacity:0;
transform: translateX(20px);
}
100% {
opacity:1;
transform: none;
}
}

.ani_fadeout {
visibility: hidden;
}
.ani_fadeout.on {
animation-name: fadeout;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadeout {
0% {
opacity:1;
}
100% {
opacity:0;
}
}


.ani_width {
visibility: hidden;
}
.ani_width.on {
animation-name: ani_width;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-play-state: running;
visibility: visible;
}

@keyframes ani_width {
0% {
width: 0%; 
}
100% {
width: 100%;
}
}


.ani_height {
visibility: hidden;
}
.ani_height.on {
animation-name: ani_height;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes ani_height {
0% {
height: 0%;
}
100% {
height: 100%;
}
}

/* ani_width ani_height マスクパーツ
-------------------------------------------------- */

.mask_box_blk {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #000;
width: 100%;
height: 100%;
}
.mask_box_gry {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #eee;
width: 100%;
height: 100%;
}
.mask_box_wht {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
width: 100%;
height: 100%;
}
.mask_box_red {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #C40A19;
width: 100%;
height: 100%;
}

/* imgスライドイン　.ani_imgslidein + thumbをセットで使用
-------------------------------------------------- */

.ani_imgslidein {
visibility: hidden;
position: relative;
}
.ani_imgslidein.on {
animation-name: img_fadein;
animation-duration: .5s;
animation-timing-function: ease;
animation-fill-mode: both;
visibility: visible;
}
.thumb {
display: block;
overflow: hidden;
position: relative;
animation-name: img_fadein;
animation-duration: .7s;
animation-timing-function: ease;
animation-fill-mode: both;
}

@keyframes img_fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}

.thumb::before {
content: "";
width: calc(100% + 2px);
height: calc(100% + 2px);
position: absolute;
left: 0;
top: 0;
background: #000; /*プロジェクトにより背景色を変更*/
z-index: 10;
transform-origin: right center;
}
.on .thumb::before {
animation-name: slide_scaleX;
animation-duration: .9s;
animation-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes slide_scaleX {
0% {
transform: scaleX(1); 
}
100% {
transform: scaleX(0); 
}
}


/*-------------------------------------------------
mask image
-------------------------------------------------- */

.ani_maskimg {
position: relative;
overflow: hidden;
}
.ani_maskimg .mask_img {
position: relative;
width: 100%;
overflow: hidden;
}
.ani_maskimg .mask_img img {
display: block;
width: 100%;
height: auto;
transform: scale(1.06);
will-change: transform;
}
.ani_maskimg .mask_box_blk {
position: absolute;
inset: 0;
z-index: 2;
background-color: #192229;
/*background-image: url("../img/common/bg_koushi_blk.gif");
background-repeat: repeat;
background-size: 320px;*/
pointer-events: none;
will-change: opacity;
}


/*-------------------------------------------------
mask slider
-------------------------------------------------- */

.kv_slide {
position: relative;
width: 100%;
}
.ani_maskslider {
position: relative;
}
.kv_slide .mask_slider {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.kv_slide .mask_slider li {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
.kv_slide .mask_slider li.is-current {
z-index: 2;
visibility: visible;
opacity: 1;
}
.kv_slide .mask_slider li.is-next {
z-index: 3;
visibility: visible;
opacity: 1;
}
.kv_slide .mask_slider img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
 will-change: transform, clip-path, opacity;
}
.kv_slide .mask_box_blk {
position: absolute;
inset: 0;
z-index: 3;
background-color: #000;
background-image: url("../img/common/bg_koushi_blk.gif");
background-repeat: repeat;
background-size: 320px;
opacity: 1;
pointer-events: none;
}

/* キャプション
-------------------------------------------------- */

.kv_slide .mask_caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 10px 10px;
color: #fff;
text-align: center;
line-height: 1.6;
font-size: 1.4rem;
letter-spacing: 0.2em;
z-index: 4;
opacity: 0;
pointer-events: none;
}
.kv_slide .mask_slider li.has-caption::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 45px;
background: rgba(0, 0, 0, 0.7);
z-index: 3;
pointer-events: none;
}
.kv_slide .mask_slider li.is-current .mask_caption,
.kv_slide .mask_slider li.is-next .mask_caption {
opacity: 1;
}
.kv_slide .mask_caption {
transition: opacity 0.35s ease;
}

@media all and (max-width : 767px ){
.kv_slide .mask_caption {
padding: 5px 10px;
font-size: 1.1rem;
letter-spacing: 0.1em;
}
.kv_slide .mask_slider li.has-caption::after {
height: 30px;
}
}


/* ページネーション
-------------------------------------------------- */

.kv_slide .mask_pagination {
position: absolute;
right: 3%;
bottom: 3%;
z-index: 6;
display: flex;
align-items: center;
gap: 8px;
}
.kv_slide.has-caption .mask_pagination {
bottom: 60px;
}

@media all and (max-width : 767px ){
.kv_slide.has-caption .mask_pagination {
bottom: 35px;
}
}

.kv_slide .mask_pagination_btn {
position: relative;
width: 18px;
height: 18px;
border: none;
padding: 0;
margin: 0;
background: transparent;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.kv_slide .mask_pagination_btn::before,
.kv_slide .mask_pagination_btn::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transition: .3s;
transition-property: transform, opacity, border-color, background-color;
}

/* 中の塗りドット */
.kv_slide .mask_pagination_btn::before {
background: #fff;
transform: translate(-50%, -50%) scale(0.25);
opacity: 1;
}
.kv_slide .mask_pagination_btn.is-active::before {
transform: translate(-50%, -50%) scale(0.4);
}

/* 外側リング */
.kv_slide .mask_pagination_btn::after {
background: transparent;
border: 1px solid #fff;
transform: translate(-50%, -50%) scale(0.25);
opacity: 0;
}
.kv_slide .mask_pagination_btn.is-active::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

@media all and (max-width: 767px) {
.kv_slide .mask_pagination {
right: 14px;
bottom: 14px;
gap: 6px;
}
.kv_slide .mask_pagination_btn {
width: 16px;
height: 16px;
}
.kv_slide .mask_pagination_btn::before,
.kv_slide .mask_pagination_btn::after {
width: 7px;
height: 7px;
}
}

/*-------------------------------------------------
mask_box_wrap
-------------------------------------------------*/

.mask_box_wrap {
position: relative;
background: #090D17;
overflow: hidden;
}
.mask_box_img {
position: relative;
z-index: 3;
}


/*-------------------------------------------------
delay
-------------------------------------------------*/

.delay_1s {
animation-delay: 0.1s !important;
}
.delay_2s {
animation-delay: 0.2s !important;
}
.delay_3s {
animation-delay: 0.3s !important;
}
.delay_4s {
animation-delay: 0.4s !important;
}
.delay_5s {
animation-delay: 0.5s !important;
}
.delay_6s {
animation-delay: 0.6s !important;
}
.delay_7s {
animation-delay: 0.7s !important;
}
.delay_8s {
animation-delay: 0.8s !important;
}
.delay_9s {
animation-delay: 0.9s !important;
}
.delay_10s {
animation-delay: 1s !important;
}
.delay_11s {
animation-delay: 1.1s !important;
}
.delay_12s {
animation-delay: 1.2s !important;
}
.delay_13s {
animation-delay: 1.3s !important;
}
.delay_14s {
animation-delay: 1.4s !important;
}
.delay_15s {
animation-delay: 1.5s !important;
}
.delay_16s {
animation-delay: 1.6s !important;
}
.delay_17s {
animation-delay: 1.7s !important;
}
.delay_18s {
animation-delay: 1.8s !important;
}
.delay_19s {
animation-delay: 1.9s !important;
}
.delay_20s {
animation-delay: 2s !important;
}