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

common

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

.sub-pg{
     padding-bottom: 10%;
}


.bread-crumb{
    padding-top: 5vh;
    display: flex;
    writing-mode:vertical-lr;
    margin: 0 3%;
}

.bread-crumb li{
    position: relative;
}

.bread-crumb li:not(:last-child)::after{
    content: ">";
    color: var(--black);
    font-size: var(--font-e);
    padding: var(--margin06) 0 ;
}


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

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

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

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

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

}

.title-accent{
    display: inline-block;
}

.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;
}



.sub-pg-nav ul{
    display: flex;
    justify-content: space-between;
}


.sub-pg-nav ul li{
    position: relative;
    width: 100%;
    text-align: center;
}

.sub-pg-nav ul li::before{
    content: "|";
    position: absolute;
    left: 0;
    
}


.sub-pg-nav ul li:last-child:after{
    content: "|";
    position: absolute;
    right: 0;
    top: 0;
    
}


.sub-pg-nav ul li a{
    width: 100%;
    display: block;
}


.sub-menu-arrow{
    transform: rotate(90deg);
    color: var(--red);
    display: inline-block;
    padding: 0 10px;
    
}

.section-img-box{
    background:url(../img/service01_img01.jpg) no-repeat center / cover;
    width:100%;
    height: 300px;
        margin-bottom: 56px;
}

@media screen and (max-width:1200px){
    #pg02 .nav-overlay,
    #pg02-ct .nav-overlay{
        background: var(--orange);
    }
    #pg03 .nav-overlay,
    #pg03-ct .nav-overlay{
    background: var(--green);
    }
}


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

    .js-split, .js-split span{
  font-size: clamp(1.75rem, 1.295rem + 2.27vw, 3rem)!important;
  line-height: 1.3em!important;
}


    .sub-pg-nav ul{
        flex-wrap: wrap;
        }
    .sub-pg-nav ul li{
        width: 50%;
                padding: 4%;
    }

.sub-pg-nav ul li::before,
.sub-pg-nav ul li:last-child:after{
    display: none;
}

.sub-pg-nav ul li:nth-child(2n)after{
   content: "|";
    position: absolute;
    left: 0;
}

.h2-title-accent{
    font-size: 90px;
}

.h2-title-accent{
    top: 100px;
}

}


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

.sp-br{
    display: block;
}

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

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

.h2-title-accent{
    font-size: 64px;
}


.top-contents{
    flex-direction: column;
}

}








.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;
}


.text-right{
    text-align: right;
    padding-top: 10%;
    display: block;
}

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


.h2-box{
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gray);
    width: 100%;
    margin: 0 auto 3%;
    letter-spacing: .1em;
}

.h2-box h2{
    display: flex;
    color: var(--red);
    font-size: var(--font-h);
    font-weight: bold;
    align-items: center;
}

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


.h3-title {
  position: relative;
  padding: 10px 0;
  border-bottom: 2px solid var(--gray);
  margin-bottom: 6%;
  color: var(--red);
  font-weight: bold;
}

.h3-title:before {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 20%;
    height: 2px;
    content: '';
    background: var(--red);
}


.h4-title{
    color: var(--red);
    font-weight: bold;
    font-size: var(--font-e);
    padding-bottom: 24px;
}

.right{
    display: block;
    text-align: right;
}

.style-none{
    padding-left: 0!important;
}

.style-none::before{
    content: ""!important;
}

.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;
}

.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;
}




.link-border{
     border-bottom: 1px solid var(--gray);
}




/* ============table========== */


.table-box{
    width: 100%;
}

.table-box table{
    min-width: 500px;
    width: 100%;
}

.table-box table th{
    background: #efefef;
    width: 30%;
}

.table-box table th,
.table-box table td{
    padding: 3%;
    border: 1px solid #fff;

}

.table-box table td{
     border: 1px solid var(--gray);
         align-content: center;
}


.label{
    padding: 3px 28px 5px;
    color: #fff;
    font-weight: bold;
    font-size: var(--font-g);
    display: block;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}


.strategy-label{
    background: #ef4f4f;
}

.entry-label{
    background: #3447dc;
}




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

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

    #about-link-box .pg-link-box{
        flex-direction: column;
    }

    #about-link-box .btn_box{
        width: 100%;
    }



}


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

    .h2-box{
        margin: 0 auto 16%;
    }

    .h4-title{
        padding: 24px 0;
    }

    .bread-crumb{
        padding-top: 10vh;
    }

    .right{
        padding: 16px 0;
    }


    /* ================table================ */

    .table-box{
    overflow-x: scroll;
}

.label{
    width: 70%;
}
    
}




.sub-detail-box{
    display: flex;
}

.sub-detail-img
{
    width: 50%;
}



.sub-detail-img img{
    width: 100%;
}

.sub-detail-text
{
    width: 40%;
    margin-left: 10%;
}
    

.sub-detail-text h3{
    color: var(--blue);
    font-size: var(--font-d);
    padding-bottom: 10%;
}


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

    .sub-detail-box{
    flex-direction: column;
    align-items: center;
}

.sub-detail-img
{
    width: 70%;
}


.sub-detail-text
{
    width: 100%;
    margin-left: 0;
    margin-top: 6%;
    justify-items: center;
}

.sub-detail-text h3{
    padding: 3% 0;
}

}



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

parts

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





.message-text{
    width: 70%;
}



.sai02{
 margin-right: 0;
 margin-left: 3%;
}





.sub-article-box:not(:last-child){
    padding-bottom:4%;
}


.sub-article-right{
    flex-direction: row-reverse;
}


.sub-support-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.sub-support-items{
    display: block;
    width: calc(100% / 3);
}

.sub-support-items:nth-of-type(2){
    margin: 0 3%;
}

.sb-support-top{
    background: url(../img/icon_3.png) no-repeat center / contain;
    width: 100%;
    height: 200px;
}

.sb-support-top:nth-of-type(2){
    background: url(../img/icon_4.png) no-repeat center / contain;
}


.sb-support-top:nth-of-type(3){
    background: url(../img/icon_5.png) no-repeat center / contain;
}

.sb-support-bottom h3{
    font-size:var(--font-i);
    font-weight: bold;
    padding: 8% 0 4%;
    color: var(--red);
}


.sub-support-items02{
    border-bottom: 1px solid #fff;
}

.sub-support-items02{
    display: flex;
}



.sb-support-02{
    position: relative;
}

.sb-support-02::before {
    position: absolute;
    content: "";
    background: url(../img/icon_6.png) no-repeat center / contain;
    width: 100%;
    height: clamp(2.5rem, 1.389rem + 5.56vw, 6.25rem);
top: 0%;
    right: -40%;
}



.sb-support02-titlebox{
    display: flex;
    align-items: center;
}

.sb-suppor02-number{
    color: var(--red);
    font-size: var(--font-c);
    font-weight: bold;
    padding-right: 8%;
}


