@charset "utf-8";

/* CSS Document */


/*----------------------------------------------

　共通　

----------------------------------------------*/


/* 装飾  -------------------------------------------*/

.mt10 {
    margin-top: 10px;
}
.mt30 {
    margin-top: 30px;
}
.mt60 {
    margin-top: 60px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.px-50 {
    padding-left: 50px;
    padding-right: 50px;
}
.px-80 {
    padding-left: 80px;
    padding-right: 80px;
}
.px-100 {
    padding-left: 100px;
    padding-right: 100px;
}

.wd35 {
    width: 35%;
}
.wd40 {
    width: 40%;
}
.wd45 {
    width: 45%;
}
.wd50 {
    width: 50%;
}
.wd55 {
    width: 55%;
}
.wd30 {
    width: 30%;
}
.wd70 {
    width: 70%;
}
.bold {
    font-weight: bold;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.sp-head {
    display: none;
}
.red {
	text-decoration:underline;
	color:#900;
}

h1,
h2 {
    letter-spacing: 0.2rem;
}
.bg-white {
    background-color: rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 2;
}
@media screen and (max-width: 1720px) {
    .px-20,
    .px-30,
    .px-50,
    .px-80,
    .px-100 {
        padding-left: 0px;
        padding-right: 0px;
    }
}


@media screen and (max-width:768px) {
    .mt10,
    .mt30,
    .mt60 {
        margin-top: 10px;
    }
    .right {
        text-align: center;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .sp-head {
        display: block;
        text-align: right;
        padding: 2vw 2vw 0 0;
        float: right;
        width: 40%;
        /*width: 25%;*/
    }

    /*.sp-head img {*/
    /*    width: 100%;*/
    /*    aspect-ratio: 247 / 64;*/
    /*}*/

    .sp-head a {
        display: inline-block;
        padding: 1em 2.5em;
        font-size: 2vw;
        text-decoration: none;
        border-radius: 30px;
        transition: .4s;
        font-weight: bold;
        box-shadow: 2px 2px 6px rgba(51,51,51,.2);
        color: #FFF;
        background: linear-gradient(to right,#E29EA9 , #d82144);
    }
    .sp-mt30 {
        margin-top: 30px;
    }
}

@media screen and (max-width:500px) {
    .sp-head {
        padding: 3vw 2vw 0 0;
    }
}

/* 2Col  -------------------------------------------*/

.col_2,
.col_2-Company {
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
}
.col_2,
.col_2-Company {
    justify-content: space-between;
}
.col_2 {
    align-items: center;
}
.Experience-Contents .col_2 > div {
    width: 50%;
}
.col_2 > div img {
    max-width: 100%;
}
@media screen and (max-width: 800px){
    .Experience-Contents .col_2 > div {
        width: 51%;
    }
}
@media screen and (max-width: 768px) {
    .Experience-Contents .col_2 > div,
    .Experience-Contents .col_2 > div.Experience-btn {
        width: 100%;
    }
    .col_2-Company > div {
        width: 100%;
    }
    .col_2 > div {
        width: 100%;
    }
    .col_2 > div.tags{
        width: 91%;
    }
}

/*----------------------------------------------

　コンテンツ　

----------------------------------------------*/


/* 以下共通  -------------------------------------------*/

h2 {
    font-size: 2.2vw;
    padding-bottom: 2vw;
    text-align: center;
}

#category .category-container,
#lineup .lineup-container,
#customer .customer-container,
#botworking .botworking-container,
#flow .flow-container {
    padding-top: 6%;
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
}

.Experience-Contents,
.Company-Contents {
    max-width: 1720px;
    width: 78%;
    margin: 0 auto;
    padding-top: 8%;
    padding-bottom: 8%;
}

@media screen and (max-width:768px) {
    h2 {
        font-size: 6vw;
    }

    .Experience-Contents,
    .Company-Contents {
        width: 90%;
        margin: 0 5%;
        padding-bottom: 20%;
    }
}


/*----------------------------------------------

　コンテンツ　

----------------------------------------------*/


/* SWIの特徴  -------------------------------------------*/

#top .top-container {
    padding-top: 5%;
}

#top-img-l {
    display: none;
}

#top-img-s, #top-img-l {
    text-align: center;
}

