main .content {
    margin-top: 10vh;
}

main .content:nth-last-child(1) {
    margin-bottom: 10vh;
}

.content>.inner {
    width: 90%;
    margin: auto;
}

main .content img.main {
    width: auto;
    margin: auto;
    display: block;
    margin-bottom: 10px;
}

main .content .title {
    font-size: 2rem;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    margin-bottom: 3rem;
}

@media screen and (max-width: 900px) {
    main .content img.main {
        width: 30%;
    }
}


/**
 * KVスライダー対応
 *
 **/
#kv {
    width: 1500px;
    max-width: 100%;
    margin-top: 0;
    color: var(--global-color-02);
}

#kv li {
    position: relative;
}

#kv li>.image {
    opacity: 1;
    height: 100%
}

#kv li>.map {
    opacity: 0;

    height: 100%;
    width: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#kv li>.map picture {
    height: 100%;
    width: 100%;

}

#kv li>.map img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: auto;
    margin: auto;
}

@media screen and (max-width: 900px) {
    #kv li>.map {
        width: 100%;
    }
}

/* クレジット、名称の追加 */
#kv li>* {
    position: relative;
    top: 0;
    line-height: 1rem;
}

#kv li .credit {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    font-size: 1rem;
    text-align: right;
}

#kv li .credit span {
    display: block;
}

#kv li .name {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 7px;

    font-size: 1.2rem;
    font-weight: 700;
}


/* アニメーションについて */
#kv li.slick-active>* {
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

#kv li.slick-active>.image {
    animation-name: fadeInImage;
}

#kv li.slick-active>.map {
    animation-name: fadeOutMap;
}

@keyframes fadeOutMap {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInImage {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#greeting {
    margin-top: 5px;
}


/** concept
 *
 *
 **/
#concept {
    position: relative;
    text-align: center;
    /*
    background-image: url("https://anwld-cst.addnew.tech/wp-content/themes/cst-of-Addnew/img/3.jpg");
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    */
}

#concept .width-item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}

#concept p:nth-of-type(1) {
    margin-bottom: 0;
}

#concept p:nth-of-type(2) {
    font-size: 3.0rem;
}

#concept .title {
    margin-bottom: 2rem;
}

#concept pre {
    font-size: 1.8rem;
    font-weight: 400;
    font-style: normal;
    white-space: pre-wrap;
}

@media screen and (max-width: 900px) {
    #concept .bg-img {
        margin-top: 40px;
    }
}

@media screen and (max-width: 600px) {
    #concept .bg-img {
        margin-top: 160px;
    }
}



/** service
 *
 *
 **/
#service {
    text-align: center;
}

#service p {
    width: 100%;
    overflow-wrap: break-word;
}

#service .item {
    text-align: left;
    --side-by-side-width: 40%;
    margin-bottom: 3rem;
}

#service .item:nth-last-of-type(2),
#service .item:nth-last-of-type(1) {
    margin-bottom: 0;
}

#service .item h3 {
    font-family: var(--global--fontFamiry03);
}

#service .item h3>span:nth-of-type(1) {
    font-size: 3.5rem;
    font-weight: 400;
}

#service .item h3>span:nth-of-type(2) {
    font-size: 1.7rem;
    font-weight: 700;
}

#service .item .caption {
    font-size: 1.5rem;
    font-weight: 400;
    font-style: normal;
    font-family: var(--global--fontFamiry02);
    margin-left: 8%;
    width: 90%;
}

#service .item .caption span{
    white-space:nowrap;
}
#service .item .caption span:not(:nth-last-of-type(1)){
	margin-right: 0.3rem;
}
#service .item .caption span:not(:nth-last-of-type(1)):after{
	content: ",";
}

@media screen and (max-width: 1200px) {
    #service .item h3>span {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    #service .item .caption {
        margin-left: 8%;
    }
    #service .item {
        --side-by-side-width: 48%;
    }
    
}
@media screen and (max-width: 400px) {
    #service .item .caption {
        width: 96%;
    }
}



/** performance
 *
 *
 **/
#performance h3 {
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    color: var(--global-color-04);
    letter-spacing: 0.5rem;
}

#performance .side-by-side {
    --side-by-side-width: 27%;
    margin-bottom: 3rem;
    margin-top: 1.5rem;
}

@media screen and (max-width: 600px) {
    #performance .side-by-side {
        --side-by-side-width: 95%;
    }

    #performance .items .item:not(:nth-of-type(1)) {
        margin-top: 2rem;
    }
}



/** aboutus
 *
 *
 **/
#aboutus {
    --width-table-name: 27%;
    --width-table-value: calc(100% - var(--width-table-name));
}

#aboutus .table {
    font-size: 1.7rem;
    font-weight: 400;
    font-style: normal;

    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

#aboutus .table .side-by-side {
    margin-bottom: 0;
}

#aboutus .table>.row {
    width: 100%;
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    border-top: 1px solid var(--global-color-01);
}

#aboutus .table>.row:nth-last-of-type(1) {
    border-bottom: 1px solid var(--global-color-01);
}

#aboutus .table .name {
    text-align: center;
    width: var(--width-table-name);
}

#aboutus .table .value {
    width: var(--width-table-value);
}

#aboutus .table>.row>*>span {
    margin-right: 1rem;
}

#aboutus .table>.row>*>span:nth-last-of-type(1) {
    margin-right: 0;
}

@media screen and (max-width: 900px) {
    #aboutus {
        --width-table-name: 100%;
        --width-table-value: 100%;
    }

    #aboutus .table>.row {
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    #aboutus .table {
        font-size: 1.75rem;
    }
}


iframe.cf7 {
    width: 100%;
}

main .contents {
    position: relative;
    padding-bottom: 10rem;
}

.scroll-btn.top {
    width: auto;
    height: auto;
    position: relative;
    bottom: 0;
    right: 0;
    float: right;
}

.scroll-btn.top img {
    width: auto;
    height: auto;
}

@media screen and (max-width: 600px) {
    main .contents {
        padding-bottom: 15rem;
    }

}