@media print, screen and (min-width: 1441px){

    /*画面幅が1441px以上の時*/
    body {
        -webkit-print-color-adjust: exact;
        width: 100%;
        margin: 0 auto;
        height: auto;
    }

    .wrapper {
        width: 100%;
    }
    
    /*heder*/
    a {
        cursor:pointer;
    }
    header {
        height: 830px;
        margin: 0 auto;
        position: relative;
    }
    .header-logo {
        position: fixed;
        position: absolute;
        left: 21.4%; 
        top: 4.5%; 
        z-index: 50;
    }
    nav.globalMenuSp {
        display: none;
    }
    .navToggle {
        display: none;
    }
    .header-menu .menu {
        position: fixed;
        position: absolute;
        top: 8%; 
        right: 20.5%;
        text-align: left;
        z-index: 50;
        font-size: 3px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
    }
    .header-menu ul {
        margin: 0;
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        
    }
    .header-menu li {
        border-left: 1px solid #2b2b2b;
        border-right: 1px solid #2b2b2b;
        padding: 0px 10px;  
    }
    .header-menu li+ li {
        border-left: 0;
        border-right: 1px solid #2b2b2b;    
    }

    .header-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 12px;  
    }
    .header-menu ul li :hover{
        color: #4f49ab;
    }
    .header-menu ul li a {
        text-decoration: none;
        color: #2b2b2b;
        padding: 0px 10px;
    }
    .mainviw {
        width: 100%;
        margin: 0 auto;
    }
    .box {
        width: 100%;
        height: 830px;
        margin: 0 auto;
    }
    .mainviw_img img{
        width: 100%;
        margin: 0 auto;
    }
    #demo-1{
        overflow: hidden;
        width: 100%;
        min-height: 830px;
        background-color: #999;
    }
    .zs-bullets {
        display: none;
    }
    .inner-content {
        position: fixed;
        position: absolute;
        top: 41.5%;    
        left: 23%; 
        text-align: left; 
        color: #2b2b2b; 
        font-size: 34px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 800;
        line-height: 73px;
    }
    
    /*main*/
    main {
        width: auto;
        height: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        height: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        /*justify-content: center;*/
        /*padding-left: 23px;*/
    }
    .cardboxinner {
        display: flex;
        width: 71%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .group1 {
        width: 315px;
        height: 337px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        margin: 4px 26px 20px 0px;
    }
    .group2 {
        width: 315px;
        height: 337px;
        background: #fff;
        margin: 4px 26px 20px 0px;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
    }
    .card-content .sp1 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px;
    }
    .card-content .sp3 img {
        max-width: 65%;
        width: 65%;
        margin-top: 21px;
        margin-left: 50px;
    }
    .card-content .sp4 img {
        max-width: 70%;
        width: 70%;
        margin-top: 24px;
        margin-left: 45px;
    }
    .card-content .sp5 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px;
    }
    .card-content .sp6 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px;
    }
    .card-img {
        max-width: 100%;
        height: 243px;
        transition-duration: 0.3s;
    }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s;
    }
    .card-content2 {
        position: relative;
    }
    .card-content2-img {
        position: absolute;
        max-width: 100%;
    }
    .card-content2-img img {
        height: 337px;
    }
    .card-title h1{
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        padding: 40% 10% 10% 29%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-size: 23px;
        font-weight: 600;
    }
    .card-title p{
        text-align: center;  
        z-index: 1;
        position: absolute;
        left: 1%;
        color: #ffffff;
        padding: 53% 10% 10% 32%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-size: 16px;
        font-weight: regular;
    }
    

    /*aside*/
    aside {
        width: 100%;
        position: relative;
        justify-content: center;
        /*display: flex; */
        height: 545px;
        margin: 0 auto;
        padding: 65px 0 10px;
    }
    .company {
        width: 100%;
        height: 450px;
        position: absolute;
        justify-content: center;
        display: flex;
        margin: 0 auto;
        background:linear-gradient(90deg,#5c56b9 50%,#5c56b9 50%,#4f49ab 50%,#4f49ab 100%);
    }
    .company .wrap{
        overflow: hidden;       
    }
    .company .company-card {
        width: 474px;
        height: 298px;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        align-items: center;
        margin-right: 2%;
        margin-top: 4%;
    }
    .company .company-card a {
        text-decoration: none;
        color: currentColor;
    }
    .company .company-card2 {
        width: calc(33.333% - 10px);    
        width: 474px;
        height: 298px;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        margin-left: 20px;
        margin-top: 4%;
    }
    .company .company-card2 a {
        text-decoration: none;
        color: currentColor;
    }
    .company .card-img {
        max-width: 100%;
        width: 100%;
        height: 240px;
    }
    .company .company-card-content {
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        position:  relative;
        height: 53px;
    }
    .company .company-card-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 14px solid #d3d3d3;
        border-bottom: 14px solid #d3d3d3;
        border-top: 14px solid transparent;
        border-left: 14px solid transparent;
    }
    .company .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333;
    }
    .company .card-text {
        text-align: left;
        font-size: 16px;
        line-height: 10px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: 500;
        position: relative;
    }
    .font_color{
        color: #5c56b9;
        font-weight: bold;
        font-size: 24px;
        padding: 0 15px;
        position: relative;
        top: 5px;
        
    }
    /*page top*/
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
    }
    #page-top a {
        background: #666;
        text-decoration: none;
        color: #fff;
        width: 100px;
        padding: 30px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    #page-top a:hover {
        text-decoration: none;
        background: #999;
    }

    /*footer*/
    footer {
        margin: 0 auto;
        height: 310px;
        background-color: #444444;
        position: relative;
    }
    .footer-box {
        position: absolute;
        top: 13%;
        left: 21.5%;
    }
    .footer-logo {
        max-width: 100%;
        top: 83%;
    }
    .footer-copy {
        color: #a9a9a9;
        padding-left: 4px;
        font-size: 10px; 
    }
    .text-left {
        position: relative;
        margin: 0;
    }

    .footer-menu .menu {
        position: fixed;
        position: absolute;
        top: 17%; 
        right: 22%;
        text-align: left;
        font-size: 3px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
    }

    .footer-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
    }
    .footer-menu li {
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        padding: 0px 10px;

    }
    .footer-menu li+ li {
        border-left: 0;
        border-right: 1px solid #ffffff;
    }

    .footer-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 12px;

    }
    .footer-menu ul li a {
        text-decoration: none;
        color: #ffffff;
        padding: 0px 10px;
    }
    #footer-menu-inner {
        display: none;
    }
}
@media print, screen and (min-width: 1025px) and (max-width: 1440px){
    /*画面幅が1025px以上1440pxまでの時*/
    body {
        -webkit-print-color-adjust: exact;
        width: auto;
        height: auto;
        margin: 0 auto;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .wrapper {
        width: 100%; }


    /*heder*/
    a {
        cursor: pointer; }

    header {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        position: relative; }

    .header-logo {
        position: absolute;
        left: 12%; 
        top: 6%;
        z-index: 50; }

    nav.globalMenuSp, .navToggle {
        display: none; }

    .header-menu .menu {
        position: absolute;
        top: 10.5%;
        right: 12%;
        text-align: left;
        font-size: 3px;
        z-index: 50; }
    .header-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        margin: 0; }
    .header-menu li {
        border-left: 1px solid #2b2b2b;
        border-right: 1px solid #2b2b2b;
        padding: 0px 11px; }
    .header-menu li + li {
        border-left: 0;
        border-right: 1px solid #2b2b2b; }
    .header-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 10px; }
    .header-menu ul li :hover{
        color: #4f49ab;
    }
    .header-menu ul li a {
        text-decoration: none;
        color: #2b2b2b;
        padding: 0px 10px; }

    .mainviw {
        width: auto;
        max-width: 100%;
         }

    .box {
        width: 100%;
        margin: 0 auto;
        height: auto;
    }

    .mainviw_img img {
        width: 100%;
    }

    #demo-1 {
        overflow: hidden;
        width: 100%;
        min-height: 830px;
        background-color: #999; }
    .zs-bullets {
        display: none;
    }
    #demo-1 img {
        width: 10%;
    }
    .inner-content {
        position: absolute;
        left: 15%;
        top: 40%;
        text-align: left;
        color: #2b2b2b;
        font-weight: bold;
        font-size: 35px;
        line-height: 60px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 800;
    }

    /*main*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 90%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .group1 {
        margin: 4px 20px 20px 10px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 313px; }
    .group2 {
        margin: 4px 20px 20px 10px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 313px; }

    .card-content .sp1 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }
    .card-content .sp3 img {
        max-width: 65%;
        width: 65%;
        margin-top: 21px;
        margin-left: 50px; 
    }
    .card-content .sp4 img {
        max-width: 70%;
        width: 70%;
        margin-top: 24px;
        margin-left: 45px; 
    }
    .card-content .sp5 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; 
    }
    .card-content .sp6 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }

    .card-img {
        max-width: 100%;
        height: 250px;
        transition-duration: 0.3s; }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s; }

    .card-content2 {
        position: relative; }

    .card-content2-img {
        position: absolute;
        max-width: 100%;
    }
    
    .card-content2-img img {
        height: 334px;
        width: 313px;
    }
    
    .card-title h1{
        font-size: 24px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        padding: 40% 10% 10% 29%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 500;
    }
    .card-title p{
        font-size: 15px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        left: 3%;
        color: #ffffff;
        padding: 53% 10% 10% 32%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 400;
    }

    /*aside*/
    aside {
        /*display: flex;*/
        width: auto;
        padding: 5% 0;
        justify-content: center; }

    .company {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 460px;
        background: linear-gradient(90deg, #5c56b9 50%, #5c56b9 50%, #4f49ab 50%, #4f49ab 100%); }
    .company .wrap {
        overflow: hidden;
        height: 244px;}
    .company .card-img {
        width: 100%;
        height: 225px;
    } 
    .company .company-card {
        width: calc(33.333% - 10px);
        height: 53%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        align-items: center;
        margin-left: 15%;
        margin-right: 2%;
        margin-top: 5%; }
    .company .company-card a {
        text-decoration: none;
        color: currentColor; }
    .company .company-card2 {
        width: calc(33.333% - 10px);
        height: 53%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        margin-left: 3%;
        margin-top: 5%; }
    .company .company-card2 a {
        text-decoration: none;
        color: currentColor; }
    .company .card-img img {
        max-width: 100%;
        height: auto; }
    .company .company-card-content {
        padding: 3px;
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        position: relative; }
    .company .company-card-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 14px solid #d3d3d3;
        border-bottom: 14px solid #d3d3d3;
        border-top: 14px solid transparent;
        border-left: 14px solid transparent; }
    .company .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333; }
    .company .card-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.5; }

    .font_color {
        color: #5c56b9;
        font-weight: bold;
        font-size: 20px;
        padding: 0 10px; }

    /*page top*/
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
    }
    #page-top a {
        background: #666;
        text-decoration: none;
        color: #fff;
        width: 100px;
        padding: 30px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    #page-top a:hover {
        text-decoration: none;
        background: #999;
    }

    /*footer*/
    footer {
        width: auto;
        max-width: 100%;
        height: 315px;
        background-color: #444444;
        position: relative; }

    .footer-box {
        position: absolute;
        top: 12%;
        left: 12%; }

    .footer-logo {
        max-width: 100%; }

    .footer-copy {
        font-size: 5px;
        color: #a9a9a9;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
        position: absolute;
        top: 78%;}

    .footer-menu .menu {
        position: absolute;
        top: 14.9%;
        right: 12%;
        text-align: left;
        font-size: 3px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .footer-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none; }
    .footer-menu li {
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        padding: 0px 10px; }
    .footer-menu li + li {
        border-left: 0;
        border-right: 1px solid #ffffff; }
    .footer-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 10px; }
    .footer-menu ul li a {
        text-decoration: none;
        color: #ffffff;
        padding: 0px 10px; }

    #footer-menu-inner {
        display: none; } 
    
}
@media print, screen and (min-width: 769px) and (max-width: 1024px){
    /*画面幅が769px以上1024pxまでの時*/
    body {
        -webkit-print-color-adjust: exact;
        width: auto;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .wrapper {
        width: 100%; }

    /*heder*/
    a {
        cursor: pointer; }

    header {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        position: relative; }

    .header-logo {
        position: absolute;
        left: 4%; 
        top: 6%;
        z-index: 50; }

    nav.globalMenuSp, .navToggle {
        display: none; }

    .header-menu .menu {
        position: absolute;
        top: 10.5%;
        right: 2%;
        text-align: left;
        font-size: 3px;
        z-index: 50; }
    .header-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        margin: 0; }
    .header-menu li {
        border-left: 1px solid #2b2b2b;
        border-right: 1px solid #2b2b2b;
        padding: 0px 2px; }
    .header-menu li + li {
        border-left: 0;
        border-right: 1px solid #2b2b2b; }
    .header-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 2px; }
    .header-menu ul li :hover{
        color: #4f49ab;
    }
    .header-menu ul li a {
        text-decoration: none;
        color: #2b2b2b;
        padding: 0px 10px; }

    .mainviw {
        width: auto;
        max-width: 100%;
    }

    .box {
        width: 100%;
        margin: 0 auto;
        height: 623px; }

    .mainviw_img img {
        width: 100%;
    }

    #demo-1 {
        overflow: hidden;
        width: 100%;
        min-height: 623px;
        background-color: #999; }
    .zs-bullets {
        display: none;
    }
    #demo-1 img {
        width: 10%;
    }
    .inner-content {
        position: absolute;
        left: 8%;
        top: 40%;
        text-align: left;
        color: #2b2b2b;
        font-weight: bold;
        font-size: 31px;
        line-height: 60px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 800;
    }

    /*main*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 100%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .group1 {
        margin: 4px 15px 20px 15px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 300px; }
    .group2 {
        margin: 4px 15px 20px 15px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 300px; }

    .card-content .sp1 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }
    .card-content .sp3 img {
        max-width: 65%;
        width: 65%;
        margin-top: 21px;
        margin-left: 50px; 
    }
    .card-content .sp4 img {
        max-width: 70%;
        width: 70%;
        margin-top: 24px;
        margin-left: 45px; 
    }
    .card-content .sp5 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; 
    }
    .card-content .sp6 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }

    .card-img {
        max-width: 100%;
        height: 250px;
        transition-duration: 0.3s; }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s; }

    .card-content2 {
        position: relative; }

    .card-content2-img {
        position: absolute;
        max-width: 100%;
    }

    .card-content2-img img {
        height: 334px;
        width: 313px;
    }

    .card-title h1{
        font-size: 24px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        padding: 40% 10% 10% 29%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 500;
    }
    .card-title p{
        font-size: 15px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        left: 3%;
        color: #ffffff;
        padding: 53% 10% 10% 32%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 400;
    }

    /*aside*/
    aside {
        /*display: flex;*/
        width: auto;
        padding: 5% 0;
        justify-content: center; }

    .company {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 345px;
        background: linear-gradient(90deg, #5c56b9 50%, #5c56b9 50%, #4f49ab 50%, #4f49ab 100%); }
    .company .wrap {
        overflow: hidden; }
    .company .company-card {
        width: calc(33.333% - 10px);
        height: 53%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        align-items: center;
        margin-left: 15%;
        margin-right: 2%;
        margin-top: 5%; }
    .company .company-card a {
        text-decoration: none;
        color: currentColor; }
    .company .company-card2 {
        width: calc(33.333% - 10px);
        height: 53%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        margin-left: 3%;
        margin-top: 5%; }
    .company .company-card2 a {
        text-decoration: none;
        color: currentColor; }
    .company .card-img {
        max-width: 100%;
        height: auto; }
    .company .company-card-content {
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        position: relative; }
    .company .company-card-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 14px solid #d3d3d3;
        border-bottom: 14px solid #d3d3d3;
        border-top: 14px solid transparent;
        border-left: 14px solid transparent; }
    .company .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333; }
    .company .card-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.5; }

    .font_color {
        color: #5c56b9;
        font-weight: bold;
        font-size: 20px;
        padding: 0 10px; }

    /*page top*/
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
    }
    #page-top a {
        background: #666;
        text-decoration: none;
        color: #fff;
        width: 100px;
        padding: 30px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    #page-top a:hover {
        text-decoration: none;
        background: #999;
    }

    /*footer*/
    footer {
        width: auto;
        max-width: 100%;
        height: 230px;
        background-color: #444444;
        position: relative; }

    .footer-box {
        position: absolute;
        top: 12%;
        left: 4%; }

    .footer-logo {
        max-width: 100%; }

    .footer-copy {
        font-size: 5px;
        color: #a9a9a9;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
        position: absolute;
        top: 78%;}

    .footer-menu .menu {
        position: absolute;
        top: 14.9%;
        right: 4%;
        text-align: left;
        font-size: 3px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .footer-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none; }
    .footer-menu li {
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        padding: 0px 10px; }
    .footer-menu li + li {
        border-left: 0;
        border-right: 1px solid #ffffff; }
    .footer-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 2px; }
    .footer-menu ul li a {
        text-decoration: none;
        color: #ffffff;
        padding: 0px 10px; }

    #footer-menu-inner {
        display: none; } 
}
@media only screen and (min-width: 560px) and (max-width: 768px){
    /*560px以上768pxまでの時*/
    body {
        -webkit-print-color-adjust: exact;
        width: auto;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .wrapper {
        width: 100%; }

    /*heder*/
    a {
        cursor: pointer; }

    header {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        position: relative; }

    .header-logo {
        position: absolute;
        left: 4%; 
        top: 6%;
        z-index: 50; }

    nav.globalMenuSp, .navToggle {
        display: none; }

    .header-menu .menu {
        position: absolute;
        top: 10.5%;
        right: 2%;
        text-align: left;
        font-size: 3px;
        z-index: 50; }
    .header-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        margin: 0; }
    .header-menu li {
        border-left: 1px solid #2b2b2b;
        border-right: 1px solid #2b2b2b;
        padding: 0px 2px; }
    .header-menu li + li {
        border-left: 0;
        border-right: 1px solid #2b2b2b; }
    .header-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 2px; }
    .header-menu ul li :hover{
        color: #4f49ab;
    }
    .header-menu ul li a {
        text-decoration: none;
        color: #2b2b2b;
        padding: 0px 10px; }

    .mainviw {
        width: auto;
        max-width: 100%;
    }

    .box {
        width: 100%;
        margin: 0 auto;
        height: 445px; }

    .mainviw_img img {
        width: 100%;
    }

    #demo-1 {
        overflow: hidden;
        width: 100%;
        min-height: 445px;
        background-color: #999; }
    .zs-bullets {
        display: none;
    }
    #demo-1 img {
        width: 10%;
    }
    .inner-content {
        position: absolute;
        left: 9%;
        top: 40%;
        text-align: left;
        color: #2b2b2b;
        font-weight: bold;
        font-size: 23px;
        line-height: 60px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 800;
    }

    /*main*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 90%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .order1 {
        order: 1;
    }
    .order2 {
        order: 0; 
    }
    .order3 {
        order: 2; 
        margin-top: 10px;

    }
    .order4 {
        order: 3; 
        margin-top: 10px;
    }
    .order5 {
        order: 4; 
        margin-top: 10px;
    }
    .order6 {
        order: 5; 
        margin-top: 10px;
    }
    .group1 {
        margin: 4px 15px 20px 15px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 300px; }
    .group2 {
        margin: 4px 15px 20px 15px;
        height: 334px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 300px; }

    .card-content .sp1 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }
    .card-content .sp3 img {
        max-width: 65%;
        width: 65%;
        margin-top: 21px;
        margin-left: 50px; 
    }
    .card-content .sp4 img {
        max-width: 70%;
        width: 70%;
        margin-top: 24px;
        margin-left: 45px; 
    }
    .card-content .sp5 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; 
    }
    .card-content .sp6 img {
        max-width: 90%;
        width: 90%;
        margin-top: 30px;
        margin-left: 15px; }

    .card-img {
        max-width: 100%;
        height: 250px;
        transition-duration: 0.3s; }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s; }

    .card-content2 {
        position: relative; }

    .card-content2-img {
        position: absolute;
        max-width: 100%;
    }

    .card-content2-img img {
        height: 334px;
        width: 313px;
    }

    .card-title h1{
        font-size: 24px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        padding: 40% 10% 10% 29%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 500;
    }
    .card-title p{
        font-size: 15px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        left: 3%;
        color: #ffffff;
        padding: 53% 10% 10% 32%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 400;
    }

    /*aside*/
    aside {
        /*display: flex;*/
        width: auto;
        padding: 5% 0;
        justify-content: center; }

    .company {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 265px;
        background: linear-gradient(90deg, #5c56b9 50%, #5c56b9 50%, #4f49ab 50%, #4f49ab 100%); }
    .company .wrap {
        overflow: hidden;
        width: 300px;
    }
    .company .company-card {
        height: 61%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        align-items: center;
        margin-left: 8%;
        margin-right: 3%;
        margin-top: 5%; }
    .company .company-card a {
        text-decoration: none;
        color: currentColor; }
    .company .company-card2 {
        height: 61%;
        background: #fff;
        box-shadow: 0 2px 0px #ccc;
        justify-content: center;
        margin-left: 3%;
        margin-top: 5%; }
    .company .company-card2 a {
        text-decoration: none;
        color: currentColor; }
    .company .card-img {
        max-width: 100%;
        height: auto; }
    .company .company-card-content {
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        position: relative;
        height: 36px;
    }
    .company .company-card-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 14px solid #d3d3d3;
        border-bottom: 14px solid #d3d3d3;
        border-top: 14px solid transparent;
        border-left: 14px solid transparent; }
    .company .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333; }
    .company .card-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.5;
    margin: 0;
    }

    .font_color {
        color: #5c56b9;
        font-weight: bold;
        font-size: 20px;
        padding: 0 10px; }

    /*page top*/
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
    }
    #page-top a {
        background: #666;
        text-decoration: none;
        color: #fff;
        width: 100px;
        padding: 30px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    #page-top a:hover {
        text-decoration: none;
        background: #999;
    }

    /*footer*/
    footer {
        width: auto;
        max-width: 100%;
        height: 230px;
        background-color: #444444;
        position: relative; }

    .footer-box {
        position: absolute;
        top: 12%;
        left: 4%; }

    .footer-logo {
        max-width: 100%; }

    .footer-copy {
        font-size: 5px;
        color: #a9a9a9;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
        position: absolute;
        top: 78%;}

    .footer-menu .menu {
        position: absolute;
        top: 14.9%;
        right: 4%;
        text-align: left;
        font-size: 3px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;}
    .footer-menu ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none; }
    .footer-menu li {
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        padding: 0px 10px; }
    .footer-menu li + li {
        border-left: 0;
        border-right: 1px solid #ffffff; }
    .footer-menu ul li {
        border-style: solid;
        border-top-style: none;
        border-bottom-style: none;
        font-size: 14px;
        padding: 0px 2px; }
    .footer-menu ul li a {
        text-decoration: none;
        color: #ffffff;
        padding: 0px 10px; }

    #footer-menu-inner {
        display: none; } 
}