#top .top-content {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    /*padding-top: 2vw;*/
    padding-top: 1vw;
}

#top .top-content .top-swi-img {
    max-width: 700px;
    margin: 0 auto 10px;
}

#top .top-content .top-box {
    margin: 0 0 10px 0;
    padding: 7px;
    background: #e6f1fb;
    border: 3px solid #cde;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

#top .top-content .top-box ul.top-list {
    margin: 0 auto 0 2em;
}

.webp #top .top-content .top-box ul.top-list {
    list-style-image: url(../img/list_mark4.webp);
}

.no-webp #top .top-content .top-box ul.top-list {
    list-style-image: url(../img/list_mark4.png);
}

#top .top-content .top-box .top-list li {
    margin: 0 0 5px 0;
    padding: 10px;
    text-align: left;
    line-height: 1.6em;
    color: #003d6b;
    font-size: 75%;
    font-weight: bold;
    border-bottom: 1px dashed #cde;
}

.img-c {
    margin: 0 0 20px 0;
    text-align: center;
}

@media only screen and (min-width: 544px) {
    #top-img-s {
        display: none;
    }

    #top-img-l {
        display: block;
    }

    #top .top-content .top-box {
        padding: 15px;
    }

    #top .top-content .top-box .top-list li {
        font-size: 120%;
    }
}

@media screen and (max-width: 768px) {
    #top .top-container {
        padding-top: 17%;
    }
}


/* サンソウらしく、3つの層で支援  -------------------------------------------*/

#category .img-txt {
    margin: 0 0 30px 0;
    overflow: hidden;
}

#category .img-txt .img-txt-i {
    margin: 0 0 20px 0;
    width: 100%;
}

#category .img-txt .img-txt-t {
    text-align: left;
}

#category .img-txt .img-txt-t ul {
    padding-left: 0;
    list-style-type: none;
}

#category .img-txt .img-txt-t ul li {
    border-bottom: 1px solid #ccc;
    padding: 1.5em;
    border-bottom-style: dashed;
}

#category .img-txt .img-txt-t ul li .check-icon {
    float: left;
    margin-right: 10px;
}

#category .img-txt .img-txt-t ul li .check-icon img {
    width: 25px;
    aspect-ratio: 1 / 1;
}

#category .img-txt .img-txt-t .category-text {
    overflow: hidden;
}

#category .img-txt .img-txt-t .category-text .category-title1,
#category .img-txt .img-txt-t .category-text .category-title2,
#category .img-txt .img-txt-t .category-text .category-title3 {
    font-weight: bold;
    font-size: larger;
}

#category .img-txt .img-txt-t .category-text .category-title1 {
    color: #215aa8;
}

#category .img-txt .img-txt-t .category-text .category-title2 {
    color: #0ea73c;
}

#category .img-txt .img-txt-t .category-text .category-title3 {
    color: #f1910e;
}

@media only screen and (min-width: 544px) {
    #category .img-txt .img-txt-i {
        margin: 0;
        width: 40%;
        vertical-align: top;
        float: left;
    }

    #category .img-txt .img-txt-t {
        width: 55%;
        vertical-align: top;
        float: right;
    }
}

/* SWIのサービスラインナップをご紹介  -------------------------------------------*/

#lineup .lineup-container {
    padding-bottom: 7%;
}

#lineup .lineup-contents {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    background: #9fd7ef;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#lineup .lineup-contents li {
    margin: 0 0 15px 0;
    flex-basis: 100%;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

