@charset "UTF-8";

#nav-toggle-btn {display: none;}

#top-content-logo img {width: 510px;}

/*** media query ***/
@media screen and (max-width: 1024px) {
    /*ブレークポイント1024px*/
}

@media screen and (max-width: 768px) {
    /*ブレークポイント768px*/

    body.scrolled {
        padding-top: 44px;
    }

    #top-tab-service {display: none;}

    #nav-toggle-btn {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 44px;
    }

    #nav-toggle-btn .img-menu-line {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 36px;
        height: 4px;
        background-color: #8c8c8c;
        border-radius: 2px;
        transition: all 0.3s linear;
        transform-origin: center center;
    }

    #img-menu-line01.img-menu-line {top: 10px;}
    #img-menu-line02.img-menu-line {top: 20px;}
    #img-menu-line03.img-menu-line {top: 30px;}

    #nav-toggle-btn.open #img-menu-line01.img-menu-line {
        top: 20px;
        transform: rotate(45deg);
    }
    #nav-toggle-btn.open #img-menu-line02.img-menu-line {opacity: 0;}
    #nav-toggle-btn.open #img-menu-line03.img-menu-line {
        top: 20px;
        transform: rotate(-45deg);
    }

    img {vertical-align: baseline;}
    
    #header {
        height: 44px;
    }

    #header .innerWrap{
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 44px;
    }

    #logo {
        float: none;
        margin: 0;
    }
    
    #logo img {width: 142.5px;}
    
    /*#home #content {padding-top: 0;}*/
    
    .innerWrap,
    .innerWrap02 {
        width: 100%;
    }

    #gnav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 20px 20px 0 20px;
        background-color: rgba(255,255,255,1.0);
    }
    
    #gnav ul {margin-top: 0;}
    
    #gnav ul li {
        float: none;
        margin: 0 0 20px 0;
    }
    
    #top-content-logo {width: 80%;}
    #top-content-logo img {width: 100%;}
    #shoulder .jp {font-size: 200%;}
    #shoulder .en {font-size: 70%;}


/*TOPアイテム一覧 ここから
-----------------------------------------------------*/

#item-list li.item {
    width: 152.5px;
    height: 152.5px;
}
#item-list li.item.Wx2 {
    width: 305px;
}
#item-list li.item.Hx2 {
    height: 305px;
}

.item-box {
    margin: 5px;
}
.item-img {
    width: 142.5px;
    height: 142.5px;
}
li.item.Wx2 .item-img {width: 295px;}
li.item.Hx2 .item-img {height: 295px;}

.hover .name .circle span {font-size: 100%;}
.btn-corner a {font-size: 140%;}
span.name-en:before {height: 2px;}

/*-----------------------------------------------------
TOPアイテム一覧 ここまで*/

    #footer {
        margin-top: 48px;
    }

    #ft-logo01 {display: none;}

    .ft-menu {
        float: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0 20px 20px;
    }
    
    .ft-menu dt {
        padding-left: 20px;
        background-size: 16px;
    }
    
    #ft-manu02 dd a {
        display: block;
        padding-left: 1em;
        text-indent: -1em;
    }

    #ft-pagetop {}

    #ft-pagetop img {width: 39px;}

    #breadcrumb {
        padding: 0 20px;
    }

    .h2-lower01 {
        font-size: 240%;
        padding: 0 20px 10px;
    }

    #box-lower01 {
        margin-bottom: 0;
    }

    #box-lower01 .lead01 {
        padding: 20px;
    }

    #box-lower01 .lead01 p {
        font-size: 124%;
    }

    #box-lower01 .anchor-nav01 {
        flex-direction: column;
        padding: 0 20px;
    }

    #box-lower01 .anchor-nav01 li {
        width: 100%;
        margin-bottom: 20px;
    }

    #lower-contents .article {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ul-item-list01 li,
    .ul-item-list01 li.large {
        display: inline-block;
        float: left !important;
        width: 93px;
        height: 93px;
        margin: 0 !important;
    }

    .ul-item-list01 li a,
    .ul-item-list01 li.large a {
        width: 93px;
        height: 93px;
    }

        .ul-item-list01 li a .circle {display: none;}

    body.layout-b #lower-contents .article:first-child,
    #lower-contents .article {
        padding-top: 48px;
    }

    .box-layout-type01 .img,
    .box-layout-type02 .img  {
        float: none;
        margin: 20px 0 10px;
    }

    .box-layout-type01 .img img,
    .box-layout-type02 .img img {
        width: 100%;
        margin: 0;
    }


    .h4-lower02 span {
        font-size: 124%;
    }

    .h5-lower01 {
        margin-bottom: 0;
    }
    
    .h4-lower01 {
        font-size: 124%;
    }

    #lower-contents [class^="text"] p {
        margin-top: 1rem;
    }

    .box-layout-type03 .img {}

    .box-layout-type03 .img li {

    }

    .box-layout-type03 .img li img {width: 100%;}

    .lower-btn-item01 {
        margin-top: 20px;
    }

    .lower-btn-item01 ul li {
        width: 30%;
    }

    .lower-btn-item01 ul.desc li {
        margin-right: 5%;
    }

    .lower-btn-item01 ul.desc li:last-child {
        margin-right: 0;
    }

    #benefit-process01-chart01 {
        flex-direction: column;
    }
    #benefit-process01-chart01 li {
        width: 100% !important;
        margin-bottom: 30px;
        padding: 10px;
        text-align: center;
    }
    #benefit-process01-chart01 li:last-child {
        margin-bottom: 0;
    }
    #benefit-process01-chart01 li:before {
        display: none;
    }

