@charset "utf-8";

/* pc
----------------------------------------------- */

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

/* header
----------------------------------------------- */
#header .upper div.tel_number {
    font-weight: 600;
}

/* merits
----------------------------------------------- */
#merits {
    padding: 120px 0;
    background: white;
}
body.tablet #merits {
    background-attachment: scroll;
}
#merits .inner {
    margin: auto;
    max-width: 1200px;
}
#merits h2 {
    font-size: 2.2em;
    font-weight: 600;
    text-align: center;
    line-height: 1.65em;
    margin-top: -60px;
}
#merits .copy {
    margin: 30px auto 0;
    max-width: 645px;
}
#merits .copy p {
    color: #4d4d4d;
    font-size: 1.25em;
    text-align: center;
    line-height: 1.85em;
}
#merits .articles {
    margin: 60px 0 0;
}
#merits article {
    float: left;
    position: relative;
    width: 50%;
    text-align: center;
}
#merits article:nth-child(1), #merits article:nth-child(2) {
    padding: 0 0 50px;
}
#merits article:nth-child(3), #merits article:nth-child(4) {
    padding: 60px 0 25px;
}
#merits article h3 {
    position: relative;
    padding: 130px 0 0;
    color: #78282a;
    font-size: 1.45em;
    font-weight: 500;
    line-height: 1.5em;
}
#merits article h3:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -44px;
    width: 88px;
    height: 106px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}
#merits article:nth-child(1) h3:after {
    background-image: url(../images/index/problem_t01.png);
}
#merits article:nth-child(2) h3:after {
    background-image: url(../images/index/problem_t02.png);
}
#merits article:nth-child(3) h3:after {
    background-image: url(../images/index/problem_t03.png);
}
#merits article:nth-child(4) h3:after {
    background-image: url(../images/index/problem_t04.png);
}
#merits article .summary {
    margin: 25px auto 0;
    max-width: 465px;
}
#merits article .summary p {
    margin: 0 25px;
    height: 8.25em;
    font-size: 1.15em;
    text-align: left;
    line-height: 1.65em;
}
#merits article:first-child:before, #merits article:first-child:after, #merits article:last-child:before, #merits article:last-child:after {
    display: block;
    content: "";
    position: absolute;
    background: rgba(128,128,128,0.3);
}
#merits article:first-child:before {
    left: 0;
    bottom: 0;
    width: 92%;
    height: 1px;
}
#merits article:first-child:after {
    top: 0;
    right: 0;
    width: 1px;
    height: 92%;
}
#merits article:last-child:before {
    left: -1px;
    bottom: 0;
    width: 1px;
    height: 92%;
}
#merits article:last-child:after {
    top: 0;
    right: 0;
    width: 92%;
    height: 1px;
}
/* case */

#merits .case {
    margin: 65px auto 0;
    max-width: 1250px;
}
#merits .case_inner {
    margin: 0 25px;
    padding: 50px 0;
    text-align: center;
    background: transparent;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
}
#merits .case h4 {
    display: inline-block;
    position: relative;
    color: #78282a;
    font-size: 1.65em;
    font-weight: 500;
}
#merits .case h4:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 4px;
    background: #c8b175;
}
#merits .case ul {
    margin: 50px 0 0;
}
#merits .case li {
    float: left;
    width: 33.33%;
}
#merits .case li a {
    display: block;
}
#merits .case li:nth-child(2) a {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
#merits .case li span {
    display: block;
}
#merits .case li .label {
    margin: 25px 15px 0;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.75em;
}
#merits .case li .label em {
    font-size: 0.8em;
    line-height: 1.5em;
}
#merits .case li .link {
    margin: 30px 0 0;
    color: #4970bf;
    font-size: 1.15em;
}
#merits .case li a:hover .link {
    text-decoration: underline;
}


/* problem
    ----------------------------------------------- */

    #problem {
        padding: 120px 0;
        background: white;
    }
    body.tablet #problem {
        background-attachment: scroll;
    }
    #problem .inner {
        margin: auto;
        max-width: 1200px;
    }
    #problem h2 {
        font-size: 2.5em;
        text-align: center;
        line-height: 1.65em;
        margin-top: -60px;
    }
    #problem .copy {
        margin: 30px auto 0;
        max-width: 645px;
    }
    #problem .copy p {
        color: #4d4d4d;
        font-size: 1.25em;
        text-align: center;
        line-height: 1.85em;
    }
    #problem .articles {
        margin: 60px 0 0;
    }
    #problem article {
        float: left;
        position: relative;
        width: 50%;
        text-align: center;
    }
    #problem article:nth-child(1), #problem article:nth-child(2) {
        padding: 0 0 50px;
    }
    #problem article:nth-child(3), #problem article:nth-child(4) {
        padding: 60px 0 25px;
    }
    #problem article h3 {
        position: relative;
        padding: 130px 0 0;
        color: #78282a;
        font-size: 1.45em;
        font-weight: 500;
        line-height: 1.5em;
    }
    #problem article h3:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0 0 0 -44px;
        width: 88px;
        height: 106px;
        background-repeat: no-repeat;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -ms-background-size: 100% auto;
        background-size: 100% auto;
    }
    #problem article:nth-child(1) h3:after {
        background-image: url(../images/index/problem_t01.png);
    }
    #problem article:nth-child(2) h3:after {
        background-image: url(../images/index/problem_t02.png);
    }
    #problem article:nth-child(3) h3:after {
        background-image: url(../images/index/problem_t03.png);
    }
    #problem article:nth-child(4) h3:after {
        background-image: url(../images/index/problem_t04.png);
    }
    #problem article .summary {
        margin: 25px auto 0;
        max-width: 465px;
    }
    #problem article .summary p {
        margin: 0 25px;
        height: 8.25em;
        font-size: 1.15em;
        text-align: left;
        line-height: 1.65em;
    }
    #problem article:first-child:before, #problem article:first-child:after, #problem article:last-child:before, #problem article:last-child:after {
        display: block;
        content: "";
        position: absolute;
        background: rgba(128,128,128,0.3);
    }
    #problem article:first-child:before {
        left: 0;
        bottom: 0;
        width: 92%;
        height: 1px;
    }
    #problem article:first-child:after {
        top: 0;
        right: 0;
        width: 1px;
        height: 92%;
    }
    #problem article:last-child:before {
        left: -1px;
        bottom: 0;
        width: 1px;
        height: 92%;
    }
    #problem article:last-child:after {
        top: 0;
        right: 0;
        width: 92%;
        height: 1px;
    }
    /* case */
    
    #problem .case {
        margin: 65px auto 0;
        max-width: 1250px;
    }
    #problem .case_inner {
        margin: 0 25px;
        padding: 50px 0;
        text-align: center;
        background: #f7f4f0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px;
    }
    #problem .case h4 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.65em;
        font-weight: 500;
    }
    #problem .case h4:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 100%;
        height: 4px;
        background: #c8b175;
    }
    #problem .case ul {
        margin: 50px 0 0;
    }
    #problem .case li {
        float: left;
        width: 33.33%;
    }
    #problem .case li a {
        display: block;
    }
    #problem .case li:nth-child(2) a {
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }
    #problem .case li span {
        display: block;
    }
    #problem .case li .label {
        margin: 25px 15px 0;
        font-size: 1.25em;
        font-weight: 500;
        line-height: 1.75em;
    }
    #problem .case li .label em {
        font-size: 0.8em;
        line-height: 1.5em;
    }
    #problem .case li .link {
        margin: 30px 0 0;
        color: #4970bf;
        font-size: 1.15em;
    }
    #problem .case li a:hover .link {
        text-decoration: underline;
    }
    #problem .case li a figure {
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        -ms-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }
    #problem .case li a:hover figure {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }




/* feature
    ----------------------------------------------- */

#feature {
    background: #3c95c1;
}
#feature .inner {
    margin: auto;
    padding: 110px 0;
    max-width: 1280px;
    color: #fff;
}
#feature h2 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.65em;
}
#feature .copy {
    margin: 30px auto 0;
    max-width: 640px;
}
#feature .copy p {
    font-size: 1.25em;
    text-align: center;
    line-height: 1.85em;
}
#feature .images {
    position: relative;
    margin: 60px auto 0;
    max-width: 1250px;
    height: 550px;
    overflow: hidden;
}
#feature .images li {
    display: none;
    position: absolute;
    left: 50%;
    width: 800px;
    height: 462px;
}
#feature .images li.on {
    display: block;
}
#feature .images li:first-child {
    top: 0;
    margin: 0 0 0 -625px;
}
#feature .images li:last-child {
    bottom: 0;
    margin: 0 0 0 -175px;
}
#feature .more {
    margin: 60px 0 0;
    text-align: center;
}
#feature .more a {
    display: inline-block;
    width: 240px;
    height: 48px;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 49px;
}
#feature .articles {
    margin: 60px 0 0;
    overflow: hidden;
}
#feature article {
    float: left;
    position: relative;
    margin: 0 0 -32768px;
    padding: 0 0 32768px;
    width: 25%;
    text-align: center;
}
#feature article:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.3);
}
#feature article:last-child:after {
    display: none;
}
#feature article h3 {
    position: relative;
    margin: 0 40px;
    padding: 140px 0 0;
    font-size: 1.35em;
    font-weight: 500;
    line-height: 1.25em;
}
#feature article h3:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -50px;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    -webkit-background-size: 100px;
    -moz-background-size: 100px;
    -ms-background-size: 100px;
    background-size: 100px;
}
#feature article:nth-child(1) h3:after {
    background-image: url(../images/index/feature_icon01.png);
}
#feature article:nth-child(2) h3:after {
    background-image: url(../images/index/feature_icon02.png);
}
#feature article:nth-child(3) h3:after {
    background-image: url(../images/index/feature_icon03.png);
}
#feature article:nth-child(4) h3:after {
    background-image: url(../images/index/feature_icon04.png);
}
#feature article p {
    margin: 30px 40px 0;
    padding: 0 0 40px;
    font-size: 1.15em;
    text-align: left;
    line-height: 1.65em;
}
/* companies
    ----------------------------------------------- */

#companies {
    background: #f2f2f2;
}
#companies .inner {
    padding: 72px 0;
    margin: auto;
    max-width: 1120px;
}
#companies h2 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.65em;
}
#companies ul {
    padding-top: 3em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#companies li {
    padding: 30px;
}
#companies li p {
    font-size: 24px;
    font-weight: 500;
    color: #808080;
    margin: 50px;
}
/* feature2
    ----------------------------------------------- */

#feature2 {
    background: #fff;
}
#feature2 .inner {
    margin: auto;
    padding: 110px 0;
    max-width: 1280px;
    color: #333;
}
#feature2 h3 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.65em;
}
#feature2 .copy {
    margin: 30px auto 0;
    max-width: 640px;
}
#feature2 .copy p {
    font-size: 1.25em;
    text-align: center;
    line-height: 1.85em;
}
#feature2 .articles {
    margin: 60px 0 0;
    overflow: hidden;
}
#feature2 article {
    float: left;
    position: relative;
    margin: 0 0 -32768px;
    padding: 0 0 32768px;
    width: 20%;
    text-align: center;
}
#feature2 article h3 {
    position: relative;
    margin: 0 30px;
    padding: 160px 0 0;
    font-size: 1.35em;
    font-weight: 500;
    line-height: 1.55em;
    color: #78282a;
    white-space: nowrap;
    height: 40px;
}
#feature2 article h3:after {
    display: block;
    content: "";
    position: absolute;
    top: -9px;
    left: 0%;
    margin: 0 0 0 0;
    width: 200px;
    height: 150px;
    background-repeat: no-repeat;
    -webkit-background-size: 200px 150px;
    -moz-background-size: 200px 150px;
    -ms-background-size: 200px 150px;
    background-size: 200px 150px;
}
#feature2 article:nth-child(1) h3:after {
    background-image: url(../images/index/feature_contents_1.png?date=20250530);
}
#feature2 article:nth-child(2) h3:after {
    background-image: url(../images/index/feature_contents_2.png?date=20250530);
}
#feature2 article:nth-child(3) h3:after {
    background-image: url(../images/index/feature_contents_3.png?date=20250530);
}
#feature2 article:nth-child(4) h3:after {
    background-image: url(../images/index/feature_contents_6.png?date=20250530);
}
#feature2 article:nth-child(5) h3:after {
    background-image: url(../images/index/feature_contents_4.png?date=20250530);
}
#feature2 article p {
    margin: 30px 20px 0;
    padding: 0 0 40px;
    font-size: 1.15em;
    text-align: left;
    line-height: 1.65em;
}
/* case
    ----------------------------------------------- */

#case {
    background: #f2f2f2;
}
#case .inner {
    padding: 110px 0;
}
#case h2 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.65em;
}
#case .copy {
    margin: 30px auto 0;
    max-width: 640px;
}
#case .copy p {
    color: #4d4d4d;
    font-size: 1.25em;
    text-align: center;
    line-height: 1.85em;
}
#case .more {
    margin: 60px 0 0;
    text-align: center;
}
#case .more a {
    display: inline-block;
    width: 240px;
    height: 48px;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 49px;
}
#case .interview .index {
    position: relative;
    margin: 55px auto 0;
    max-width: 1240px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}
#case .interview .articles {
    position: relative;
    margin: 0 60px;
    overflow: hidden;
}
#case .interview article {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    background: white;
    z-index: 1;
}
#case .interview article header {
    position: absolute;
    top: 0;
    left: 46.42%;
}
#case .interview article h3 {
    margin: 0 25px 0 0;
    padding: 35px 0 0;
    color: #78282a;
    font-size: 1.65em;
    font-weight: 500;
    line-height: 1.5em;
}
#case .interview article .client {
    margin: 20px 25px 0 0;
    color: #4d4d4d;
    font-size: 1em;
    line-height: 1.25em;
}
#case .interview article .summary {
    margin: 25px 25px 0 0;
}
#case .interview article .summary li {
    position: relative;
    padding: 9px 0 9px 74px;
    font-size: 1.15em;
}
#case .interview article .summary li span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    margin: -12px 0 0;
    width: 64px;
    height: 24px;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    background: #a3a3a3;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    border-radius: 24px;
}
#case .interview article .more {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 1em;
    font-weight: 500;
}
#case .interview article figure {
    position: relative;
    width: 42.85%;
    height: 320px;
    overflow: hidden;
}
#case .interview article figure img {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#case .interview article .logo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 10.71%;
}
#case .interview article .logo img {
    width: 100%;
    height: auto;
}
#case .interview .control {
    display: none;
}
#case .interview .control.on {
    display: block;
}
#case .interview .control li {
    position: absolute;
    top: 50%;
    margin: -17px 0 0;
    width: 19px;
    height: 34px;
    cursor: pointer;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
#case .interview .control .prev {
    left: 15px;
}
#case .interview .control .next {
    right: 15px;
}
#case .interview .control li:after {
    display: block;
    content: "";
    width: 19px;
    height: 34px;
    background: url(/casestudy/images/control.png) no-repeat;
    -webkit-background-size: 38px 68px;
    -moz-background-size: 38px 68px;
    -ms-background-size: 38px 68px;
    background-size: 38px 68px;
}
#case .interview .control .prev:after {
    background-position: 0 0;
}
#case .interview .control .next:after {
    background-position: -19px 0;
}
#case .interview .control .prev:hover:after {
    background-position: 0 -34px;
}
#case .interview .control .next:hover:after {
    background-position: -19px -34px;
}
#case .interview .control .prev:hover {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
}
#case .interview .control .next:hover {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
}
#case .interview a {
    color: #4970bf;
}
#case .interview a:hover {
    text-decoration: underline;
}
#case .interview a.arrow {
    position: relative;
}
#case .interview a.arrow:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
}
#case .interview a.arrow:before {
    display: none;
}
#case .interview a.arrow:after {
    right: 27px;
    margin: -5px 0 0;
    width: 9px;
    height: 15px;
    background: url(../images/common/icon_arrow01.png) no-repeat;
}
/* news
    ----------------------------------------------- */