.sb-support-top02{
    background: #ededed;
    width: 50%;
    padding: 6%;
    align-content: center;
}

.sb-support-bottom02{
    width: 50%;
    padding: 6%;
}


#service-pg .sai01{
    background: url(../img/os_img01.png) no-repeat top 28% center / cover;
}

#service-pg .sai02{
    background: url(../img/os_img02.png) no-repeat top 28% center / cover;
}

.sub-support-items:nth-of-type(2) .sb-support-top{
    background: url(../img/icon_4.png) no-repeat center / contain;
}

.sub-support-items:nth-of-type(3) .sb-support-top{
    background: url(../img/icon_5.png) no-repeat center / contain;
}

#service-pg .h2-box h2{
display: inline;

}

#service-pg .h2-box h2 span{
font-size: var(--font-h)!important;
}




@media screen and (max-width:800px){
    .sub-support-box{
        flex-direction: column;
    }   

    .sub-support-items {
    justify-items: center;
}

    .sub-support-items:not(:last-child) {
    padding-bottom: 10%;
}

.sub-support-items02 {
    flex-direction: column;
}

.sb-support-top02,
.sb-support-bottom02{
    width: 100%;
    padding: 8% 6%;
}

.sub-support-items{
    display: block;
    width: 100%;
}

.sub-support-items:nth-of-type(2) {
    margin: 3% 0;
}

.sb-support-02::before{
    display: none;
}


}




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

.sub-article-img{
    margin: 0!important;
}

.message-text p{
 padding: 4% 0;   
}


}





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

service

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


#service-pg .title-img{
    background: url(../img/page-top-service.png) no-repeat center / cover;
}


.svc-img{
    background: url(../img/dummy.jpg) no-repeat center / cover!important;
}




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

service01

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

.initial-guidance .sib2{
    background: url(../img/service01_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service02

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


.manual-accounting .section-img-box{
    background: url(../img/service02_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.manual-accounting .sib2{
    background: url(../img/service2_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

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

service03

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


.dx-support .section-img-box{
    background: url(../img/service03_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.dx-support .sib2{
    background: url(../img/service03_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service04

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


.monthly-audit .section-img-box{
    background: url(../img/service04_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.monthly-audit .sib2{
    background: url(../img/service04_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}



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

service05

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


.document-attachment .section-img-box{
    background: url(../img/service05_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.document-attachment .sib2{
    background: url(../img/service05_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

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

service06

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


.sme .section-img-box{
    background: url(../img/service06_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.sme .sib2{
    background: url(../img/service06_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service07

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


.management-plan .section-img-box{
    background: url(../img/service07_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.management-plan .sib2{
    background: url(../img/service07_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.management-plan .sib3{
    background: url(../img/service07_img03.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

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

service08

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


.business-succession .section-img-box{
    background: url(../img/service08_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.business-succession .sib2{
    background: url(../img/service08_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.business-succession .sib3{
    background: url(../img/service07_img03.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service09

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


.tax-saving .section-img-box{
    background: url(../img/service09_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.tax-saving .sib2{
    background: url(../img/service09_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service10

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


.financing .section-img-box{
    background: url(../img/service10_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service11

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


.supp .section-img-box{
    background: url(../img/service11_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.supp .sib2{
    background: url(../img/service11_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

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

service12

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


.tax-ex .section-img-box{
    background: url(../img/service12_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.tax-ex  .sib2{
    background: url(../img/service12_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


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

service13

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


.restaurant .section-img-box{
    background: url(../img/service13_img01.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}

.restaurant .sib2{
    background: url(../img/service13_img02.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}


.restaurant  .sib3{
    background: url(../img/service13_img03.jpg) no-repeat center / cover;
    width: 100%;
    height: 300px;
}



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

welfare

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

#welfare-pg .title-img{
    background: url(../img/page-top-welfare.png) no-repeat center / cover;
}


.sub-link-list{
    display: flex;
    flex-wrap: wrap;
}

.sub-link-box{
    padding-bottom: 6%;
}

.sub-link-item{
    background: var(--red);
    color: #fff;
    width: 48%;
    transition: .3s;
    text-align: center;
    margin-bottom: 2%;
    align-content: space-evenly;
}

.sub-link-item a{
    display: block;
    padding: 6%;
}

.sub-link-item:nth-child(even){
    margin-left: 2%;
}

.sub-link-item:hover{
    background: #fff;
    color: var(--red);
}


.s-link{
    width: 100%;
    margin: 4% 0;
}

.welfare-mt{
    width: 100%;
}






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

.sub-link-list{
    flex-direction: column;
}

.sub-link-item{
    width: 100%;
    margin-bottom: 6%;
}


.sub-link-item a {
    padding: 8%;
}


.sub-link-item:nth-child(even){
    margin-left: 0;
}


}


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

useful

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


#useful-pg .title-img{
    background: url(../img/page-top-useful.png) no-repeat center / cover;
}






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

news

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

#news-pg .title-img{
    background: url(../img/page-top-news.png) no-repeat center / cover;
}



#news-pg .news-box{
    flex-direction: column;
}

.news-list{
    padding-bottom: 4%;
    border-bottom: 1px solid var(--gray);
    margin-bottom: 6%;
}

.news-list dl{
    display: flex;
}

.news-category{
    color: var(--red);
    font-weight: bold;
}


.news-category+h3{
        font-weight: bold;
}

.news-list dt{
    width: 40%;
}

.news-list dd{
    width: 60%;
    margin-left: 4%;
    margin-top: 25px;
}

.news-link {
    color: var(--red);
    border: 1px solid var(--red);
    width: 50%;
    display: block;
    position: relative;
    margin-top: 6%;
    margin-left: auto;
    display: block;
    padding: 10px;
}

.news-link::after {
    content:"→";
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
}


#news-pg .temp-table-bk{
    flex-direction: column;
}

#news-pg .temp-table-bk p{
    padding-bottom: var(--margin04);
    border-bottom: 1px solid var(--gray);
    width: 100%;
    margin-bottom: var(--margin04);
}

#news-pg .temp-merit-box{
    background: #f8f8f8;
}


#news-pg .contact{
   padding: 0;
}
#news-pg .contact-box{
    padding: 3% 5%;
}

#news-pg .contact .wrap{
   padding: 3%;
}

#news-pg .temp-table-bk{
    margin-bottom: 0;
    padding-bottom: 0;
}



@media screen and (max-width:1200px){
#news-pg .contact a::before{
    bottom: -40px;
}


#news-pg.contact a::after{
    top: -20px;
}

    #news-pg .contact .wrap {
        padding: 6% 3% 10%;
}

 #news-pg .contact a::after {
    top: -10px;
}

}


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

#news-pg .contact-text{
    flex-direction: column;
    width: 100%;
}


    #news-pg  .contact-box h2,
    #news-pg  .contact-box p
 {
        width: 100%;
    }

    #news-pg .contact a::before {
    height: 80px;
}

    #news-pg .contact a::after{
        height: 60px;
    }

}


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

    #news-pg .contact-text {
        flex-direction: column;
    }

    #news-pg  .contact-box h2,
    #news-pg  .contact-box p
 {
        width: 100%;
    }

      #news-pg   .contact-box h2 {
        padding: 4% 0;
    }

    #news-pg  .contact-box p{
      font-size: var(--font-g);
      padding-bottom: 8%;
 }
}

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


#news-pg .news-list{
    padding-bottom: 12%;
    margin-bottom: 12%;
}

#news-pg .news-list dl{
    flex-direction: column;
}


#news-pg .news-list dt{
    width: 100%;
}

#news-pg .news-list dd{
    width: 100%;
    margin-left: 2%;
    margin-top: 2%;
}

#news-pg .temp-table-bk p{

        padding: var(--margin04) 6%;
    }


   #news-pg  .contact a::after {
    top: -30px;
   }

       #news-pg .contact .wrap {
        padding: 20% 3%;
}

 #news-pg .contact a::after {
    top: -10px;
}


}


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

#news-pg .contact-box {
    padding: 5%;
}

.news-link{
  width: 100%;
}


}


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

recruit

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


#recruit-pg .title-img{
    background: url(../img/page-top-recruit.png) no-repeat center / cover;
}

#recruit-pg .sub-wrap{
    width: 100%;
}

.recruit-contents .sub-wrap{
    padding: 0;
}

.tab-1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-1 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: 2%;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    font-size: 90%;
    text-align: center;
    cursor: pointer;
}

.tab-1 > label:hover {
    opacity: .8;
}

.tab-1 input {
    display: none;
}

.tab-1 > div {
    display: none;
    width: 100%;
    padding: 8%;
    background-color: #fff;
}

.tab-1 label:has(:checked) {
    background-color: #fff;
    border-color: var(--red) #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-1 label:has(:checked) + div {
    display: block;
}





@media screen and (max-width: 1000px) {
    #recruit-pg .item-list-box dl {
        flex-direction: column;
    }

    #recruit-pg .item-list-box dd{
        width: 100%;
        padding-right:0;

    }
    .recruit-contents .sub-wrap{
    padding: 0;
}

}



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

compliance

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

#compliance-pg .sub-pg-title::after{
    content: "COMPLIANCE";
}

.column-screen{
    padding-bottom: 8%;
}

.column-screen-box{
    display: flex;
}

.side-nav{
    width: 30%;
}

.side-nav li a{
    display: flex;
    color: var(--blue);
}

.side-nav li a span{
    margin-left: auto;
}

.side-nav li:nth-child(even){
    padding: 6% 0;
}


.column-detail{
    padding-bottom: 6%;
    width: 100%;
    margin: 0 auto;
}

.column-text h4{
    color: var(--blue);
    padding: 2% 0;
    font-size: var(--font-h);
}

.column-text{
    padding-bottom: 4%;
}

.column-img{
    width: 100%;
    height: 30vh; 
    background: url(../img/dummy.png) no-repeat center / cover;
}


.column-box{
    display: flex;
    padding-bottom: 4%;
}


.column-sub p{
    padding: 4% 0;
    }

    .cd-flex{
        display: flex;
    }

    .cd-flex .column-text{
        padding-right: 4%;
    }


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


.column-detail {
    flex-direction: column;
    padding-bottom: 16%;
}

.column-text {
    padding-bottom: 8%;
}

.column-img {
    padding: 6% 0;
}

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

.column:first-child{
    padding-bottom:4%;
}

.column-sub p{
    padding: 12% 0;
    }

.column-text h4 {
    padding: 6% 0;
}

    .cd-flex{
       flex-direction: column;
    }

    .cd-flex .column-text{
        padding-right: 0;
    }
}



/* overview===================== */


.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 6% 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
#overview .slick-slide {
  margin: 0 5px;
}
#overview .slick-slide img {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: var(--blue);
}
#overview .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
#overview .thumb .slick-slide {
  cursor: pointer;
}
#overview .thumb .slick-slide:hover {
  opacity: .7;
}

.comapny-name{
    text-align: center;
    font-size: var(--font-g);
}

#overview .column-box{
    padding:  calc(5% + 16px)  0;
}


#overview .view-more-box{
    width: 100%;
    text-align: center;
}

#overview  .view-more-box .view-more{
    text-align: center;
}

    .accordion-box{
    padding: 3% 0px;
    }

