@charset "utf-8";

/*--------------------------------------
toc
---------------------------------------*/
.l-main-area--index .block-toc {
margin: 0 auto 8rem auto;
}


/*--------------------------------------
mv
---------------------------------------*/
.l-mv-wrapper {
position: relative;
width: 96rem;
min-height: 44.6rem;
margin: 0 auto 10rem auto;
background: url(img/mv_bg_01.jpg) no-repeat right top;
background-size: contain;
}
.l-mv-box {
width: 52rem;
padding: 3rem 0 0 0;
}
.l-mv-logo {
width: 25rem;
margin: 0 0 3rem 0;
}
.l-mv-title {
margin: 0 0 1.5rem 0;
color: #125bce;
font-size: 3.2rem;
font-weight: 900;
line-height: 1.4;
}
.l-mv-title .txt-1 {
color: #f47c1b;
font-size: 5rem;
}
.l-mv-title .txt-2 {
display: block;
margin: 1rem 0 0 0;
padding: 0.8rem;
background: #2c3938;
color: #fff;
font-size: 1.6rem;
line-height: 1.1;
text-align: center;
}
.l-mv-txt p:not([class]) {
margin: 1em 0 0 0;
color: #000;
}
.l-mv-txt p:not([class]) > span:not([class]) {
background: linear-gradient(transparent 70%, #fef8a1 70%);
font-weight: 900;
}


/*--------------------------------------
l-parts02
---------------------------------------*/
.l-parts02 {
padding: 8rem 0;
background: #c4d6f3 url(img/parts01_bg_01.png) repeat center top;
}
.l-parts02 .l-common-title {
background: none;
color: #000;
margin: 0;
padding: 0;
}
.l-parts02 .l-common-lead {
margin: 0 auto 8rem auto;
}
.l-parts02-company {
position: relative;
margin: 0 0 10rem 0;
padding: 0 6rem 6rem 6rem;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
}
.l-parts02-company:last-child {
margin: 0;
}
.l-parts02 .catch-title {
display: inline-block;
position: relative;
left: 50%;
top: -3.5rem;
transform: translateX(-50%);
min-width: 68rem;
padding: 2.5rem 1.5rem;
background: #1d60cc;
color: #fff;
font-size: 2.4rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.l-parts02 .catch-title span {
display: inline-block;
margin: 0.3rem;
padding: 0 0.5rem 0.2rem 0.5rem;
background: #fff;
color: #1d60cc;
font-size: 3rem;
}
.l-parts02 .name {
margin: 0 0 2rem 0;
color: #37414f;
font-size: 3.6rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.l-parts02 .name + .fig,
.l-parts02 .name + .fig + .caption {
text-align: center;
}
.l-parts02-company > .title {
margin: 8rem 0 4rem 0;
color: #333;
font-size: 2.4rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.block-feature .box {
margin: 4rem 0;
}
.block-feature .box .catch {
margin: 0 0 1.5rem 0;
color: #1d60cc;
font-size: 1.8rem;
font-weight: 900;
line-height: 1.4;
}
.l-parts02 table {
table-layout: fixed;
margin: 3rem 0;
}
.l-parts02 table th {
width: 14rem;
padding: 1rem;
background: #e7e6e6;
border: 1px solid #fff;
font-size: 1.6rem;
font-weight: 900;
text-align: center;
}
.l-parts02 table td {
width: calc((100% - 28rem) / 2);
padding: 1rem;
background: #f5f5f5;
border: 1px solid #fff;
}
.block-case .box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 5rem 0;
}
.block-case .box:last-child {
margin: 0;
}
.block-case .accordion-item {
display: none;
}
.block-case .accordion-item.is-visible {
display: block;
}
.block-case .box-fig {
width: 13rem;
padding: 2rem 0 0 0;
text-align: center;
}
.block-case .box-txt {
width: calc(100% - 13rem);
padding: 0 0 0 4rem;
}
.block-case .box-txt .catch {
min-height: 3rem;
margin: 0 0 2rem 0;
padding: 1rem 0 0 4.5rem;
background: url(img/parts02_bg_01.png) no-repeat left top;
background-size: 35px auto;
color: #1d60cc;
font-size: 1.8rem;
font-weight: 900;
line-height: 1.4;
}
.block-case .box-txt p:not([class]) {
margin: 1em 0;
}
.block-case .title {
display: block;
position: relative;
width: 47rem;
height: auto;
margin: 4rem auto 3rem auto;
padding: 2rem 5rem;
background: #e7e6e6;
border-radius: 0rem;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
color: #000;
font-size: 1.6rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: 0.2s;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.block-case .title::before {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
width: 2.4rem;
height: 2.4rem;
background: url(img/acc_bg_03.svg) no-repeat left top;
background-size: contain;
content: "";
}
.block-case .title.is-open::before {
background: url(img/acc_bg_04.svg) no-repeat left top;
background-size: contain;
}
.block-case .title:hover {
opacity: 0.7;
}
.l-parts02 .block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.l-parts02 .block::after {
display: block;
width: calc((100% - 2rem) / 3);
content: "";
}
.l-parts02 .block .box {
display: flex;
align-items: center;
min-height: 8rem;
padding: 2rem 1rem 2rem 7rem;
width: calc((100% - 2rem) / 3);
background: #dde7f7 url(img/parts02_bg_02.png) no-repeat 1.5rem center;
background-size: 44px auto;
color: #000;
font-size: 1.6rem;
font-weight: 900;
line-height: 1.4;
}


/*--------------------------------------
l-parts03
---------------------------------------*/
.l-parts03 {
padding: 8rem 0;
}
.l-parts03 .accordion-btn::after {
display: block;
padding: 0 5rem;
text-align: center;
content: "基幹システム開発会社をもっと見る";
}


/*--------------------------------------
l-parts04
---------------------------------------*/
.l-parts04 {
padding: 0 0 8rem 0;
}
.l-parts04 .l-common-title {
margin: 0 0 8.6rem 0;
}
.l-parts04 .inner {
position: relative;
padding: 0 0 6rem 0;
}
.l-parts04 .inner::before {
position: absolute;
right: -12rem;
top: -5rem;
width: 100vw;
height: 100%;
background: #747474 url(img/parts01_bg_01.png) repeat center top;
box-shadow: -2rem 2rem 0 0 #949494;
content: "";
z-index: -1;
}
.l-parts04 .block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.l-parts04 .block::after {
display: block;
width: calc((100% - 5.6rem) / 3);
content: "";
}
.l-parts04 .block .box {
width: calc((100% - 5.6rem) / 3);
margin: 0 0 4rem 0;
padding: 3rem 2.5rem;
background: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.l-parts04 .block .box-head {
display: flex;
align-items: center;
margin: 0 0 2rem 0;
padding: 0 0 1.5rem 0;
border-bottom: 1px solid #125bce;
}
.l-parts04 .block .box-head .ttl {
width: 100%;
color: #37414f;
font-size: 2.1rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.l-parts04 .block .box-head .ttl a {
display: block;
padding: 0 3rem 0 0;
background: url(img/arrow02_blue.svg) no-repeat right center;
background-size: 20px auto;
color: inherit;
text-decoration: none;
}
.l-parts04 .block .box-body p:not([class]) {
margin: 0;
}


/*--------------------------------------
l-parts05
---------------------------------------*/
.l-parts05 {
margin: 10rem 0 0 0;
padding: 5rem 0 8rem 0;
background: #d9e8ff;
background: -webkit-linear-gradient(0deg, rgba(29,96,204,0.28) 20%, rgba(121,172,254,0.28) 100%);
background: linear-gradient(0deg, rgba(29,96,204,0.28) 20%, rgba(121,172,254,0.28) 100%);
}
.l-parts05 .l-common-title {
background: #608fdb;
color: #fff;
}
.l-parts05 .l-common-title a {
display: inline-block;
padding: 0 6rem 0 0;
background: url(img/arrow02_blue.svg) no-repeat right center;
background-size: 28px auto;
color: inherit;
text-decoration: none;
}
.l-parts05 .box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 6rem 0 0 0;
}
.l-parts05 .box-fig {
width: 30rem;
text-align: center;
}
.l-parts05 .box-txt {
width: calc(100% - 30rem);
padding: 0 0 0 4.5rem;
}
.l-parts05 .box-txt .ttl {
position: relative;
margin: 0 0 1.5rem 0;
padding: 0 0 0 4rem;
color: #000;
font-size: 2.2rem;
font-weight: 900;
line-height: 1.4;
}
.l-parts05 .box-txt .ttl::before {
position: absolute;
left: 0;
top: 1.5rem;
width: 2.4rem;
height: 0.5rem;
background: #125bce;
content: "";
}
.l-parts05 .box-txt .btn-internal {
margin: 3rem auto 0 auto;
}




















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

/*--------------------------------------
toc
---------------------------------------*/
.l-main-area--index .block-toc {
width: calc(100% - 3rem);
margin: 0 auto;
}


/*--------------------------------------
mv
---------------------------------------*/
.l-mv-wrapper {
width: 100%;
min-height: auto;
margin: 0 0 6rem 0;
background: none;
}
.l-mv-inner {
width: 100%;
}
.l-mv-box {
width: 100%;
padding: 0;
}
.l-mv-logo {
width: 100%;
margin: 0;
padding: 1rem 0;
text-align: center;
}
.l-mv-logo img {
width: 18rem;
}
.l-mv-title {
display: flex;
align-items: center;
padding: 2rem 1.5rem 2rem;
font-size: 2.1rem;
}
.l-mv-txt {
padding: 0 1.5rem;
}


/*--------------------------------------
l-parts02
---------------------------------------*/
.l-parts02 {
padding: 4rem 0;
background: #c4d6f3 url(img/parts01_bg_01.png) repeat center top;
background-size: 693px auto;
}
.l-parts02 .l-common-lead {
margin: 0 auto 6rem auto;
}
.l-parts02-company {
margin: 0 0 6rem 0;
padding: 0 1.5rem 3rem 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
}
.l-parts02 .catch-title {
top: -2.5rem;
min-width: 90%;
padding: 1.5rem 0.5rem;
font-size: 1.8rem;
}
.l-parts02 .name {
font-size: 2.4rem;
}
.l-parts02-company > .title {
margin: 6rem 0 3rem 0;
font-size: 2rem;
}
.block-feature .box {
margin: 0 0 4rem 0;
}
.block-feature .box .catch {
font-size: 1.6rem;
}
.l-parts02 table:not([class]) {
margin: 0;
border-top: 1px solid #fff;
}
.l-parts02 table th {
width: 100%;
}
.l-parts02 table td {
width: 100%;
}
.l-parts02 table tr:last-child th:nth-last-child(2),
.l-parts02 table tr:last-child td:last-child {
display: none;
}
.block-case .title {
width: 90%;
padding: 2rem 4rem;
}
.block-case .title::before {
right: 1.5rem;
width: 2rem;
height: 2rem;
}
.block-case .box {
display: block;
margin: 0 0 4rem 0;
}
.block-case .box:last-child {
margin: 0;
}
.block-case .box-fig {
width: 10rem;
margin: 0 auto 1.5rem auto;
padding: 0;
text-align: center;
}
.block-case .box-txt {
width: 100%;
padding: 0;
}
.block-case .box-txt .catch {
margin: 0 0 1.5rem 0;
padding: 1.5rem 0 0 4.5rem;
font-size: 1.7rem;
}
.block-case .box-txt .catch {
padding: 0.5rem 0 0 4rem;
background-size: 30px auto;
font-size: 1.7rem;
}
.l-parts02 .block {
display: block;
}
.l-parts02 .block::after {
display: none;
content: none;
}
.l-parts02 .block .box {
margin: 0 0 2rem 0;
width: 100%;
}


/*--------------------------------------
l-parts03
---------------------------------------*/
.l-parts03 {
padding: 4rem 0;
}


/*--------------------------------------
l-parts04
---------------------------------------*/
.l-parts04 {
padding: 0 0 4rem 0;
}
.l-parts04 .l-common-title {
margin: 0 0 6rem 0;
}
.l-parts04 .inner {
position: relative;
padding: 0 0 6rem 0;
}
.l-parts04 .inner::before {
right: 3.5rem;
top: -3rem;
background-size: 693px auto;
box-shadow: -1.5rem 1.5rem 0 0 #949494;
}
.l-parts04 .block {
display: block;
}
.l-parts04 .block::after {
display: none;
content: none;
}
.l-parts04 .block .box {
width: 100%;
margin: 0 0 3rem 0;
}
.l-parts04 .block .box-head .ttl {
font-size: 1.8rem;
}


/*--------------------------------------
l-parts05
---------------------------------------*/
.l-parts05 {
margin: 0;
padding: 4rem 0;
}
.l-parts05 .l-common-title a {
display: block;
padding: 0 3rem 0 0;
background-size: 20px auto;
}
.l-parts05 .box {
display: block;
margin: 0 0 5rem 0;
}
.l-parts05 .box:last-child {
margin: 0;
}
.l-parts05 .box-fig {
width: 24rem;
margin: 0 auto 2rem auto;
}
.l-parts05 .box-txt {
width: 100%;
padding: 0;
}
.l-parts05 .box-txt .ttl {
margin: 0 0 1.5rem 0;
padding: 0 0 0 3.5rem;
font-size: 1.8rem;
}
.l-parts05 .box-txt .ttl::before {
top: 1.1rem;
}

}