@charset "UTF-8";
/* shiftkey **
/* base
===============================================================*/
    .load-fade1{opacity: 0; }
    .load-fade2{opacity: 0; }
    .load-fade3{opacity: 0; }
    .load-fade4{opacity: 0; }
    .load-fade1.done{opacity:1; transition: all  .4s linear 0s;}
    .load-fade2.done{opacity: 1; transition: all  .4s linear .4s;}
    .load-fade3.done{opacity: 1; transition: all  .4s linear .8s;}
    .load-fade4.done{opacity: 1; transition: all  .4s linear 1.2s;}
    .load-up1{opacity: 0; transform:translate(0,-49%) !important;}
    .load-up2{opacity: 0; transform:translate(0,-49%) !important;}
    .load-up3{opacity: 0; transform:translate(0,-49%) !important;}
    .load-up1.done{opacity:1; transition: all  .4s linear 1.6s; transform:translate(0,-50%) !important;}
    .load-up2.done{opacity: 1; transition: all  .4s linear 1.8s; transform:translate(0,-50%) !important;}
    .load-up3.done{opacity: 1; transition: all  .4s linear 2.0s; transform:translate(0,-50%) !important;}
    .forpc{
        display: block;
    }
    .forsp{
        display: none;
    }
    #wrapper{
        background-color: #f4fbf9;
        overflow: hidden;
        position: relative;
        z-index: 0;
    }
    #wrapper::after{
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: calc(31%);
        top: 0;
        left: 0;
        background-color: #ffffff;
        z-index: -1;
    }
    #topicpath, #topicpath a {
        color: #000;
        z-index: 2;
    }
    #page-mv {
        z-index: 1;
    }
    .business-head{
        position: relative;
        display: block;
        height: 575px;
    }
    .business-title{
        position: absolute;
        display: block;
        top: 50%;
        transform: translate(0px,-50%);
        z-index: 1;
    }
    .business-title>span{
        font-weight: 400;
        font-size: 5rem;
        font-family: 'Oswald'!important;
        position: relative;
        text-shadow: 0px 0px 5px white, 1px 0px 5px white, 0px -1px 5px white, 1px 1px 5px white, -1px -1px 5px white , 2px 2px 5px white, 2px 0px 5px white, 0px -2px 5px white, -2px -2px 5px white , 3px 3px 5px white, 3px 0px 5px white, 0px -3px 5px white, -3px -3px 5px white ,4px 3px 5px white, 4px 0px 5px white, 0px -4px 5px white, -4px -4px 5px white ;
    }
    .business-title>span::after{
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 7rem;
        height: 1px;
        z-index: 1;
        border-bottom: 1px solid;
        display: block;
    }
    .business-title>p{
        font-size: 1.7rem;
        text-shadow: 0px 0px 5px white, 1px 0px 5px white, 0px -1px 5px white, 1px 1px 5px white, -1px -1px 5px white , 2px 2px 5px white, 2px 0px 5px white, 0px -2px 5px white, -2px -2px 5px white , 3px 3px 5px white, 3px 0px 5px white, 0px -3px 5px white, -3px -3px 5px white ,4px 3px 5px white, 4px 0px 5px white, 0px -4px 5px white, -4px -4px 5px white ,5px 5px 5px white, 5px 0px 5px white, 0px -5px 5px white, -5px -5px 5px white ,6px 6px 5px white, 6px 0px 5px white, 0px -6px 5px white, -6px -6px 5px white;
    }
    .business-title>p>span{
        font-weight: bold;
    }
    .circle{
        position: relative;
        height: 550px;
    }
    .circle>img{
        position: absolute;
        display: block;
        width: 70%;
        top: 50%;
        right: 0;
        transform: translate(0 ,-50%) ;
    }
    .business-body{
        position: relative;
        display: block;
    }
    .body-block{
        position: relative;
        display: flex;
        align-items: center;
        height: 380px;
        background-repeat: no-repeat;
        background-position: right;
    }
    .body-block>a:hover {
        opacity: 1 !important;
    }
    .body-block>a:hover u {
        border-top: 2px solid #ffffff !important;
        border-left: 2px solid #ffffff !important;
        transition: .5s all;
    }
    .body-block a:hover .body-block-img img{
        opacity: 1;
        transition: .5s all;
    }
    .body-block-text{
        width: 450px;
        height: auto;
        max-height: 365px;
        padding: 25px;
        background-color: white;
        color: rgb(0, 0, 0);
        z-index: 1 !important;
        position: relative;
        transition: .5s all;
        opacity: 1;
        z-index: 1;
    }
    .body-block-text::before {
        background: linear-gradient(to right, #50a6c7,#53b859);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: all 1s ease-out;
        width: 100%;
        z-index: -1;
        color: #fff !important;
        opacity: 0;
    }
    .body-block>a:hover .body-block-text{
        transition: .5s all;
        opacity: 1;
        color: #fff !important;
    }
    .body-block>a:hover .body-block-text::before{
        transition: .5s all;
        opacity: 1;
        color: #fff !important;
    }
    .body-block-text>p{
        font-size: 1.6rem;
    }
    .body-block-text>span{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .body-block-text>span>span{
        font-size: 2.5rem;
        font-weight: bold;
        line-height: normal;
    }
    .body-block>a{
        display:contents;
    }
    .body-block-img{
        display: inline-block;
        position: absolute;
        z-index: 0 !important;
        right: 0;
        top: 0;
        line-height: 0px;
        background-color: #06b8ff;
        overflow: hidden;
    }
    .body-block>a:hover .body-block-img img{
        transform: scale(1.05);
    }
    .body-block-img img{
        position: relative;
        object-fit: cover;
        opacity: 1;
        transition: .5s all;
        width: 550px;
    }
    .arrow-1-r{
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        min-height: 13px;
        min-width: 13px;
        margin: 0 20px;
        border-top: 2px solid #59d161;
        border-left: 2px solid #59d161;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }
    @media only screen and (max-width: 980px ) {
        #wrapper::after {
            height: calc(25% + 20px);
        }
        .business-head {
            height: 450px;
        }
        .circle {
            height: 400px;
        }
        .business-title>p{
            font-size: 1.5rem;
        }
        .body-block{
            margin-bottom: 100px;
            align-items: flex-end;
        }
        .body-block-text {
            top: 75px;
        }
    }
    @media only screen and (max-width: 860px) {
        .forpc{
            display: none;
        }
        .forsp{
            display: block;
        }
        #wrapper::after {
            height: calc(25vw + 330px);
            background-image: url(https://melmo.stsd.co.jp/taiyo-nissan/files/business/images/circle_icon-none.png);
            background-position: calc(50% + 200px) calc(120% + 140px);
            background-size: 550px;
            background-repeat: no-repeat;
        }
        .business-head{
            display: flex;
            height: auto;
            margin: 15px auto 25px;
            justify-content: flex-start;
            width: 100%;
            max-width: 650px;
        }
        .circle{
            display: none;
        }
        .business-title{
            position: relative;
            display: inline-block;
            transform: none;
        }
        .business-title>p{
            margin: 2rem 0 3rem;
        }
        .body-block {
            height: auto;
            flex-direction: column-reverse;
            align-items: center;
            margin-top: 50px;
        }
        .body-block{
            margin-bottom: 100px;
        }
        .body-block-text {
            top: 0px;
        }
        .body-block-text {
            width: auto;
            max-width: 550px;
            padding: 2%;
        }
        .body-block-img {
            position: relative;
        }
        .body-block-img img {
            max-height: none;
        }
    }
    @media only screen and (max-width: 500px) {
        #wrapper::after {
            background-position: calc(10% + 50px) calc(85% + 80px);
        }
    }
    @media only screen and (max-width: 350px) {
        .business-title>span {
            font-size: 16vw;
        }
        .business-title>span::after{
            width: 22vw;
        }
        .business-title>p {
            font-size: calc(4vw + 0.1rem);
            margin: 2rem 0 0rem;
        }
        #wrapper::after {
            height: calc(35vw + 250px);
            background-position: calc(20% + -20px) calc(85% + 80px);
        }
    }