@charset "utf-8";
/* motion css */

/* 下層ページタイトルバックスライドエフェクト
-------------------------------------------------- */

.bg_imgbox::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 665px;
background: #192630;
z-index: 2;
pointer-events: none;
transform: scaleX(0);
transform-origin: left center;
will-change: transform, opacity;
}
.page_title span,
.page_sub_title span {
position: relative;
display: inline-block;
overflow: hidden;
color: transparent;
}
.page_title span::after,
.page_sub_title span::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-image: linear-gradient(90deg, #f38b11, #ea6614);
z-index: 2;
pointer-events: none;
}
/* 背景カーテン */
body.motion .bg_imgbox::after,
body#page_philosophy.motion .intro_kv::before {
animation: curtainBgHoldOut 1.35s cubic-bezier(1, 0, 0, 1) 0s forwards;
}

/* 背景の見え方は黒幕を薄くして作る */
body.motion .bg_imgbox::before {
animation: bgOverlayFade 0.45s ease-out 0.92s forwards;
}

@keyframes curtainBgHoldOut {
0% {
transform: scaleX(0);
transform-origin: left center;
opacity: 1;
}
45% {
transform: scaleX(1);
transform-origin: left center;
opacity: 1;
}
70% {
transform: scaleX(1);
transform-origin: left center;
opacity: 1;
}
100% {
transform: scaleX(1);
transform-origin: left center;
opacity: 0;
}
}

@keyframes bgOverlayFade {
0% {
background-color: rgba(0, 0, 0, 1);
}
100% {
background-color: rgba(0, 0, 0, 0.35);
}
}


/* テキストカーテン */
body.motion .page_title span::after,
body.motion .page_sub_title span::after {
animation: curtainTextHoldBack 1.35s cubic-bezier(1, 0, 0, 1) 0s forwards;
}

/* テキスト表示 */
body.motion .page_title span,
body.motion .page_sub_title span {
animation: textReveal 0.01s linear 0.78s forwards;
}

@keyframes curtainTextHoldBack {
0% {
width: 0;
}
45% {
width: 100%;
}
70% {
width: 100%;
}
100% {
width: 0;
}
}

@keyframes textReveal {
to {
color: #fff;
}
}


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

.kv_slide {
position: relative;
width: 100%;
}
.kv_slide .mask_slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
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-image: linear-gradient(90deg, #01844d, #003a2f);
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;
}
}


/*-------------------------------------------------
スクロールアニメーション
-------------------------------------------------*/


/* fade
-------------------------------------------------- */

.mf {
opacity:0;
}
.mf.on {
animation: fade 1s ease-in-out forwards;
}

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

/* fade up
-------------------------------------------------- */

.mfu {
opacity:0;
transform:translateY(40px);
}
.mfu.on {
animation: fadeup 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
/*animation: fadeup 1.0s ease-out forwards;*/
/*animation-name: fadeup;
animation-duration: 1.0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;*/
}

@keyframes fadeup {
0% {
opacity:0;
transform:translateY(40px); 
}
100% {
opacity:1;
transform:translateY(0%);
}
}


/* fade up list
-------------------------------------------------- */

.mful li {
opacity:0;
transform:translateY(40px);
}
.mful.on li:nth-child(1) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
.mful.on li:nth-child(2) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards .2s;
}
.mful.on li:nth-child(3) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards .4s;
}
.mful.on li:nth-child(4) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards .6s;
}
.mful.on li:nth-child(5) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards .8s;
}
.mful.on li:nth-child(6) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 1.0s;
}
.mful.on li:nth-child(7) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 1.2s;
}
.mful.on li:nth-child(8) {
animation: ef-fadeup 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 1.4s;
}

@keyframes ef-fadeup {
0% {
opacity:0;
transform:translateY(30px); 
}
100% {
opacity:1;
transform:translateY(0%);
}
}


/* fade down
-------------------------------------------------- */