#news .inner {
    margin: auto;
    padding: 75px 0 70px;
    max-width: 1250px;
}
#news article {
    float: left;
    position: relative;
    width: 50%;
}
#news article:first-child:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #e6e6e6;
}
#news article h3 {
    position: relative;
    font-size: 1.65em;
}
#news article:first-child h3 {
    margin: 0 40px 0 25px;
}
#news article:last-child h3 {
    margin: 0 25px 0 40px;
}
#news article h3 .more {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -0.5em 0 0;
    font-size: 0.65em;
}
#news article h3 .more a {
    color: #4970bf;
}
#news article h3 .more a:hover {
    color: #2b52a1;
    text-decoration: underline;
}
#news article .list {
    padding: 20px 0 0;
}
#news article .list tr.new td a:after {
    display: inline-block;
    content: "";
    margin: 0 0 0 10px;
    width: 28px;
    height: 10px;
    background: url(../images/index/icon_new.png) no-repeat;
    -webkit-background-size: 28px 10px;
    -moz-background-size: 28px 10px;
    -ms-background-size: 28px 10px;
    background-size: 28px 10px;
}
#news article .list a:hover {
    color: #4970bf;
    text-decoration: underline;
}
#news article:first-child .list {
    margin: 0 40px 0 25px;
}
#news article:last-child .list {
    margin: 0 25px 0 40px;
}
#news article table {
    width: 100%;
}
#news article th, #news article td {
    padding: 10px 0;
    font-size: 1em;
    vertical-align: top;
    line-height: 1.5em;
}
#news article th {
    padding-right: 15px;
    width: 20%;
}
#news article td {
    width: 80%;
}
#common_news .inner {
    padding: 75px 0 40px;
}
}

@media screen and (min-width:741px) and (max-width: 1140px) {
#feature2 article h3:after {
    display: block;
    content: "";
    position: absolute;
    top: -9px;
    left: 0%;
    margin: 0 0 0 0;
    width: 130px;
    height: 95px;
    background-repeat: no-repeat;
    -webkit-background-size: 130px 95px;
    -moz-background-size: 130px 95px;
    -ms-background-size: 130px 95px;
    background-size: 130px 95px;
}
#feature2 article h3 {
    white-space: inherit;
    padding: 110px 0 20px;
    margin: 0 14px;
}
}

@media screen and (min-width:741px) and (max-width: 1023px) {
/* problem
    ----------------------------------------------- */

    /* case */

#problem .case li .label {
    font-size: 1em;
    text-align: left;
}
#problem .case li .label em {
    display: block;
}
#problem .case li .label br {
    display: none;
}
/* case
    ----------------------------------------------- */

/* interview */

#case .interview article h3 {
    padding: 20px 0 0;
    font-size: 1.25em;
}
#case .interview article .client {
    margin: 15px 25px 0 0;
    font-size: 0.95em;
}
#case .interview article .summary {
    margin: 15px 25px 0 0;
}
#case .interview article .summary li {
    padding: 9px 0 9px 74px;
    font-size: 1em;
}
}

/* mobile
----------------------------------------------- */

@media only screen and (max-width:740px) {

/* merits
    ----------------------------------------------- */

    #merits {
        background: white;
    }
    #merits .inner {
        margin: 0 20px;
        padding: 70px 0;
    }
    #merits h2 {
        margin: 0 20px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5em;
    }
    #merits h2 br {
        display: none;
    }
    #merits .copy {
        margin: 30px 18px 0;
    }
    #merits .copy p {
        color: #4d4d4d;
        font-size: 1.1em;
        line-height: 1.6em;
    }
    #merits .articles {
        margin: 60px 0 0;
        border-bottom: 1px solid rgba(128,128,128,0.3);
    }
    #merits article {
        padding: 20px 0;
        border-top: 1px solid rgba(128,128,128,0.3);
    }
    #merits article header {
        position: relative;
        height: 53px;
        cursor: pointer;
    }
    #merits article header:before {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        margin: -5px 0 0;
        width: 19px;
        height: 11px;
        background: url(../images/index/icon_arrow01.png) no-repeat;
        -webkit-background-size: 19px 22px;
        -moz-background-size: 19px 22px;
        -ms-background-size: 19px 22px;
        background-size: 19px 22px;
    }
    #merits article header.on:before {
        background-position: 0 -11px;
    }
    #merits article header:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 53px;
        background-repeat: no-repeat;
        -webkit-background-size: 44px 53px;
        -moz-background-size: 44px 53px;
        -ms-background-size: 44px 53px;
        background-size: 44px 53px;
    }
    #merits article:nth-child(1) header:after {
        background-image: url(../images/index/problem_t01.png);
    }
    #merits article:nth-child(2) header:after {
        background-image: url(../images/index/problem_t02.png);
    }
    #merits article:nth-child(3) header:after {
        background-image: url(../images/index/problem_t03.png);
    }
    #merits article:nth-child(4) header:after {
        background-image: url(../images/index/problem_t04.png);
    }
    #merits article h3 {
        position: absolute;
        top: 50%;
        left: 60px;
        margin: 0 55px 0 0;
        color: #78282a;
        font-size: 1.1em;
        font-weight: 500;
        line-height: 1.5em;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #merits article h3 br {
        display: none;
    }
    #merits article .summary {
        display: none;
        margin: 20px 20px 0;
    }
    #merits article .summary.on {
        display: block;
    }
    #merits article .summary p {
        font-size: 0.95em;
        line-height: 1.85em;
    }
    /* case */
    
    #merits .case {
        padding: 30px 0;
        text-align: center;
        background: #f7f4f0;
    }
    #merits .case h4 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.2em;
        font-weight: 500;
    }
    #merits .case h4:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: #c8b175;
    }
    #merits .case ul {
        margin: 35px 20px 0;
    }
    #merits .case li {
        border-top: 1px solid #e0e0e0;
    }
    #merits .case li:last-child {
        border-bottom: 1px solid #e0e0e0;
    }
    #merits .case li a {
        display: block;
        position: relative;
        padding: 20px 0;
        min-height: 40px;
    }
    #merits .case li a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        margin: -6px 0 0;
        width: 8px;
        height: 13px;
        background: url(../images/index/icon_arrow05.png) no-repeat;
        -webkit-background-size: 8px 13px;
        -moz-background-size: 8px 13px;
        -ms-background-size: 8px 13px;
        background-size: 8px 13px;
    }
    #merits .case li span {
        display: block;
    }
    #merits .case li .label {
        margin: 0 40px 0 70px;
        font-size: 1em;
        font-weight: 500px;
        text-align: left;
        line-height: 1.5em;
    }
    #merits .case li .label em {
        display: block;
        font-size: 0.8em;
        line-height: 1.5em;
    }
    #merits .case li .label br {
        display: none;
    }
    #merits .case li .link {
        display: none;
    }
    #merits .case figure {
        position: absolute;
        top: 20px;
        left: 0;
    }
    #merits .case figure img {
        width: auto;
        height: 40px;
    }

/* problem
    ----------------------------------------------- */

#problem {
    background: white;
}
#problem .inner {
    margin: 0 20px;
    padding: 70px 0;
}
#problem h2 {
    margin: 0 20px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#problem h2 br {
    display: none;
}
#problem .copy {
    margin: 30px 18px 0;
}
#problem .copy p {
    color: #4d4d4d;
    font-size: 1.1em;
    line-height: 1.6em;
}
#problem .articles {
    margin: 60px 0 0;
    border-bottom: 1px solid rgba(128,128,128,0.3);
}
#problem article {
    padding: 20px 0;
    border-top: 1px solid rgba(128,128,128,0.3);
}
#problem article header {
    position: relative;
    height: 53px;
    cursor: pointer;
}
#problem article header:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -5px 0 0;
    width: 19px;
    height: 11px;
    background: url(../images/index/icon_arrow01.png) no-repeat;
    -webkit-background-size: 19px 22px;
    -moz-background-size: 19px 22px;
    -ms-background-size: 19px 22px;
    background-size: 19px 22px;
}
#problem article header.on:before {
    background-position: 0 -11px;
}
#problem article header:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 53px;
    background-repeat: no-repeat;
    -webkit-background-size: 44px 53px;
    -moz-background-size: 44px 53px;
    -ms-background-size: 44px 53px;
    background-size: 44px 53px;
}
#problem article:nth-child(1) header:after {
    background-image: url(../images/index/problem_t01.png);
}
#problem article:nth-child(2) header:after {
    background-image: url(../images/index/problem_t02.png);
}
#problem article:nth-child(3) header:after {
    background-image: url(../images/index/problem_t03.png);
}
#problem article:nth-child(4) header:after {
    background-image: url(../images/index/problem_t04.png);
}
#problem article h3 {
    position: absolute;
    top: 50%;
    left: 60px;
    margin: 0 55px 0 0;
    color: #78282a;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.5em;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#problem article h3 br {
    display: none;
}
#problem article .summary {
    display: none;
    margin: 20px 20px 0;
}
#problem article .summary.on {
    display: block;
}
#problem article .summary p {
    font-size: 0.95em;
    line-height: 1.85em;
}
/* case */

#problem .case {
    padding: 30px 0;
    text-align: center;
    background: #f7f4f0;
}
#problem .case h4 {
    display: inline-block;
    position: relative;
    color: #78282a;
    font-size: 1.2em;
    font-weight: 500;
}
#problem .case h4:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #c8b175;
}
#problem .case ul {
    margin: 35px 20px 0;
}
#problem .case li {
    border-top: 1px solid #e0e0e0;
}
#problem .case li:last-child {
    border-bottom: 1px solid #e0e0e0;
}
#problem .case li a {
    display: block;
    position: relative;
    padding: 20px 0;
    min-height: 40px;
}
#problem .case li a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -6px 0 0;
    width: 8px;
    height: 13px;
    background: url(../images/index/icon_arrow05.png) no-repeat;
    -webkit-background-size: 8px 13px;
    -moz-background-size: 8px 13px;
    -ms-background-size: 8px 13px;
    background-size: 8px 13px;
}
#problem .case li span {
    display: block;
}
#problem .case li .label {
    margin: 0 40px 0 70px;
    font-size: 1em;
    font-weight: 500px;
    text-align: left;
    line-height: 1.5em;
}
#problem .case li .label em {
    display: block;
    font-size: 0.8em;
    line-height: 1.5em;
}
#problem .case li .label br {
    display: none;
}
#problem .case li .link {
    display: none;
}
#problem .case figure {
    position: absolute;
    top: 20px;
    left: 0;
}
#problem .case figure img {
    width: auto;
    height: 40px;
}
/* feature
    ----------------------------------------------- */

#feature {
    background: #3c95c1;
}
#feature .inner {
    padding: 70px 0;
    color: #fff;
}
#feature h2 {
    margin: 0 40px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#feature h2 br {
    display: none;
}
#feature .copy {
    margin: 30px 40px 0;
}
#feature .copy p {
    font-size: 1.1em;
    line-height: 1.6em;
}
#feature .images {
    position: relative;
    margin: 60px 0 0;
    height: 274px;
    overflow: hidden;
}
#feature .images li {
    position: absolute;
    left: 50%;
}
#feature .images li:first-child {
    top: 0;
    margin: 0 0 0 -310px;
}
#feature .images li:last-child {
    bottom: 0;
    margin: 0 0 0 -88px;
}
#feature .images li img {
    width: auto;
    height: 230px;
}
#feature .more {
    margin: 40px 20px 0;
}
#feature .more a {
    margin: auto;
    max-width: 335px;
    height: 52px;
    font-size: 1.15em;
    line-height: 53px;
}
#feature .articles {
    margin: 55px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
#feature article {
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.3);
}
#feature article header {
    position: relative;
    height: 50px;
    cursor: pointer;
}
#feature article header:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -5px 0 0;
    width: 19px;
    height: 11px;
    background: url(../images/index/icon_arrow02.png) no-repeat;
    -webkit-background-size: 19px 22px;
    -moz-background-size: 19px 22px;
    -ms-background-size: 19px 22px;
    background-size: 19px 22px;
}
#feature article header.on:before {
    background-position: 0 -11px;
}
#feature article header:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -ms-background-size: 50px 50px;
    background-size: 50px 50px;
}
#feature article:nth-child(1) header:after {
    background-image: url(../images/index/feature_icon01.png);
}
#feature article:nth-child(2) header:after {
    background-image: url(../images/index/feature_icon02.png);
}
#feature article:nth-child(3) header:after {
    background-image: url(../images/index/feature_icon03.png);
}
#feature article:nth-child(4) header:after {
    background-image: url(../images/index/feature_icon04.png);
}
#feature article h3 {
    position: absolute;
    top: 50%;
    left: 60px;
    margin: 0 55px 0 0;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.5em;
    -webkit-transform: translateY(-50%);
}
#feature article h3 br {
    display: none;
}
#feature article .summary {
    display: none;
    margin: 20px 20px 0;
}
#feature article .summary.on {
    display: block;
}
#feature article .summary p {
    font-size: 0.95em;
    line-height: 1.85em;
}
/* companies
    ----------------------------------------------- */

#companies {
    background: #f2f2f2;
}
#companies .inner {
    padding: 72px 0;
    margin: auto;
    max-width: 1120px;
}
#companies h2 {
    margin: 0 40px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#companies li {
    float: left;
    padding: 30px;
}
#companies ul {
    padding-top: 3em;
}
#companies li p {
    font-size: 24px;
    font-weight: 500;
    color: #808080;
    margin: 52px;
}
/* feature2
    ----------------------------------------------- */

#feature2 {
    background: #fff;
}
#feature2 .inner {
    padding: 70px 0 20px;
    color: #333;
}
#feature2 h3 {
    margin: 0 40px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#feature2 h3 br {
    display: none;
}
#feature2 .copy {
    margin: 30px 40px 0;
}
#feature2 .copy p {
    font-size: 1.1em;
    line-height: 1.6em;
    text-align: center;
}
#feature2 .images {
    position: relative;
    margin: 60px 0 0;
    height: 274px;
    overflow: hidden;
}
#feature2 .images li {
    position: absolute;
    left: 50%;
}
#feature2 .images li:first-child {
    top: 0;
    margin: 0 0 0 -310px;
}
#feature2 .images li:last-child {
    bottom: 0;
    margin: 0 0 0 -88px;
}
#feature2 .images li img {
    width: auto;
    height: 230px;
}
#feature2 .more {
    margin: 40px 20px 0;
}
#feature2 .more a {
    margin: auto;
    max-width: 335px;
    height: 52px;
    font-size: 1.15em;
    line-height: 53px;
}
#feature2 .articles {
    margin: 55px 20px 0;
    border-bottom: 1px solid rgba(128,128,128,0.3);
}
#feature2 article {
    padding: 20px 0;
    border-top: 1px solid rgba(128,128,128,0.3);
}
#feature2 article header {
    position: relative;
    height: 50px;
    cursor: pointer;
}
#feature2 article header:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -5px 0 0;
    width: 19px;
    height: 11px;
    background: url(../images/index/icon_arrow01.png) no-repeat;
    -webkit-background-size: 19px 22px;
    -moz-background-size: 19px 22px;
    -ms-background-size: 19px 22px;
    background-size: 19px 22px;
}
#feature2 article header.on:before {
    background-position: 0 -11px;
}
#feature2 article header:after {
    display: block;
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 52px;
    height: 39px;
    background-repeat: no-repeat;
    -webkit-background-size: 52px 39px;
    -moz-background-size: 52px 39px;
    -ms-background-size: 52px 39px;
    background-size: 52px 39px;
}
#feature2 article:nth-child(1) header:after {
    background-image: url(../images/index/feature_contents_1.png?date=20250530);
}
#feature2 article:nth-child(2) header:after {
    background-image: url(../images/index/feature_contents_2.png?date=20250530);
}
#feature2 article:nth-child(3) header:after {
    background-image: url(../images/index/feature_contents_3.png?date=20250530);
}
#feature2 article:nth-child(4) header:after {
    background-image: url(../images/index/feature_contents_6.png?date=20250530);
}
#feature2 article:nth-child(5) header:after {
    background-image: url(../images/index/feature_contents_4.png?date=20250530);
}
#feature2 article h3 {
    position: absolute;
    top: 50%;
    left: 66px;
    margin: 0 55px 0 0;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.5em;
    color: #78282a;
    -webkit-transform: translateY(-50%);
}
#feature2 article h3 br {
    display: none;
}
#feature2 article .summary {
    display: none;
    margin: 20px 20px 0;
}
#feature2 article .summary.on {
    display: block;
}
#feature2 article .summary p {
    font-size: 0.95em;
    line-height: 1.85em;
}
/* case
    ----------------------------------------------- */