@media only screen and (max-width:559px){
    /*画面幅が559pxまでの時*/
    body {
        -webkit-print-color-adjust: exact;
        width: 100%;
        max-width: 100%;
        margin:0 auto;
    }
    a {
        text-decoration: none;
    }
    header {
        width: 100%;
        max-width:100%;
        height: auto;
        position: relative;
        margin: 0;
    }
    .header-menu{
        display: none;
    }   
    .header-logo {
        margin-top: 1px;
        text-align: left;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .header-secondary {
        display: none;
    }
    
    /*ハンバーガーメニューjq*/
    nav.globalMenuSp {
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        background: #fff;
        color: #000;
        text-align: center;
        transform: translateY(-100%);
        transition: all 0.6s;
        width: 100%;
    }

    nav.globalMenuSp ul {
        background: #3f39a1;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
    }

    nav.globalMenuSp ul li {
        font-size: 1.1em;
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px dotted #333;
    }

    /* 最後はラインを描かない */
    nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    nav.globalMenuSp ul li a {
        display: block;
        color: #fff;
        padding: 1em 0;
        text-decoration: none;
    }

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
        transform: translateY(0%);
    }

    .navToggle {
        display: block;
        position: fixed;    /* bodyに対しての絶対位置指定 */
        right: 13px;
        top: 9px;
        width: 42px;
        height: 39px;
        cursor: pointer;
        z-index: 3;
        background: #fff;
        text-align: center;

    }

    .navToggle span {
        display: block;
        position: absolute;    /* .navToggleに対して */
        width: 30px;
        border-bottom: solid 3px #3f39a1;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;

    }

    .navToggle span:nth-child(1) {
        top: 9px;

    }

    .navToggle span:nth-child(2) {
        top: 18px;

    }

    .navToggle span:nth-child(3) {
        top: 27px;

    }

    .navToggle span:nth-child(4) {
        border: none;
        color: #eee;
        font-size: 9px;
        font-weight: bold;
        top: 34px;
    }
    /* 最初のspanをマイナス45度に */
    .navToggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /* 2番目と3番目のspanを45度に */
    .navToggle.active span:nth-child(2),
    .navToggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /*ここまで*/
    .cp_breadcrumb {
        display: none;
    }

    .mainviw {
        display: block;
        width:100%;
        max-width: 100%;
        height: auto;
    }
    .box {
        width: 100%;
        margin: 0 auto;
        height: auto;
    }
    .mainviw_img {
        width: 100%;
        margin: 0;


    }
    .mainviw_img img {
        width: 100%;
        max-width: 100%;
        height: auto;

    }
    #demo-1{
        overflow: hidden;
        width: 100%;
        min-height: 340px;
        background-color: #999;
        height: auto;
        position: relative;

    }
    .zs-bullets {
        display: none;
    }

    .inner-content {
        position: absolute;    
        left: 9%; 
        top: 45%;    
        text-align: left; 
        color: #2b2b2b; 
        font-weight: bold; 
        font-size: 15px;
        line-height: 20px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 700;
    }
 
    /*
    main {
        width: 100%;
        max-width:100%;
        margin: 0;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        padding-bottom: 5%;
        padding-top: 5%;
    }

    .cardbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 90%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .c-img {
        height: 175px;
    }
    .order1 {
        order: 1;
    }
    .order2 {
        order: 0; 
    }
    .order3 {
        order: 2; 
        margin-top: 10px;

    }
    .order4 {
        order: 3; 
        margin-top: 10px;
    }
    .order5 {
        order: 4; 
        margin-top: 10px;
    }
    .order6 {
        order: 5; 
        margin-top: 10px;
    }

    .group1 {
        height: 208px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 196px;

    }
    .card-content .sp1 img {
        max-width: 80%;
        width: 80%;
        margin-top: 8px;
        margin-left: 20px;
    }
    .group2 {
        margin-bottom: 5px;
        margin-right: 5px;
        height: 208px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 196px;

    }

    .card-content .sp3 img {
        max-width: 63%;
        width: 63%;
        margin-top: 5px;
        margin-left: 28px;
    }

    .card-content .sp4 img {
        max-width: 63%;
        width: 63%;
        margin-top: 7px;
        margin-left: 28px;
    }

    .card-content .sp5 img {
        max-width: 93%;
        width: 93%;
        margin-top: 9px;
        margin-left: 6px;
    }

    .card-content .sp6 img {
        max-width: 92%;
        width: 92%;
        margin-top: 9px;
        margin-left: 7px;
    }
    .card-img {
        max-width: 100%;
        height: 165px;
        transition-duration: 0.3s;
    }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s;
    }
    .card-content{
        width: 100%;
        display: flex;
        height: auto;
    }
    .card-content img{
        max-width: 100%;
        width: 100%;
        align-items: center;
        height: auto;


    }
    .card-content2 {
        position: relative;
        order: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .card-content2-img {
        width: 100%;
        max-width: 100%;
        height: 190px;
        order: 0;
    }
    .card-content2-img img{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333;
    }
    .card-text {
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
    }
    .card-title2 {
        font-size: 13px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        align-items: center;
    }
    span {
        font-size: 10px;
    }
    .card-link {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 20px;
    }
    .card-link a {
        text-decoration: none;
        color: #0bd;
        margin: 0 10px;
    }
    .card-link a:hover {
        color: #0090aa;
    }


    aside {
        width: 100%;
        max-width:100%;
        margin: 0;
    }
    .company {
        width: 100%;
        margin: 0;
        height: auto;
    }
    .company .wrap{
        overflow: hidden;
        width: 300px;
        height: 155px;


    }
    .company .company-card {
        height: 240px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #5c56b9;


    }
    .company .company-card2 {
        height: 240px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        justify-content: center;
        background-color: #3f39a1;
        align-items: center;
        display: flex;
    }
    .company .card-img {
        width: 300px;
        max-width: 100%;
        height: auto;
        position: relative;
    }
    .company .company-card-content {
        width: 300px;
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        position:  relative;
    }
    .company .company-card-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 14px solid #d3d3d3;
        border-bottom: 14px solid #d3d3d3;
        border-top: 14px solid transparent;
        border-left: 14px solid transparent;
    }
    .company .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
        color: #333;

    }
    .company .card-text {
        text-align: left;
        font-size: 12px;
        line-height: 0.8;
        color: black;
    }
    .font_color{
        color: #5c56b9;
        font-weight: bold;
        font-size: 18px;
        padding: 0 10px;
    }

    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
    }
    #page-top a {
        background: #666;
        text-decoration: none;
        color: #fff;
        width: 100px;
        padding: 30px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    #page-top a:hover {
        text-decoration: none;
        background: #999;
    }
    footer {
        width: 100%;
        max-width: 100%;
        height: auto;
        background-color: #444444;
        position: relative;
        margin: 0;
    }
    .footer-logo {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .footer-logo img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .footer-copy {
        font-size: 10px;
        color: #a9a9a9;
        text-align: center;
    }
    .text-left {
        margin: 0;
    }
    .footer-logo {
        display: none;
    }
    .footer-menu .menu {
        display: none;
    }
    #footer-menu-inner {
        margin: 0;
        padding: 0;
    }
    #footer-menu-inner .menu {
        padding: 0 0 0;
        background-color: #fff;
    }

    #footer-menu-inner ul{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: 600;

    }
    #footer-menu-inner li{
        display: block;
        font-size: 14px;
        color: #333333;
        margin: 1px 0px 0px 0px;
        cursor: pointer;
        padding: 5px 15px;
        background-color: #f1f1f1;
    }
    #footer-menu-inner li a {
        width: 100%;
        height: 100%;
        padding: 5px 15px;
        display: block;
        box-sizing: border-box;
        color: #000000;
        text-decoration: none;
    }
}


@media screen and (max-width:470px){
    /*画面幅が470pxまでの時*/
    #demo-1{
        overflow: hidden;
        width: 100%;    
        background-color: #999;
        min-height: 230px;
    }
    .zs-bullets {
        display: none;
    }

    .inner-content {
        position: absolute;    
        left: 3%; 
        top: 40%;    
        text-align: left; 
        color: #2b2b2b; 
        font-weight: bold; 
        font-size: 14px;
        line-height: 20px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 700;
    }
    /*
    main {
        width: 100%;
        max-width:100%;
        margin: 0;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        padding-bottom: 5%;
        padding-top: 5%;
    }
    .cardbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 100%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .c-img {
        height: 156px;
    }
    .order1 {
        order: 1;
    }
    .order2 {
        order: 0; 
    }
    .order3 {
        order: 2; 
        margin-top: 10px;

    }
    .order4 {
        order: 3; 
        margin-top: 10px;
    }
    .order5 {
        order: 4; 
        margin-top: 10px;
    }
    .order6 {
        order: 5; 
        margin-top: 10px;
    }

    .group1 {
        height: 189px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 178px;

    }
    .card-content .sp1 img {
        max-width: 90%;
        width: 90%;
        margin-top: 10px;
        margin-left: 8px;
    }
    .group2 {
        margin-bottom: 5px;
        margin-right: 5px;
        height: 189px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 178px;

    }

    .card-content .sp3 img {
        max-width: 72%;
        width: 72%;
        margin-top: 6px;
        margin-left: 25px;
    }

    .card-content .sp4 img {
        max-width: 79%;
        width: 79%;
        margin-top: 6px;
        margin-left: 20px;
    }

    .card-content .sp5 img {
        max-width: 96%;
        width: 96%;
        margin-top: 10px;
        margin-left: 4px;
    }

    .card-content .sp6 img {
        max-width: 95%;
        width: 95%;
        margin-top: 10px;
        margin-left: 5px;
    }
    .card-img {
        max-width: 100%;
        height: 153px;
        transition-duration: 0.3s;
    }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s;
    }
    .card-content{
        width: 100%;
        display: flex;
        height: auto;
    }
    .card-content img{
        max-width: 100%;
        width: 100%;
        align-items: center;
        height: auto;
    }
    .card-content2 {
        position: relative;
        order: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .card-content2-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        order: 0;
    }
    .card-content2-img img{
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .card-title h1{
        font-size: 18px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        top: 32%;
        left: 20%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 300;
    }
    .card-title p{
        font-size: 11px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        top: 46%;
        left: 29%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 200;
    }
    
    span {
        font-size: 10px;
    }
    .card-link {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 20px;
    }
    .card-link a {
        text-decoration: none;
        color: #0bd;
        margin: 0 10px;
    }
    .card-link a:hover {
        color: #0090aa;
    }


}
@media screen and (max-width:374px){
    /*画面幅が374pxまでの時*/
    .mainviw_img {
        max-width: 100%;
        height: auto;
    }

    #demo-1{
        overflow: hidden;
        max-width: 100%;
        min-height: 200px;
        height: auto;
        background-color: #999;
    }
    #demo-1 img {
        max-width: 100%;
        height: auto;
    }
    .zs-bullets {
        display: none;
    }

    .inner-content {
        position: absolute;    
        left: 3%; 
        top: 40%;    
        text-align: left; 
        color: #2b2b2b; 
        font-weight: bold; 
        font-size: 14px;
        line-height: 20px;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 700;
    }
    /*
    main {
        width: 100%;
        max-width:100%;
        margin: 0;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        padding-bottom: 5%;
        padding-top: 8%;
    }
    .cardbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }*/
    main {
        width: auto;
        /*background-color: #f5f5f5;*/
        /*display: flex;*/
        justify-content: center;
        height: auto;
    }
    .cardbox {
        /*display: flex;*/
        width: 100%;
        background-color: #f5f5f5;
        margin: 0 auto;
        height: auto;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/ }
    .cardboxinner {
        display: flex;
        width: 100%;
        margin: 0 auto;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 5%;
    }
    .c-img {
        height: 132px;
    }
    .order1 {
        order: 1;
    }
    .order2 {
        order: 0; 
    }
    .order3 {
        order: 2; 
        margin-top: 10px;

    }
    .order4 {
        order: 3; 
        margin-top: 10px;
    }
    .order5 {
        order: 4; 
        margin-top: 10px;
    }
    .order6 {
        order: 5; 
        margin-top: 10px;
    }

    .group1 {
        height: 161px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 152px;

    }
    .card-content .sp1 img {
        max-width: 100%;
        width: 97%;
        margin-top: 8px;
        margin-left: 2px;
    }
    .group2 {
        margin-bottom: 5px;
        margin-right: 5px;
        height: 161px;
        background: #fff;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        display: block;
        width: 152px;

    }

    .card-content .sp3 img {
        max-width: 100%;
        width: 73%;
        margin-top: 5px;
        margin-left: 20px;
    }

    .card-content .sp4 img {
        max-width: 100%;
        width: 73%;
        margin-top: 6px;
        margin-left: 20px;
    }

    .card-content .sp5 img {
        max-width: 100%;
        width: 97%;
        margin-top: 9px;
        margin-left: 2px;
    }

    .card-content .sp6 img {
        max-width: 100%;
        width: 97%;
        margin-top: 9px;
        margin-left: 2px;
    }
    .card-img {
        max-width: 100%;
        height: 130px;
        transition-duration: 0.3s;
    }
    .card-img:hover {
        transform: scale(1.1);
        transition-duration: 0.3s;
    }
    .card-content{
        width: 100%;
        display: flex;
        height: auto;
    }
    .card-content img{
        max-width: 100%;
        width: 100%;
        align-items: center;
        height: auto;


    }
    .card-content2 {
        position: relative;
        order: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .card-content2-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        order: 0;
    }
    .card-content2-img img{
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .card-title h1{
        font-size: 15px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        top: 32%;
        left: 21%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 200;
    }
    .card-title p{
        font-size: 10px;
        text-align: center;  
        z-index: 1;
        position: absolute;
        color: #ffffff;
        top: 45%;
        left: 27%;
        font-family: "游明朝体", YuGothic, "游明朝", "Yu Gothic", sans-serif;
        font-weight: 100;
    }
    span {
        font-size: 10px;
    }
    .card-link {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 20px;
    }
    .card-link a {
        text-decoration: none;
        color: #0bd;
        margin: 0 10px;
    }
    .card-link a:hover {
        color: #0090aa;
    }

}