.accordion-box .accordion-content {
  height: auto;
  padding: 3%;
  position: relative;
  cursor: pointer;
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}


.accordion-box .accordion-content::before {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background-color: var(--blue);
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
}

.accordion-box .accordion-content::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background-color: var(--blue);
  right: 15px;
  top: 50%;
  transform: translate(0, -50%) rotate(90deg);
}


.accordion-box .accordion-content.active::after{
  display: none;
}

.accordion-box .accordion-detail{
  height: auto;
  display: none;
  padding: 3%;
}

.accordion-detail{
    display: flex;
    font-size: var(--font-e);
}




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

    .accordion-box{
    padding: 6% 0px;
}

    .accordion-box .accordion-content {
        display:block;
    }


}


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

#overview .column-detail{
    margin-top: 0;
}
}


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

access

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


.access-detail-box{
    display: flex;
    justify-content: space-between;
    padding-bottom: 4%;
}
.access-detail{
    width: 45%;
}

.map-box{
    width: 100%!important;
}

.map-box iframe{
    width: 100%;
}

.access-dt-last{
    width: 100%;
    padding-bottom: 0!important;
}


.access-root{
    width: 100%;
}

.access-detail dt{
    background: #efefef;
    position: relative;
    padding-left: 8%;
    margin-bottom: 10px;
}

.access-dt-last dt{
     padding-left: 4%;
}

.access-detail dt:before {
    color: var(--red);
    content: "■";
    font-size: var(--font-i);
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}


.access-video{
    width: 100%;
}

.access-video iframe{
 width: 100%;
}

.access-video-p{
    margin: 3% 0;
}  

.tell-box{
    width: 100%;
    font-size: var(--font-c);
    font-weight: bold;
    padding:3%;
    color: #fff;
    display: block;
    text-align: center;
    display: block;
}

.tell-box span{

}

.pg-tel{
    background:  url(../img/icon_tel_w.png) no-repeat top 53% left 24%  / 6% , var(--red);
            padding-left: 1em;
}

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

    .access-detail-box{
        flex-direction: column;

    }
    .access-detail-box {
    padding-bottom: 0;
}

    .access-detail{
        width: 100%;
        padding-bottom: 16%;
    }

    .access-detail dt{
    padding-left: 3em;




}


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

