@charset "utf-8";
body {
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: scroll;
}
.ja {
    font-family: 'Noto Sans JP', sans-serif;
}
.en-book {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.en-medium {
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
}
.en-heavy {
    font-family: futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
}
.hiragi {
    font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.noto-b {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
}
header {
    z-index: 99;
}
/* common fadein
===============================================*/
.inview {
    opacity: 0;
    transform: translate(0, 100px);
    -webkit-transform: translate(0, 100px);
    -webkit-transition: 1.0s;
    transition: 1.0s;
    -webkit-transition-delay: 0.0s;
    transition-delay: 0.0s;
}
.fadein {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}
/* index.html
===============================================*/
body#home a {
    color: #000;
}
.mainVisual .slide-img img {
    width: 100%;
}
#home #index {
    width: 100%;
    height: auto;
}
.works {
    padding: 105px 0px 80px 0px;
    width: 100%;
    height: auto;
}
.works .worksInner {
    margin: auto;
    width: 100%;
    height: auto;

}
.works .worksInner h2 {
    margin-bottom: 62px;
    text-align: center;
}
.works .worksInner h2 span:nth-of-type(1) {
    margin-bottom: 18px;
    text-align: center;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}
.works .worksInner h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: block;
}
.works .worksInner .worksInner_01 {
    margin: 0px auto 65px auto;
    width: 1000px;
}
.works .worksInner .worksInner_01 .worksVisual {
    float: left;
}
.works .worksInner .worksInner_01 .worksListWrapper {
    width: 345px;
    float: right;
}
.works .worksInner .worksInner_01 .worksListWrapper h3 {
    position: relative;
    top: -10px;
    left: 0px;
    margin-bottom: 20px;
    padding-left: 50px;
    font-size: 18px;
    letter-spacing: 0.15em;
    display: inline-block;
}

.works .worksInner .worksInner_01 .worksListWrapper h3:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    width: 28px;
    height: 1px;
    background-color: #000;
    display: block;
    transform: translateY(-50%);
}