#benefit-process01-chart01 li:after {
    content: "\f063";
    top: 100%;
    left: 0;
    width: 100%;
    right: initial;
    font-family: 'FontAwesome';
    background: transparent;
}

    #benefit-process02 {
        width: 100%;
        flex-direction: column;
/*
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
*/
    }
    #benefit-process02 dl {
        position: relative;
        display: table;
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

#benefit-process02 dl:after {
    position: absolute;
    content: "\f063";
    top: 100%;
    left: 0;
    width: 100%;
    right: initial;
    font-family: 'FontAwesome';
    background: transparent;
    text-align: center;
}

#benefit-process02 dl:last-child {
    margin-bottom: 0;
}

#benefit-process02 dl:last-child:after {
    display: none;
}

    #benefit-process02 dl dt,
    #benefit-process02 dl dd {
        display: table-cell;
        padding: 10px !important;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    #benefit-process02 dl dt {
        width: 25%;
    }
    #benefit-process02 dl dd {
        margin-top: 0;
        padding: 0;
    }
    #benefit-process02 dl dd br,
    #benefit-process02 dl dd:after {display: none;}

    #dl-contact01 {}
    #dl-contact01 dd.text,
    #dl-contact01 dd.textarea {
        width: 100%;
    }

/*
    #staff.lower-inner-section01 {}
    #staff.lower-inner-section01 .dl-staff01 {
        width: 48%;
        margin-right: 0;
    }
    #staff.lower-inner-section01 .dl-staff01:nth-child(odd) {float: left;}
    #staff.lower-inner-section01 .dl-staff01:nth-child(even)  {float: right;}
*/

    .h4-link-txt01 a {display: none;}
    
    #cboxTitle {display: none !important;}

    .dl-staff01 {
        flex-direction: column;
    }
    .dl-staff01 > dd {
        width: 100%;
    }

    .dl-about01 > dd,
    .dl-about-inner01 > dd {
        padding-left: 0;
    }

    .ext-link01 dl dd {
        overflow: hidden;
        width: 100%;
        font-size: 90%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ul-link01 li {
        overflow: hidden;
        width: 100%;
        margin-top: 0.5rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

}

@media screen and (max-width: 480px) {
    /*ブレークポイント480px*/
    .fit-img {width: 100%;}
    .lower-btn-item01 ul li .btn br {display: block;}
    #benefit-process01 img {width: 100%;}
/*
    .dl-staff01 > dt {
        width: 48%;
        margin-right: 2%;
    }
    .dl-staff01 > dt img {
        width: 100%;
    }
    .dl-staff01 > dd {
        width: 48%;
    }
*/
}

@media screen and (max-width: 320px) {
    /*ブレークポイント320px*/
}