#case {
    background: #f2f2f2;
}
#case .inner {
    padding: 70px 0;
}
#case h2 {
    margin: 0 40px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#case h2 span {
    display: block;
}
#case h2 br {
    display: none;
}
#case .copy {
    margin: 30px 40px 0;
}
#case .copy p {
    color: #4d4d4d;
    font-size: 1.1em;
    line-height: 1.6em;
}
#case .copy br {
    display: none;
}
#case .more {
    margin: 25px 0 0;
    font-size: 1em;
    text-align: center;
}
#case .more a {
    margin: auto;
    max-width: 335px;
    height: 52px;
    font-size: 1em;
    line-height: 53px;
}
#case .interview .index {
    position: relative;
    margin: 55px auto 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}
#case .interview .articles {
    position: relative;
    margin: 0 50px;
    height: 335px;
    overflow: hidden;
}
#case .interview article {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 30px;
    width: 100%;
    height: 305px;
    background: white;
    z-index: 1;
}
#case .interview article h3 {
    margin: 20px 20px 0;
    color: #78282a;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
}
#case .interview article h3 br {
    display: none;
}
#case .interview article .client {
    margin: 10px 20px 0;
    color: #4d4d4d;
    font-size: 0.85em;
    line-height: 1.25em;
}
#case .interview article .summary {
    margin: 0 20px;
    padding: 10px 0 0;
}
#case .interview article .summary li {
    position: relative;
    margin: 6px 0 0;
    font-size: 0.8em;
    line-height: 1.25em;
}
#case .interview article .summary li span {
    display: inline-block;
    position: relative;
    padding: 0 18px 0 0;
}
#case .interview article .summary li span:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    margin: -6px 0 0;
    width: 1px;
    height: 12px;
    background: #595959;
}
#case .interview article .more {
    margin: 25px 0 0;
    font-size: 1em;
    text-align: center;
}
#case .interview article .more a:after {
    display: none;
}
#case .interview article figure img {
    width: 100%;
    height: auto;
}
#case .interview article .logo {
    display: none;
}
#case .interview .control {
    display: none;
}
#case .interview .control.on {
    display: block;
}
#case .interview .control li {
    position: absolute;
    top: 50%;
    margin: -50px 0 0;
    width: 50px;
    height: 100px;
    cursor: pointer;
}
#case .interview .control .prev {
    left: 0;
}
#case .interview .control .next {
    right: 0;
}
#case .interview .control li:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -5px;
    width: 11px;
    height: 19px;
    background: url(/casestudy/images/control_min.png) no-repeat;
    -webkit-background-size: 22px 19px;
    -moz-background-size: 22px 19px;
    -ms-background-size: 22px 19px;
    background-size: 22px 19px;
}
#case .interview .control .prev:after {
    background-position: 0 0;
}
#case .interview .control .next:after {
    background-position: -11px 0;
}
#case .interview a {
    color: #4970bf;
}
/* news
    ----------------------------------------------- */

#news .inner {
    margin: 0 20px;
    padding: 20px 0;
    text-align: left;
}
#news article {
    padding: 30px 0;
    border-top: 1px solid #e6e6e6;
}
#news article:first-child {
    border: 0;
}
#news article h3 {
    position: relative;
    font-size: 1.35em;
}
#news article h3 .more {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -0.5em 0 0;
    font-size: 0.8em;
}
#news article h3 .more a {
    color: #4970bf;
}
#news article .list {
    margin: 25px 0 0;
}
#news article .list tr.new th:after {
    display: inline-block;
    content: "";
    margin: 0 0 0 10px;
    width: 22px;
    height: 8px;
    background: url(../images/index/icon_new.png) no-repeat;
    -webkit-background-size: 22px 8px;
    -moz-background-size: 22px 8px;
    -ms-background-size: 22px 8px;
    background-size: 22px 8px;
}
#news article table {
    width: 100%;
}
#news article tr {
    display: none;
}
#news article tr:first-child {
    display: block;
}
#news article th, #news article td {
    display: block;
    padding: 2px 0 0;
    font-size: 0.95em;
    line-height: 1.5em;
}
#news article th {
    font-size: 0.8em;
}
}
/* h1 change
----------------------------------------------- */
#header #head_img {
    display: block;
}
#intro .copy {
    display: block;
}

@media print, screen and (min-width: 741px) {
#header #head_img {
    margin: 0 24px;
    padding: 36px 0;
}
body.fixed #header #head_img a img {
    width: auto;
    height: 36px;
}
body.fixed #header #head_img {
    padding: 10px 0;
}
}

@media screen and (max-width: 1100px) and (min-width: 741px) {
#header #head_img {
    padding: 16px 0;
}
#header #head_img a img {
    width: auto;
    height: 40px;
}
}

@media screen and (max-width: 740px) {
#header #head_img {
    margin: 0 12px;
    padding: 12px 0;
}
#header #head_img a img {
    width: auto;
    height: 24px;
}
}
/* intro 
    ----------------------------------------------- */
#intro .inner {
    position: relative;
    margin: auto;
    color: #fff;
}
#intro .slick-slide {
    position: relative;
}
#intro button {
    cursor: pointer;
    outline: none;
    appearance: none;
    text-indent: -9999px;
    border: none;
}
#intro button:active, #intro button:focus {
    outline: none;
    border: none;
}
#intro .slick-arrow {
    position: absolute;
    top: 50%;
    display: block;
    background: url(../images/index/icon_arrow06.png) no-repeat;
    background-size: contain;
}
#intro .slick-prev {
    z-index: 2;
    transform: scale(-1, 1);
}
#intro .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}
#intro .slick-dots li {
    position: relative;
    border-radius: 50%;
}
#intro .slick-dots button {
    position: absolute;
    right: 1px;
    bottom: 1px;
    display: block;
    padding: 0;
    border-radius: 50%;
    background: #aeb1b5;
    border: solid 1px #fff;
}
#intro .slick-dots .slick-active button {
    background: #78282a;
    border: solid 1px transparent;
}
/* intro carousel slide2*/
#intro .cv_box {
    width: 440px;
}
#intro .material a {
    padding-top: 7px;
    height: 63px;
    width: 450px;
    line-height: 57px;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: 32px;
}
#intro .logo_change_button {
    max-height: 100px;
    max-width: 450px;
    margin-top: 10px;
    background: #ecf1f6;
    box-shadow: 0px 5px 0px #a1a1a1;
    border-radius: 4px;
}
#intro .logo_change_button img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
#intro div.sub_entry {
    margin-top: 15px;
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    color: #4970bf;
}
#intro .sub_entry a {
    height: 37px;
    width: 440px;
    line-height: 37px;
    font-size: 1em;
}
#intro .sub_entry .sub_small_buttom {
    margin: 10px 16px;
    color: #4970bf;
}
#intro .slide2 {
    background: url(/assets/images/index/top_1_1.png?date=20250530) right center / cover repeat-x;
    overflow: hidden;
}
#intro .slide2 .material a {
    margin-top: 28px;
}
#intro .slide2.slide4 .material a {
    margin-top: 25px;
}
#intro .slide5 .material a {
    margin-top: 32px;
}
#intro .it-trend-seal {
    width: 300px;
    float: left;
    padding: 28px 48px;
}
#intro .it-trend-seal li {
    display: inline-block;
}
/* intro carousel slide3-5*/
#intro .slide3 {
    background: url(/assets/images/index/top_2.png?date=20250530) right center / cover repeat-x;
    overflow: hidden;
}
#intro .slide3 .slide_h1 {
    padding-top: 70px;
}
#intro .slide4 {
    background: url(/assets/images/index/top_3.png?date=20250530) 67% center / cover repeat-x;
    overflow: hidden;
}
#intro .slide5 {
    background: url(/assets/images/index/top_4.png?date=20250530) 61% center / cover repeat-x;
    overflow: hidden;
}
#intro .slide5 .slide_h1 {
    padding-top: 36px;
}
#intro .slide5 .copy {
    margin-top: 14px;
    font-size: 16px;
}
#intro .slide5 .cv_box {
    margin-top: -18px;
}
#intro .slide5 .label_seminar {
    border: solid 2px #fff;
    border-radius: 22px;
    padding: 4px 18px;
    font-size: 0.4em;
    line-height: 62px;
}
#intro .slide5 .date, .place {
    font-size: 0.8em;
}
#intro .slide5 .time, .place_sub {
    font-size: 0.6em;
}
#intro .slick-slide {
    height: 497px;
}

/* intro carousel large pc
----------------------------------------------- */
@media print, screen and (min-width: 1280px) {
#intro {
    background: #8da5b9;
    overflow: hidden;
}
body.tablet #intro {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}
#intro .inner {
    height: 460px;
}
#intro .slick-slide {
    height: 460px;
    padding-left: 84px;
}
#intro .slick-arrow {
    width: 22px;
    height: 40px;
    margin-top: -20px;
}
#intro .slick-prev {
    left: 10px;
}
#intro .slick-next {
    right: 10px;
}
#intro .slick-dots {
    bottom: 15px;
}
#intro .slick-dots li {
    width: 16px;
    height: 16px;
    margin: 0 4px;
    border: solid 2px transparent;
}
#intro .slick-dots button {
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
}
#intro .slick-dots .slick-active {
    border: solid 2px #fff;
}
}

/* intro carousel tablet landscape
----------------------------------------------- */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
#intro {
    background: url(/assets/images/index/top_1_1.png?date=20250530) repeat-x 0 0;
    overflow: hidden;
}
body.tablet #intro {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}
#intro .inner {
    max-width: 1232px;
    height: 460px;
}
#intro .slick-slide {
    height: 460px;
    padding-left: 80px;
    z-index: 0;
}
#intro .slick-arrow {
    width: 22px;
    height: 40px;
    margin-top: -20px;
}
#intro .slick-prev {
    left: 24px;
}
#intro .slick-next {
    right: 24px;
}
#intro .slick-dots {
    bottom: 15px;
}
#intro .slick-dots li {
    width: 16px;
    height: 16px;
    margin: 0 4px;
    border: solid 2px transparent;
}
#intro .slick-dots button {
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
}
#intro .slick-dots .slick-active {
    border: solid 2px #fff;
}
#intro .slick-slide:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,121,144,0.7);
}
#intro .slide-inside {
    z-index: 2;
}
}

/* intro carousel tablet portlait
----------------------------------------------- */
@media screen and (max-width: 1023px) and (min-width: 768px) {
#intro {
    background: url(/assets/images/index/top_1_1.png?date=20250530) no-repeat center center;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}
#intro .inner {
    height: 460px;
    text-align: center;
}
#intro .slick-slide {
    height: 460px;
}
#intro .slick-arrow {
    width: 12px;
    height: 20px;
    margin-top: -11px;
}
#intro .slick-prev {
    left: 10px;
}
#intro .slick-next {
    right: 10px;
}
#intro .slick-dots {
    bottom: 9px;
}
#intro .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border: solid 1px transparent;
}
#intro .slick-dots button {
    top: 0px;
    left: 0px;
    width: 8px;
    height: 8px;
}
#intro .slick-dots .slick-active {
    border: solid 1px #fff;
}
#intro .slick-slide {
    z-index: 0;
}
#intro .slick-slide:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,121,144,0.7);
}
#intro .slide-inside {
    z-index: 2;
}
}

/* intro carousel smartphone large
----------------------------------------------- */
@media screen and (max-width: 767px) and (min-width: 375px) {
#intro {
    background: url(/assets/images/index/top_1_1.png?date=20250530) no-repeat center center;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}
#intro .inner {
    text-align: center;
}
#intro .slick-arrow {
    width: 12px;
    height: 20px;
    margin-top: -11px;
}
#intro .slick-prev {
    left: 10px;
}
#intro .slick-next {
    right: 10px;
}
#intro .slick-dots {
    bottom: 9px;
}
#intro .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border: solid 1px transparent;
}
#intro .slick-dots button {
    top: 0px;
    left: 0px;
    width: 8px;
    height: 8px;
}
#intro .slick-dots .slick-active {
    border: solid 1px #fff;
}
/* スライド2枚目 smartphone large
    ----------------------------------------------- */
#intro .slide2 {
    text-align: center;
    padding-bottom: 35px;
}
#intro .slide2 .slide_h1 {
    margin-top: 0px;
    padding: 100px 50px 12px;
}
#intro .cv_seal_set {
    width: 272px;
    margin-left: auto;
    margin-right: auto;
}
#intro .cv_box {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
}
#intro .material a {
    width: 100%;
    font-size: 14px;
    line-height: 52px;
}
#intro .sub_entry a {
    font-size: 12px;
}
#intro .it-trend-seal {
    float: none;
    margin-top: 30px;
    width: 100%;
    padding: 0 0 86px 45px;
}
#intro .it-trend-seal img {
    width: 70%;
    height: 70%;
}
#intro .material a {
    margin-top: 0px;
}
#intro .slide5 .slide_h1 {
    padding-top: 56px!important;
}
#intro .slide4 .slide_h1 {
    padding-top: 170px!important;
}
#intro .slick-slide {
    z-index: 0;
}
#intro .slick-slide:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,121,144,0.7);
}
#intro .slide-inside {
    z-index: 2;
}
}

/* intro carousel smartphone small
----------------------------------------------- */
@media screen and (max-width: 374px) {
#intro {
    background: url(/assets/images/index/top_1_1.png?date=20250530) no-repeat center center;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}
#intro .inner {
    padding-bottom: 0;
}
#intro .slick-arrow {
    width: 12px;
    height: 20px;
    margin-top: -11px;
}
#intro .slick-prev {
    left: 10px;
}
#intro .slick-next {
    right: 10px;
}
#intro .slick-dots {
    bottom: 13px;
}
#intro .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border: solid 1px transparent;
}
#intro .slick-dots button {
    top: 0px;
    left: 0px;
    width: 8px;
    height: 8px;
}
#intro .slick-dots .slick-active {
    border: solid 1px #fff;
}
}
/* スライダー1枚目
----------------------------------------------- */
#intro .images.on {
    display: block;
}
#intro .images li {
    overflow: hidden;
}
#intro .images li img {
    margin-top: -1px;
    margin-bottom: -1px;
}

