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

common

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

html{
    scroll-behavior: smooth;
}

.body-background{
      background-image:repeating-linear-gradient( 90deg, rgba(0,0,0,0.04) , rgba(0,0,0,0.04) 1px, transparent 1px, transparent 32px),repeating-linear-gradient( 0deg, rgba(0,0,0,0.04) , rgba(0,0,0,0.04) 1px, #fff 1px, #fff 32px);
    }

p,li,dd,a.h2,h3,dt,dd{
    line-height: 1.9;
    letter-spacing: .04em;
    font-weight: 500;
}

p,li,dd,a,dt,dd{
  font-size: 14px;
}

:root{
    --margin: clamp(5rem, 3.571rem + 7.14vw, 9.375rem);/* 80px-150px */
    --margin00: clamp(2.125rem, 1.609rem + 3.3vw, 4.5rem);/* 36px-72px */
    --margin01: 60px;
    --margin02: clamp(3.5rem, 3.352rem + 0.74vw, 4rem);/* 56px-64px */
    --margin03: clamp(1.75rem, 1.602rem + 0.74vw, 2.25rem);/* 28px-38px */
    --margin04: clamp(1.5rem, 1.352rem + 0.74vw, 2rem);/* 24px-32px */
    --margin05: 24px;
    --margin06: clamp(0.5rem, 0.391rem + 0.7vw, 1rem); /* 8px-16px */


    --red:#d10f1a;
    --deep-red:#8f1319;
    --black: #231815;
    --gray:#ccc;

    --pink:#ff807f;
    --orange:#fb9850;
    --green: #449a5c;

    --pink-op:rgba(244,134,140,0.8);
    --yellow:rgba(252,255,173,0.8);
    --navy:rgba(24,42,82,0.8);
    --blue:rgba(132,168,216,0.8);

    --font-a:150px;
    --font-b:clamp(2.25rem, 1.435rem + 4.07vw, 5rem); /* 36px-80px */
    --font-c:clamp(1.5rem, 0.907rem + 2.96vw, 3.5rem);/* 24px-56px */
    --font-d:clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/* 20px-28px */
    --font-e:clamp(0.875rem, 0.838rem + 0.19vw, 1rem);/* 14px-16px */
    --font-f:14px;
    --font-g:12px;
    --font-h:clamp(1.125rem, 0.94rem + 0.93vw, 1.75rem);/* 18px-28px */
    --font-i:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);/* 16px-18px */
}


html{
    color: var(--black);
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;;
}

.en-text{
    font-family: "Josefin Sans", sans-serif;
}

.font-500{
    font-weight: 500;
    letter-spacing: .1em;
}

.wrap{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
            padding: 0 var(--margin01);
}

.sp,.sp640
{
    display: none!important;
}

h1{
    margin: 0;
}




.small-arrow{
    font-size: 70%;
}

.footer-box ul li a,
.footer-list h2 a{
    display: flex;
    align-items: center;
    font-size: var(--font-g)!important;
}

.footer-box:first-child{
    width: 30%;
}


.footer-list h2{
        padding-bottom: 10%;
        font-size: var(--font-g)
}

.footer-middle-list ul{
      padding-left: 10px;

}

.footer-list img{
    width: 60%;
}

.footer-address,
.footer-prpl{
    font-size: 80%;
    line-height: 1.8em;
}

.footer-logo img{
    width: 100%;
}

.footer-others{
    display: flex;
}

.footer-others a:first-child{
    position: relative;
    padding-right: 16px;
}

.footer-others a:first-child::after{
    content: "|";
    position: absolute;
    right: 6px;
}

.h2-sub-title{
    font-size:12px;
    color: var(--gray);
    display: inline-block;
    padding: 0 16px;
}


.title-h2{
    font-size: var(--font-d);
    font-weight: bold;
    display: flex;
    align-items: center;
}


.box{
   padding: clamp(3.75rem, 3.125rem + 3.57vw, 6.25rem) 0;
   max-width: 1920px;
   margin: 0 auto;
}


.title-accent{
    background: var(--red);
    width: 20px;
    height: 3px;
    display: block;
    margin-right: .5em;
}

.link-icon{
    background: url(../img/link_icon.png) no-repeat center / cover;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 6px;
}


.sub-link-item .link-icon,
.drop-menu__link:hover .link-icon,
footer .link-icon,
#overlay-menu .drop-menu__link .link-icon{
        background: url(../img/link_icon_w.png) no-repeat center / cover;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 6px;
    transition: .3s;
}


footer .link-icon{

    width: 10px;
    height: 10px;
}

.sub-link-item:hover .link-icon,
.drop-menu__link .link-icon
{
       background: url(../img/link_icon.png) no-repeat center / cover;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 6px;
    transition: .3s;
}


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