.pg-tel{
    background: url(../img/icon_tel_w.png) no-repeat top 53% left 5% / 9%, var(--red);
}

}



/* career-model===================== */


.column-base{
    width: 100%;
}


.column-screen-box{
    display: flex;
}

.side-nav{
    width: 30%;
}

.side-nav li a{
    display: flex;
    color: var(--blue);
}

.side-nav li a span{
    margin-left: auto;
}

.side-nav li:nth-child(even){
    padding: 6% 0;
}



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

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

.side-nav {

        display: flex;
        width: 90%;
        margin: 0 auto;
        flex-wrap: wrap;
       margin-bottom: 6%;
}

.side-nav li{
    width: 45%;
    padding: 2% 0;
}

.side-nav li:nth-child(even) {
    padding: 2% 0;
    margin-left: 6%;
}

.side-nav li a span {
    margin-left: auto;
}


.model-prof-detail {
    flex-direction: column;
}

.model-prof-img {
    padding: 6% 0;
}

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

.model-box:first-child{
    padding-bottom:4%;
}

.career-model-bk::after{
    left: 50%;
    font-size: 100px;
    transform: translate(-50% , 0);
}

}


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


.side-nav {

    flex-direction: column;
    margin-bottom: 10%;
}

    .side-nav li:nth-child(even) {
        padding: 6% 0;
        margin-left: 0;
    }

    .side-nav li {
        width: 100%;
        padding: 2% 0;
    }

}







      .hover-link {
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 1% 0;
        margin-bottom: 6%;
      }

      .hover-link .arrow {
        display: inline-block;
        margin-left: 5px;
        transition: transform 0.3s ease, color 0.3s ease;
        color: var(--gray);
      }

      .hover-link::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background-color: var(--gray);
        z-index: 1;
      }


      .hover-link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        height: 1.5px;
        width: 100%;
        background-color: var(--blue);
        transform: scaleX(0);
        transform-origin: right; 
        transition: transform 0.4s ease, transform-origin 0s 0.4s; 
        z-index: 2;
      }

      
      .hover-link:hover::after {
        transform: scaleX(1);
        transform-origin: left;
        transition: transform 0.4s ease, transform-origin 0s; /* origin即時変更 */
      }

      .hover-link:hover {
        color: var(--blue);
      }

      .hover-link:hover .arrow {
        transform: translateX(5px);
        color: var(--blue);
      }




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


    .hover-link {
    margin-bottom: 12%;
    }


}


/* employee-benefits===================== */



.benefits-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding-bottom: 10%;
}

.benefits-content{
    width: 30%;
    text-align: center;
    padding:0 10%;
    border: 1px solid var(--blue);
    padding: 6%;
    margin: 3% 0;
}

.benefits-content dt{
    width: 80%;
    margin: 0 auto;
}

.benefits-content dt img{
    width: 60%;
}

.benefits-content dd h2{
    padding-top: 3%;
    color: var(--blue);
    font-size: var(--font-e);
    font-weight: bold;
}



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

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

    .benefits-content{
        width: 100%;
        padding: 10%;
    }

    .benefits-content dt img {
    width: 60%;
}

}


/* working-environment===================== */


.working-environment-img{
    background: url(../img/work-environment_01.jpg) no-repeat center / cover;
    width: 100%;
    height: 40vh;
    display: block;
    margin-bottom: 4%;
}


/* graduates===================== */


.item-list{
    width: 100%;
    margin: 0 auto;
}

.tab1 .item-list-box{
    padding: 10% 0;
}

.item-list-box dl{
    display: flex;
    padding: 5% 0;
    position: relative;
    border-bottom: 2px solid var(--gray);
}

.item-list-box dl:first-child{
    padding-top: 0;
}


.item-list-box dl:before {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 20%;
  height: 2px;
  content: '';
  background: var(--red);
}



.item-list-box dt{
    color: var(--red);
    font-size: var(--font-e);
    width: 40%;
    padding-right: 3%;
}



.item-list-box dd{
    width: 60%;
    padding-right: 2em;
}


.new-graduates-flow{
    padding: 10% 0;
}




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

.item-list-box dl{
    padding: 16% 0;
}

}






    .pagination-3 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 2%;
        list-style-type: none;
        padding: 3% 0;
        white-space: nowrap;
    }

    .pagination-3 a {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        height: 2em;
        border-bottom: 2px solid #f2f2f2;
        text-decoration: none;
    }

    .pagination-3 .current a {
        border-bottom: 2px solid var(--red);
    }


    .news-detail h3{
        font-size: var(--font-h);
        color: var(--blue);
        padding: 3% 0;
    }

    .pn-2 li:nth-child(even){
        padding: 6%;
    }


    .news-detail-box{
        width: 90%;
        margin: 0 auto;
    }









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

terms

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


#cookie-policy .sub-pg-title::after{
    content: "COOKIE POLICY";
}

#privacy-policy .sub-pg-title::after{
    content: "PRIVACY POLICY";
}

#user-agreement .sub-pg-title::after{
    content: "USER AGREEMENT";
}


.terms-content{
    padding: 4% 0;
}

.terms-content dt{
    color: var(--red);
    font-size: var(--font-h);
    padding-bottom:24px;

}

.terms-content dd{
    padding-left: 4%;
}

.terms-text{
    padding-bottom: 6%;
}



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

policy

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


.pc-br{
    display: block;
}


.policy-contents{
    display: flex;
    flex-direction: column;
}

.policy-box{
    width: 100%;
    background: var(--red);
    padding: 3%;
    position: relative;
    margin: 6% 0;
}

.policy-box::before{
position: absolute;
    content: "";
    background: url(../img/icon_2.png) no-repeat center / contain;
    width: 100%;
    height: clamp(2.5rem, 1.389rem + 5.56vw, 6.25rem);
    top: -1%;
    left: -38%;
}

.policy-box::after{
    position: absolute;
    content: "";
    background: url(../img/icon_1.png) no-repeat center / contain;
    width: 100%;
    height: clamp(2.5rem, 1.389rem + 5.56vw, 6.25rem);
    bottom: -1%;
    right: -40%;
}

.policy-box h2{
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding-bottom: 3%;
    letter-spacing: .1em;
    font-size: var(--font-h);
}

.policy-detail{
    background: #fff;
    padding: 6%;
        margin-bottom: 6%;
}

.policy-number{
    color: var(--red);
    font-weight: bold;
}

.policy-detail-box{
    display: flex;
}


.policy-detail-box ul{
    background: #efefef;
    padding: 4%;
    margin-top: 1em;
}

.policy-detail-box li{
    position: relative;
    padding-left: 2em;
}


.policy-detail-box li:not(:last-child){

    padding-bottom: 4%;
}

.policy-detail-box li:before {
    color: var(--red);
    content: "■";
    font-size: var(--font-i);
    position: absolute;
    top: -2px;
    left: 0;
}