/* スライダー1枚目  large pc
----------------------------------------------- */
@media print, screen and (min-width: 1280px) {
#intro h1, #intro .h1_p {
    padding-top: 70px;
    font-size: 46px;
    line-height: calc(56 / 48);
}
#intro .slide_h1 {
    padding-top: 90px;
    font-size: 46px;
    line-height: calc(56 / 48);
}
#intro .slide4 .slide_h1 {
    padding-top: 78px;
}
#intro .copy {
    margin-top: 18px;
    font-size: 22px;
    line-height: calc(26 / 18);
}
#intro .images {
    display: none;
    position: absolute;
    top: 50%;
    right: 177px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
#intro .images li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
#intro .entry {
    display: inline-block;
    margin-top: 49px;
}
#intro .entry a {
    width: 256px;
    height: 64px;
    font-size: 1.25em;
    line-height: 64px;
}
#intro .globalsign {
    position: absolute;
    left: 177px;
    bottom: 16px;
}
#intro .globalsign img {
    width: auto;
    height: 39px;
}
}

/* スライダー1枚目 tablet landscape
----------------------------------------------- */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
#intro h1, #intro .h1_p {
    padding-top: 70px;
    font-size: 44px;
    line-height: calc(56 / 44);
}
#intro .slide_h1 {
    padding-top: 70px;
    font-size: 44px;
    line-height: calc(56 / 44);
}
#intro .copy {
    font-size: 16px;
    line-height: calc(28 / 16);
    margin-top: 25px;
}
#intro .entry {
    display: inline-block;
    margin-top: 42px;
}
#intro .entry a {
    width: 256px;
    height: 64px;
    font-size: 1.25em;
    line-height: 64px;
}
#intro .globalsign {
    position: absolute;
    left: 80px;
    bottom: 16px;
}
#intro .globalsign img {
    width: auto;
    height: 39px;
}
#intro .images {
    display: none;
    position: absolute;
    top: 50%;
    right: 69px;
 width: calc(454 / 1024 * 100%);
    max-height: 538px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
#intro .images img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 498px;
}
#intro .images li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
}

/* スライダー1枚目 tablet portlait
----------------------------------------------- */
@media screen and (max-width: 1023px) and (min-width: 768px) {
#intro h1, #intro .h1_p {
    margin-top: 393px;
    font-size: 36px;
    line-height: calc(48 / 36);
}
#intro .slide_h1 {
    margin-top: 393px;
    font-size: 36px;
    line-height: calc(48 / 36);
}
#intro .copy {
    padding: 20px 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: calc(28 / 16);
}
#intro .copy span {
    display: block;
}
#intro .copy br {
    display: none;
}
#intro .entry {
    position: absolute;
    left: 0;
    bottom: 54px;
    width: 100%;
    text-align: center;
}
#intro .entry a {
    margin: auto;
    max-width: 235px;
    height: 52px;
    font-size: 14px;
    line-height: 52px;
}
#intro .globalsign {
    position: absolute;
    right: 13px;
    bottom: 8px;
}
#intro .globalsign img {
    width: auto;
    height: 20px;
    margin-left: auto;
}
#intro .images {
    display: none;
    position: absolute;
    top: 23px;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#intro .images img {
    max-width: 355px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#intro .images li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
}
/* スライダー2枚目  tablet portlait
    ----------------------------------------------- */
#intro .slide2 {
    text-align: center;
}
#intro .slide2 h1, #intro .slide2 .h1_p {
    margin-top: 0px;
    padding: 4% 131px 28px;
}
#intro .slide2 .slde_h1 {
    margin-top: 0px;
    padding: 6% 131px 28px;
}
#intro .cv_seal_set {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
}
#intro .cv_box {
    width: 380px;
}
#intro .material a {
    width: 380px;
}
#intro .it-trend-seal {
    width: 334px;
    margin-top: -10px;
}
#intro .material a {
    margin-top: 0px;
}
/* スライダー2枚目  tablet portlait */
#intro .slide4 .cv_seal_4 {
    width: 380px;
}
#intro .slide5 .cv_seal_5 {
    width: 380px;
}
#intro .slide5 h1, #intro .slide5 .h1_p {
    padding-top: 2%;
    font-size: 2.2em;
}
#intro .slide5 .slide_h1 {
    padding-top: 2%;
    font-size: 2.2em;
}
}

/* スライダー2-5枚目 smartphone large
----------------------------------------------- */
@media screen and (max-width: 648px) and (min-width: 375px) {
#intro .slide2 h1, #intro .slide2 .h1_p {
    margin-top: 0px;
    padding: 90px 50px 12px;
    font-size: 22px;
}
#intro .slide2 .slide_h1 {
    margin-top: 0px;
    padding: 100px 50px 12px;
    font-size: 22px;
}
}

/* スライダー1枚目 smartphone large
----------------------------------------------- */
@media screen and (max-width: 767px) and (min-width: 375px) {
#intro h1, #intro .h1_p {
    margin-top: 157px;
    font-size: 24px;
    line-height: calc(32 / 24);
    text-align: center;
}
#intro .slide_h1 {
    margin-top: 290px;
    font-size: 24px;
    line-height: calc(32 / 24);
    text-align: center;
}
#intro .copy {
    padding: 9px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: calc(20 / 12);
}
#intro .slide5 .copy {
    font-size: 12px;
}
#intro .slide4 .copy {
    font-size: 12px;
}
#intro .copy span {
    display: block;
}
/*#intro .copy br {
        display: none;
    }*/

#intro .images {
    display: none;
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#intro .images img {
    width: 259px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#intro .images li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
}
#intro .entry {
    width: 100%;
    text-align: center;
    margin-top: 16px;
}
#intro .entry a {
    margin: auto;
    max-width: 280px;
    height: 52px;
    font-size: 14px;
    line-height: 52px;
}
#intro .globalsign {
    margin: 12px 10px 10px 0;
}
#intro .globalsign img {
    width: auto;
    height: 20px;
    margin-left: auto;
}
/* スライダー2枚目 smartphone large
    ----------------------------------------------- */
#intro .it-trend-seal {
    position: relative;
}
#intro .it-trend-seal li:nth-child(1) {
    position: absolute;
    right: -34px;
}
#intro .it-trend-seal li:nth-child(2) {
    position: absolute;
    right: 44px;
}
#intro .slide5 .slide_h1 {
    font-size: 22px;
}
}

/* スライダー1枚目 smartphone small
----------------------------------------------- */
@media screen and (max-width: 374px) {
#intro h1, #intro .h1_p {
    margin-top: 205px;
    font-size: 20px;
    line-height: calc(28 / 20);
    text-align: center;
}
#intro .slick-slide {
    height: 400px;
    z-index: 0;
}
#intro .slick-slide:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,121,144,0.7);
}
#intro .slide-inside {
    z-index: 2;
}
#intro .copy {
    padding: 9px 0 0;
    font-size: 11px!important;
    font-weight: 500;
    line-height: calc(20 / 12);
}
#intro .copy span {
    display: block;
}
#intro .copy br {
    display: none;
}
#intro .images {
    display: none;
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#intro .images img {
    width: 178px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#intro .images li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
}
#intro .entry {
    width: 100%;
    text-align: center;
    margin-top: 22px;
}
#intro .entry a {
    margin: auto;
    max-width: 240px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
}
#intro .globalsign {
    margin: 12px 10px 0 0;
    padding-bottom: 8px;
}
#intro .globalsign img {
    width: auto;
    height: 20px;
    margin-left: auto;
}
/* スライダー2枚目 small mobile
    ----------------------------------------------- */
#intro .slide2 {
    text-align: center;
    padding-bottom: 35px;
}
#intro .slide2 h1, #intro .slide2 .h1_p {
    margin: 40px auto 20px;
    max-width: 240px;
    font-size: 1.3em;
    padding-top: inherit;
}
#intro .slide2 .slide_h1 {
    margin: 40px auto 20px;
    max-width: 240px;
    font-size: 1.3em;
    padding-top: inherit;
}
#intro .cv_box {
    width: 100%;
}
#intro .material a {
    max-width: 240px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    margin: 15px auto;
}
#intro .cv_seal_set {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
}
#intro div.sub_entry {
    margin: 0 auto;
    max-width: 240px;
    height: 34px;
    font-size: 10px;
    line-height: 34px;
}
#intro .sub_entry .sub_small_buttom {
    margin: 10px 9px;
}
#intro .slide4 .slide_h1 {
    padding-top: 46px;
}
#intro .slide5 h1, #intro .slide5 .h1_p {
    margin-top: 20px;
}
#intro .soc2_seal li {
    width: 40%;
}
#intro .slide5 .label_seminar {
    font-size: 0.6em;
}
}

/* スライダー2枚目 large PC
----------------------------------------------- */
@media print, screen and (min-width: 1600px) {
#intro .images {
    right: 333px;
}
#intro .slick-slide {
    padding-left: 157px;
}
#intro .globalsign {
    left: 290px;
}
}
/* スライダー2枚目 SOC2　位置調整
----------------------------------------------- */
.cv_box2, .soc2_seal {
    display: inline-block;
    vertical-align: top;
}
.soc2_seal {
    padding: 20px;
}
#intro .cv_box2 .material a {
    margin-top: 56px;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
#intro .cv_box2 .material a {
    margin-top: 34px;
}
#intro .cv_seal_set2 {
    width: auto;
}
.soc2_seal {
    padding-top: 0px;
}
#intro .cv_box1 .material a {
    margin-top: 0px;
}
}

@media screen and (max-width: 767px) and (min-width: 375px) {
.cv_box2, .soc2_seal {
    display: block;
}
#intro .cv_box2 .material a {
    margin-top: 28px;
}
#intro .soc2_seal img {
    margin-left: auto;
    margin-right: auto;
}
}

/* keyframes
----------------------------------------------- */

/* sky */

@-webkit-keyframes sky {
 0% {
background-position: 0 0;
}
 100% {
background-position: -3840px 0;
}
}
@-moz-keyframes sky {
 0% {
background-position: 0 0;
}
 100% {
background-position: -3840px 0;
}
}
@-ms-keyframes sky {
 0% {
background-position: 0 0;
}
 100% {
background-position: -3840px 0;
}
}
@keyframes sky {
 0% {
background-position: 0 0;
}
 100% {
background-position: -3840px 0;
}
}

/* cloud */

@-webkit-keyframes cloud {
 0% {
-webkit-transform: translateY(0px);
}
 40% {
-webkit-transform: translateY(-5px);
}
 100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes cloud {
 0% {
-moz-transform: translateY(0px);
}
 40% {
-moz-transform: translateY(-5px);
}
 100% {
-moz-transform: translateY(0px);
}
}
@-ms-keyframes cloud {
 0% {
-ms-transform: translateY(0px);
}
 40% {
-ms-transform: translateY(-5px);
}
 100% {
-ms-transform: translateY(0px);
}
}
@keyframes cloud {
 0% {
transform: translateY(0px);
}
 40% {
transform: translateY(-5px);
}
 100% {
transform: translateY(0px);
}
}
/* #pricearea
----------------------------------------------- */

#tipbox {
    position: absolute;
}
#tipbox .inner {
    position: relative;
    color: white;
    background: #4d4d4d;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#tipbox .inner:after {
    display: block;
    content: "";
    position: absolute;
    right: 7px;
    bottom: -14px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid #4d4d4d;
    z-index: 1;
}

@media print, screen and (min-width: 741px) {
#pricearea {
    max-width: 1250px;
    margin: 0 auto;
}
#pricearea h2 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.65em;
}
#pricearea .copy {
    margin: 30px auto 110px;
}
#pricearea .copy p {
    color: #4d4d4d;
    font-size: 1.25em;
    text-align: center;
    line-height: 1.85em;
}
#pricearea .price_inner {
    max-width: 1200px;
    margin: 0 25px;
    padding: 110px 0;
}
#pricearea .price-inner-position {
    width: 100%;
    /*height:100%;*/
    position: relative;
}
/* #pricearea .price-inner-position:before{
        display:block;
        content:'';
        padding-top:calc((100% + 172px));
        }
     */
.price-area-box .tab-li {
    width: 30%;
    max-width: 360px;
    height: 90px;
    text-align: center;
    color: #fff;
    opacity: 0.25;
    margin-bottom: 40px;
    position: absolute;
    font-size: 1.28em;
    padding-top: 20px;
}
.price-area-box .tab-li:hover {
    cursor: pointer;
}
.price-area-box .tab-li strong {
    font-size: 1.6em;
    display: block;
    margin-bottom: 15px;
}
.price-area-box .tab-li.active {
    opacity: 1;
}
.price-area-box .tab-li:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-top: 11px solid #78282a;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 11px solid transparent;
    position: absolute;
    bottom: -50px;
    /*left:calc((100%-15px)/2);*/
    left: calc(50% - 15px);
}
.price-area-box.basic-box .tab-li {
    background: url(../images/index/logo_basic_skuid.png) no-repeat #c8b170;
    top: 0;
    left: 20px;
}
.price-area-box.basic-box .tab-li:after {
    border-top: 11px solid #c8b170;
}
.price-area-box.pro-box .tab-li {
    background: url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
    top: 0;
    /*left:calc((100% - 840px)/ 2);*/
    left: calc((100% - 30%)/2);
}
.price-area-box.pro-box .tab-li span {
    display: block;
    color: #78282a;
    width: 150px;
    height: 45px;
    line-height: 45px;
    position: absolute;
    top: -57px;
    /*left:calc((100%-150px)/2);*/
    left: 50%;
    left: calc((100% - 150px)/2);
    border: 2px solid #78282a;
    border-radius: 30px;
    background: #fff;
}
.price-area-box.pro-box .tab-li span:after {
    display: block;
    text-align: center;
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid #fff;
    border-left: 7px solid #fff;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 45px;
    left: calc(50% + 26px);
}
.price-area-box.pro-box .tab-li span:before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-top: 9px solid #78282a;
    border-left: 9px solid #78282a;
    border-right: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    top: 45px;
    left: calc(50% + 24px);
}
.price-area-box.enterprise-box .tab-li {
    background: url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
    top: 0;
    right: 20px;
}
 @keyframes fade {
 from {
 opacity:0;
}
 to {
 opacity:1;
}
}
.price-area-box > dd {
    display: none;
    max-width: 1200px;
    width: 100%;
    position: absolute;
    top: 172px;
    left: 0;
    border: 1px solid #78282a;
    padding: 40px;
    box-sizing: border-box;/*min-height: 600px;*/
}
.price-area-box.basic-box > dd {
    border: 1px solid #c8b170;
}
.price-area-box .tab-li.active + dd {
    display: grid;
    grid-template-rows: 1fr 80px;
    grid-template-columns: 35% 8% 1fr;
    animation: fade 0.8s ease-in;/*grid-template:
        "one gutter two" 1fr
        "one gutter two" 2fr
        "three" 150px /
        33% 8% 1fr;*/
}
.price-price {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.gutter {
    grid-row: 1 / 2;
    grid-column: 2/ 3;
}
.price-feature {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
.btn-cv {
    grid-row: 2 / 3;
    grid-column: 1 /4;
}
.price-price .price-box {
    max-width: 400px;
    padding: 20px 30px;
    background: #ebdfde;
    margin-bottom: 40px;
}
.basic-box .price-price .price-box {
    background: #f4f1e7;
}
.price-price .price-box p {
    color: #6f2d2d;
    text-align: center;
    font-size: 1.1em;
}
.price-price .price-box .price-amount {
    margin-bottom: 20px;
}
.price-amount span {
    font-size: 2.71em;
    font-weight: bold;
}
.price-amount strong {
    font-size: 5em;
    letter-spacing: -0.02em;
    font-weight: bold;
}
.price-amount small {
    font-size: 1em;
}
.price-content-ttl {
    font-size: 1.63em;
    padding-bottom: 16px;
    border-bottom: #6f2d2d 1px solid;
    margin-bottom: 30px;
}
.basic-box .price-content-ttl {
    border-bottom: #c4b17d 1px solid;
}
.plan-des dd {
    font-size: 1.28em;
    line-height: 1.85em;
}
.price-feat-lists {
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-template-rows: repeat(6, 70px);
    grid-gap: 16px;
    margin-bottom: 30px;
}
.enterprise-box .price-feat-lists {
    grid-template-rows: repeat(6, 70px);
}
.price-feat-li {
    border: 1px solid #d49799;
    padding: 10px;
    line-height: 1.5em;
    font-size: 1.1em;
}
.basic-box .price-feat-li {
    border: 1px solid #c4b17d;
}
.price-feat-li.line1 {
    padding-top: 20px;
}
.price-option-ttl {
    font-size: 1.43em;
    color: #6f2d2d;
    margin-bottom: 30px;
}
.price-option-ttl:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 0;
    height: 0;
    border-top: 19px solid #6f2d2d;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    margin-right: 0.5rem;
}
.price-recommmend-lists {
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-template-rows: repeat(1, 70px);
    grid-gap: 16px;
    margin-bottom: 30px;
}
.price-recommmend-lists {
    margin-bottom: 50px;
}
.price-rec-li {
    display: table;
    background: #ebdfde;
    font-size: 1.14em;
    color: #6f2d2d;
    line-height: 1.5em;
    padding: 20px 10px;
    width: calc(100% - 16px);
}
.price-rec-li .price-rec {
    display: table-cell;
    vertical-align: middle;
    width: calc(100% - 24px);
}
.price-rec-li.line2 {
    padding: 10px;
}
.price-rec-li .tips {
    display: table-cell;
    vertical-align: middle;
    width: 24px;
}
.btn-cv.flex {
    /*padding-top:30px;*/
    display: flex;
    justify-content: center;
    width: 100%;
}
.btn-cv .button {
    max-width: 240px;
    font-size: 1.14em;
    margin: 0 auto;
    height: 68px;
    line-height: 69px;
}
.btn-cv.flex .button {
    width: 20%;
    max-width: 240px;
    font-size: 1.14em;
    margin: 0 20px 0 0;
    height: 68px;
    line-height: 69px;
}
/*#pricearea .buttons{
        display: flex;
        justify-content: center;
        width: 100%;
        position:absolute;
        bottom: 20px;
        top:calc(100% - 175px);
     }
     #pricearea .buttons li {
        width: 20%;
        font-size: 1.05em;
    }
     #pricearea .buttons li:not(:last-child) {
        margin-right:20px;
     }
    #pricearea .buttons li .button{
        max-width: 240px;
        height:68px;
        line-height: 69px;
    }*/
.price-inner-position .price-comp {
    position: absolute;
    bottom: -40px;
    right: 14px;
}
.price-inner-position a.arrow {
    color: #4970bf;
    position: relative;
    width: 100%;
}
.price-inner-position a.arrow:hover {
    text-decoration: underline;
}
.price-inner-position a.arrow:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    margin: -7px 0 0;
    width: 9px;
    height: 14px;
    background: url(../images/common/icon_arrow01.png) no-repeat;
}
.tips {
    display: block;
    top: 50%;
    /*margin-top: -21px;*/
    width: 24px;
    height: 24px;
    background: url(/assets/images/price/icon_guide.png) no-repeat;
    cursor: pointer;
    -webkit-background-size: 48px 24px;
    -moz-background-size: 48px 24px;
    -ms-background-size: 48px 24px;
    background-size: 48px 24px;
}
.tips:hover, .tips.on {
    background-position: -24px 0;
}
.tipbox {
    margin: -4px 0 0 36px;
    padding: 0 0 30px;
    width: 400px;
}
.tipbox .inner {
    padding: 10px 15px;
    width: 370px;
    color: white;
    font-size: 0.9em;
    line-height: 1.5em;
}
.tipbox .inner {
    width: 220px;
}
.tipbox {
    margin: -4px 0 0 178px;
}
}

