@charset "utf-8";

/* ============

ページタイトル 

============ */
.Pagename{
    opacity: 0;
    transform: translate(0, 10px);
    transition: 1s all;
}

.Pagename.Show{
    opacity: 1;
    transform: translate(0, 0);
}


/* ふわっと */
.Anm.Normal {
    opacity: 0;
    transition: 1s;
    transform: translate(0, 10px);
}

.Anm.Normal.Show {
    opacity: 1;
    transform: translate(0, 0);
}

  /* 横からスライドイン */
.Anm.SlideIn {
    opacity: 0;
    transition: 1s;
    transform: translate(-5px, 0);
}

.Anm.SlideIn.Show {
    opacity: 1;
    transform: translate(0, 0);
}

/* 横からスライドイン */
.Anm.SlideInRight{
    opacity: 0;
    transition: 0.8s;
    transform: translate(10px, 0);
}
.Anm.SlideInRight.Show{
    opacity: 1;
    transform: translate(0, 0);
}


/* 画像　ぼやけからクリア */
.Anm.Blur{
    filter: blur(2px);
    transition: 0.8s;
}
.Anm.Blur.Show{
    filter: blur(0px);
}

#buy_about_img.About_Img {
    background-image: url(../img/animation/buy_mv.webp);
    background-repeat: no-repeat;
    background-size: 400% auto;  /* 幅を4倍 */
    width: 100%;
    height: 0;
    padding-bottom: 82.47%; /* レスポンシブ対応 */
    animation: buy_anime 5s steps(1) forwards infinite;
} 

@keyframes buy_anime {  
    0% { background-position: 0 0%; }
    15% { background-position: 33.3333333% 0; }
    30% { background-position: 66.6666666% 0; }
    45% { background-position: 100% 0; }
    100% { background-position: 100% 0; } /* ループのカクつき防止 */
}  


#pawn_about_img.About_Img {
    background-image: url(../img/animation/pawn_mv.png);
    background-repeat: no-repeat;
    background-size: 400% auto;  /* 幅を4倍 */
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* レスポンシブ対応 */
    animation: pawn_anime 5s steps(1) forwards infinite;
} 

@keyframes pawn_anime {  
    0% { background-position: 0 0%; }
    15% { background-position: 33.3333333% 0; }
    30% { background-position: 66.6666666% 0; }
    45% { background-position: 100% 0; }
    100% { background-position: 100% 0; } /* ループのカクつき防止 */
}  

#senior_about_img.About_Img {
    background-image: url(../img/animation/senior-inheritance-cleanup_mv.webp);
    background-repeat: no-repeat;
    background-size: 800% auto;  /* 幅を8倍 */
    width: 100%;
    height: 0;
    padding-bottom: 133.684%; /* レスポンシブ対応 */
    animation: senior_anime 6s steps(7) infinite;
} 

@keyframes senior_anime {  
    0% { background-position: 0 0%; }
    80% { background-position: 100% 0; } /* 左へ7コマ分移動 */
    100% { background-position: 100% 0; } /* 左へ7コマ分移動 */
}  


#senior_about_img.About_Img {
    background-image: url(../img/animation/senior-inheritance-cleanup_mv.webp);
    background-repeat: no-repeat;
    background-size: 800% auto;  /* 幅を8倍 */
    width: 100%;
    height: 0;
    padding-bottom: 133.684%; /* レスポンシブ対応 */
    animation: senior_anime 6s steps(7) infinite;
} 

@keyframes senior_anime {  
    0% { background-position: 0 0%; }
    80% { background-position: 100% 0; } /* 左へ7コマ分移動 */
    100% { background-position: 100% 0; } /* 左へ7コマ分移動 */
}  


#buy_about_img.About_Img {
    background-image: url(../img/animation/buy_mv.webp);
    background-repeat: no-repeat;
    background-size: 400% auto;  /* 幅を4倍 */
    width: 100%;
    height: 0;
    padding-bottom: 82.47%; /* レスポンシブ対応 */
    animation: buy_anime 5s steps(1) forwards infinite;
} 

@keyframes buy_anime {  
    0% { background-position: 0 0%; }
    15% { background-position: 33.3333333% 0; }
    30% { background-position: 66.6666666% 0; }
    45% { background-position: 100% 0; }
    100% { background-position: 100% 0; } /* ループのカクつき防止 */
}  


/* MainVisual */
.Hero_Img{
    bottom: -3%;
    top: inherit;
    background-image: url(../img/animation/hero_sp.webp);
    background-repeat: no-repeat;
    background-size: 200% auto;  /* 幅を4倍 */
    width: 90%;
    height: calc(100% - 120px);
    padding-left: calc(80% - 120px); /* レスポンシブ対応 */
    max-width: 80%;
    animation: mv_anime 4s steps(2) forwards infinite;
}

@media screen and (width > 767px) {
	.Hero_Img{
        width: 50%;
        height: calc(100% - 120px);
        padding-left: calc(80% - 120px); /* レスポンシブ対応 */
        max-width: 50%;
    }
}

@media screen and (width > 1030px) {
	.Hero_Img{
        background-image: url(../img/animation/hero_pc.webp);
        max-width: 50%;
        width: 100%;
        height: 0;
        padding-bottom: 38%;
        padding-left: 0; /* レスポンシブ対応 */
    }
}