header

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

.head-logo{
    display: flex;
    align-items: center;
    width: 30%;
}

.header-wrap{
    width: 100%;
    margin: 0 auto;
    padding: 0;
    padding-left: 72px;
}

.logo-box {
    width: 60%;
}

.logo-box a{
    width: var(--margin01);
    display: flex;
    align-items: center;
    width: 100%;
}

.logo-box img{
    width: 150px;
    display: inline-block;
}

.header-accent{
    color: var(--red);
    font-size: 12px;
    top: 0.2em;
    left: 0px;
}


.menu__item:nth-child(2n) .header-accent{
    color: var(--orange);
    font-size: 12px;
    top: 0.2em;
    left: 0px;
}


.menu__item:last-child .header-accent{
    color: var(--green);
    font-size: 12px;
    top: 0.2em;
    left: 0px;
}







.navwrap__sp {
    display: none;
}

.spfooter{
    width:100%;
    margin:0 auto;
}


.splist{
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.spnavbtn{
    margin-bottom: var(--margin01);
}


header{
    width: 100%;
    height: auto;
    padding: var(--margin06) 0;
    position: fixed;
    z-index: 80000;
    background-color: transparent;
    transition: all .5s, color .5s;
    background: rgba(255,255,255,0.9);
    box-shadow: 0px 0px 20px -6px #cfcfcf;
}



header:hover{
    background: #fff;
    transition: .5s;
    box-shadow: 0px 0px 20px -6px #cfcfcf;
    border-radius: 0px;
}

.pc-nav{
    display: flex;
}

.head-menu{
    width: 70%;
    align-items: flex-end;
    justify-content: center;
}



.head-menubottom{
    display:flex;
    justify-items: end;
    font-size: 90%;
}

.menu{
    display: flex;
}

    .menu__item {
    position: relative;
    margin-right: var(--margin02);
    font-size: 80%;
    }

    .menu__item:last-child {
        margin-right: 0;
    }

    .menu__item a {
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    display: block;
    position: relative;
    }


      .drop-menu {
        position: absolute;
        width: 300px;
        background: #fff;
        top: 60px;
        opacity: 0;
        visibility: hidden;
        transition: 0.2s;
        box-shadow: 0px 0px 20px -6px #cfcfcf;
        font-size: var(--font-f);
      }

      .mil .drop-menu{   
        right: 0;
      }


      .menu__item:hover ul {
        opacity: 1;
        visibility: visible;
      }


      .menu__item li a:hover {
        background: var(--red);
      }

      .menu__item:hover ul,
      .menu__item ul.focused {
        opacity: 1;
        visibility: visible;
      }



    .drop-menu__link{
    padding: var(--margin04);
    overflow: hidden;
    transition: text-shadow 0.6s .3s;
    display: block;
    }

    .drop-menu__link:hover {
        color: #fff;
    }


    .menu__item a {
        position: relative;
        }

        .menu__item::before {
        background: var(--red);
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: transform .3s;
        }


        .menu__item:hover::before {
        transform-origin: center top;
        transform: scale(1, 1);
        }


.fixed-contact{
    padding: 20px 30px;
    background: var(--red);
    color: #fff;
    order: 3;
    margin: -16px 0;
    transition: .3s all ease-out;
}

.fixed-contact:hover{
    opacity: .5;
}



.fixed-cta-box{
    display:flex;
    justify-content: center;
    align-items:center;
}

.fixed-cta-box img{
    width: 25%;
    display: block;
    padding: 10px 0;
    margin-right: 10px;
}


.fixed-cta-box p{
    font-size: 90%;
    line-height: 1.4;
}



.nav-overlay__list li{
    line-height: 1;
}

.head-menu{
    display: flex;
    flex-direction: column;
}


.head-menu-top{
    width:100%
}

.head-tell-box{
    display:flex;
    width: 100%;
    align-items: center;
    justify-content: end;
    transition: .3s all ease-in;
}

.head-tell-box:hover{
    opacity: .5;
}



.top-tell-number{
    width: 306px;
    font-size: 36px;
    font-weight: bold;
    text-align: end;
    background: url(../img/icon_tel.png) no-repeat left / 36px;
    margin-left: 1em;
}

.head-ex-text{
    background: #fff;
    color: var(--red);
    border: 1px solid var(--red);
    padding: 4px 16px;
    font-size:80%
}




.head-menubottom,
.head-menubottom{
        width: 100%;
    justify-content: right;
    padding-right: 3%;
}


.pc-nav,
.pc-nav{
align-items: center;
}




@media screen and (max-width:1200px){
    .head-logo,
    .head-logo{
       padding-left: 32px;
    }
}


@media screen and (max-width: 1000px) {
    .head-logo,
    .head-logo{
      padding-left: var(--margin03);
    }
}









main{
    padding-top: 160px;
}

.group-top-body main{
    padding-top: 0;
}


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

group-top

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


.gt-sp{
  display: none!important;
}

.gtop-header{
      width: 100%;
    height: auto;
    padding: var(--margin06) 0;
    position: fixed;
    z-index: 80000;
    background-color: transparent;
    transition: all .5s, color .5s;
    background: rgba(255,255,255,0.5)!important;
    box-shadow: none!important;
}


.group-top{
  width: 100%;
  position: relative;
  height: 100svh;
}

.group-bkvideo{
    width: 100%;
}

.group-top-contents{
    margin-top: -100px;
    position: relative;
    background: #fff;
}


.news-bk{
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 1px, #fff 1px, #fff 32px);
    width: 100%;
}



.group-top-body .menu__item:nth-child(2n)::before{  
    background: var(--orange);

}


.group-top-body .menu__item:nth-child(3n)::before{  
    background: var(--green);

}




.dotted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/overlay.webp);
    background-size: 3px 3px;
    width: 100%;
    height: 100vh;
}