/* Tablet
----------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1239px) {
.tips {
    margin: 10px 0;
}
.tipbox {
    margin: -4px 0 0 390px;
}
#tipbox .inner:after {
    right: 218px;
}
.price-price .price-box {
    max-width: 400px;
    padding: 15px 10px;
    margin-bottom: 40px;
}
.price-amount strong {
    font-size: 3em;
}
.price-amount small {
    font-size: 0.8em;
}
.price-feat-lists {
    grid-template-columns: repeat(2, 49%);
    grid-template-rows: repeat(6, 90px);
}
.enterprise-box .price-feat-lists {
    grid-template-rows: repeat(6, 90px);
}
.price-recommmend-lists {
    grid-template-columns: repeat(2, 49%);
    grid-template-rows: repeat(3, 90px);
}
#pricearea .buttons li {
    width: 40%;
    max-width: 320px;
}
#pricearea .buttons li .button {
    max-width: 320px;
    height: 64px;
    line-height: 65px;
}
.btn-cv.flex .button {
    width: 32%;
    max-width: 240px;
    font-size: 1.14em;
    margin: 0 20px 0 0;
    height: 68px;
    line-height: 69px;
}
}

/* mobile
----------------------------------------------- */

@media only screen and (max-width:767px) {
.tips {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0 0 0;
    width: 24px;
    height: 24px;
    background: url(/price/images/icon_guide.png) no-repeat;
    cursor: pointer;
    -webkit-background-size: 48px 24px;
    -moz-background-size: 48px 24px;
    -ms-background-size: 48px 24px;
    background-size: 48px 24px;
}
.tipbox .inner {
    width: 194px;
}
.tipbox {
    margin: -4px 0 0 237px;
}
#tipbox .inner:after {
    right: 200px;
}
.tipbox {
    margin: 100px 0 0 36px;
    padding: 0 0 30px;
    width: 240px;
}
.tipbox .inner {
    padding: 10px 15px;
    width: 210px;
    color: white;
    font-size: 0.85em;
    line-height: 1.5em;
}
.tipbox .inner:after {
    display: block;
    content: "";
    position: absolute;
    right: 14px;
    bottom: -20px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-top: 14px solid #4d4d4d;
    z-index: 1;
}
#pricearea {
    background: #fff;
}
#pricearea h2 {
    margin: 0 40px;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.5em;
}
#pricearea .copy {
    margin: 30px 40px 40px;
}
#pricearea .copy p {
    color: #4d4d4d;
    font-size: 1.1em;
    line-height: 1.6em;
}
#pricearea .price_inner {
    width: 94%;
    margin: 0 auto;
    padding: 70px 0 0;
}
.price-area-box {
    /*width:94%;*/
    margin: 0 auto 15px;
}
.price-area-box.basic-box {
    margin-bottom: 30px;
}
.tab-li {
    position: relative;
    width: 100%;
    height: 90px;
    text-align: center;
    color: #fff;
    /*margin-bottom:15px;*/
    font-size: 1.12em;
    padding-top: 20px;
    box-sizing: border-box;
}
.tab-li:hover {
    cursor: pointer;
}
.tab-li strong {
    font-size: 1.6em;
    display: block;
    margin-bottom: 10px;
}
.tab-li.active {
    opacity: 1;
}
/*.tab-li:after{
        display:block;
        content:'';
        width:10px;
        height:10px;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
        transform:rotate(45deg);
        position: absolute;
        top:50%;
        right:16px;
     }*/
.tab-li:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -5px 0 0;
    width: 19px;
    height: 11px;
    background: url(../images/index/icon_arrow02.png) no-repeat;
    -webkit-background-size: 19px 22px;
    -moz-background-size: 19px 22px;
    -ms-background-size: 19px 22px;
    background-size: 19px 22px;
}
.tab-li.on:after {
    background-position: 0 -11px;
}
.price-area-box.basic-box .tab-li {
    background: url(../images/index/logo_basic_skuid.png) no-repeat #c8b170;
}
/*.price-area-box.basic-box .tab-li:after{
        border-top:11px solid #c8b170;
     }  */

.price-area-box.pro-box .tab-li {
    padding-top: 32px;
    background: url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
}
.price-area-box.pro-box .tab-li span {
    display: block;
    color: #78282a;
    width: 110px;
    height: 35px;
    line-height: 35px;
    position: absolute;
    top: -20px;
    left: calc((100% - 110px)/2);
    border: 2px solid #78282a;
    border-radius: 30px;
    background: #fff;
}
.price-area-box.pro-box .tab-li span:after {
    display: block;
    text-align: center;
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid #fff;
    border-left: 7px solid #fff;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 34px;
    left: calc(50% + 26px);
}
.price-area-box.pro-box .tab-li span:before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-top: 9px solid #78282a;
    border-left: 9px solid #78282a;
    border-right: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    top: 35px;
    left: calc(50% + 24px);
}
.price-area-box.enterprise-box .tab-li {
    background: url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
}
.tab-li + dd {
    display: none;
    padding: 20px 18px 10px;
    border: 1px solid #6f2d2d;
}
.tab-li + dd.on {
    display: block;
}
.basic-box .tab-li + dd {
    border: 1px solid #c8b170;
}
.price-box {
    padding: 10px 10px 15px;
    background: #ebdfde;
    margin: 0 auto 30px;
}
.basic-box .price-box {
    background: #f4f1e7;
}
.price-box p {
    color: #78282a;
    text-align: center;
}
.price-amount {
    margin-bottom: 12px;
}
.price-amount span {
    font-size: 2.31em;
    font-weight: bold;
}
.price-amount strong {
    font-size: 4.57em;
    letter-spacing: -0.05em;
    font-weight: bold;
}
.price-amount small {
    font-size: 1em;
}
.price-content-ttl {
    font-size: 1.14em;
    padding-bottom: 10px;
    border-bottom: #6f2d2d 1px solid;
    margin-bottom: 15px;
}
.basic-box .price-content-ttl {
    border-bottom: #c4b17d 1px solid;
}
.plan-des {
    margin-bottom: 30px;
}
.plan-des dd {
    font-size: 1em;
    line-height: 1.5em;
}
.price-feat-li {
    padding: 20px 10px;
    border: 1px solid #6f2d2d;
    margin-bottom: 20px;
    line-height: 1.25em;
}
.basic-box .price-feat-li {
    border: 1px solid #c4b17d;
}
.price-option-ttl {
    color: #6f2d2d;
    font-size: 1.14em;
    margin-bottom: 15px;
}
.price-option-ttl:before {
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid #6f2d2d;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    vertical-align: middle;
    margin-right: 0.5em;
}
.price-rec-li {
    vertical-align: middle;
    background: #ebdfde;
    font-size: 1em;
    color: #6f2d2d;
    margin-bottom: 20px;
    line-height: 1.25em;
    padding: 10px;
    /*position:relative;*/
    width: calc(100% - 20px);
    display: table;
}
.price-rec-li .price-rec {
    display: table-cell;
    width: calc(100% - 25px);
}
.price-rec-li .tips {
    display: table-cell;
    width: 24px;
    vertical-align: middle;/*margin-top: 0;
          position:absolute;
          top:calc(50% - 12px);
          right:10px;*/
}
.btn-cv {
    padding: 10px 0 20px;
}
.btn-cv .button {
    margin: auto;
    max-width: 335px;
    height: 52px;
    font-size: 1.15em;
    line-height: 53px;
    margin-bottom: 15px;
}
.price-inner-position .price-comp {
    text-align: right;
}
.price-inner-position a.arrow {
    color: #4970bf;
}
.price-inner-position a.arrow:hover {
    text-decoration: underline;
}
/*.price-inner-position a.arrow:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: -14px;
        margin: -7px 0 0;
        width: 9px;
        height: 14px;
        background: url(../images/common/icon_arrow01.png) no-repeat;
    }*/
#pricearea .buttons {
    width: 100%;
    padding: 10px 0 0;
}
#pricearea .buttons .button {
    margin: auto;
    max-width: 335px;
    height: 52px;
    font-size: 1.15em;
    line-height: 53px;
    margin-bottom: 15px;
}
}

/* companies width adjustment
----------------------------------------------- */
@media screen and (min-width:850px) and (max-width:1130px) {
#companies .inner {
    max-width: 834px;
}
}

@media screen and (min-width:572px) and (max-width:849px) {
#companies .inner {
    max-width: 556px;
}
#companies li p {
    font-size: 22px;
}
}

@media screen and (min-width:320px) and (max-width:571px) {
#companies .inner {
    max-width: 320px;
}
#companies li {
    padding: 27px;
}
#companies li img {
    width: 100px;
    height: auto;
}
#companies li p {
    font-size: 18px;
    margin: 20px 4px;
}
}
/*  Starting Movie Style  */
#problem section {
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
}

@media only screen and (max-width: 740px) and (min-width: 320px) {
#problem section {
    margin: auto;
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
    max-width: 700px;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#problem section iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#problem section iframe {
    max-width: 100%;
}
#problem section iframe {
    height: 100%;
}
}
/*  Starting Campaign Style  */
div.campaign_area {
    background: #f2f2f2;
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.campaign_inner {
    display: block;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
div.campaign_area span {
    display: inline-block;
    background: #fff;
    color: #e65649;
    font-size: .8rem;
    padding: .2rem .4rem;
    margin-right: 1rem;
    border: solid 1px #e65649;
    vertical-align: text-bottom;
    border-radius: 2px;
}
div.campaign_area a {
    margin: 30px 0 0;
    color: #4970bf;
    font-size: 1.2em;
    font-weight: 500;
}

@media only screen and (max-width: 425px) and (min-width: 320px) {
div.campaign_area a {
    font-size: .7em;
}
div.campaign_area span {
    font-size: .7em;
}
}
/*  End of Campaign Style  */
/* ▼パートナー募集バナー▼ */
.campaign_material {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 0px;
    width: inherit;
}

@media (min-width:320px) and (max-width:1250px) {
.campaign_material img {
    width : 100%;
}
.campaign_material {
    padding-top: 0px;
    padding-bottom: 0px;
}
div.campaign_area {
    margin-bottom: 0rem;
}
}
/* ▲パートナー募集バナー▲ */
/* ▼カルーセルお問い合わせフォーム▼ */
iframe.top_iframe {
    width: 440px;
    height: 350px;
    padding: 26px 6px;
    float: right;
    top: -194px;
    right: 8%;
    position: relative;
    background-color: #fff;
    color : #4d4d4d;
}

@media only screen and (max-width: 1520px) and (min-width: 320px) {
iframe.top_iframe {
    display: none;
}
}
/* ▲カルーセルお問い合わせフォーム▲ */



/* #top_intro
----------------------------------------------- */
#top_intro {
    background: url(../images/index/top_intro_bg.png) top center repeat-x #3c95c1;
    background-size: auto 100%;
    border-bottom: 1px solid #d6d6d6;
    text-align: center;
}
#top_intro img {
    max-width: 100%;
    margin-top: -20px;
}
#top_intro .inner {
    width: 95%;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
}
#top_intro h1 {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 3.6vw;
    font-weight: bold;
    color: #fff;
    text-align: left;
    line-height: 1.3em;
}
#top_intro h1 span {
    position: relative;
    z-index: 2;
}
#top_intro p {
    color: #fff;
    font-size: 1.4vw;
    text-align: center;
    line-height: 1.85em;
}
#top_intro .top_intro_ttlarea{
    max-width: 860px;
    margin: 0 auto;
}
/* ▼メインビジュアル */
#top_intro p {
    text-align:left;
}
.flex_container {
  display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
}
.flex1 {
  display: flex;
}
#top_intro h1 {
    width: 50%;
}
#top_intro img.top_intro_no1 {
  max-width: 50%;
    height: max-content;
    position: relative;
    top: 11px;
    right: 25px;
}
_:lang(x)+_:-webkit-full-screen-document,  #top_intro img.top_intro_no1 {
        height: intrinsic;
        top: 16px;
        right: 26px;
}
img.flex2{
    padding-left: 20px;
}
.loop_js {
    display: -webkit-flex;
    display: flex;
    width: calc(850px * 3);
    height: 220px;
    overflow: hidden;
}
/* ▲メインビジュアル */