.policy-box-text{
    width: 100%;
}

.policy-box-text p{
        font-weight: bold;
    font-size: 18px;
}


.policy-box-img{
    background: url(../img/office03.png) no-repeat center / cover;
    width: 30%;
    margin-left: 4%;
}


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

    .policy-detail{
        padding: 3%;
    }

    .policy-detail-box{
        flex-direction: column;
    }

    .policy-box-text {
    width: 100%;
    margin-bottom: 8%;
}

.policy-detail-box{
    padding: 3%;
    margin-top: 0;
}


    .policy-box-img {
    width: 100%;
    margin-left: 0;
    height: 200px;
}


.policy-box::after{
    bottom: -1%;
}

    .pc-br{
        display: inline;
    }
}


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


.column-detail {
    width: 100%;
}

    .policy-detail-box {
        padding: 6% 3%;
    }

    .policy-detail-box ul {
    padding: 10%;
}

.policy-box-text p{
        line-height: 1.2;
}

.table-box table th{
        width: 20%;
}

.policy-box-text p{
    font-size: 14px;
}

}





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

about

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


.sub-wrapper{
    display: flex;
    max-width: 1400px;
    justify-content: center;
    margin: 0 auto;
}

.section-box{
    
    overflow: hidden;
}

.message-sentences{
    padding: 3% 0;
}

.message-sentences .name-large{
    display: block;
    padding-top: 3%;
}



.section-contents{
    display: flex;
    align-items: start;
}

#service-pg .section-contents{
    flex-direction: column;
}

.section-separate{
    display: flex;
    gap: 50px;
}

.section-separate div{
    width: 100%;
}

.section-table{
    padding: 5% 0;
}

.section-table:last-child{
    padding-bottom: 0;
}

.message-contents{
    justify-content: space-between;
}

.message-left{
    width: 25%;
}

.message-img{
    background: url(../img/office01.jpg) no-repeat top 28% center / cover;
    width: 100%;
    height: 350px;
    margin-right: 3%;
}

.name-large{
    font-size: 24px;
}


.staff-img{
    background: url(../img/office02.jpg) no-repeat top / cover;
    width: 30%;
}

.section-list{
    width: 100%;
}

.section-list:first-child{
    margin-right: 4%;
}

.section-list li{
    position: relative;
    padding-left: 30px;
}

.section-list li:before {
  color: var(--red);
  content: "■";
  font-size: 12px;
  position: absolute;
  top: 0.2em;
  left: 0;
}

#about-pg .section-list li:before {
  color: var(--gray);
  content: "■";
  font-size: 12px;
  position: absolute;
  top: 0.2em;
  left: 0;
}
#about-pg .section-list .other-list:before {
  content: none!important;

}

#about-pg .section-list .other-list{
  text-align: right!important;
padding: 0 6% 6% 0!important;
}

#about-pg .section-list li{
           padding: 0 6% 6% 20px; 
}


.item-list-sub{
    background: #efefef;
}

.item-list-sub dl:before {
    display: none;
}


.item-list-sub li:before{
    background: #efefef;
}

.item-list-sub dt {
    padding-left: 2em;
    color: var(--black)!important;
}


#greeting .h3-title{
    font-size: var(--font-i);
    padding: 8% 0 3%;
}


.sub-article-img{
    background: url(../img/office03.png) no-repeat top 28% center / cover;
    width: 40%;
    height: 350px;
    margin-right: 3%;
    align-self: start;
}

#greeting .sai03{
   background:#ebebeb;
    width: 100%;
    margin-right: 0;
    position: relative;
    z-index: 1;
}

#greeting .sai03::after{
    
    content: "";
    position: absolute;
    width:100%;
    height: 90%;
    top: 5%;
    left: 0;
    background: url(../img/about_img.png) no-repeat  center / contain;;
}

.group-imgbk{
    background: var(--gray);
    width: 100%;
    margin-right: 0;
}



.greeting-last{
    flex-direction: column-reverse;
}

.greeting-last .sai03{
    flex-direction: column-reverse;

}


#philosophy .sai01{
    background: url(../img/manegement01.jpg) no-repeat top 28% center / cover;
}





.policy-box-img {
    background: url(../img/manegement03.png) no-repeat center / cover;
}


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

    .section-contents{
        flex-direction: column;
    }

    .section-separate{
        flex-direction: column;
        gap: 32px;
    }

    .section-table{
        padding: 16% 0;
    }

    .sub-article-img{
        width: 100%;
        
    }

    .message-text{
        width: 100%;
    }

    .message-left{
        width: 100%;
        padding-bottom: 8%;
    }

    .message-img{
        width: 100%;
        margin-right: 0;
        margin-bottom: 4%;
       
    }

    .greeting-last {
    flex-direction: column-reverse;
}
#about-pg .section-list .other-list{
  text-align: left!important;
}

#about-pg .section-list li{
           padding: 0 6% 6% 20px!important;
}

}

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

    .policy-box::before,
    .policy-box::after{
        display: none;
    }

}


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

welfare

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



.s-bast-img{
    width: 100%;
    background: url(../img/s-bast.jpg) no-repeat center / contain;
}


 .s-bast-text{
    width: 100%;
 }


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

feature

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



.feature-title{
    background: var(--red);
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 6px;
}

.feature-box{
    width: 100%;
}


.feature-content{
    display: flex;
    justify-content: space-between;
    padding: 3% 0;
}



.feature-head{
    width: 30%;
    display: flex;
    align-self: center;
    flex-direction: column;
    text-align: center;
}

.head-title{
    color: var(--red);
    font-size: var(--font-i);
    font-weight: bold;
}

.head-sub{
    font-size: var(--font-g);
}

.feature-body{
    width: 65%;
}


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

       .feature-content{
        flex-direction: column;
       } 
       .feature-box{
        padding: 6% 0;
       }
       .feature-head,
       .feature-body{
        width: 100%;
        text-align: left;
       }
       .feature-head{
        padding: 6% 0;
       }
}



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

welfare db

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


.h3-title+p{
    padding-bottom: 8%;
}

.sab-02{
    padding: 6% 0
}


.db-img{
    width: 100%;
    margin-right: 0;
    margin-bottom: 3%;
}

.db-img00{
     background: url(../img/syadb1_01.png) no-repeat left center / contain;
}


.db-img01{
     background: url(../img/syadb3_01.png) no-repeat center / contain;
}

.db-img02{
     background: url(../img/syadb3_02.png) no-repeat left center / contain;
}


.db-img03{
     background: url(../img/syadb3_03.png) no-repeat left center / contain;
}

.db-img04{
     background: url(../img/syadb4_01.png) no-repeat left center / contain;
}


.db-img05{
     background: url(../img/syadb4_02.png) no-repeat left center / contain;
}

