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

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

.bg_imgbox::after {
content: "";
width: 100%;
height: 100%;
background: #003791;
transform-origin: left top;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.motion .bg_imgbox::after {
animation-name: ttl-overlay;
animation-duration: 0.55s;
animation-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
animation-delay: .2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

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

.title_box .page_title span,
.title_box .page_sub_title span {
display: block;
transform: translateY(100%);
}
.motion .title_box .page_title span {
animation-name: ttl-fadeup;
animation-duration: .7s;
animation-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
animation-delay: .4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.motion .title_box .page_sub_title span {
animation-name: ttl-fadeup;
animation-duration: .7s;
animation-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
animation-delay: .55s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes ttl-fadeup {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}

/* 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 .news_box .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(250,250,250,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-color: #003791;
}
.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 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);
}
}


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