.group-bkvideo,
.group-bkvideo video,
.dotted-overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

.group-bkvideo video{
    width: 100%;
    height: 100svh;
      -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}


.group-contents {
  position: relative; /* 背景の上に配置 */
  width: 100%;
}


.group-top-link{
    background: #9c0100;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding:20px 0;
     position: fixed;
    bottom: 0;
    z-index: 100000;
}


.gtop-list{
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}


.gtop-item{
  width: 100%;
}

.gtop-list li a{
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
    padding: 10px 12px 20px;
}

.gtop-ex{
  background: #9c0100;
  color: #fff;
  font-size: var(--font-i);
  padding:4px 1px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.gtop-text{
      font-size: 16px;
    font-weight: bold;
        line-height: 20px;
}



.gtop-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  position: relative;
  display: inline-block;
  padding-right: 20px; /* 矢印分の余白 */
}

/* 矢印 */
.gtop-text::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 0;
    height: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--red);

    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ★ aにホバーしたときだけ発火 */
.gtop-list li a:hover .gtop-text::after {
  transform: translate(8px, -50%);
  opacity: 0.6;
}

.group-top-body .recruit{
    margin-bottom: clamp(9.375rem, 7.353rem + 14.71vw, 25rem);
    margin-bottom: 150px;
}


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

top

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

#pg01 .top {
    height: 80svh;
}



.top{
    height: 100svh;
    transition-property: background-position;
    transition-duration: 1s;
    transition-delay: .01s;
    position: relative;
    overflow: hidden;
}

.top-img{
background: url(../img/top_img.png) no-repeat center / contain;
width: 60%;
height: 100svh;
    animation: circle-anime 5s ease-in-out infinite alternate;
}

.top::after{
    content: "AXIA TAX CO.";
    font-weight: bold;
    color: var(--gray);
    opacity: .2;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(6.25rem, 2.386rem + 19.32vw, 16.875rem);
    white-space: nowrap;

}



.top-box{
    width: 55%;
}

.cp-text{
    font-weight: 900;
    line-height: 1.4em;
}

.top-box .cp-text{
    color: var(--red);
}


  .js-split,
  .js-split span{
    font-size: clamp(2.5rem, 1.875rem + 1.56vw, 3.75rem);
  }


.top-box p{
    padding: 24px 1%;
    font-size: 16px!important;
}


.top-back-text{
    font-size: 150px;
    opacity: .03;
    bottom: -20px;
    left: 50%;
    transform: translateX(-35%);
    position: relative;
    font-weight: bold;
    z-index: -1;
}



.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  white-space: pre; /* 改行や空白を保持 */
}