@keyframes mv_anime {  
    0% { background-position: 0 0%; }
    100% { background-position: 200% 0; }
} 

.Hero_Catchphrase{
    overflow: hidden;
}
.Hero_Catchphrase > span{
    display: inline-block;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-right: -2%;
}

  .Hero_Catchphrase.-visible span {
    opacity: 1;
    transform: scale(1);
  }
  
  .Hero_Catchphrase span:nth-of-type(2) {
    transition-delay: 0.06s;
  }
  .Hero_Catchphrase span:nth-of-type(3) {
    transition-delay: 0.12s;
  }
  .Hero_Catchphrase span:nth-of-type(4) {
    transition-delay: 0.18s;
  }
  .Hero_Catchphrase span:nth-of-type(5) {
    transition-delay: 0.24s;
  }
  .Hero_Catchphrase span:nth-of-type(6) {
    transition-delay: 0.30s;
  }
  .Hero_Catchphrase span:nth-of-type(7) {
    transition-delay: 0.36s;
  }
  .Hero_Catchphrase span:nth-of-type(8) {
    transition-delay: 0.42s;
  }
  .Hero_Catchphrase span:nth-of-type(9) {
    transition-delay: 0.48s;
  }
  .Hero_Catchphrase span:nth-of-type(10) {
    transition-delay: 0.54s;
  }
  .Hero_Catchphrase span:nth-of-type(11) {
    transition-delay: 0.6s;
  }
  .Hero_Catchphrase span:nth-of-type(12) {
    transition-delay: 0.66s;
  }
  .Hero_Catchphrase span:nth-of-type(13) {
    transition-delay: 0.72s;
  }
  .Hero_Catchphrase span:nth-of-type(14) {
    transition-delay: 0.78s;
  }
  .Hero_Catchphrase span:nth-of-type(15) {
    transition-delay: 0.84s;
  }




/* ============

リンクhover時

============ */

.Header_Nav > ul > li > a{
  transition: 0.4s all;
}

.Header_Nav > ul > li > a:hover{
  color: var(--f_main-deep);
}

.Header_Mega_Btn{
  transition: 0.4s all;
}

.Header_Mega_Btn:hover{
  color: var(--f_main-deep);
}

.Header_MegaMenu_Item > a{
    transition: 0.4s all;
}

.Header_MegaMenu_Item > a:hover{
  border-bottom: solid 2px var(--f_main);
}

.Buyback_Btn{
  transition: 0.4s all;
}

.Buyback_Btn:hover{
  background-color: var(--f_main);
}

.Contact_Item {
  transition: 0.4s all;
}

.Contact_Item:hover{
  transform: translateY(4px);
}

.Footer_Grid a{
  transition: 0.4s;
}

.Footer_Grid a:hover{
  color: var(--f_blue);
}

.Footer_Tel_Link{
  transition: 0.4s all;
}

.Footer_Tel_Link:hover{
  color: var(--f_blue);
  font-weight: 900;
}

.SnsIcon{
  transition: 0.4s all;
}

.SnsIcon:hover{
  transform: translateY(2px);
}

.Top_Service_Info_More{
  transition: 0.4s all;
}

.Top_Service_Info_More:hover{
  border-bottom: 2px solid var(--f_main);
}

.Rate_Rank_Card {
  transition: 0.4s all;
}

.Rate_Rank_Card:hover{
  transform: translateY(4px);
}

.Border_Main_Btn:focus::after{
  background-image: url(../img/icon/arrow-short-wh.svg);
}

.js_swiper_flow_btnPrev.Square_Btn_Arrow:not(.swiper-button-disabled),
.js_swiper_flow_btnNext.Square_Btn_Arrow:not(.swiper-button-disabled) {
  transition: 0.4s all;
}

.js_swiper_flow_btnPrev.Square_Btn_Arrow:not(.swiper-button-disabled):hover,
.js_swiper_flow_btnNext.Square_Btn_Arrow:not(.swiper-button-disabled):hover {
  background-color: var(--f_main-deep);
}

.js_swiper_flow_btnPrev.Square_Btn_Arrow:not(.swiper-button-disabled)::after,
.js_swiper_flow_btnNext.Square_Btn_Arrow:not(.swiper-button-disabled)::after {
  transition: 0.4s all;
}

.js_swiper_flow_btnPrev.Square_Btn_Arrow:not(.swiper-button-disabled):hover::after,
.js_swiper_flow_btnNext.Square_Btn_Arrow:not(.swiper-button-disabled):hover::after {
  background-image: url(../img/icon/arrow-short-wh.svg);
}


.MediaInfo_Btn.Square_Btn,
.Recruit_Btn.Square_Btn{
  transition: 0.4s all;
}

.MediaInfo_Btn.Square_Btn:hover,
.Recruit_Btn.Square_Btn:hover{
  transform: translateY(4px);
}

.Drawer_Buyback_List .Buyback_Btn.Horizontal.Md_S:before{
  border-radius: 20px;
}

.Rate_Card{
  transition: 0.4s all;
}

.Rate_Card:hover{
  transform: translateY(4px);
  border: solid 1px var(--f_main-deep);
}

.Shop_Card .Map_Btn{
  transition: 0.4s all;
}

.Shop_Card .Map_Btn:hover{
  transform: translateY(2px);
}