.works .worksInner .worksListWrapper .worksList .worksPost {
    display: block;
}
.works .worksInner .worksListWrapper .worksList .worksPost:not(:last-child) {
    margin-bottom: 10px;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksThumbnail {
    margin-right: 10px;
    width: 210px;
    height: 130px;
    float: left;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksThumbnail img {
    width: 210px;
    height: 130px;
    border: 1px solid #ddd;
    object-fit: cover;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription {
    text-align: left;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription .worksCategoryWrap {
    margin-bottom: 10px;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription .worksCategoryWrap .work_category {
    padding: 1% 3%;
    color: #fff !important;
    display: inline-block;
    font-size: 13px;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription .worksTitleWrap {
    margin-bottom: 10px;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription .worksTitleWrap .work_title {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 150%;
}
.works .worksInner .worksListWrapper .worksList .worksPost .worksDescription .worksTagWrap .work_tag {
    font-size: 14px;
}

.works .worksInner .viewAll {
    margin: auto;
    width: 245px;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    color: #000;
    text-align: center;
    display: block;
    border-radius: 55px;
    border: solid 1px #000;
}
/* end works */
.services {
    position: relative;
    top: 0px;
    left: 0px;
    padding: 75px 0px 6.667% 0px;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
}
.services .servicesInner h2 {
    margin-bottom: 75px;
    text-align: center;
}
.services .servicesInner h2 span:nth-of-type(1) {
    margin-bottom: 18px;
    text-align: center;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}
.services .servicesInner h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: block;
}
.services .swiper-container-service {
    padding-bottom: 4.25%;
}
.services .swiper-container {
    padding-bottom: 4.25%;
}
.services .swiper-container .swiper-slide {
    padding: 25px 0px 35px 25px;
    width: 40%;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.services .swiper-container .swiper-slide .slideInner .service-thumbnail {
    margin-bottom: 25px;
    display: block;
}
.services .swiper-container .swiper-slide .slideInner .service-thumbnail img {
    width: 87%;
    border: solid 1px #f5f5f5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.services .swiper-container .swiper-slide .slideInner .service-label {
    position: absolute;
    top: 0px;
    right: 5.208%;
    height: calc(100% - 50px);
    padding-top: 50px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
    display: block;
}
.services .swiper-container .swiper-slide .slideInner .service-label:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 32.5%;
    width: 1px;
    height: 30px;
    display: block;
    background-color: #000;
}
.services .swiper-container .swiper-slide .slideInner h3 {
    margin-bottom: 25px;
    text-align: center;
}
.services .swiper-container .swiper-slide .slideInner h3 span:nth-of-type(1) {
    margin-bottom: 10px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.15em;
    display: block;
}
.services .swiper-container .swiper-slide .slideInner h3 span:nth-of-type(2) {
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: block;
}
.services .swiper-container .swiper-slide .description {
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
}
.services .swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}
.services .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #000;
}
.services .swiper-container .swiper-button-prev {
    top: 40%;
    left: 50px;
}
.services .swiper-container .swiper-button-next {
    top: 40%;
    right: 50px;
}
.services .swiper-container .swiper-button-prev,
.services .swiper-container .swiper-button-next {
    width: 45px;
    height: 45px;
    color: #fff;
    background-color: #000;
    border-radius: 35px;
    opacity: .75;
}
.services .swiper-container .swiper-button-prev:after,
.services .swiper-container .swiper-button-next:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../commons/img/slider_arrow.png');
    background-repeat: no-repeat;
    background-position: center center;
}
.services .swiper-container .swiper-button-prev:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* end services */
.about-us {
    width: 100%;
    height: auto;
}
.about-us .about-usInner {
    padding: 105px 0px 10px 0px;
    width: 100%;
    height: auto;
}
.about-us .about-usInner h2 {
    margin-bottom: 60px;
    text-align: center;
}
.about-us .about-usInner h2 span:nth-of-type(1) {
    margin-bottom: 18px;
    text-align: center;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}
.about-us .about-usInner h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: block;
}
.about-us .about-usInner .about-us-image {
    position: relative;
    top: 0px;
    left: 0px;
}
.about-us .about-usInner .about-us-image .about-us-image01 {
    z-index: 1;
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 68px;
    display: block;
}
.about-us .about-usInner .about-us-image .about-us-image01 img {
    width: 77%;
}
.about-us .about-usInner .about-us-image .about-us-image01:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 81.395%;
    left: 50%;
    max-height: 405px;
    width: 50%;
    height: 94%;
    display: block;
    background-color: #f5f5f5;
}
.about-us .about-usInner .about-us-text {
    z-index: 1;
    position: relative;
    top: 0px;
    left: 0px;
    padding-left: 105px;
}
.about-us .about-usInner .about-us-text .txt01 {
    margin-bottom: 50px;
    line-height: 3.2em;
    font-size: 14px;
    text-align: left;
    width: auto;
}
.about-us .about-usInner .about-us-text .viewAll {
    width: 250px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #000;
    text-align: center;
    display: block;
    border-radius: 55px;
    border: solid 1px #000;
}
/*  end about-us */
.news {
    padding: 160px 0px 170px 0px;
    width: 100%;
}

.news .newsInner {
    margin: auto;
    width: 880px;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news .newsInner h2 span:nth-of-type(1) {
    margin-bottom: 10px;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}

.news .newsInner h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-align: center;
    display: block;
}

.news .newsInner .newsList .newsItem {
    padding: 0px 75px 15px 35px;
    width: 700px;
    font-size: 13px;
    box-sizing: border-box;
    border-bottom: solid 1px #d8d8d8;
}

.news .newsInner .newsList .newsItem:not(:last-child) {
    margin-bottom: 20px;
}

.news .newsInner .newsList .newsItem .newsDate {
    float: left;
    line-height: 180%;
}

.news .newsInner .newsList .newsDescription {
    width: 410px;
    display: inline-block;
    line-height: 180%;
    float: right;
}

/* end news */

.blog {
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
}

.blog .blogInner {
    position: relative;
    top: 0px;
    left: 0px;
    margin: auto;
    padding: 115px 0px 65px 0px;
    width: 1000px;
}

.blog .blogInner h2 {
    position: absolute;
    top: -15px;
    left: 50%;
    display: block;
    transform: translateX(-50%);
}

.blog .blogInner h2 span:nth-of-type(1) {
    margin-bottom: 10px;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}

.blog .blogInner h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-align: center;
    display: block;
}

.blog .blogInner .blogList .blogItem {
    position: relative;
    top: 0px;
    left: 0px;
    max-width: 200px;
    width: 20%;
    height: auto;
    background-color: #fff;
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.02);
    float: left;
}

.blog .blogInner .blogList .blogItem:not(:first-child) {
    margin-left: 5.4%;
}

.blog .blogInner .blogList .blogItem .blogThumbnail {
    position: absolute;
    right: -30px;
    top: -20px;
    width: 200px;
    height: 200px;
    display: block;
    overflow: hidden;
}