@media only screen and (max-width: 768px) {
    .flex1 {
        display: block;
    }
    _:lang(x)+_:-webkit-full-screen-document {
        height: auto;
    }
}

@media only screen and (max-width: 450px){
    #top_intro img.top_intro_no1 {
        max-width: 283px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1099px) {
    #top_intro h1 {
        font-size: 34px;
        text-align: center;
        width: 90%;
        padding-top: 1em;
    }
    div.mv_l{
        padding-top:30px;
    }
    #top_intro img.top_intro_no1 {
        max-width: 53%;
        padding: 14px;
        height: auto;
        position: relative;
        top: 0;
        right: 0;
      }
      .flex1 {
        display: block;
        padding-bottom: 1em;
    }
      .flex2 p {
        width: 80%;
        text-align:left;
        margin-left: auto;
        margin-right: auto;
    }
    .no1_security_mb {
        display: none;
    }
}
@media only screen and (min-width: 1100px) {
    #top_intro h1 {
        text-align: left;
    }
    #top_intro h1 br{
        display: ;
    }
    .no1_security_mb {
        display: none;
    }
}
@media screen and (min-width: 1100px) and (max-width: 1270px) {
    #top_intro h1 {
        font-size: 36px;
    }
    #top_intro img.top_intro_no1 {
        max-width: 47%;
        height: intrinsic;;
        position: relative;
        top: 17px;
        right: 14px;
      }
}
@media only screen and (min-width: 1271px) {
#top_intro h1 {
    font-size: 42px;
    text-align: left;
}
#top_intro p {
    font-size: 16px;
}
}
#top_intro .intro_img {
    margin-top: 40px;
}
#top_intro .intro_banner {
    position: absolute;
    right: 0px;
    bottom: 75px;
    width: 16%;
    text-align: center;
}
#top_intro .intro_banner a {
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 1;
}
#top_intro .intro_banner a:hover {
    opacity: 0.8;
}
#top_intro .intro_banner a img {
    max-width: 100%;
}
@media only screen and (min-width: 1600px) {
    #top_intro .top_intro_ttlarea {
        max-width: 1000px;
    }
    #top_intro h1 {
        font-size: 50px;
    }
    #top_intro p {
        font-size: 20px;
    }
    #top_intro img.top_intro_no1 {
        top: 19px;
        right: 3px;
    }
}
@media only screen and (max-width: 768px) {
    #top_intro h1 {
        width: 100%;
        margin-bottom: 20px;
        margin-top:20px;
        font-size: 6.2vw;
        line-height: 1.4em;
        text-align: left;
    }
    #top_intro h1 br{
        display: ;
    }
    #top_intro p {
        text-align: left;
        font-size: 15px;
        width: 77%;
        margin: 0 auto;
    }
    #top_intro img.top_intro_no1 {
        max-width: 372px;
        padding: 13px;
        height: auto;
        top: 0;
        right: 0;
    }
    .no1_security_mb {
    position: relative;
    top: -30px;
    right: -15px;
    width: 60px;
    display: inline-block;
    }
    #top_intro .intro_banner {
        display: none;
    }
}
#top_intro .btn_area ul {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 780px;
    margin: 0 auto;
}
#top_intro .btn_area ul li {
    width: 48%;
}
#top_intro .btn_area ul li a {
    padding: 20px 0px;
    color: #fff;
    display: block;
    background: #000;
    border: 1px solid #000;
    border-radius: 100px;
    font-size: 15px;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
#top_intro .btn_area ul li a span {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}
#top_intro .btn_area ul li a:hover {
    background: #fff;
    color: #000;
}
#top_intro .btn_area ul li:nth-of-type(1) a {
    background: #fff;
    color: #3c95c1;
    border: 1px solid #fff;
}
#top_intro .btn_area ul li:nth-of-type(1) a:hover {
    background: #3c95c1;
    color: #fff;
}
#top_intro .btn_area ul li:nth-of-type(2) a {
    background: #e65549;
    border: 1px solid #e65549;
}
#top_intro .btn_area ul li:nth-of-type(2) a:hover {
    background: #fff;
    color: #e65549;
}
#top_intro .btn_area ul li:nth-of-type(1) a span {
    background: url(/assets/images/common/mail_blue.svg) center center no-repeat;
    background-size: cover;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
#top_intro .btn_area ul li:nth-of-type(1) a:hover span {
    background: url(/assets/images/common/mail.svg) center center no-repeat;
    background-size: cover;
}
#top_intro .btn_area ul li:nth-of-type(2) a span {
    background: url(/assets/images/common/check.svg) center center no-repeat;
    background-size: cover;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
#top_intro .btn_area ul li:nth-of-type(2) a:hover span {
    background: url(/assets/images/common/check_red.svg) center center no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 740px) {
#top_intro .btn_area ul li a {
    padding: 4% 0px;
    font-size: 13px;
}
#top_intro .btn_area ul {
    display: block;
    width: 95%;
}
#top_intro .btn_area ul li {
    width: 100%;
    margin-top: 15px;
}
#top_intro {
    background: url(../images/index/top_intro_bg_sp.png) top center repeat-x #3c95c1;
    background-size: auto 100%;
    padding-top: 9%;
}
#top_intro .intro_img {
    margin-top: 5%;
}
#top_intro .flex_container {
    flex-wrap: wrap;
}
#top_intro img.flex2 {
    padding-left: 0;
    max-width: 30%;
    margin-bottom: 22px;
}
}

@media (min-width: 769px) {
    body.tablet #top_intro {
        padding-top: 50px;
    }
    body.tablet .ver202220401 .mv_l {
        padding: 0;
        width: 100%;
        margin-top: -20px;
    }
    body.tablet #top_intro .top_mv img {
        padding-top: 1.4em;
    }
}

@media (min-width: 1024px) {
    body.tablet #top_intro .mv__wrap { 
        padding-top: 65px;
    }
}

/* #top_companies
----------------------------------------------- */
#top_companies {
    padding-top: 40px;
    padding-bottom: 20px;
}
#top_companies .inner {
    margin: 0 auto;
    max-width: 1180px;
    width: 95%;
}
#top_companies .inner {
    border-bottom: 1px solid #cccccc;
}
#top_companies .inner h2 {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
#top_companies .inner h2 img {
    max-width: 100%;
}
#top_companies .inner .number1 {
    display: none;
}
#top_companies .inner .warning {
    text-align: right;
    margin-top: 25px;
}

@media (min-width: 1101px) {
#top_companies .inner ul {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1180px;
    margin: 30px auto;
    flex-wrap: wrap;
}
#top_companies .inner ul li {
    text-align: center;
    width:100px;
    border:solid 10px transparent;
}
}

@media (max-width: 1100px) {
#top_companies .inner ul {
    margin-top: 30px;
    text-align: center;
}
/* 親パネル */
.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
/*
    * 空の子パネル
    * padding, margin の左右も 0 に指定してしまうと、
    * 最後の行のレイアウトが崩れるので注意。
    */
.cell.is-empty {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
#top_companies .inner ul {
/*-ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
}
#top_companies .inner ul li {
    width: 18%;
    margin-left: 0px;
    padding: 10px;/*text-align: center;
    margin-bottom: 20px;*/
}
.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
#top_companies {
    padding-bottom: 30px;
}
#top_companies .inner h2 {
    width: 100%;
    margin-bottom:20px;
}
#top_companies .inner h2 img {
    max-width: 100%;
}
#top_companies .inner ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 3%;
}
#top_companies .inner ul li {
    width: 15%;
    margin-left: 0px;
    text-align: center;
    margin-bottom: 5%;
    margin: 2px;
}
}
#top_companies .inner .warning {
    text-align: right;
    margin-top: 0px;
    padding-bottom: 4%;
}
/* #case
----------------------------------------------- */
#case.top_case {
}
#case.top_case .inner {
    padding-top: 35px;
    padding-bottom: 60px;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}
#case.top_case h2 {
    text-align: center;
    width: 62%;
    margin: 0 auto;
}
#case.top_case h2 img {
    max-width: 100%;
}
#case.top_case .subttl {
    color: #1d1d1d;
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.9em;
    text-align: center;
}
#case.top_case .btnmore {
    margin-top: 40px;
}
#case.top_case .btnmore a {
    padding: 20px 0px;
    display: block;
    background: none;
    border-radius: 100px;
    font-size: 15px;
    color: #252525;
    border: 1px solid #252525;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}
#case.top_case .btnmore a:hover {
    background: #3c95c1;
    border: 1px solid #3c95c1;
    color: #fff;
    text-decoration: none;
}
#case.top_case .interviews .inner {
    padding-bottom: 0px;
}

@media only screen and (max-width: 740px) {
#case.top_case h2 {
    width: 90%;
}
#case.top_case h2 img {
    max-width: 100%;
}
#case.top_case .interviews .inner {
    width: 90%;
}
#case.top_case .subttl {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    text-align: left;
    font-size: 13px;
}
#case.top_case .subttl br {
    display: none;
}
#case.top_case .btnmore a {
    width: 90%;
    max-width: none;
}
}
/* #problem
----------------------------------------------- */
#problem.top_problem {
    padding-top: 50px;
    padding-bottom: 70px;
}
#problem.top_problem .case {
    margin: 0 auto;
    max-width: 1180px;
    margin-bottom: 70px;
    width: 95%;
}
#problem.top_problem .case .case_inner {
    margin: 0 auto;
    padding: 0px;
    background: none;
}
#problem.top_problem h2 {
    line-height: normal;
    margin: 0 auto;
    width: 58%;
}
#problem.top_problem h2 img {
    max-width: 100%;
}
#problem.top_problem .case .case_inner ul {
}
#problem.top_problem .case .case_inner ul li {
}
#problem.top_problem .case .case_inner ul li .details {
    padding: 0px 11%;
}
#problem.top_problem .case .case_inner ul li:nth-of-type(2) .details {
    border-left: 1px solid #1d1d1d;
    border-right: 1px solid #1d1d1d;
}
#problem.top_problem .case .case_inner ul li img {
    max-width: 100%;
}
#problem.top_problem .case .case_inner ul li h3 {
    font-size: 19px;
    color: #1d1d1d;
    font-weight: 500;
    margin-top: 30px;
    line-height: 1.6em;
}
#problem.top_problem .case .case_inner ul li h3 span {
    display: inline-block;
    display: none;
}
#problem.top_problem .case .case_inner ul li h3 br.newline {
}
#problem.top_problem .case .case_inner ul li p {
    font-size: 14px;
    line-height: 1.9em;
    text-align: left;
    color: #1d1d1d;
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
}
#problem.top_problem .case .case_inner ul li .link {
    color: #252525;
}
#problem.top_problem .case .case_inner ul li .link {
    padding: 15px 0px;
    display: block;
    background: none;
    border-radius: 100px;
    font-size: 15px;
    color: #252525;
    border: 1px solid #252525;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    max-width: 300px;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    margin-top: 30px;
}
#problem.top_problem .case .case_inner ul li .link:hover {
    background: #3c95c1;
    border: 1px solid #3c95c1;
    color: #fff;
    text-decoration: none;
}
#problem.top_problem .case li:nth-child(2) a {
    border-left: none;
    border-right: none;
}
#problem.top_problem .video {
    width: 95%;
}
#problem.top_problem .video h2 {
    line-height: normal;
    margin: 0 auto;
    width: 53%;
}
#problem.top_problem .video h2 img {
    max-width: 100%;
}
#problem.top_problem .video .copy {
    max-width: none;
}
#problem.top_problem .video .copy p {
    font-size: 16px;
}

@media only screen and (min-width: 741px) {
#problem.top_problem .case ul {
    margin: 50px 0 0;
    display: table;
}
#problem.top_problem .case li {
    float: none;
    display: table-cell;
    position: relative;
    width: 33.33%;
}
#problem.top_problem .case .case_inner ul li .details {
    padding: 0px 11%;
    padding-bottom: 70px;
}
#problem.top_problem .case .case_inner ul li .link {
    position: absolute;
    bottom: 0px;
    margin-top: 0px;
    left: 0;
    right: 0;
}
}

@media only screen and (max-width: 740px) {
#problem.top_problem .case .case_inner ul li h3 {
    font-size: 17px;
}
#problem.top_problem .video .copy p {
    font-size: 13px;
}
#problem.top_problem .video h2 {
    width: 100%;
}
#problem.top_problem .video h2 img {
    max-width: 100%;
}
#problem.top_problem h2 {
    width: 100%;
}
#problem.top_problem h2 img {
    max-width: 100%;
}
#problem.top_problem .case {
    background: none;
    margin-bottom: 0px;
}
#problem.top_problem .case .case_inner ul li {
    border-top: none;
    border-bottom: none;
}
#problem.top_problem .case .case_inner ul li .details {
    padding: 0px;
}
#problem.top_problem .case .case_inner ul li:nth-of-type(2) .details {
    border: none;
}
#problem.top_problem .case .case_inner ul li h3 span {
    display: inline-block;
}
#problem.top_problem .case .case_inner ul li h3 br.newline {
    display: none;
}
#problem.top_problem .case .case_inner ul li a {
    padding-top: 40px;
}
#problem.top_problem .case .case_inner ul li:nth-of-type(1) a {
    padding-top: 20px;
}
#problem.top_problem .case figure {
    position: static;
}
#problem.top_problem .case .case_inner ul li img {
    height: auto;
}
#problem.top_problem .case li a:after {
    display: none;
}
#problem.top_problem .video {
    padding-bottom: 0px;
    margin: 0 auto;
}
#problem.top_problem .case .case_inner ul li .link {
    width: 100%;
    max-width: none;
}
}

/* #merits
----------------------------------------------- */
#merits.top_merits {
    padding-top: 50px;
    padding-bottom: 70px;
}
#merits.top_merits .case {
    margin: 0 auto;
    max-width: 1180px;
    margin-bottom: 70px;
    width: 95%;
}
#merits.top_merits .case .case_inner {
    margin: 0 auto;
    padding: 0px;
    background: none;
}
#merits.top_merits h2 {
    line-height: normal;
    margin: 0 auto;
    width: 58%;
}
#merits.top_merits h2 img {
    max-width: 100%;
}
#merits.top_merits .case .case_inner ul {
}
#merits.top_merits .case .case_inner ul li {
}
#≈ .case .case_inner ul li .details {
    padding: 0px 11%;
}
#merits.top_merits .case .case_inner ul li:nth-of-type(2) {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
#merits.top_merits .case .case_inner ul li img {
    max-width: 100%;
}
#merits.top_merits .case .case_inner ul li h3 {
    font-size: 19px;
    color: #1d1d1d;
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.6em;
}
#merits.top_merits .case .case_inner ul li h3 span {
    display: inline-block;
    display: none;
}
#merits.top_merits .case .case_inner ul li h3 br.newline {
}
#merits.top_merits .case .case_inner ul li p {
    font-size: 14px;
    line-height: 1.9em;
    text-align: center;
    color: #1d1d1d;
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
}
#merits.top_merits .case .case_inner ul li .link {
    color: #252525;
}
#merits.top_merits .case .case_inner ul li .link {
    padding: 15px 0px;
    display: block;
    background: none;
    border-radius: 100px;
    font-size: 15px;
    color: #252525;
    border: 1px solid #252525;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    max-width: 300px;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    margin-top: 30px;
}
#merits.top_merits .case .case_inner ul li .link:hover {
    background: #3c95c1;
    border: 1px solid #3c95c1;
    color: #fff;
    text-decoration: none;
}
#merits.top_merits .case li:nth-child(2) a {
    border-left: none;
    border-right: none;
}
#merits.top_merits .video {
    width: 95%;
}
#merits.top_merits .video h2 {
    line-height: normal;
    margin: 0 auto;
    width: 53%;
}
#merits.top_merits .video h2 img {
    max-width: 100%;
}
#merits.top_merits .video .copy {
    max-width: none;
}
#merits.top_merits .video .copy p {
    font-size: 16px;
}