.char.in {
  animation: fadeUp 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




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

news

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


.news-box{
    display: flex;
}


.news-row{
    display: flex;
    padding-bottom: 1em;
}

.news-right{
    width: 60%;
    margin-left: 1em;
}

.news-right a{
    
    border-bottom: 1px solid var(--gray);
}

.news-right a:not(:last-child){
    margin-bottom: var(--margin04) ;
}

/* .news-right a:not(:first-child){
    margin-top: calc(var(--margin04)*2);
} */

.news-date{
    width: 20%;
}

.news-row dd{
    width: 80%;
    padding-left: 1em;
    text-align: end;
}




.news-left{
    width: 40%;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
}



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

about

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


.about{
    position: relative;
  overflow: hidden;
  min-height: 100dvh; /* 常に画面いっぱいに見せる */
  display: flex;
  align-items: center; /* 中身を縦中央に */

}

.about-contents {
  position: relative;
  width: 100%;
}

.about-items{
    display: flex;
    padding: 100px 0;
}

.about-left{
    width: 40%;
    position: relative;
}


.about-title{
    position: relative;
    z-index: 2;
    color: #fff;
}

.title-bk{
    font-size: clamp(3.75rem, 2.813rem + 5.36vw, 7.5rem);
    color: #fff;
    opacity: .3;
    position: absolute;
    top: 50%;
    z-index: 1;
    font-weight: bold;
    left: 50%;
    transform: translate(-50%, -50%);
}


.about-left .title-bk{
    font-size: clamp(3.75rem, 2.813rem + 5.36vw, 7.5rem);
    color: #fff;
    opacity: .3;
    position: absolute;
    top: -100px;
    z-index: 1;
    font-weight: bold;
    left: 0!important;
    transform: translate(0, 0);
}





.about-right{
    width: 60%;
}

.about-right p{
    padding: 16% 0;
    color: #fff;
    font-size: 16px!important;
}

.about-btn{
    justify-self: flex-end;
}

.about-bkvideo{
    width: 100%;
}

.about-bkvideo video{
    width: 100%;
    height: 100vh;
        height: 100svh;
      -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.dotted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/overlay.webp);
    background-size: 3px 3px;
    width: 100%;
    height: 100vh;
}

.about-bkvideo,
.about-bkvideo video,
.dotted-overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-contents {
  position: relative; /* 背景の上に配置 */
  width: 100%;
}



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

service

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


.service{
        overflow: hidden;
        padding-bottom:15%
    }


.service-title-box{
    position: relative;
    padding: 100px 0;
}

.service-title{
    justify-content: center;
    flex-direction: column;
}

.service-btn{
    width: 100%!important;
}

.service-bk{
    font-size: clamp(1.875rem, -0.156rem + 11.61vw, 10rem);
    color: var(--red);
    opacity: .2;
    position: absolute;
    top: 50%;
    z-index: 1;
    font-weight: bold;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.ta-btm{
    margin: .5em 0 0;
}



.service-item{
      padding: 50px 150px;
      box-sizing: border-box;
}

.service-detail{
    display: flex;
    
}

.service-right{
    background: url(../img/service-illust01.png) no-repeat center/ contain ;
    width: 50%;
    animation: service-img-anime 5s ease-in-out infinite alternate;
    transition: cubic-bezier(1.07, 0, -0.4, 0.87);
}
.sr02{
    background: url(../img/service-illust02.png) no-repeat center/ contain ;
}
.sr03{
    background: url(../img/service-illust03.png) no-repeat center/ contain ;
}
.sr04{
    background: url(../img/service-illust04.png) no-repeat center/ contain ;
}
.sr05{
    background: url(../img/service-illust05.png) no-repeat center/ contain ;
}
.sr06{
    background: url(../img/service-illust06.png) no-repeat center/ contain ;
}
.sr07{
    background: url(../img/service-illust07.png) no-repeat center/ contain ;
}
.sr08{
    background: url(../img/service-illust08.png) no-repeat center/ contain ;
}
.sr09{
    background: url(../img/service-illust09.png) no-repeat center/ contain ;
}
.sr10{
    background: url(../img/service-illust10.png) no-repeat center/ contain ;
}
.sr11{
    background: url(../img/service-illust11.png) no-repeat center/ contain ;
}
.sr12{
    background: url(../img/service-illust12.png) no-repeat center/ contain ;
}
.sr13{
    background: url(../img/service-illust13.png) no-repeat center/ contain ;
}


.index-sb01,.index-sb02{
  max-width: 1200px;
  margin: 0 auto;
}


.service-border{
    max-width: 1200px;
    width: 90%;
    background: var(--gray);
    height: 1px;
    margin: 0 auto;
}


.index-sb01{
  margin-bottom: 130px!important;
}

.index-sb02{
  margin-top: 60px!important;
}


@keyframes service-img-anime{
   0% {
    transform:translate(0, 0) ;
  }
  50% {
    transform:translate(0, -14px) ;
  }
  100% {
    transform:translate(0, 0) ;
  }
}

.service-left{
    width: 50%;
    padding-right: 3%;
}

.service-h3{
    color: var(--red);
    font-weight: bold;
    font-size: var(--font-h);
}

.service-left p{
    padding: 10% 0;
}


.slick-prev,
.slick-next {
  --size: clamp(3rem, 2.75rem + 1.43vw, 4rem);                /* 直径 */
  --accent: var(--red);        /* アニメ背景色 */
  --border: var(--red);        /* 枠線色 */
  --icon-move: 6px;            /* 矢印の移動量 */
  --easing: cubic-bezier(0.2, 0.7, 0, 1);

  position: absolute;
  top: 40%;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  transform: translateY(-50%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s var(--easing);
  z-index: 10;
}

/* 中央から広がる背景 */
.slick-prev::before,
.slick-next::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s var(--easing);
  z-index: -1;
}

/* 矢印アイコン */
.slick-prev::after,
.slick-next::after {
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  color: var(--red);
  transition: transform 0.35s var(--easing), color 0.3s var(--easing);
}

/* 右矢印 */
.slick-next::after {
  content: "➜";
    top: clamp(0.688rem, 0.234rem + 2.59vw, 2.5rem)px;
    position: absolute;
}

/* 左矢印(反転) */
.slick-prev::after {
  content: "➜";
  top: clamp(0.688rem, 0.234rem + 2.59vw, 2.5rem)px;
    position: absolute;
  display: inline-block;
  transform: scaleX(-1)!important;
}

/* hover/focus 時のアニメーション */
.slick-prev:hover::before,
.slick-next:hover::before,
.slick-prev:focus-visible::before,
.slick-next:focus-visible::before {
  transform: scale(1);
}

.slick-prev:hover::after,
.slick-next:hover::after,
.slick-prev:focus-visible::after,
.slick-next:focus-visible::after {
  transform: translateX(var(--icon-move));
  color: #fff; /* 背景上で見やすく白に */
}


.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus-visible,
.slick-next:focus-visible {
  border-color: transparent;
}

/* 配置 */
.slick-prev {
  left: 3%;
}
.slick-next {
  right: 3%;
}

/* 無効状態は非表示 */
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  visibility: hidden;
}