.blog .blogInner .blogList .blogItem .blogThumbnail img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.blog .blogInner .blogList .blogItem .blogDate {
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 13px;
    writing-mode: vertical-rl;
}

.blog .blogInner .blogList .blogItem .blogTitle {
    margin-top: 200px;
    padding: 0px 20px 40px 30px;
    display: block;
    font-size: 13px;
    line-height: 180%;
}

.blog .blogInner .blogList .blogItem .readMore {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 17px;
    height: 10px;
    display: block;
    background-image: url('../img/home/blog-arrow.png');
    background-repeat: no-repeat;
    background-position: center center;
}

/* end blog */

.contact {
    padding: 120px 0px 130px 0px;
    width: 100%;
    height: auto;
}
.contact .contactInner {
    margin: auto;
    padding: 70px 0px 60px 0px;
    width: 100%;
    height: auto;
    background-image: url('../img/home/contact-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.contact .contactInner .contactItemWrapper {
    margin: auto;
    padding: 55px 5.2% 100px 5.2%;
    max-width: 1000px;
    width: 85%;
    background: rgba(255, 255, 255, 0.85);
    background:
        linear-gradient(135deg, transparent 10px, rgba(255, 255, 255, 0.85) 0) top left,
        linear-gradient(225deg, transparent 10px, rgba(255, 255, 255, 0.85) 0) top right,
        linear-gradient(315deg, transparent 10px, rgba(255, 255, 255, 0.85) 0) bottom right,
        linear-gradient(45deg, transparent 10px, rgba(255, 255, 255, 0.85) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.contact .contactInner .contactItemWrapper h2 {
    margin-bottom: 75px;
    text-align: center;
}
.contact .contactInner .contactItemWrapper h2 span:nth-of-type(1) {
    margin-bottom: 10px;
    font-size: 32px;
    letter-spacing: 0.15em;
    display: block;
}
.contact .contactInner .contactItemWrapper h2 span:nth-of-type(2) {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: block;
}
.contact .contactInner .contactItemWrapper .contactItem .contactDescription {
    padding-left: 75px;
    background-image: url('../img/home/contact-phone.png');
    background-repeat: no-repeat;
    float: left;
}
.contact .contactInner .contactItemWrapper .contactItem .contactDescription h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: normal;
}
.contact .contactInner .contactItemWrapper .contactItem .contactDescription p {
    line-height: 1.9;
    font-size: 14px;
}
.contact .contactInner .contactItemWrapper .contactItem .contactButton {
    max-width: 355px;
    width: 40%;
    height: 90px;
    line-height: 90px;
    color: #000;
    font-size: 16px;
    text-align: center;
    border: solid 1px #000;
    border-radius: 90px;
    display: block;
    background-image: url('../img/home/contact-button.png');
    background-repeat: no-repeat;
    background-position: center left 15.493%;
    float: right;
}
/* end contact */
footer {
    background-color: #fff;
}
footer .footerInner {
    margin: auto;
    padding: 45px 0px 50px 0px;
    width: 100%;
    border-top: 1px solid #000;
}
footer .footerInner .footer-instagram-link {
    margin-bottom: 25px;
    text-align: center;
    display: block;
}
footer .footerInner .copy-right {
    font-size: 11px;
    text-align: center;
}
/* end footer */
/*----------------------------------------------------------
for_SP
------------------------------------------------------------*/
@media screen and (max-width:480px) {
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: -5px;
    }
    .contact .contactInner .contactItemWrapper h2 {
        margin-bottom: 40px;
    }
     .mainVisual {
        width: 100%;
        overflow: hidden;
    }
    .mainVisual .swiper-wrapper{
        width: 100%;
        height: 50vh;        
    }
       .mainVisual .swiper-wrapper .slide-img {
           position: relative;
           left: 50%;
           margin-left: -470px;
    }
    .mainVisual .swiper-wrapper .slide-img img{
        width: auto;
        height:350px;
    }


    .works {
        padding: 45px 0 40px 0;
    }
    .works .worksInner .worksInner_01 {
        width: 100%;
        margin-bottom: 30px;
    }
    .works .worksInner .worksInner_01 .worksVisual {
        float: none;
    }
    .works .worksInner .worksInner_01 .worksVisual img {
        width: 100%;
        display: block;
    }
     .works .worksInner .worksInner_01 .worksListWrapper {
        width: 100%;
        float: none;
    }

    .works .worksInner .worksInner_01 .worksListWrapper h3 {
        top: 0;
        margin-top: 10px;
        text-align: center;
    }
    
    .works .worksInner .worksInner_01 .worksListWrapper .worksList {
        width: 96%;
        margin: 0 auto;
    }
    
    .works .worksInner .worksInner_01 .worksListWrapper .worksList .worksPost {
        width: calc(50% - 10px);
        max-width: 240px;
        float: left;
        margin-right: 20px;
        height: auto;
    }

    .works .worksInner .worksInner_01 .worksListWrapper .worksList .worksPost:nth-child(2n) {
        margin-right: 0;
    }

    .works .worksInner .worksListWrapper .worksList .worksPost .worksThumbnail {
        margin-bottom: 8px;
        width: 100%;
        float: none;
    }

    .works .worksInner .worksListWrapper .worksList .worksPost .worksThumbnail img {
        display: block;
        width: 100%;
    }
    
    #index > div.works > div > div > div > div > a:nth-child(3) {
        display: none;
    }
    /* =====  end work  ===== */
    .services {
        padding: 45px 0 40px;
    }
    .services .swiper-container .swiper-slide {
        padding: 25px 10px;
    }
    .services .servicesInner h2 {
        margin-bottom: 45px;
    }
    .services .swiper-container {
        padding-bottom: 50px;
    }
    .services .swiper-container .swiper-slide .slideInner .service-label {
        right: 7px;
    }
    .services .swiper-container .swiper-slide .slideInner .service-label:before {
        top: 8px;
        right: 13px;
        left: unset;
    }
    .services .swiper-container .swiper-button-prev {
        left: 8px;
    }
    .services .swiper-container .swiper-button-next {
        right: 8px;
    }
    /* =====  end  service  =====*/
    .about-us .about-usInner {
        padding-top: 0;
    }
    .about-us .about-usInner .about-us-text {
        padding: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .about-us .about-usInner .about-us-text .viewAll {
        width: 180px;
        height: 42px;
        line-height: 42px;
        font-size: 15px;
        margin: 0 auto;
    }
     .news {
        padding: 45px 0 75px;
    }

    .news .newsInner {
        width: 100%;
        display: block;
    }

    .news .newsInner h2 {
        float: none;
        display: block;
    }

    .news .newsInner .newsList {
        float: none;
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .news .newsInner .newsList .newsItem {
        width: 100%;
        padding: 0px 15px 15px 15px;
    }
    .news .newsInner .newsList .newsDescription{
        margin-left: 0;
        width: 100%;
        font-size: 14px;
    }
    .news .newsInner .newsList .newsDescription a {
        font-size: 14px;
    }

    .blog .blogInner {
        width: 100%;
        max-width: 480px;
    }

    .blog .blogInner .blogList .blogItem {
        float: none;
        width: 94%;
        max-width: 480px;
        height: auto;
        margin: 0 auto 35px;
        display: block;
    }

    .blog .blogInner .blogList .blogItem:not(:first-child) {
        margin: 0 auto 35px;
    }

    .blog .blogInner .blogList .blogItem .blogThumbnail {
        left: 20%;
        top: -20px;
        right: 0;
        width: 75%;
        height: 180px;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
    }

    .blog .blogInner .blogList .blogItem .blogThumbnail img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        display: inline;
    }

    .blog .blogInner .blogList .blogItem .blogDate {
        left: 20px;
    }

    .blog .blogInner .blogList .blogItem .blogTitle {
        margin-top: 0px;
        padding: 180px 20% 40px 20%;
        left: 20%;
    }

    .blog .blogInner .blogList .blogItem .readMore {
        bottom: 20px;
    }
    
    .contact .contactInner .contactItemWrapper h2 {
        margin-bottom: 30px;
    }
    .contact .contactInner .contactItemWrapper .contactItem .contactDescription h3 {
        font-size: 16px;
        text-align: center;
    }
    .contact .contactInner .contactItemWrapper .contactItem .contactDescription p {
        font-size: 13px;
    }
    .contact .contactInner {
        padding: 45px 0;
    }
    .contact .contactInner .contactItemWrapper {
        padding: 30px 5.2% 45px 5.2%;
    }
    .contact .contactInner .contactItemWrapper .contactItem .contactDescription {
        padding: 75px 0 20px;
        background-size: 45px auto;
        float: none;
        background: url(../img/home/contact-phone.png) top center;
        background-repeat: no-repeat;
    }
    .contact .contactInner .contactItemWrapper .contactItem .contactButton {
        width: 100%;
        margin: 0 auto;
        float: none;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        background-position: center left 8%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}