@media only screen and (min-width: 641px) {
    .hidden-pc { display: none }
    .show-sp { display: none }
}
@media (max-width: 1100px) and (min-width: 641px) {
    .container{padding-left:45px;padding-right:45px;}
    .overview-page .section-link {
        padding: 90px 45px;
    }
    .show-sp { display: block }


    /*  POINT
    *********************************/
    .point-section1 .title .quote-mark {
        font-size: 72px;
        position: relative;
        line-height: .5;
        margin: 0 !important;
    }
    .point-section1 .title .quote-mark.end {
        top: .8em;
        left: 5px;
    }
    .point-section1 .title span:not(.quote-mark) {
        display: inline-block;
    }
    .point-section2 .point-problem {
        padding: 200px 0 200px;
    }
    .point-section2 .point-problem ul li {
        width: 25%;
    }
    .point-section2 .point-problem ul li span {
        top: 70px;
        font-size: 16px;
    }
    .point-section2 .point-intro {
        padding-left: 20px;
        padding-right: 20px;
    }
    .point-section2 .point-intro p {
        font-size: 28px;
    }
    .point-section2 .point-intro h3{
        font-size: 30px;
    }
    .point-section2 .point-intro h2{
        font-size: 42px;
    }


    /*  STRUCTURE
    *********************************/
    .structure-section1 .methods ul li img:first-of-type {
        width: 85%;
    }
    .structure-section1 .methods ul li .title {
        font-size: 16px;
    }
    .structure-section1 .methods ul li .title + p {
        font-size: 12px;
    }
    .structure-section2 .doubt p {
        font-size: 25px;
    }
    .structure-section2 h2 {
        font-size: 36px;
    }
    .structure-section2 .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section2 .steps-list div {
        width: 63%;
    }
    .structure-section2 .steps-list h3.title {
        font-size: 24px;
    }
    .structure-section2 .steps-list h3.title:before {
        font-size: 16px;
        margin-top: 0;
    }
    .structure-section2 .steps-list h3.title + p {
        font-size: 12px;
    }
    .structure-section3 .card-system > div {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section3 .card-system > div:before {
        left: -45%;
    }
    .structure-section3 .card-system .card-system-wrap {
        right: 20px;
    }
    .structure-section3 .card-system .card-system-wrap h3 {
        font-size: 18px;
    }
    .structure-section3 .card-system .card-system-wrap h2 {
        font-size: 26px;
    }
    .structure-section3 .card-system .card-system-wrap > p {
        font-size: 20px;
    }
    .structure-section3 .card-system .card-system-wrap .pill {
        padding: 25px 55px;
    }
    .structure-section3 .card-system .card-system-wrap .pill p {
        font-size: 13px;
    }
    .structure-section2 .steps-list li + li{
        margin-top: -50px;
    }
    .structure-section2 .steps-list div:nth-child(3) {
        padding-top: 30px;
    }
    .structure-section2 .steps-list li:nth-child(odd) h3{
        margin-top: 25px;
    }
    .structure-section2 .steps-list li:nth-child(even) h3.title:before {
        top: -5px;
    }
    .structure-section2 .steps-list li:nth-child(odd) h3.title:before {
        top: 15px;
    }


    /*  VOICE
    *********************************/
    .voice-section1 .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .case-box:nth-child(3n) {
        margin-right: 50px;
    }
    .case-box:last-child {
        margin-right: 0;
    }
	
    .caseD-box:nth-child(3n) {
    }
    .caseD-box:last-child {
        margin-right: 0;
    }

    .reason-top .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .reason-topTitle{
        font-size: 33px;
        display: block;
    }
    p.reason-topSubtitle{
        font-size: 16px;

    }
    .reason-topSubtitle small{
        font-size: 11px;
    }
    .food_pro-main h3{
        font-size: 39px;
    }


    /*  COMPANY
    *********************************/
    .overview-page .comapny-section2 {
        background: url(../img/company/company-img.png) no-repeat right -500px top;
    }
}
@media (max-width: 920px) and (min-width: 641px) {
    .case-box {
        width: calc((100% - 50px) / 2) !important;
    }
}
@media only screen and (max-width: 992px) {
    .point-section3 .achievement-text {
        font-size: 3.2vw;
    }
    .point-section3 .achievement-text > span {
        padding: 2vw 0;
    }
    .point-section3 .achievement-text .upper > span:nth-child(1) {
        font-size: 9vw;
    }
    .point-section3 .achievement-text .upper > span:nth-child(3) {
        font-size: 4.6vw;
    }
}
@media only screen and (max-width: 640px) {
    /*  COMMON
    *********************************/
    .overview-page .padded-section {
        padding: 30px 0;
    }
    .overview-page .section-link {
        padding: 60px 20px;
    }


    /*  POINT
    *********************************/
    .point-top {
        margin-bottom: 50px;
    }
    .point-topBg {
        height: 350px;
        height: 65vw;
    }
    .point-topTitle{
        font-size: 55px;
        padding-top: 32%;
        padding-top: 18vw;
    }
    .point-section1 .title {
        font-size: 30px;
    }
    .point-section1 .title .quote-mark {
        font-size: 72px;
        position: relative;
        line-height: .5;
        margin: 0 !important;
    }
    .point-section1 .title .quote-mark.end {
        top: .8em;
        left: 5px;
    }
    .point-section1 .title span:not(.quote-mark) {
        display: inline-block;
    }
    .point-section2 .point-problem {
        background-image: url(../img/point/point-problem_bg_sp.png);
        background-position: top center;
        background-size: cover;
        padding: 32vw 0;
        margin-top: 1vw;
    }
    .point-section2 .point-problem ul li {
        width: 32%;
        margin: 0;
    }
    .point-section2 .point-problem ul li span {
        top: 75px;
        font-size: 14px;
        top: 10vw;
        font-size: 2.5vw;
    }
    .point-section2 .point-intro {
        padding-top: 75px;
        padding-right: 20px;
        padding-left: 20px;
    }
    .point-section2 .point-intro p {
        font-size: 28px;
    }
    .point-section2 .point-intro h3 {
        font-size: 32px;
    }
    .point-section2 .point-intro h3 small {
        font-size: 22px;
    }


    /*  STRUCTURE
    *********************************/
    .structure-topBg {
        background-image: url(../img/structure/structure-main_bg_sp.png);
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-topSubtitle {
        padding-top: 185px;
    }
    .structure-section1 .intro p {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section1 .methods h3 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section1 .methods ul li {
        width: 48%;
        padding: 0 5px;
    }
    .structure-section1 .methods ul li div {
        padding: 0;
    }
    .structure-section2 .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section2 .steps-list div {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        padding: 0 55px;
    }
    .structure-section3 .card-system > .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .structure-section3 .card-system > div:before {
        display: none;
    }
    .structure-section3 .card-system .card-system-wrap {
        position: static;
        transform: none;
        padding: 90px 0;
    }
    .structure-section3 .card-system .card-system-wrap h3 {
        margin-top: 30px;
        font-size: 5.5vw;
    }
    .structure-section3 .card-system .card-system-wrap .pill {
        padding: 25px 0;
        text-align: center;
        border-radius: 60px;
    }


    /*  VOICE
    *********************************/
    .voice-topBg {
        padding-left: 20px;
        padding-right: 20px;
    }
    .voice-section1 .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .case-box {
        flex: 0 0 100% !important;
    }
    .case-ribbon {
        background: url(https://s.sunnypoint.jp/wp2/wp-content/themes/SUNNYpoint_wp/img/case-ribbon_sp.png) no-repeat;
        background-size: contain;
    }


    /*  REASON
    *********************************/
    .reason-top .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .reason-topTitle {
        line-height: 1.15;
    }
    .reason-topSubtitle {
        font-size: 20px;
        line-height: 1.8;
        text-align: left;
    }
    .reason-topSubtitle small {
        font-size: 14px;
        margin-left: 0;
    }
    .reason-body img {
        width: auto;
        float: none;
        margin-bottom: 25px;
    }
    .reason-body p {
        width: 100%;
        float: none;
        padding-right: 0;
    }


    /*  FUNCTION
    *********************************/
    .function_wrap .sTitle p {
        font-size: 25px;
    }


    /*  FOOD
    *********************************/
    .food_pro-main h3 {
        font-size: 25px;
        margin-bottom: 20px;
    }
    .food_pro-main h3 + p {
        font-size: 13px;
    }


    /*  COMPANY
    *********************************/
    .overview-page .comapny-section2 {
        background-image: none;
        background-color: #F5F5F5;
        padding-top: 0;
    }
    .structure-section2 .struc-doubt-con {
        width: 100%;
        height: 63vw;
    }
    .structure-section2 .struc-doubt-con p {
        line-height: 8vw;
        font-size: 4vw !important;
        margin-top: 16px;
    }
}

@media only screen and (max-width: 424px) {
    /*  POINT
    *********************************/
    .point-section1 .title {
        font-size: 24px;
    }
    .point-section1 .title .quote-mark {
        font-size: 36px;
    }
    .point-section1 .title + .subtitle {
        font-size: 26px;
    }
    .point-section2 .point-problem h4 {
        font-size: 28px;
    }
    .point-section2 .point-intro {
        padding-top: 55px;
    }
    .point-section2 .point-intro p {
        font-size: 20px;
        margin-bottom: 40px;
    }
    .point-section2 .point-intro h3 {
        font-size: 24px;
    }
    .point-section2 .point-intro h2 {
        font-size: 35px;
    }


    /*  STRUCTURE
    *********************************/
    .structure-topSubtitle {
        font-size: 24px;
    }
    .structure-topTitle {
        font-size: 36px;
    }
    .structure-section1 .intro p {
        font-size: 16px;
    }
    .structure-section1 .methods h3 > span:nth-child(1), 
    .structure-section1 .methods h3 > span:nth-child(4) {
        font-size: 36px;
        font-size: 7.5vw;
    }
    .structure-section1 .methods h3 > span:nth-child(2) {
        font-size: 55px;
    }
    .structure-section1 .methods h3 > span:nth-child(3) {
        font-size: 28px;
    }
    .structure-section1 .methods ul li .title {
        font-size: 18px;
    }
    .structure-section2 .doubt p {
        font-size: 24px;
    }
    .structure-section2 h2 {
        font-size: 32px;
        font-size: 8.5vw;
    }
    .structure-section3 .card-system .card-system-wrap h3 {
        font-size: 22px;
        font-size: 5.5vw;
    }
    .structure-section3 .card-system .card-system-wrap h2 {
        font-size: 30px;
    }
    .structure-section3 .card-system .card-system-wrap > p {
        font-size: 18px;
    }
    

    /*  VOICE
    *********************************/
    .voice-topTitle {
        font-size: 36px;
    }
    .voice-topSubtitle {
        font-size: 24px;
    }

    .reason-topTitle {
        font-size: 32px;
        font-size: 8.5vw;
    }
}
@media only screen and (max-width: 441px) {
    .reason-topTitle {
        font-size: 8vw;
    }
}
@media only screen and (max-width: 400px) {
    /* point */
    .point-section2 .point-intro h2 {
        font-size: 9.75vw;
    }
    .point-section2 .point-intro h3 {
        font-size: 6.65vw;
    }
    .point-section2 .point-intro h3 small {
        font-size: 4vw;
    }
    /* structure */
    .structure-section3 .card-system .card-system-wrap h3 {
        font-size: 5vw;
    }
    .structure-section3 .card-system .card-system-wrap h2 {
        font-size: 7vw;
    }
    /* voice */
    .voice-topSubtitle {
        font-size: 6.65vw;
    }
    /* reason */
    .reason-topTitle {
        font-size: 8vw;
    }
}
@media only screen and (max-width: 320px) {
    /* reason */
    .reason-topTitle {
        font-size: 7.5vw;
    }
    /* structure */
    .structure-topTitle {
        font-size: 10vw;
    }
}