@media only screen and (min-width: 741px) {
#merits.top_merits .case ul {
    margin: 40px 0 0;
    display: table;
}
#merits.top_merits .case li {
    float: none;
    display: table-cell;
    position: relative;
    width: 33.33%;
}
#merits.top_merits .case .case_inner ul li .details {
    padding: 0px 8%;
    padding-bottom: 70px;
}
#merits.top_merits .case .case_inner ul li .link {
    position: absolute;
    bottom: 0px;
    margin-top: 0px;
    left: 0;
    right: 0;
}
}

@media only screen and (max-width: 740px) {
#merits.top_merits .case .case_inner ul li h3 {
    font-size: 17px;
}
#merits.top_merits .video .copy p {
    font-size: 13px;
}
#merits.top_merits .video h2 {
    width: 100%;
}
#merits.top_merits .video h2 img {
    max-width: 100%;
}
#merits.top_merits h2 {
    width: 100%;
    font-weight: 700;
}
#merits.top_merits h2 img {
    max-width: 100%;
}
#merits.top_merits .case {
    background: none;
    margin-bottom: 0px;
}
#merits.top_merits .case .case_inner ul li {
    border-top: none;
    border-bottom: none;
}
#merits.top_merits .case .case_inner ul li .details {
    padding: 0px;
}
#merits.top_merits .case .case_inner ul li:nth-of-type(2) .details {
    border: none;
}
#merits.top_merits .case .case_inner ul li h3 span {
    display: inline-block;
}
#merits.top_merits .case .case_inner ul li h3 br.newline {
    display: none;
}
#merits.top_merits .case .case_inner ul li a {
    padding-top: 40px;
}
#merits.top_merits .case .case_inner ul li:nth-of-type(1) a {
    padding-top: 20px;
}
#merits.top_merits .case figure {
    position: static;
}
#merits.top_merits .case .case_inner ul li img {
    height: auto;
}
#merits.top_merits .case li a:after {
    display: none;
}
#merits.top_merits .video {
    padding-bottom: 0px;
    margin: 0 auto;
}
#merits.top_merits .case .case_inner ul li .link {
    width: 100%;
    max-width: none;
}
}

/* #feature
----------------------------------------------- */
#feature.top_feature {
    position: relative;
}
#feature.top_feature::before {
    content: "";
    display: block;
    position: absolute;
    background: url(../images/index/arrow_bottom_white.png) center top no-repeat;
    background-size: contain;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
    top: -2px;
    width: 12%;
    max-width: 147px;
    height: 0px;
    padding-top: 4.5%;
}
#feature.top_feature .inner {
    max-width: 1180px;
    margin: 0 auto;
}
#feature.top_feature h2 {
    line-height: normal;
    margin: 0 auto;
    width: 62%;
}
#feature.top_feature h2 img {
    max-width: 100%;
}
#feature.top_feature .subttl {
    margin-top: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.9em;
}
.top_feature .inner .btn_area ul, .top_case .inner .btn_area ul {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 780px;
    margin: 0 auto;
}
.top_feature .inner .btn_area ul li, .top_case .inner .btn_area ul li {
    width: 48%;
}

@media only screen and (max-width: 740px) {
#feature.top_feature .subttl {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 13px;
}
#feature.top_feature .subttl br {
    display: none;
}
}
#feature.top_feature .images {
    max-width: none;
    margin: 0 auto;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    height: 34vw;
    max-height: 430px;
}
#feature.top_feature .images li {
    display: none;
    position: absolute;
    left: 50%;
}
#feature.top_feature .images li.on {
    display: block;
}
#feature.top_feature .images li:first-child {
    top: 0;
    margin: 0 0 0 -50%;
    width: 50%;
    height: auto;
}
#feature.top_feature .images li:nth-of-type(2) {
    bottom: 7%;
    width: 50%;
    margin: 0 0 0 -23%;
    height: auto;
}
#feature.top_feature .images li:nth-of-type(3) {
    bottom: 0;
    width: 20%;
    height: auto;
    margin: 0 0 0 10%;
}
#feature.top_feature .images li:last-child {
    bottom: 0;
    width: 10%;
    height: auto;
    margin: 0 0 0 31%;
}
#feature.top_feature .images li img {
    max-width: 100%;
}

@media only screen and (max-width: 740px) {
#feature.top_feature h2 {
    width: 90%;
}
#feature.top_feature h2 img {
    max-width: 100%;
}
#feature.top_feature .images li img {
    height: auto;
}
#feature article header.on:before {
    display: none;
}
#feature.top_feature .images {
    height: 85vw;
}
#feature.top_feature .images li:first-child {
    top: 0;
    margin: 0 0 0 -51%;
    width: 70%;
    height: auto;
}
#feature.top_feature .images li:nth-of-type(2) {
    bottom: 24%;
    width: 70%;
    margin: 0 0 0 -19%;
    height: auto;
}
#feature.top_feature .images li:nth-of-type(3) {
    bottom: 0%;
    width: 30%;
    height: auto;
    margin: 0 0 0 -28%;
}
#feature.top_feature .images li:last-child {
    bottom: 0;
    width: 16%;
    height: auto;
    margin: 0 0 0 10%;
}
}
#feature.top_feature article:after {
    display: none;
}
#feature.top_feature article h3 {
    padding: 100px 0 0;
}

@media only screen and (max-width: 740px) {
#feature.top_feature article h3 {
    padding: 0px;
    font-size: 20px;
}
#merits.top_merits .case .case_inner ul li:nth-of-type(2) {
    border-left: none;
    border-right: none;
}
}
#feature.top_feature article:nth-child(1) h3:after {
    width: 115px;
    height: 85px;
    background: url(../images/index/top_feature_icon01.png) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature.top_feature article:nth-child(2) h3:after {
    width: 115px;
    height: 85px;
    background: url(../images/index/top_feature_icon02.png) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature.top_feature article:nth-child(3) h3:after {
    width: 115px;
    height: 85px;
    background: url(../images/index/top_feature_icon03.png) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature.top_feature article:nth-child(4) h3:after {
    width: 182px;
    height: 85px;
    background: url(../images/index/top_feature_icon04.png) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: -30px;
    right: 0;
    margin: auto;
}
#feature.top_feature .btnmore {
    margin-top: 40px;
}
#feature.top_feature .btnmore a {
    padding: 20px 0px;
    display: block;
    background: none;
    border-radius: 100px;
    font-size: 15px;
    color: #fff;
    border: 1px solid #fff;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}
#feature.top_feature .btnmore a:hover {
    background: #fff;
    color: #3c95c1;
    text-decoration: none;
}

@media only screen and (max-width: 740px) {
#feature.top_feature article:nth-child(1) header:after {
    background: url(../images/index/top_feature_icon01.png) center center no-repeat;
    background-size: contain;
}
#feature.top_feature article:nth-child(2) header:after {
    background: url(../images/index/top_feature_icon02.png) center center no-repeat;
    background-size: contain;
}
#feature.top_feature article:nth-child(3) header:after {
    background: url(../images/index/top_feature_icon03.png) center center no-repeat;
    background-size: contain;
}
#feature.top_feature article:nth-child(4) header:after {
    background: url(../images/index/top_feature_icon04.png) center center no-repeat;
    background-size: contain;
}
#feature.top_feature .btnmore a {
    width: 90%;
    max-width: none;
}
.top_feature .inner .btn_area ul {
    display: block;
}
#feature.top_feature .inner .btn_area ul li {
    width: 100%;
}
#feature.top_feature .btnmore {
    margin-top: 20px;
}
}
/* #feature2
----------------------------------------------- */
#feature2.top_feature2 {
    background: #f7f8f9 url(../images/index/feature_bg.png) top center no-repeat;
}
#feature2.top_feature2 .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 0px;
    padding-top: 70px;
}
#feature2.top_feature2 h2 {
    width: 46%;
    margin: 0 auto;
}
#feature2.top_feature2 h2 img {
    max-width: 100%;
}
#feature2.top_feature2 .subttl {
    margin-top: 20px;
    font-size: 16px;
    color: #151515;
    text-align: center;
    line-height: 1.9em;
}
#feature2.top_feature2 .articles {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    margin-top: 50px;
}
#feature2.top_feature2 .articles article {
    display: block;
    float: none;
    position: static;
    margin: 0px;
    padding: 0px;
    width: 33%;
}
#feature2.top_feature2 article:nth-child(1) h3:after {
    width: 250px;
    height: 82px;
    background: url(../images/index/top_feature_contents_1.png?date=20250530) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature2.top_feature2 article:nth-child(2) h3:after {
    width: 250px;
    height: 82px;
    background: url(../images/index/top_feature_contents_3.png?date=20250530) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature2.top_feature2 article:nth-child(3) h3:after {
    width: 250px;
    height: 82px;
    background: url(../images/index/top_feature_contents_2.png?date=20250530) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}

#feature2.top_feature2 article:nth-child(4) h3:after {
    width: 330px;
    height: 82px;
    background: url(../images/index/top_feature_contents_6.png?date=20250530) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: -18px;
    right: 0;
    margin: auto;
}
#feature2.top_feature2 .articles article:nth-child(4) {
    width: 38%;
}
@media only screen and (max-width: 740px){
    #feature2.top_feature2 .articles article:nth-child(4) {
    width: 100%;
    padding: 20px 0px;
}}
#feature2.top_feature2 article:nth-child(5) h3:after {
    width: 250px;
    height: 82px;
    background: url(../images/index/top_feature_contents_5.png?date=20250530) center center no-repeat;
    background-size: cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
}
#feature2.top_feature2 h3 {
    padding: 100px 0 0;
    color: #3c95c1;
    font-weight: bold;
    font-size: 22px;
    height: 70px;
    display: grid;
}
_::-webkit-full-page-media, _:future, :root #feature2.top_feature2 h3 {
    display: block;
}
#feature2.top_feature2 article p {
    margin: 20px 20px 0;
    padding-bottom: 70px;
}
#feature2.top_feature2 article p a {
    color: #3c95c1;
    text-decoration: underline;
}
#feature2.top_feature2 article:nth-child(2) h3, #feature2.top_feature2 article:nth-child(3) h3 {
    line-height: 70px;
}

@media only screen and (max-width: 740px) {
#feature2 article header.on:before {
    display: none;
}
#feature2.top_feature2 {
    background: #f7f8f9;
}
#feature2.top_feature2 h2 {
    width: 90%;
}
#feature2.top_feature2 h2 img {
    max-width: 100%;
}
#feature2.top_feature2 .articles {
    display: block;
    width: 95%;
}
#feature2.top_feature2 .articles article {
    width: 100%;
    padding: 20px 0;
}
#feature2.top_feature2 h3 {
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 66px;
    margin: 0 55px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    height: auto;
    text-align: left;
}
#feature2.top_feature2 article p {
    padding-bottom: 10px;
}
#feature2 article:nth-child(1) header:after {
    background: url(../images/index/top_feature_contents_1.png) center center no-repeat;
    background-size: cover;
}
#feature2 article:nth-child(2) header:after {
    background: url(../images/index/top_feature_contents_2.png) center center no-repeat;
    background-size: cover;
}
#feature2 article:nth-child(3) header:after {
    background: url(../images/index/top_feature_contents_3_sp.png) center center no-repeat;
    background-size: contain;
}
#feature2 article:nth-child(4) header:after {
    background: url(../images/index/top_feature_contents_4.png) center center no-repeat;
    background-size: contain;
}
#feature2 article:nth-child(5) header:after {
    background: url(../images/index/top_feature_contents_5.png) center center no-repeat;
    background-size: contain;
}
}

@media only screen and (max-width: 570px) {
#feature2.top_feature2 .subttl {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 13px;
}
}
/* #interviews
----------------------------------------------- */
#interviews h2 {
    display: none;
}

@media print, screen and (min-width:741px) {
#interviews .index {
    margin: 25px 50px 0;
    overflow: hidden;
}
#interviews .slick-track {
    display: flex;
}
#interviews article {
    float: left;
    width: 33.33%;
    flex: 1;
    display: flex;
}
#interviews article a {
    display: block;
    margin: 0 10px;
    padding: 0 0 20px;
    color: #4d4d4d;
    background: #fff;
    min-height: 360px;
}
#interviews article a:focus, #interviews article a:active {
    outline: none;
}
#interviews article a:hover {
    text-decoration: none
}
#interviews article h3 {
    margin: 20px 25px 0;
    min-height: 3em;
    color: #78282a;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.5em
}
#interviews article .client {
    margin: 10px 25px 0;
    font-size: .85em;
    line-height: 1.25em
}
#interviews article .summary {
    margin: 25px 25px 0
}
#interviews article .summary li {
    margin: 2px 0 0;
    font-size: .85em;
    line-height: 1.5em;
}
#interviews article .summary li span {
    display: inline-block;
    position: relative;
    padding: 0 20px 0 0
}
#interviews article .summary li span:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 9px;
    margin: -6px 0 0;
    width: 1px;
    height: 12px;
    background: #4d4d4d
}
#interviews article figure img {
    width: 100%;
    height: auto
}
#interviews .slick-arrow {
    position: absolute;
    top: 50%;
    margin: -17px 0 0;
    width: 19px;
    height: 34px;
    border: none;
    background: transparent;
    text-indent: -9999px;
    cursor: pointer;
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -ms-transition: all .15s ease;
    transition: all .15s ease
}
#interviews .slick-arrow:focus, #interviews .slick-arrow:active {
    outline: none;
}
#interviews .slick-prev {
    left: 15px;
    width: 19px;
    height: 34px;
    background: url("/assets/images/common/control_hidari.png") center center no-repeat;
    background-size: contain;
}
#interviews .slick-next {
    right: 15px;
    width: 19px;
    height: 34px;
    background: url("/assets/images/common/control_migi.png") center center no-repeat;
    background-size: contain;
}
#interviews .slick-prev:hover {
    background: url("/assets/images/common/control_hidari_hover.png") center center no-repeat;
    background-size: contain;
}
#interviews .slick-next:hover {
    background: url("/assets/images/common/control_migi_hover.png") center center no-repeat;
    background-size: contain;
}
/*
    #interviews .slick-arrow:after {
        display: block;
        content: "";
        width: 19px;
        height: 34px;
        background: url("/casestudy/images/control.png?date=20250530") no-repeat;
        -webkit-background-size: 38px 68px;
        -moz-background-size: 38px 68px;
        -ms-background-size: 38px 68px;
        background-size: 38px 68px
    }
    #interviews .slick-prev:after {
        background-position: 0 0
    }
    #interviews .slick-next:after {
        background-position: -19px 0
    }
    #interviews .slick-prev:hover:after {
        background-position: 0 -34px
    }
    #interviews .slick-next:hover:after {
        background-position: -19px -34px
    }
*/
#interviews .slick-prev:hover {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px)
}
#interviews .slick-next:hover {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px)
}
}

@media screen and (min-width:741px) and (max-width:1023px) {
#interviews .slick-track {
    display: flex;
}
#interviews article {
    float: left;
    width: 50%;
    flex: 1;
    display: flex;
}
}