.db-img06{
     background: url(../img/syadb4_03.png) no-repeat left center / contain;
}


.db-img07{
     background: url(../img/syadb4_04.png) no-repeat left center / contain;
}

.db-img08{
     background: url(../img/syadb4_05.png) no-repeat left center / contain;
}

.db-img09{
     background: url(../img/syadb4_06.png) no-repeat left center / contain;
}

.db-img10{
     background: url(../img/syadb5_01.png) no-repeat left center / contain;
}

.db-img11{
     background: url(../img/syadb5_02.png) no-repeat left center / contain;
}

.db-img12{
     background: url(../img/syadb6_01.png) no-repeat left center / contain;
}

.db-img13{
     background: url(../img/syadb6_02.png) no-repeat left center / contain;
}

.db-img14{
     background: url(../img/syadb7_01.png) no-repeat left center / contain;
}

.db-img15{
     background: url(../img/s-bast.jpg) no-repeat left center / contain;
}



.db-separate{
    display: flex;
    justify-content: space-between;
    padding-top: 6%;
}

.db-sep-box{
    flex-direction: column;
    width: 48%;
}

.db-sep-box .message-text,
.db-sep-box h4,
.db-sep-box p{
width: 100%;
}

.sub-article-box .message-text{
    width: 100%;
}


@media screen and (max-width:800px){
    .db-img{
        margin-right: 0;
        margin-bottom: 8%;
        background-position: center;
    }

    .db-separate{
        flex-direction: column;
    }

    .db-sep-box{
        width: 100%;
    }

    .sub-article-box:not(:last-child) {
    padding-bottom: 8%;
}
}



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

welfare fa4

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

.fx4-img{

}

.fx4-img00{
        background: url(../img/fx4cs1_01.png) no-repeat center / contain;
}

.fx4-img01{
        background: url(../img/fx4cs3_01.png) no-repeat center / contain;
}


.fx4-img02{
        background: url(../img/fx4cs3_02.png) no-repeat center / contain;
}

.fx4-img03{
        background: url(../img/fx4cs3_03.png) no-repeat center / contain;
}


.fx4-img04{
        background: url(../img/fx4cs3_04.png) no-repeat center / contain;
}


.fx4-img05{
        background: url(../img/fx4cs4_01.png) no-repeat center / contain;
}


.fx4-img06{
        background: url(../img/s-bast.jpg) no-repeat center / contain;
}


.fx4-img07{
        background: url(../img/fx4cs5_01.png) no-repeat center / contain;
}


.fx4-img08{
        background: url(../img/fx4cs5_02.png) no-repeat center / contain;
}


.fx4-img09{
        background: url(../img/fx4cs5_03.png) no-repeat center / contain;
}


.fx4-img10{
        background: url(../img/fx4cs5_04.png) no-repeat center / contain;
}


.fx4-img11{
        background: url(../img/fx4cs5_06.png) no-repeat center / contain;
}



@media screen and (max-width:800px){
    .fx4-img{
        margin-right: 0;
        margin-bottom: 8%;
    }
}



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

contact

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


.privacy-policy-box {
    width: 100%;
    height: 250px;
    border: 1px solid var(--gray);
    overflow-y: scroll;
    margin: 3% auto 7%;
}

.terms-content .pp{
    color: var(--black);
}

.terms-content .pp:before{
    display: none;
}

.block-indent{
    padding-left: 1em;
    display: block;
}

.terms-content{
    font-weight: 500;
}

.terms-extra{
    font-size: var(--font-g);
}


#contact-pg .sub-top{
    padding-bottom: 0;
}

.terms-box{
    padding: 6%;
}


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

form

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



    .form-box{
    border-radius: 10px;
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
  }
  

  #contact-pg input[type="text"],
  #contact-pg input[type="email"],
  #contact-pg input[type="tel"],
  #contact-pg textarea{
    width: 100%;
    background: #f4f4f4;
    padding: 4%;
  }

  select{
    width: 100%;
    border: 1px solid var(--gray);
    padding: 10px;
    cursor: pointer;
  }

  .select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "▼";
  color: var(--gray);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
}


  .form-table{
    width: 100%;
    margin-bottom: 2%;
  }
  
  .form-tr{
    width: 100%;
    display: flex;
    margin-bottom: 3%;
  line-height: 32px;
  }
  
  .form-tr > th,
  .form-tr > td{
    width: 100%;
    display: block;
  }
  
  .required{
    background: #ef4f4f;
    padding: 6px 16px;
    margin-right: 6%;
    color: #fff;
  }
  
  .optional{
    background: rgb(220, 220, 220);
    padding: 6px 16px;
    margin-right: 6%;
    color: #fff;
  }
  
  
  .submit-btn{
    text-align: center;
    padding: 3%;
    width: 50%;
    margin: 0 auto;
    display: block;
    background: var(--red);
    font-weight: bold;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: .1rem;
  }
  
  
  .privacy{
    width: 100%;
    height: 250px;
    overflow-y:scroll;
    background-color: #fff;
    margin-bottom: 8%;
    padding: 2% 6%;
  }
  
  .privacy-title{
    color: var(--green);
    font-weight: bold;
    text-align: center;
    padding-bottom: 2%;
  }
  
  .privacy p{
    padding-bottom: 2%;
  }
  
  .privacy dl{
   padding: 2% 1%;
  }
  
  .privacy dt{
    border-bottom: 1px solid #2222;
    padding-bottom: 1%;
  }
  
  .privacy dd{
    padding-bottom: 1%;
    padding-bottom: 2%;
  }
  
  .contact-ad{
    border: 1px solid;
    text-align: center;
    padding-top: 2%;
  }


  .check-content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   
    padding: 0 2% 2%;
  }

  .check-list{
    margin-bottom: 3%;
  }

  label[for] {
    cursor: pointer;
    margin-left: 4px;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: #fff;
    vertical-align: sub;
    font-weight: bold;
    position: relative;
}

input[type="checkbox"]:checked:before {
    position: absolute;
    top: 1px;
    left: 6px;
    transform: rotate(50deg);
    width: 8px;
    height: 13px;
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
    content: '';
  }

  input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    width: auto;
    height: auto;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.errMes{
    margin-bottom: 8%;
}

.errMes li{
    background: var(--red);
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
}




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


    .form-tr{
        flex-direction: column;
    }

    .form-tr:not(:last-child){
        margin-bottom: 12%;
    }

    .form-tr > th{
        padding-bottom: 4%;
    }

    .submit-btn {
        padding: 6%;
        width: 100%;
        font-size: var(--font-g);
    }

    #form-wrap{
        padding: 8% 0 0;
        width: 100%;
        margin: 0 auto;
    }

    .privacy {
        width: 100%;
        margin: 12% 0;
        padding: 2% 6%;
    }

 }


 @media screen and (max-width:640px){
    .errMes li{
    text-align: left;
}

}





  /* ===============confirm================== */


  .confirm-table{
   width: 90%;
    margin: 6% auto;
  }

  .confirm-text{
    text-align: center;
  }