.mfd {
opacity: 0;
transform: translateY(-40px);
}
.mfd.on {
animation: ef-fadedown 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

@keyframes ef-fadedown {
0% {
opacity:0;
transform:translateY(-40px); 
}
100% {
opacity:1;
transform:translateY(0%); 
}
}


/* fade left
-------------------------------------------------- */

.mfl {
opacity: 0;
transform: translateX(-50px);
}
.mfl.on {
animation: ef-fadeleft 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

@keyframes ef-fadeleft {
0% {
opacity: 0;
transform: translateX(-50px); 
}
100% {
opacity: 1;
transform: translateY(0%); 
}
}


/* fade right
-------------------------------------------------- */

.mfr {
opacity: 0;
transform: translateX(50px);
}
.mfr.on {
animation: ef-faderight 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

@keyframes ef-faderight {
0% {
opacity: 0;
transform: translateX(50px); }
100% {
opacity: 1;
transform: translateY(0%); }
} 

@keyframes fade-out {
0% {
opacity: 1; }
100% {
opacity: 0; }
}


/* ef scaleX
-------------------------------------------------- */

/* 初期状態：白いマスクで覆う */
.thumb {
position: relative !important;
overflow: hidden !important;
display: block;
}
.thumb::before {
content: "";
width: 101%;
height: 101%;
position: absolute;
left: 0;
top: 0;
background-color: #fff !important; 
z-index: 10; 
transform-origin: right center;
transform: scaleX(1); 
transition: none !important; 
}

/* 発火時：.onがついたら scaleX(0) にアニメーション */
body.motion .thumb.on::before {
animation: ef-scaleX 0.6s cubic-bezier(0.76, 0.09, 0.215, 1) forwards !important;
}

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

.thumb img {
opacity: 1 !important;
visibility: visible !important;
}


/* ef txtef mask
-------------------------------------------------- */

.mtm {
display: inline-block;
position: relative;
}
.mtm::after {
content: "";
width: 100%;
height: 100%;
background: rgba(255,255,255,0.9);
position: absolute;
left: 0;
top: 0;
transform-origin: right center;
}
.mtm.on::after  {
animation: ef-scaleX 0.8s ease-in-out forwards;
}


/* opacityFadeIn
-------------------------------------------------- */

/* 透明から表示 */
.opacityFadeIn.visible {
animation: opacityFadeIn 0.7s ease 0s 1 normal;
}

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


/* 左から右にカーテン
-------------------------------------------------- */

/* 左から右にカーテン */
.maskLR {
position:relative;
overflow: hidden;
}
.maskLR img {
visibility: hidden;
}
.maskLR.on img {
visibility: visible;
transition-delay: 0.55s; 
}
/* カーテン本体 */
.maskLR.on::before {
display: block;
content: "";
position: absolute;
z-index: 10;
width: 0%;
height: 100%;
top: 0;
left: 0;
background-image: linear-gradient(90deg, #f38b11, #ea6614);
}
.maskLR.on::before {
animation: wipe_in_out 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes wipe_in_out {
0% {
width: 0%;
left: 0%;
}
50% {
width: 100%;
left: 0%;
}
100% {
width: 0%;
left: 100%;
}
}


/* 左から右にカーテン　msk_wht
-------------------------------------------------- */

.mask_wht {
position: relative !important;
overflow: hidden !important;
display: block;
}
.mask_wht::before {
content: "";
width: 101%;
height: 101%;
position: absolute;
left: 0;
top: 0;
background-color: #fff !important; 
z-index: 10; 
transform-origin: right center; /* 右に向かって消える */
transform: scaleX(1); 
transition: none !important; 
}
.mask_wht.is-clone-revealed::before {
display: none !important;
}
.mask_wht img {
opacity: 1 !important;
visibility: visible !important;
}
body.motion .mask_wht.on::before {
animation: mask-scaleX 0.6s cubic-bezier(0.76, 0.09, 0.215, 1) forwards !important;
}
@keyframes mask-scaleX {
0% { transform: scaleX(1);
}
100% { transform: scaleX(0);
}
}

.thumb img {
opacity: 1 !important;
visibility: visible !important;
}


/* 右から左にカーテン
-------------------------------------------------- */

.maskRL {
position: relative;
overflow: hidden;
display: inline-block;
}
.maskRL img {
visibility: hidden;
}
.maskRL.on img {
visibility: visible;
transition-delay: 0.55s; 
}

/* カーテン本体 */
.maskRL.on::before {
display: block;
content: "";
position: absolute;
z-index: 10;
width: 0%;
height: 100%;
top: 0;
right: 0;
background-color: #003791;
animation: wipe_right_to_left 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes wipe_right_to_left {
0% {
width: 0%;
right: 0%;
}
50% {
width: 100%;
right: 0%;
}
100% {
width: 0%;
right: 100%;
}
}

/* 上から下にカーテン
-------------------------------------------------- */

.maskTB {
position: relative;
overflow: hidden;
}
.maskTB img {
visibility: hidden;
}
.maskTB.on img {
visibility: visible;
transition-delay: 0.55s; 
}

/* カーテン本体 */
.maskTB.on::before {
display: block;
content: "";
position: absolute;
z-index: 10;
width: 100%;
height: 0%; /* 高さを0から開始 */
top: 0;      /* 上端を基準に固定 */
left: 0;
background-color: #003791;
animation: wipe_top_to_bottom 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes wipe_top_to_bottom {
0% {
height: 0%;
top: 0%;
bottom: auto;
}
50% {
height: 100%;
top: 0%;
bottom: auto;
}
100% {
height: 0%;
/* 最終的に下側へ抜けていくように設定 */
top: auto;
bottom: 0%;
}
}


/* 左から右にふわっとフェードイン
-------------------------------------------------- */

.fadeInLeft {
opacity: 0;
transform: translateX(-30px);
transition: none;
}
.fadeInLeft.on {
animation: fadeInLeft 0.7s ease 0s 1 forwards;
}
/* fadeInLeft */
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}


/* 下から上にフェードイン
-------------------------------------------------- */

.fadeInBottom {
opacity: 0;
transform: translateY(30px);
transition: none; 
}
.fadeInBottom.on {
animation: fadeInBottom 0.7s ease 0s 1 forwards;
}
/* fadeInBottom */
@keyframes fadeInBottom {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}


/*-------------------------------------------------
テキストカーテン
-------------------------------------------------*/

.txtMaskLR {
position: relative;
display: block;
width: fit-content;
overflow: hidden;
}

/* 発火前〜カーテン中は文字を完全に隠す */
.txtMaskLR:not(.is-txtmask-revealed),
.txtMaskLR:not(.is-txtmask-revealed) * {
color: transparent !important;
}
.txtMaskLR::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-image: linear-gradient(180deg, #f38b11, #ea6614);
pointer-events: none;
z-index: 2;
}
.txtMaskLR.on::after {
animation: txtCurtainLR 1.35s cubic-bezier(1, 0, 0, 1) forwards;
}

@keyframes txtCurtainLR {
0% {
width: 0%;
left: 0%;
}
45% {
width: 100%;
left: 0%;
}
70% {
width: 100%;
left: 0%;
}
100% {
width: 0%;
left: 100%;
}
}


/*-------------------------------------------------
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;
}