@media only screen and (max-width:740px) {
#interviews .index {
    margin: 20px 30px 0;
    overflow: hidden;
}
#interviews article {
    float: left;
    width: 100%;
    font-size: 1em;
    -webkit-text-size-adjust: 100%;
}
#interviews article a {
    display: block;
    padding: 0 0 20px;
    color: #4d4d4d;
    background: #fff;
}
#interviews article a:focus, #interviews article a:focus {
    outline: none;
}
#interviews article h3 {
    margin: 20px 25px 0;
    min-height: 3em;
    color: #78282a;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.3em;
}
#interviews article h4 {
    margin: 15px 20px 0;
    color: #78282a;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
}
#interviews article .client {
    margin: 10px 25px 0;
    font-size: .85em;
    line-height: 1.25em;
}
#interviews article .summary {
    margin: 0 20px;
    padding: 10px 0 0;
}
#interviews article .summary li {
    position: relative;
    margin: 6px 0 0;
    font-size: .8em;
    line-height: 1.25em;
}
#interviews article .summary li span {
    display: inline-block;
    position: relative;
    padding: 0 18px 0 0;
    font-size: .8em;
}
#interviews article .summary li span:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    margin: -6px 0 0;
    width: 1px;
    height: 12px;
    background: #595959;
}
#interviews article figure img {
    width: 100%;
    height: auto;
}
#interviews .slick-arrow {
    position: absolute;
    top: 50%;
    margin: -50px 0 0;
    width: 50px;
    height: 100px;
    cursor: pointer;
    border: none;
    background: transparent;
    text-indent: -9999px;
}
#interviews .slick-prev {
    left: 0px;
    padding: 0px;
    width: 20px;
}
#interviews .slick-next {
    right: 0px;
    padding: 0px;
    width: 20px;
}
#interviews .slick-arrow:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -5px;
    width: 11px;
    height: 19px;
    background: url("/casestudy/images/control_min.png?date=20250530") no-repeat;
    -webkit-background-size: 22px 19px;
    -moz-background-size: 22px 19px;
    -ms-background-size: 22px 19px;
    background-size: 22px 19px;
}
#interviews .slick-prev:after {
    background-position: 0 0;
}
#interviews .slick-next:after {
    background-position: -11px 0;
}
}

li.and_more {
    width: 100%;
}
#companies li.and_more p {
    float: right;
    padding-top: 0px;
    margin-top: 10px;
    margin-bottom: -40px;
}

@media screen and (max-width: 1130px) and (min-width: 850px) {
li.and_more {
    margin-top: -140px;
}
}

@media screen and (max-width: 849px) and (min-width: 572px) {
li.and_more {
    width: 88%;
}
}

@media screen and (max-width: 571px) and (min-width: 320px) {
li.and_more {
    width: 78%;
}
}
/* BoldChat モバイルのみ表示 */
@media screen and (min-width: 861px) {
div.bcFloat {
    display: none!important;
}
}
/* 導入企業ロゴ　無限ループ */
.loopSlide {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.loopSlide img {
    width: auto;
    height: 100%;
    height: fit-content;
}
.loopSlide img:first-child {
    animation: slide1 60s -30s linear infinite;
}

.loopSlide img:last-child {
    animation: slide2 60s linear infinite;
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@media screen and (max-width: 571px) and (min-width: 320px) {
  .loopSlide img {
    height: 130px;
}
}
#top_companies .inner {
    max-width: none;
    width: unset;
}
.gmoGroupFooter{
    width:  unset;
}


/* FV top_intro
----------------------------------------------- */

.ver202220401 .mv__wrap {
    display: flex;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    justify-content: space-between;
}
.ver202220401 .mv_r {
    display: block;
    width: 360px;
    box-sizing: border-box;
    background: none;
    padding: 8px 35px 0;
}
.ver202220401 .mv_l {
    position: relative;
    padding: 0 0 0 20px;
    width: calc( 100% - 360px );
}
#top_intro.ver202220401{
    border-bottom: none;
}
#top_intro.ver202220401 .loopSlide img{
    margin-top: 0;
    max-width: inherit;
}
#top_intro.ver202220401 #top_companies {
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
}
#top_intro.ver202220401 h1 {
    width: 72%;
    margin: 0 0 0 12px;
    max-width: 605px;
    background: #fff;
    color: #3c95c1;
    padding: 1.6em 6em 1.7em 2em;
    box-shadow: 0 0 7px 7px rgb(45 124 163 / 70%);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-sizing: border-box;
    font-size: 24px !important;
    line-height: 1.3;
    letter-spacing: 1.5px;
    text-align: center;
    font-weight: 900;
}
#top_intro.ver202220401 h1 br{
    display: block;
}
#top_intro.ver202220401 h1 span.itmedia_large{
    font-size: 1.2em;
    line-height: 2;
}
#top_intro.ver202220401 h1 span.itmedia_large_number{
    font-size: 1.6em;
    line-height: 1.5;
}
#top_intro.ver202220401 h1 span.itreview_category{
    background-color:#3c95c1;
    font-size: .8em;
    color:#fff;
    border-radius:20px;
    padding: 5px 13px;
    margin: 3px 4px;
    display:inline-block;
}
#top_intro.ver202220401 h1 span.itreview_name {
    font-size: .8em;
    display: block;
    margin-bottom: 0.2em;
}
#top_intro.ver202220401 h1 span.itmedia_one{
    line-height: 1.5em;
    background: linear-gradient(transparent 65%, #fded8d 65%);
    background: -moz-linear-gradient(transparent 65%, #fded8d 65%);
    background: -webkit-linear-gradient(transparent 65%, #fded8d 65%);
    background: -ms-linear-gradient(transparent 65%, #fded8d 65%);
}
#top_intro.ver202220401 h1 span.itmedia_one div{
    font-size: 1.7em;
    display: inline-block;
} 
#top_intro.ver202220401 .intro_img {
    margin-top: 0;
    position: absolute;
    right: -7px;
    top: 62px;
    width: 50%;
    max-width: 356px;
}
#top_intro.ver202220401 .top_intro_no1 {
    max-width: 548px;
}
#top_intro.ver202220401 .top_intro_no1 .no1_leader {
    width: 72%;
    height: auto;
}
#top_intro.ver202220401 .top_intro_no1 .no1_security {
    width: 24%;
    max-width: 130px;
}

#top_intro.ver202220401 .top_intro_no1 {
    max-width: 560px;
    margin: 110px 0 15px 35px;
    display: flex;
    flex-direction: row;
}
#top_intro.ver202220401 .top_intro_no1 a {
    margin-left: 5%;
    transition: filter 0.1s ease;
}
#top_intro.ver202220401 .top_intro_no1 a:hover {
    filter: brightness(1.10); 
}
.ver202220401 .top_mv{
  width: 100%;
  position: relative;
}
#top_intro.ver202220401 .top_intro_ttlarea {
    max-width: 100%;
    margin: 0 auto;
}
.ver202220401 .mv_r .modal__content .subttl,
.ver202220401 .mv_r .modal__content .ttl{
    display: none;
}
@media screen and (max-width: 1200px) and (min-width: 861px) {
    #top_intro.ver202220401 h1 {
        padding: 2em 12em 2em 2em;
    }
}

@media screen and (max-width: 1200px) {
  #top_intro.ver202220401 h1 {
    font-size: 1.6vw !important;
    width: 48vw;
  }
  #top_intro.ver202220401 .intro_img {
    margin: 0;
    position: absolute;
    right: inherit;
    top: inherit;
    left: 50%;
    bottom: 40%;
    width: 30vw;
  }
  #top_intro.ver202220401 .top_intro_no1 {
    margin-top:154px;
  }
}

@media screen and (max-width: 900px) {
    #top_intro.ver202220401 .top_intro_no1 {
        max-width: 500px;
        width: 100%;
    }
    #top_intro img {
        max-width: 100%;
        margin-top: 0px;
    }
    #top_intro.ver202220401 .top_intro_no1 .no1_leader {
        margin-left: 2%;
        width: 72%;
        height: auto;
    }
    #top_intro.ver202220401 .top_intro_no1 .no1_security {
        max-width: 130px;
        max-width: 98%;
    }
}

@media screen and (max-width: 860px) {
  .ver202220401 .top_mv{
    padding-top:4.5%;
  }
  #top_intro.ver202220401 h1 {
    width: 90%;
    letter-spacing: .3vw;
    text-align: center;
    margin: 0 auto 4.5%;
    padding: 2em 1em 3.4em;
    font-size: 17px !important;
  }

  #top_intro.ver202220401 h1 span.itmedia_large{
    font-size: 1.3em;
}
  #top_intro.ver202220401 .intro_img {
      margin: -2em auto 0;
      position: relative;
      left: 0;
      bottom: 0;
      width: 100%;
      max-width: 605px;
      text-align: center;
  }
  #top_intro.ver202220401 .intro_img picture {
      max-width: 80%;
      margin: -82px auto 0;
      display: block;
  }
  #top_intro.ver202220401 .top_intro_no1 {
    width:80%;
      max-width: 605px;
      margin:20px auto;
  }
  .ver202220401 .mv_l {
      padding: 0;
      width: 100%;
  }
  #top_intro.ver202220401 .intro_img picture {
      max-width: 64%;
      margin: 0 auto 0;
      display: block;
      top: -2vw;
      position: relative;
  }
}
@media screen and (min-width: 769px) {
    .ver202220401 .mv_r{
        display: block !important;
    }
}
@media screen and (max-width: 768px) {
  .ver202220401 .mv_r{
    display: none;
    width: 100%;
    background: #ebf3f9;
  }
  .ver202220401 .mv_r iframe{
    width: 100%;
    min-width: 301px;
    max-width: 360px;
  }
  #top_intro.ver202220401 .sp_btn{
    display: block !important;
  }
  #top_intro.ver202220401 .sp_btn a{
    max-width: 650px;
  }
  #top_intro.ver202220401 {
    padding-top: 0;
  }
  #top_intro.ver202220401 h1 {
    border-radius: 4vw;
    font-size: 46px !important;
    font-size: 3.5vw !important;
  }
  .ver202220401 .mv__wrap{
    display: block;
  }
  #top_intro.ver202220401 .intro_img {
      margin: -10.5% auto 0;
  }
  #top_intro.ver202220401 .intro_img img {
    margin-top: -22px;
  }
  #top_intro.ver202220401 .top_intro_no1 img{
      max-width: 100%;
  }
  #top_intro.ver202220401 .top_intro_no1 {
      width: 87%;
      max-width: 652px;
      margin: 7% auto 7%;
  }
  #top_intro.ver202220401 .intro_img picture {
      max-width: 64%;
      max-width: 64vw;
      right: -1.5vw;
      top: -.2vw;
  }
  .ver202220401 .mv_r .modal__content .subttl,
  .ver202220401 .mv_r .modal__content .ttl{
      display: block;
  }
}
@media screen and (max-width: 375px) {
  #top_intro.ver202220401 h1 {
    font-size: 4.3vw !important;
  }
}
@media screen and (max-width: 320px) {
  .ver202220401 .mv_r {
    padding: 8px 9px;
  }
}

#top_intro.ver202220401 h1 {
    padding: 1.3em 4.5em 1.3em 0.8em;
    }
    #top_intro .top_mv img {
    width: 75%;
    padding: 2em 0 0.6em;
    }
    #top_intro.ver202220401 h1 span.itmedia_large {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.7;
    top: 20px;
    color: #4d4d4d;
    }
    #top_intro.ver202220401 h1 span.itreview_category {
    margin: 3px 6px;
    font-size: 0.63em;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 23px;
    }
    #top_intro.ver202220401 h1 span.itmedia_large_number {
    font-size: 1.4em;
    line-height: 1.5;
    }

    @media screen and (max-width: 1400px){
    #top_intro.ver202220401 h1 {
    font-size: 1.5vw !important;
    width: 66%;
    }
    #top_intro.ver202220401 h1 {
    padding: 1.3em 3.4em 1.3em 0.8em;
    }
    #top_intro .top_mv img {
    width: 70%;
    }
    #top_intro.ver202220401 h1 span.itmedia_large {
    top: 10px;
    }
    }
    
    @media screen and (min-width: 769px) and (max-width: 860px) {
        #top_intro .mv__wrap { 
            padding-top: 0px;
        }
        #top_intro .mv__wrap .mv_r {
            margin-top: 22px;
        }
    }

    @media screen and (min-width: 860px) and (max-width: 1050px) {
      #top_intro img  {
        max-width: 90%;
        margin-top: -4px;
    }
    }
    
    @media screen and (max-width: 1000px){
    #top_intro.ver202220401 h1 {
    font-size: 1.5vw !important;
    width: 75%;
    }
    #top_intro.ver202220401 h1 {
    padding: 1.3em 0.6em 1.3em 0.5em;
    }
    #top_intro .top_mv img {
    width: 60%;
    }
    #top_intro.ver202220401 h1 span.itmedia_large {
    top: 10px;
    }
}


@media screen and (max-width: 768px) {
    #top_intro.ver202220401 .intro_img {
        bottom: -17px;
    }
    #top_intro.ver202220401 h1 {
    width: 88%;
    padding: 2em 1em 0em;
    }
    #top_intro.ver202220401 h1 img {
    width: 42vw;
    padding: 1.6em 0 1.4em;
    position: relative;
    right: -26px;
    top: -5px;
    }
    #top_intro.ver202220401 h1 span.itmedia_large {
    top: unset;
    line-height: 1.5em;
    font-size: 1.7em;
    }
    #top_intro.ver202220401 h1 span.itreview_category {
        margin: 3px 6px 18px;
        font-size: 1.43em;
    }
    #top_intro .no1_security {
        display: none;
    }
    #top_intro.ver202220401 h1 {
        margin-top: 20px;
    }
    #top_intro.ver202220401 .top_intro_no1 {
        max-width: 548px;
        margin: 30px auto 22px;
        display: flex;
        flex-direction: column;
        align-items: center
    }
    #top_intro.ver202220401 .top_intro_no1 .no1_leader {
        width: 80%;
    }
    #top_intro.ver202220401 .top_intro_no1 .no1_security {
        width: 140px;
        margin: 25px;
    }
}
@media screen and (max-width: 430px) {
    #top_intro.ver202220401 h1 span.itreview_category {
        margin-bottom: 30px;
    }
    #top_intro.ver202220401 h1 img {
        right: -26px;
        top: -5px;
    }
    .no1_security_mb {
        right: -9px;
        top: -24px;
        width: 12vw;
    }
}
/* ▲ top_intro ▲ */

/* ▼ news_bar ▼ */
#news_bar {
    display: inline-block;
    width: 100%;
    text-align: center;
    background-color:#046798;
  }
  #news_bar p{
    display: inline-block;
    font-size: 14px;
    color: #fff;
  }
  #news_bar span.news {
    background: #e65549;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 3px 9px;
    margin: auto 10px;
    display: inline-block;
  }
  #news_bar span.see_detail {
    display: inline-block;
    border: #fff solid 1px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 14px;
    padding: 4px 11px;
    margin: 10px ;
  }
  #news_bar span.see_detail:hover {
  background-color: #fff;
  color: #046798;
  font-weight: 700;
  }
  #news_bar p {
    cursor: pointer;
    line-height: 1.6em;
  }
@media screen and (max-width: 768px){
    #news_bar, #main {
    top: 0px;
    position: relative;
    }
    #news_bar p {
      padding: 0.6em 0 0.3em;
    }
}
@media screen and (max-width: 650px) {
    #news_bar p {
    margin: 0.8em auto;
    }
}
  /* ▲ news_bar ▲ */
  
  #pardot-form input[type=text] {
    border: 1px solid #b2cee6;
    border-radius: 8px;
    padding: 11px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    margin: 4px 0 5px;
    -webkit-appearance: none;
}