.slick-dots li button:before,
.slick-dots li.slick-active button:before{
  font-size: 24px;
}

.slick-dots{
      bottom: -45px;
}

/* ===========追加========= */
/* =======================
   Slick Dots 共通スタイル
======================= */
.slick-dots {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;           /* 折り返し対応 */
  gap: 8px;                  /* ボタン間の間隔 */
  margin: 20px 0 0;
  padding: 0 50px;
  list-style: none;
  position: static !important;
  transform: none !important;
}

.slick-dots li {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0;
  opacity: 1 !important;
  overflow: visible !important;
}

.slick-dots li button {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 20px !important;
  padding: 20px;
  background: var(--gray);
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 0;
  white-space: nowrap;
  opacity: 1 !important;
  overflow: visible !important;
}

/* デフォルトの黒丸を削除 */
.slick-dots li button:before {
  content: none !important;
}

/* active と hover のスタイル */
.slick-dots .slick-active button,
.slick-dots button:hover {
  color: #fff !important;
  font-weight: bold;
  border-bottom: none !important;
  background: var(--deep-red) !important;
}


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

other

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



.other{
    position: relative;
    overflow: hidden;
}


.other::before{
    position: absolute;
    content: "OTHER";
    width: 100%;
    height: 150px;
    left: 6%;
    top: -7%;
    display: block;
    color: var(--deep-red);
    font-size: 130px;
    font-weight: 400;
    opacity: .2;
}




.other-wrap{
    background: var(--red);
    border-radius: 0 10px 10px 0;
    margin-left: -1%;
    margin-right: 1%;

}


.other-box{
    margin-left: 1%;
    padding: 6% 0;
    position: relative;
}


.other-box::after{
    position: absolute;
    content: "";
    background: url(../img/other_icon.png) no-repeat center / contain;
    width: 150px;
    height: 150px;
    right: 0%;
    top: -6%;
    display: block;
}


.other-title
{
    color: #fff;
}

.white-accent{
    background: #fff;
}

.other-items{
    display:  flex;
    justify-content: center;
}


.other-text{
    width: 100%;
    padding: 30px 0;
}


.other-item-detail {
background: url(../img/other01.jpg) no-repeat center / cover;
position: relative;
overflow: hidden;
width: 100%;
height: auto;
}

.other-item-detail:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../img/other01.jpg) no-repeat center / cover;
transition: all .3s ease-out;
}

.other-item-detail:hover:after {
opacity: .8;
transform: scale(1.1);
}

.od02{
    margin-left: 6%;
    background: url(../img/other02.jpg) no-repeat center / cover;
}

.od02:after {
    background: url(../img/other02.jpg) no-repeat center / cover;
}

.od02:hover:after {
    background: url(../img/other02.jpg) no-repeat center / cover;
    transition: all .3s ease-out;
}


.other-item-detail:hover .btn-hover-anime::before {
  transform-origin: center left;
  transform: scaleX(1);
  color: var(--red);
}



.other-item-detail:hover .btn-hover-arrow span {
    transform: translateX(10px);
    color: var(--red);
}


.other-btn .btn-hover-arrow span{
    transform: translateX(-6px);
}



.other-item-detail dl{
    padding: 30px;
    display: flex;
    z-index: 2;
    position: relative;
    flex-direction: column;
}