/*#lineup .lineup-contents li a {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    text-indent: -9999px;*/
/*    z-index: 100;*/
/*    outline: none;*/
/*}*/

#lineup .lineup-contents li a {
    width: 100%;
    color: rgb(51, 51, 51);
    text-decoration: none;
}

#lineup .lineup-contents li a:hover {
    opacity: 0.9;
}

#lineup .lineup-contents li .lineup-list {
    display: flex;
    flex-wrap: wrap;
}

#lineup .lineup-contents li .lineup-list li.lineup-title1 {
    background: #215aa8;
}
#lineup .lineup-contents li .lineup-list li.lineup-title2 {
    background: #0ea73c;
}
#lineup .lineup-contents li .lineup-list li.lineup-title3 {
    background: #f1910e;
}


#lineup .lineup-contents li .lineup-list li.lineup-title1,
#lineup .lineup-contents li .lineup-list li.lineup-title2,
#lineup .lineup-contents li .lineup-list li.lineup-title3 {
    padding: 0.5em;
    color: #fff;
    font-weight: bold;
    font-size: 120%;
    border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    display: block;
    text-align: center;
}

#lineup .lineup-contents li .lineup-list li {
    margin: 0 0 5px 0;
    flex-basis: 100%;
    max-width: 100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

#lineup .lineup-contents li .lineup-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#lineup .lineup-contents li .lineup-list li div:first-child {
    text-align: right;
    font-size: 75%;
}

#lineup .lineup-contents li .lineup-list li div {
    margin: 0;
    padding: 1px 0;
    flex-basis: 49%;
    max-width: 49%;
}

#lineup .lineup-contents li .lineup-list li div:last-child {
    text-align: left;
}

#lineup .lineup-contents li .lineup-list li div img {
    aspect-ratio: 37 / 11;
}

@media only screen and (min-width: 1000px) {
    #lineup .lineup-contents {
        justify-content: space-around;
    }

    #lineup .lineup-contents li {
        margin: 0;
        flex-basis: 31%;
        max-width: 31%;
    }

    #lineup .lineup-contents li .lineup-list li {
        margin: 0 0 5px 0;
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    #lineup .lineup-contents li .lineup-list li div:first-child {
        text-align: right;
        font-size: 65%;
    }

    #lineup .lineup-contents li .lineup-list li div:first-child .small {
        /*white-space: nowrap;*/
        font-size: 50%;
    }
}

@media only screen and (max-width: 544px) {
    #lineup .lineup-contents li .lineup-list li div:first-child {
        text-align: right;
        font-size: 65%;
    }

    #lineup .lineup-contents li .lineup-list li div:first-child .small {
        white-space: nowrap;
        font-size: 50%;
    }
}


/* まずはお気軽にご相談ください  -------------------------------------------*/