.confirm-table tr{
    padding: 3% 0;
    display: block;
    border-bottom: 1px solid var(--gray);
    width: 100%;
    }
.confirm-table th{
    color: var(--red);
    width: 30%;
    display: inline-block;
    }

    .confirm-table td{
    width: 50%;
    display: inline-block;


    }


    .btn-box{
        display: flex;
        width: 50%;
        margin: 0 auto;
    }

    .confirm-submit-btn,
    .confirm-back-btn{
        background: var(--red);
        color: #fff;
        padding: 6%;
        width: 100%;
            text-align: center;
    }

    .confirm-back-btn{
        background: var(--gray);
        margin-left: 3%;
    }




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

        .confirm-table tr{
            display: flex;
            flex-direction: column;
        }

        
        .confirm-table th {
            width: 100%;
            padding-bottom: 3%;
        }

        .confirm-table td {
            width: 100%;
            padding-left: 0;
        }

        .confirm-table tr {
            padding: 6% 0;
        }

        .btn-box {
            display: flex;
            width: 90%;
            padding-top: 6%;
        }
    
}

  /* ===============error================== */


  .center{
    width: 100%;
    display: flex;
    justify-content: center;
  }

.error .confirm-back-btn{
    padding: 3%;
    width: 50%;
        margin: 0 auto;
}


@media screen and (max-width:1000px){
    .error .confirm-back-btn{
    padding: 6%;
}

}

@media screen and (max-width:640px){
    .error .confirm-back-btn{
    width: 100%;
}

}




  /* ===============thanks================== */


        .thanks-box{
            text-align: center;

        }

        .thanks-btn{
            background: var(--gray);
            color: #fff;
            padding: 2% 4%;
            display: inline-block;
            width: 30%;
            margin-top: 6%;
        }




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

faq

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




.faq-pg .question{
    color: var(--blue);
    padding: 12% 3%; }

.Q{
    padding-right: 3%;
    font-size: var(--font-h);
}


.answer{
    padding-left:10%;
}





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

sitemap

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


#sitemap-pg .sub-pg-title::after{
    content: "SITEMAP";
}

.sitemap-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.sitemap-box section{
    width: 48%;
    padding: 3%;
}

.sitemap-box a{
    display: flex;
}

.sitemap-box a span{
    margin-left: auto;
}



#sitemap-pg h2{
    font-size: var(--font-d)!important;
    color: var(--blue);
}


#sitemap-pg .hover-link{
    margin-bottom: 2%;
}


#sitemap-pg .hover-link::before{
    display: none;
}







/* ========================= レイアウト ========================= */

.top-contents{
    display: flex;
    height: 60svh;
    justify-content: space-between;
    align-items: center;
}



.pg-contents{
    background: #fff;
    padding: 8%;
    display: flex;
    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);
      gap: 20px;
      overflow: hidden;
}

.pg-about-img,
.pg-about-text{
    width: 50%;
}

.pg-about-text{
    align-self: center;
}


.pg-about-title-box {
    position: relative;
}


.pg-about-bk {
    font-size: clamp(5rem, 4.091rem + 4.55vw, 7.5rem);
    color: var(--gray);
    opacity: .2;
    position: absolute;
    top: 50%;
    z-index: 1;
    font-weight: bold;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.pg-about-detail{
    padding: 10% 0;
}



.last-box-inner{
    background: rgba(255,255,255,0.8);
}



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


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


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



.pg-about-img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

/* 配置 */
.about-list01 { grid-column: 2; grid-row: 1; }
.about-list02 { grid-column: 1; grid-row: 2; }
.about-list03 { grid-column: 3; grid-row: 2; }
.about-list04 { grid-column: 2; grid-row: 3; }


/* ========================= 円 ========================= */

.pg-about-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pg-about-item .inner {
    width: clamp(90px, 18vw, 200px);
    height: clamp(90px, 18vw, 200px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}




.circle-anime01 {
transform: translateY(70px);
}


.circle-anime02 {
transform: translate(70px,0);
}


.circle-anime03 {
transform: translate(-70px,0);
}


.circle-anime04 {
transform: translateY(-70px);
}



.about-list01 .inner { background: var(--yellow); }
.about-list02 .inner { background: var(--pink-op); }
.about-list03 .inner { background: var(--blue); }
.about-list04 .inner { background: var(--navy); color: #fff; }





.last-box .contact {
    padding: 0 0 8%;
}




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


pg02


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


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


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



.news02 .h2-box h2,.news02 .news-category{
    color: var(--orange);
}

.news02 .title-accent {
    background: var(--orange);
}


#pg02 .top-img{
    /* background: url(../img/top_img02.png) no-repeat center bottom 30% / 60%; */
        background: url(../img/top_img02.png) no-repeat center  / 50%;
width: 60%;
height: 100svh;
    animation: circle-anime 5s ease-in-out infinite alternate;
}

#pg03 .top-img{
    /* background: url(../img/top_img03.png) no-repeat center bottom 40% / 80%; */
    background: url(../img/top_img03.png) no-repeat center / 80%;
    width: 60%;
height: 100svh;
    animation: circle-anime 5s ease-in-out infinite alternate;
}

#pg02 .menu__item li a:hover,
#pg02-ct .menu__item li a:hover {
    background: var(--orange);
    }


#pg03 .menu__item li a:hover,
#pg03-ct .menu__item li a:hover {
background: var(--green);
}


#pg02 .top,
#pg03 .top{
    height: 80svh;
}



#pg02 .btn-hover-arrow,
#pg03 .btn-hover-arrow{
    color: #fff;
}

#pg02 .btn-hover-anime:hover .btn-hover-arrow{
    color: var(--orange);
}

#pg03 .btn-hover-anime:hover .btn-hover-arrow{
    color: var(--green);
}



#pg02 #overview,
#pg03 #overview{
    padding: 0;
}

#pg02 .service,
#pg03 .service{
    padding-bottom: 0;
}

#pg02 .top-tell-number {
    background: url(../img/icon_tel_02.png) no-repeat left / 36px;
}

#pg03 .top-tell-number {
    background: url(../img/icon_tel_03.png) no-repeat left / 36px;
}

#pg02 .pg-about .pc640,
#pg03 .pg-about .pc640{
    width: 100%;
}

#pg02 .item-list-box dl:before{
background: var(--orange);
}

#pg02 .item-list-box dt{
    color: var(--orange);
}

#pg02 .item-list-box dl,
#pg03 .item-list-box dl
{
    padding: 2%;
}

.row{
    display: flex;
    justify-content: center;
}

#pg02 .pg-about{
    background: var(--orange);
}



#pg02 .top{
    background: none;
}