.od-h3{
    font-size: 120%;
    font-weight: bold;
}

.od-sub{
    color: var(--red);
    font-size: var(--font-g);
}

.other-item-text{
    padding: 40px 0;
}


.od-arrow{
       margin-left: auto;
}

.other-btn{
    width: 10%!important;
}





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

recruit

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


.recruit{
    background: var(--gray);
    overflow: hidden;
    padding: 0!important;
}


.recruit-box{
    display: flex;
}

.recruit-text{
    padding: 30px 0;
}

.recruit-left{
    width: 30%;
}

.recruit-right{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4% 0;
    position: relative;
}

.recruit-right::before{
    position: absolute;
    content: "";
    background: url(../img/recruit_icon.png) no-repeat center / contain;
    width: 120px;
    height: 120px;
    right: 0;
    top: 4%;
    display: block;
}


.recruit-btn{
    width: 100%!important;
}


.slick-slide img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.recruit-right-box{
  background: #fff;
  height: 100%;
    padding: 30px;
        display: flex;
    flex-direction: column;
    justify-content: center;
}



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

contact

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


.contact{
    position: relative;
    overflow: hidden;
}

.contact a::before,
.contact a::after{
  pointer-events: none;
}

.contact a{
  position: relative;
}

.contact a::before{
    position: absolute;
    content: "";
    background: url(../img/contact-illust01.png) no-repeat center / contain;
    width: 100px;
    height: 100px;
    left: -2%;
    bottom: 0;
    display: block;
    z-index: 2;
}

.contact a::after{
    position: absolute;
    content: "";
    background: url(../img/contact-illust02.png) no-repeat center / contain;
    width: 80px;
    height: 80px;
    right: -1%;
    top: 0;
    display: block;
}

.contact-box{
    display: flex;
    background: var(--red);
    padding: 5%;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    width: 100%;
}


.contact-text{
    display: flex;
    width: 80%;
    justify-content: space-between;
    align-items: center;
}


.contact-box h2{
  position: relative;
    width: 30%;
    color: #fff;
    font-size: var(--font-h);
   font-weight: bold;
}

.contact h2::before{
    content: "CONTACT";
    color: #fff;
    opacity: .15;
    bottom: -310%;
    right: -330%;
    position: absolute;
    font-size: clamp(2.5rem, 0.781rem + 9.82vw, 9.375rem);
    font-weight: bold;
}

.contact-box p{
    width: 60%;
    color: #fff;
}


.contact-cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:  4% 0;
}




/* ========以下アニメーション====== */



      /* カスタムプロパティで色・サイズをまとめて調整 */
      .circle-hover {
        --size: clamp(3rem, 2.75rem + 1.43vw, 4rem); /* 直径 */
        --accent: #fff; /* アニメ背景色 */
        --border: #fff; /* 枠線色(文字色に追従) */
        --icon-move: 6px; /* 矢印の移動量 */
        --icon-move-prev: 6px;
        --easing: cubic-bezier(0.2, 0.7, 0, 1); /* 滑らかなイージング */

        position: relative;
        display: inline-grid;
        place-items: center;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        border: 2px solid var(--border);
        color: #fff; /* アイコン色/枠線色 */
        background: transparent;
        cursor: pointer;
        outline: none;
        overflow: hidden; /* 背景のはみ出しを隠す */
        isolation: isolate; /* ::before を重ねるため */
        transition: color 0.3s var(--easing), border-color 0.3s var(--easing);
      }

      /* 中央から広がる背景(初期は0スケール) */
      .circle-hover::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--accent);
        transform: scale(0);
        transform-origin: center;
        transition: transform 0.45s var(--easing);
        z-index: -1; /* アイコンより下 */
      }

      /* 矢印(テキストでもSVGでもOK) */
      .circle-hover__icon {
        font-size: calc(var(--size) * 0.42);
        line-height: 1;
        transform: translateX(0);
        transition: transform 0.35s var(--easing), color 0.3s var(--easing);
        will-change: transform;
      }

      /* ホバー/フォーカス時の挙動 */
      .circle-hover:hover::before,
      .circle-hover:focus-visible::before {
        transform: scale(1); /* 背景が中央から全体へ拡大 */
      }

      .circle-hover:hover .circle-hover__icon,
      .circle-hover:focus-visible .circle-hover__icon {
        transform: translateX(var(--icon-move)); /* 右へ少しスライド */
        color: var(--red); /* 背景上で見えるよう白に */
      }

      .circle-hover:hover,
      .circle-hover:focus-visible {
        border-color: transparent; /* 背景色と馴染ませる場合は消す */
        color: #fff;
      }


      .contact-cta:hover .circle-hover::before,
        .contact-cta:focus-visible .circle-hover::before {
        transform: scale(1);
        }

        .contact-cta:hover .circle-hover__icon,
        .contact-cta:focus-visible .circle-hover__icon {
        transform: translateX(var(--icon-move));
        color: var(--red);
        }

        .contact-cta:hover .circle-hover,
        .contact-cta:focus-visible .circle-hover {
        border-color: transparent;
        color: #fff;
        }




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