.Experience {
    width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
    background: linear-gradient(to left,#0f53a5 , #003470);
}
.Experience h2 {
    text-align: left;
}
.Experience-Contents {
    color: #FFF;
    padding: 3.4% 0;
}
.Experience-Contents p {
    font-size: 1.2vw;
}
.Experience-txt p {
    line-height: 1.6em;
}
.Experience-Contents .Experience-txt h2 {
    font-size: 2vw;
    font-weight: normal;
    padding-bottom: 30px;
    letter-spacing: 4px;
}
.Experience-Contents .col_2 > div.Experience-btn {
    text-align: right;
    width: 43.7%;
}
.Experience-Contents .col_2 > div.Experience-btn img {
    width: 100%;
    aspect-ratio: 725 / 181;
}

.Experience-Contents .col_2 > div.Experience-btn a {
    display: inline-block;
    font-size: 2.5vw;
    font-weight: bold;
    border: 1px solid;
    border-radius: 75px;
    transition: all 0.2s ease 0s;
    padding: 6% 16%;
    color: #fff;
    background: linear-gradient(to right,#E29EA9 , #d82144);
    box-shadow: 2px 2px 6px rgba(51,51,51,.2);
}
.Experience-Contents .col_2 > div.Experience-btn a:hover {
    opacity: 0.9;
    box-shadow: 2px 2px 6px rgba(51,51,51,.8);
}
.Experience-Contents .col_2 > div.Experience-btn a .micro-copy {
    font-size: 1vw;
    border-top: 1px solid #fff;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .Experience-Contents {
        padding: 12vw 0;
        margin: 0 auto;
        width: 94%;
    }
    .Experience-Contents p {
        font-size: 2.8vw;
        text-align: center;
    }
    .Experience-Contents .Experience-txt h2 {
        font-size: 4.8vw;
        text-align: center;
    }
    .Experience-btn {
        margin-top: 10%;
    }
    .Experience-Contents .col_2 > div.Experience-btn {
        text-align: center;
    }
    .Experience-Contents .col_2 > div.Experience-btn a {
        font-size: 4.5vw;
    }
    .Experience-Contents .col_2 > div.Experience-btn a .micro-copy {
        font-size: 2.25vw;
    }
    .Experience-Contents .col_2 > div.Experience-btn{
        width: 100%;
    }
}

/*@media screen and (max-width: 480px) {
	.Experience-Contents .Experience-txt h1 {
		font-size: 2.0vw;}
	.Experience-txt p {
		line-height: 1.5rem;
	}
	.Experience-Contents .Experience-txt {
        text-align: left;
    }
	.Experience-btn img {
		width: 80%;
		margin:0 auto;}
}*/

/*.Experience-Contents .col_2 > div.Experience-btn a {*/
/*    padding: 7% 17% !important;*/
/*}*/


/* カスタマー  -------------------------------------------*/

#customer .customer-box {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1em;
    border: solid 10px #c1c1c1;
    border-radius: 30px;
}
#customer .customer-box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 79px;
    padding: 0 30px;
    line-height: 1;
    font-size: 30px;
    background: #FFF;
    /* color: #c1c1c1; */
    font-weight: bold;
}
#customer .customer-box .box-title .note {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 30px;
}
#customer .customer-box .logo-wrapper {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;
    overflow: hidden;
}
#customer .customer-box .logo-wrapper .logo-area {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
#customer .customer-box .logo-wrapper .logo-area .logo-content {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    flex-basis: 25%;
    max-width: 25%;
}
#customer .customer-box .logo-wrapper .logo-area .logo-content .logo-img {
    text-align: center;

}

@media (max-width: 544px) {
    #customer .customer-box {
        padding-top: 2em;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border: solid 5px #c1c1c1;
    }
    #customer .customer-box .box-title {
        font-size: 20px;
        left: 20px;
        padding: 0 10px;
    }
    #customer .customer-box .box-title .note {
        font-size: 10px;
        display: block;
        margin-left: 0;
    }
}

@media (min-width: 544px) and (max-width: 1000px) {
    #customer .customer-box {
        padding-top: 1.7em;
    }
    #customer .customer-box .box-title {
        font-size: 20px;
        left: 60px;
        padding: 0 20px;
    }
    #customer .customer-box .box-title .note {
        font-size: 10px;
        display: block;
        margin-left: 0;
    }
}

/* Botworking  -------------------------------------------*/

#botworking h2 .brackets {
    font-size: 75%;
}

#botworking p {
    font-size: 1.2vw;
    padding-bottom: 2.2vw;
}

#botworking .botworking-img {
    margin: 0 auto 20px;
    width: 55%;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
    #botworking .botworking-img {
        width: 100%;
    }
}

/* ご契約までの流れ  -------------------------------------------*/

#flow .flow-wrapper {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;
    overflow: hidden;
}

#flow .flow-steps-list {
    padding: 10px;
    border: 5px solid #eee;
    background: #eee;
    box-shadow: #f3f3f3 0 0 0 10px inset;
}