#pg02 .top-box .cp-text,
#pg03 .top-box .cp-text
{
    font-size: 48px;
}

#pg02 .top-box .cp-text{
    color: var(--orange);
}


/* #pg02 .fixed-contact,
#pg02-ct .fixed-contact{
    background: var(--orange);
} */



#pg02 .title-accent{
    background: var(--orange);
}

#pg02 .c-arrow-link--icon::before,
#pg02 .c-arrow-link--icon::after{
        color: var(--orange);
}

#pg02 .btn-hover-anime {
        background: var(--orange);
        border: solid 1px var(--orange);
}

#pg02 .service-bk{
    color: var(--orange);
}

#pg02 .service-h3 {
color: var(--orange);
}

#pg02 .slick-prev,
#pg02  .slick-next {
    --accent: var(--orange);
    --border: var(--orange);
}

#pg02 .slick-prev::after,
#pg02 .slick-next::after {
    color: var(--orange);
}

#pg02 .slick-dots .slick-active button,
#pg02  .slick-dots button:hover {
    background: #ee7c2b!important;
}

#pg02 .contact-box{
    background: var(--orange);
}


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



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

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

#pg02 .btn-hover-anime:hover .btn-hover-arrow span,
#pg02 .btn-hover-arrow:hover span,
#pg02-ct .btn-hover-anime:hover .btn-hover-arrow span,
#pg02-ct .btn-hover-arrow:hover span
{
    transform: translateX(10px);
    color: var(--orange);
}

#pg02 .other-item-detail:hover .btn-hover-arrow span,
#pg02-ct .other-item-detail:hover .btn-hover-arrow span  {
    transform: translateX(10px);
    color: var(--orange);
}

#pg02 .menu__item::before,
#pg02-ct .menu__item::before {
    background: var(--orange);
}


.pg02-sr01{
    background: url(../img/02_service-illust01.png) no-repeat center/ contain ;
}

.pg02-sr02{
    background: url(../img/02_service-illust02.png) no-repeat center/ contain ;
}


.pg02-sr03{
    background: url(../img/02_service-illust03.png) no-repeat center/ contain ;
}


.pg02-sr04{
    background: url(../img/02_service-illust04.png) no-repeat center/ contain ;
}



/* contact================================================= */


#pg02-ct .title-accent {
    background: var(--orange);
}


#pg02-ct .submit-btn {
    background: var(--orange);
}



#pg02-ct .confirm-submit-btn{
background: var(--orange);
}

#pg02-ct .confirm-table th {
    color: var(--orange);
}

#pg02-ct .terms-content dt{
color: var(--orange);
}



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


pg03


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




.news03 .h2-box h2,.news03 .news-category{
    color: var(--green);
}

.news03 .title-accent {
    background: var(--green);
}



#pg03 .top{
    background: none;
}

#pg03 .top-box .cp-text{
    color: var(--green);
}



/* #pg03 .fixed-contact,
#pg03-ct .fixed-contact{
    background: var(--green);
} */


#pg03 .title-accent{
    background: var(--green);
}

#pg03 .c-arrow-link--icon::before,
#pg03 .c-arrow-link--icon::after{
        color: var(--green);
}

#pg03 .btn-hover-anime {
        background: var(--green);
        border: solid 1px var(--green);
}

#pg03 .service-bk{
    color: var(--green);
}

#pg03 .slick-prev,
#pg03  .slick-next {
    --accent: var(--green);
    --border: var(--green);
}

#pg03 .slick-prev::after,
#pg03 .slick-next::after {
    color: var(--green);
}

#pg03 .service-h3 {
color: var(--green);
}

#pg03 .slick-dots .slick-active button,
#pg03  .slick-dots button:hover {
    background: #1f6f35!important;
}

#pg03 .contact-box{
    background: var(--green);
}


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


#pg03 .btn-hover-arrow:hover span,
#pg03 .btn-hover-anime:hover .btn-hover-arrow span{
    transform: translateX(10px);
    color: var(--green);
}

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

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

#pg03 .menu__item::before,
#pg03-ct .menu__item::before{
    background: var(--green);
}

#pg03 .pg-about{
    background: var(--green);
}


#pg03 .item-list-box dl:before,
#pg03-ct .item-list-box dl:before{
background: var(--green);
}

#pg03 .item-list-box dt,
#pg03-ct .item-list-box dt{
    color: var(--green);
}


.pg03-sr01{
    background: url(../img/03_service-illust01.png) no-repeat center/ contain ;
}

.pg03-sr02{
    background: url(../img/03_service-illust02.png) no-repeat center/ contain ;
}


.pg03-sr03{
    background: url(../img/03_service-illust03.png) no-repeat center/ contain ;
}


.pg03-sr04{
    background: url(../img/03_service-illust04.png) no-repeat center/ contain ;
}

#pg03 .btn-hover-arrow:hover{
    color: var(--green);
}





/* contact================================================= */


#pg03-ct .title-accent {
    background: var(--green);
}


#pg03-ct .submit-btn {
    background: var(--green);
}



#pg03-ct .confirm-submit-btn{
background: var(--green);
}

#pg03-ct .confirm-table th {
    color: var(--green);
}

#pg03-ct .terms-content dt{
color: var(--green);
}





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


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





.pg-about-circle{
    background: url(../img/circle.png) no-repeat center / contain;
    animation: circle-anime 5s ease-in-out infinite alternate;
    width: 50%;
}



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



.last-box {
    position: relative;
    overflow: hidden;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}


.last-box-bkvideo, .last-box-bkvideo video, .dotted-overlay
 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


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




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

    main{
        padding-top: 100px;
    }

    .top-contents{
        height: 80svh;
    }

    .top-img{
        background-size: contain;
    }

    .top-box,
    .top-img{
        width: 100%;
    }

      .pg-contents{
        flex-direction: column;
    }

    .pg-contents{
        padding: 6%;
    }

    .pg-about-circle{
        height: 70vw;
    }
    .pg-about-circle,
    .pg-about-text{
        width: 100%;
    }

     .pg-about-circle{
        width: 75%;
        margin: 0 auto;
     }

    .pg-about-title{
        justify-content: center;
    }


    .pg-overview-title-box{
        padding: 60px 0;
    }

    .last-box .contact{
        padding-bottom: 60px;
    }

    .last-box-inner .sub-wrap{
                padding: 0 var(--margin05);
    }

    #pg02 .item-list-box dl, #pg03 .item-list-box dl {
    padding: 8% 0;
}

#pg02 .top{
        height: 80svh;
}

    #pg02 .top-box,
    #pg02 .top-img,
    #pg03 .top-box,
    #pg03 .top-img{
        width: 100%;
    }

    #pg02 .top-img,
    #pg03 .top-img
    {
        background-size: contain;
    }


    .thanks-btn{
    padding: 6%;
    width: 100%;
    }


}