footer

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

footer{
    background: url(../img/footer_bklogo.svg) no-repeat right -20% bottom 64% / 90%, var(--black);
    color: #fff;
    padding:  var(--margin02) 0;
}

.pc .footer-list{
  padding-left: 16px;
  border-left: 1px solid var(--gray);
  margin-bottom: 30px;
}

.pc .f-footer-list {
  border-left: none;
}

 .pc .single-f-list h2{
    padding-bottom: 0;
 }



.footer-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-box{
    display: flex;
}



.footer-list h2{
    font-weight: bold;
}

.footer-list ul li{
    font-size: var(--font-g)!important;
    line-height: 1.9rem;
}

.footer-list ul li:hover,
.footer-list h2 a:hover,
.footer-others a:hover,
.footer-bottom-list a:hover{

  color: #3f3a39;
  transition: .2s;
}

.footer-list ul li:hover .link-icon{
    background: url(../img/link_icon.png) no-repeat center / cover;
}



.footer-list:not(:last-child){
    padding-bottom: var(--margin04);
}

.footer-overview{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.footer-bottom{
    text-align: center;
    padding-top: 48px;
    font-size: var(--font-g)!important;
}

.text-indent{
    display: block;
    width: 1em;
    height: auto;
}

.pc .footer-list:not(:last-child)

 {
    padding-bottom: 0;
 
}
/* =============================

sitemap

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


#sitemap-pg{
    padding: 150px 0;
}


   #sitemap-pg .sub-pg{
        padding: 150px 0 20%;
    }

#sitemap-pg .sub-top {
    position: relative;
    overflow: hidden;
    padding: 100px 0 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)), url(../img/service_back.png) no-repeat center / cover;
}

.sitemap-box .footer-box,
.sitemap-box .footer-contents{
 width: 100%;
}

.sitemap-box{
  padding: 4% 0;
}

.sitemap-box h2{
  color: var(--red);
}

.sub-top-title{
    display: flex;
    justify-content: space-between;
}

#sitemap-pg .h2-title{
    font-size: var(--font-d);
        display: flex;
    align-items: center;
    letter-spacing: .1em;
}

#sitemap-pg .h2-title-box{
    position: relative;
    width: 100%;
    top: -180px;
    right: 0;
}

#sitemap-pg .h2-title-accent{
    font-size: 160px;
    color: var(--gray);
    position: absolute;
    z-index: -1;
    right: 0;
    white-space: nowrap;
}

#sitemap-pg .h2-accent{
    font-size: var(--font-b);

}

#sitemap-pg .title-accent{
    display: inline-block;
}

#sitemap-pg .title-img{
    background: url(../img/page-top.png) no-repeat center / cover;
    width: 100%;
    height: 250px;
    margin: 36px 0;
    box-shadow: 0px 0px 20px -6px #cfcfcf;
}

#sitemap-pg .link-border{
     border-bottom: 1px solid var(--gray);
     padding: 4%;
}

#sitemap-pg .footer-box:nth-of-type(2){
  margin: 0 6%;
}

#sitemap-pg .footer-list:not(:last-child) {
    padding-bottom: var(--margin02);
}

#sitemap-pg  .footer-list a{
    display: block;
    position: relative;
  }


#sitemap-pg .footer-list a::after{
    position: absolute;
    content: ">";
    display: inline-block;
    right: 0;
    font-size: 80%;
}

#sitemap-pg .f-list02{
    padding-top: 10%;
    border-bottom: 1px solid var(--red);
    padding-bottom: 0!important;
}




@media screen and (max-width: 1200px){

.sitemap-box{
  flex-direction: row!important;
 
}

#sitemap-pg .f-list02{
        padding-bottom: 0;
                margin-bottom: 0;
}




#sitemap-pg .sitemap-pg{
    padding-bottom: var(--margin04)!important;
}


 #sitemap-pg .footer-list h2{
    padding-bottom: 10%!important;
 }


 #sitemap-pg  .footer-list:not(:last-child) {
        margin-bottom: var(--margin04)!important;
    }
}



@media screen and (max-width: 1000px){


.sitemap-box {
    flex-direction: column;
}

.sitemap-box section {
    width: 100%;
}

.sitemap-box > a{
 font-size:  var(--font-f)!important;
}
    #sitemap-pg .h2-title-accent {
        font-size: 90px;
                top: 100px;
    }

    #sitemap-pg .sub-top {
        padding-top: 0;

}
}

@media screen and (max-width: 800px){

.sitemap-box{
  flex-direction: column!important;
}

  #sitemap-pg .footer-box:nth-of-type(2){
  margin: 0;
}

  #sitemap-pg .footer-box{
  margin: 4% 0;
}

#sitemap-pg .link-border{
     border-bottom: 1px solid var(--gray);
     padding: 6%;
}

.sitemap-box{
  padding: 8% 0;
}

    #sitemap-pg .footer-list h2
 {
        padding-bottom: 4% !important;
    }

    #sitemap-pg .footer-list:not(:last-child) {
        margin-bottom: var(--margin01) !important;
    }

#sitemap-pg .footer-list{
        margin-bottom: var(--margin01) !important;

}




}

@media screen and (max-width: 640px){

       #sitemap-pg .h2-title-accent {
        top: 90px;
                font-size: 64px;
    }

     #sitemap-pg .sub-wrap {
    padding: 0 3%;
     }

     #sitemap-pg  .sub-top-title{
flex-direction: column;
    }

#sitemap-pg  .h2-title-sm {
        text-align: end;
    }



  #sitemap-pg .link-border{
            padding: 12% 6%;
  }

  /* #sitemap-pg .footer-list a {
    padding: 0 4%;



} */
}


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