#flow .flow-steps-list .row {
    box-sizing: border-box;
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

#flow .flow-steps-list .flow-steps-arrow {
    position: relative;
    z-index: 0;
}

#flow .flow-steps-list .col-xs-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    flex-basis: 100%;
    max-width: 100%;
}

#flow .flow-steps-list .flow-steps-item {
    background: #fff;
    border: 5px solid #eee;
    position: relative;
}

#flow .flow-steps-list .flow-steps-item .flow-steps-item-header {
    overflow: hidden;
    padding: 5px;
    background: #1f4050;
    color: #fff;
    margin-bottom: 20px;
    font-size: 16px;
}

#flow .flow-steps-list .flow-steps-item .flow-steps-item-num {
    margin: 0 5px 0 0;
    padding: 0 5px;
    border-radius: 3px;
    background: #fff;
    color: #1f4050;
}
#flow .flow-steps-list .flow-steps-item .flow-steps-item-num,
#flow .flow-steps-list .flow-steps-item .flow-steps-item-heading {
    display: inline-block;
}

#flow .flow-steps-list .flow-steps-item .flow-steps-item-img {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid #fff;
    width: 80%;
    box-shadow: #1f4050 0 0 0 3px;

    margin-bottom: 20px;
    text-align: center;
}

#flow .flow-steps-list .flow-steps-item .flow-steps-item-img img {
    aspect-ratio: 400 / 267;
}

#flow .flow-steps-list .flow-steps-item .flow-steps-item-desc {
    position: relative;
    padding: 10px;
    border: 5px solid #fff;
    background: #f3f3f3;
    text-shadow: 1px 1px #fff;
}

#flow .flow-steps-list .flow-steps-arrow:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #1f4050;
    border-top: 10px solid transparent;
    left: -8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
    #flow .flow-steps-list .col-xs-12 {
        margin-bottom: 20px;
    }

    #flow .flow-steps-list .flow-steps-arrow:after {
        height: 0;
        width: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 15px solid #1f4050;
        left: 50%;
        top: -15px;
        bottom: auto;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    #flow .flow-steps-list .flow-steps-item .flow-steps-item-header {
        font-size: 13px;
    }
}

@media only screen and (min-width: 768px) {
    #flow .flow-steps-list .col-sm-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }
}

/* 会社概要  -------------------------------------------*/

.Company-Contents h2 {
    font-size: 2.2vw;
    font-weight: normal;
    position: relative;
    display: inline-block;
    margin-bottom: 70px;
    padding-left: 90px;
    color: #00336e;
}
.Company-Contents h2:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 63px;
    height: 2px;
    background-color: #00336e;
}
.Company-Contents h2:before {
    left: 0;
}
.col_2-Company{
    width: 85%;
    margin: 0 auto;
}
.Company table.tb01,
.Company table.tb02 {
    width: 100%;
    font-size: 1.1vw;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 3px solid #ddd;
}
.Company th {
    width: 33%;
    border-bottom: 3px solid #ddd;
    text-align: left;
    font-weight: normal;
}
.Company table.tb01 tr:nth-child(-n+3) th{
    letter-spacing: 1em;
}
.Company td {
    width: 75%;
    border-bottom: 3px solid #ddd;
}
.Company td a {
    color: #0000FF;
    text-decoration: underline;
}
.Company th,
.Company td {
    height: 7vw;
}
@media screen and (max-width: 768px) {
    .Company-Contents h2{
        font-size: 5.5vw;
    }
    .col_2-Company{
        width: 100%;
    }
    .Company th,
    .Company td {
        height: 18vw;
    }
    .Company table.tb01,
    .Company table.tb02 {
        font-size: 3.25vw;
    }
    .Company table.tb02{
        border-top: none;
    }
    .copy {
        font-size: 2.3vw;
        font-style: normal;
        padding: 50px 0;
        color: #FFF;
    }
}