animation

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





.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}








/* ========== 画像表示アニメーション ========== */



/* 共通スタイル */
.clip-img-wrapper {
  overflow: hidden;
  display: block;
}
.clip-img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: clip-path 0.6s cubic-bezier(.01, .79, .91, .97), transform 1.2s;
}

.clip-img-wrapper {
  overflow: hidden;
  display: block;
}
.clip-img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    clip-path 0.6s cubic-bezier(.01,.79,.91,.97),
    transform 1.2s;
  transition-delay: var(--delay, 0s);
}

/* 上から */
.clip-img-wrapper-top img {
  clip-path: inset(100% 0 0 0);
}
.clip-img-wrapper-top.show img {
  clip-path: inset(0% 0 0 0);
  transform: translateY(-6px);
}

/* 下から */
.clip-img-wrapper-bottom img {
  clip-path: inset(0 0 100% 0);
}
.clip-img-wrapper-bottom.show img {
  clip-path: inset(0% 0 0 0);
  transform: translateY(-6px);
}

/* 左から */
.clip-img-wrapper-left img {
  clip-path: inset(0 100% 0 0);
}
.clip-img-wrapper-left.show img {
  clip-path: inset(0% 0 0 0);
  transform: translateX(-6px);
}

/* 右から */
.clip-img-wrapper-right img {
  clip-path: inset(0 0 0 100%);
}
.clip-img-wrapper-right.show img {
  clip-path: inset(0 0 0 0);
  transform: translateX(6px);
}







/* ========== リンクアニメーション ========== */


.btn-hover-anime{
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: white;
  padding: 1em 2em;
  outline: none;
  border: none;
  background-color: var(--red);
  width: 50%;
  border: solid 1px var(--red);
  font-weight: bold;
}

.btn-hover-anime::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.25s ease-in-out;
}

.btn-hover-anime:hover {
  cursor: pointer;
  color: var(--red);
  border: solid 1px var(--red);
}

.btn-hover-anime:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}

.btn-hover-arrow{
   display: flex;
    justify-content: space-between;
}

.btn-hover-arrow span{
    transition: .5s;
}

.btn-hover-anime:hover .btn-hover-arrow span{
        transform: translateX(10px);
    color: var(--red);
}


.btn-hover-arrow:hover span{
    transform: translateX(10px);
    color: var(--red);
}




/* ========== 矢印アニメーション ========== */

.c-arrow-link {
  position: relative;
  padding-right: 40px;
  display: block;
}
.c-arrow-link--icon {
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: -1px;
    bottom: 0;
    width: 18px;
    margin: auto 0;
    line-height: 1;
    transform: translate(0, -50%);
}
.c-arrow-link--icon:before,
.c-arrow-link--icon:after {
  content: "➜";
  position: absolute;
  top: 0;
  right: 4px;
  animation-fill-mode: both;
  animation-duration: 0.6s;
  color: var(--red);
  font-weight:bold;
}
.c-arrow-link--icon:after {
  transform: translateX(-100%);
}
.c-arrow-link.is-hover .c-arrow-link--icon:before {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}
.c-arrow-link.is-hover .c-arrow-link--icon:after {
  animation-name: transformRightLeft;
}
.c-arrow-link.is-hover:hover .c-arrow-link--icon:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
.c-arrow-link.is-hover:hover .c-arrow-link--icon:after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}

@keyframes transformLeftRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(130%);
  }
}