@charset "UTF-8";
:root {
    --width-full: 1300px;
    --width-content: 77%;
    --txt-color-default: #333;
    --bg-color-default: #f7fafb;
    --link-color-default: #369;
    --btn-color-contact: #f39800;
    --btn-color-contact-shadow: #ffd389;
}
* {
    margin: 0;
    padding: 0;
    min-height: 0vw;
    min-height: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 4.2667vw;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    color: var(--txt-color-default);
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    background-color: var(--bg-color-default);
    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    body {
        font-size: calc(1em + 1vw - .8em);
    }
}
img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
a {
    display: inline-block;
    color: var(--link-color-default);
    transition: color .5s;
}
a img {
    display: inline-block;
    transition: opacity .5s;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1;
}
p {
    margin: 0;
    padding: 0;
}
main, section {
    display: block;
}
/* header
-------------------- */
header {
    display: flow-root;
    margin: 0 auto;
}
.logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 22%;
    margin: 1em;
}
nav {
    margin: 19% auto 5%;
    border-bottom: 4px solid #2688bb;
}
header menu {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4em .8em;
    width: 93.4%;
    margin-inline: auto;
}
header menu a {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5em 0;
    position: relative;
    height: 100%;
    padding: .35em .5em .5em;
    box-sizing: border-box;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.4;
    color: #2688bb;
    text-decoration: none;
    background-color: #eee;
    border: 4px solid #2688bb;
    border-radius: .5em .5em 0 0;
    opacity: .5;
}
header menu li:nth-child(n+3) a {
    border-bottom: none;
}
header menu a span {
    display: block;
}
header menu a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1.4em;
    height: 1.4em;
    margin: .3em;
    background: url(/business/total-service/imgs/icon_arrow01.png) no-repeat center top / contain;
}
header menu a::before {
    content: "";
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: grid;
    place-content: center;
    place-items: center;
    width: 100%;
    height: 2.6em;
}
.nav__sim-lineup a::before {
    background: url(/business/total-service/imgs/pct_lineup.png) no-repeat bottom center / auto 100%;
}
.nav__setprice a::before {
    background: url(/business/total-service/imgs/pct_setprice.png) no-repeat bottom center / auto 100%;
}
.nav__usecase a::before {
    background: url(/business/total-service/imgs/pct_usecase.png) no-repeat bottom center / auto 100%;
}
.nav__strengths a::before {
    background: url(/business/total-service/imgs/pct_strengths.png) no-repeat bottom center / auto 100%;
}
header menu .current a {
    color: #fff;
    background-color: #2688bb;
    box-shadow: 0 -.2em .8em rgb(19 22 117 /.4);
    opacity: 1;
}
@media screen and (min-width: 768px) {
    .logo {
        width: 9.6153846%;
    }
    nav {
        margin: 2.5% auto;
    }
    header menu {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.3em;
        width: 84.6%;
    }
    header menu a {
        grid-template-columns: 1fr 1.5em;
        gap: .5em;
        place-content: center;
        padding: .8em .6em .3em 1em;
        color: #363638;
        border-bottom: none;
    }
    header menu a::after {
        position: relative;
        margin: 0;
    }
    header menu a::before {
        height: 3.6em;
    }
}
/* footer
-------------------- */
footer {
    display: flow-root;
    border-top: 1px solid #1e69b1;
    background-color: #fff;
    text-align: center;
}
footer menu {
    list-style: none;
    margin: 1em auto;
}
@media screen and (min-width: 768px) {
    footer menu {
        display: flex;
        justify-content: center;
    }
}
footer menu a {
    display: block;
    padding: .5em 1em;
}
.copyright {
    margin: 1em auto;
    font-size: 1em;
    color: #1e69b1;
}
/* ボタンの指定 */
.page-top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 1em;
    bottom: 1em;
    width: 3em;
    height: 3em;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.page-top button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    appearance: none;
}
.page-top.is-active {
    opacity: 1;
    visibility: visible;
}
/* heading
-------------------- */
.p-heading01 {
    position: relative;
    margin: 1em auto 1.15em;
    padding-top: 3.1em;
    font-size: 1.7em;
    text-align: center;
    color: #1968b5;
    font-weight: bold;
}
.lineup .p-heading01 {
    background: url(/business/total-service/imgs/pct_lineup.png) no-repeat top center / auto 3em;
}
.setprice .p-heading01 {
    background: url(/business/total-service/imgs/pct_setprice.png) no-repeat top center / auto 3em;
}
.usecase .p-heading01 {
    background: url(/business/total-service/imgs/pct_usecase.png) no-repeat top center / auto 3em;
}
.strengths .p-heading01 {
    background: url(/business/total-service/imgs/pct_strengths.png) no-repeat top center / auto 3em;
}
@media screen and (min-width: 768px) {
    .p-heading01 {
        padding-top: 1.5em;
        font-size: 2.5em;
    }
    .lineup .p-heading01 {
        background: url(/business/total-service/imgs/pct_lineup.png) no-repeat top center / auto 1.3em;
    }
    .setprice .p-heading01 {
        background: url(/business/total-service/imgs/pct_setprice.png) no-repeat top center / auto 1.3em;
    }
    .usecase .p-heading01 {
        background: url(/business/total-service/imgs/pct_usecase.png) no-repeat top center / auto 1.3em;
    }
    .strengths .p-heading01 {
        background: url(/business/total-service/imgs/pct_strengths.png) no-repeat top center / auto 1.3em;
    }
}
.p-heading02 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.2;
}
.p-heading02--no {
    display: grid;
    gap: .5em;
}
.p-heading02--no span {
    width: 3em;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .p-heading02 {
        margin-bottom: 1.2em;
    }
    .p-heading02--no {
        grid-template-columns: 4em 1fr;
        align-items: end;
        gap: 0;
    }
    .p-heading02--no span {
        transform: translateY(.3em);
    }
}
/* bg
-------------------- */
.bg__gradient01 {
    display: flow-root;
    position: relative;
    padding-bottom: 4.5%;
}
.bg__gradient01::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -5em;
    left: 0;
    width: 100vw;
    height: 70%;
    margin: 0 calc(50% - 50vw);
    background: linear-gradient(to right, #c2ebef, #c1b3f0);
}
.suggestion .bg__gradient01::after {
    bottom: -2.5em;
}
/* selection
-------------------- */
.l-selection {
    position: relative;
    width: 96%;
    margin: 0 auto 7.5em;
    padding: 1em;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1em;
}
@media screen and (min-width: 768px) {
    .l-selection {
        position: relative;
        width: var(--width-content);
        padding: 2em 1em 2.6em;
    }
}
.p-selection_ttl {
    margin: 0 auto .6em;
    font-size: 1.2em;
    font-weight: normal;
    text-align: center;
    letter-spacing: .12em;
}
@media screen and (min-width: 768px) {
    .p-selection_ttl {
        font-size: 1.8em;
    }
}
.p-selection {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    background: #fff;
    border: none;
    border-top: 1px solid #4556a8;
    border-right: 1px solid #4556a8;
}
.p-selection th, .p-selection td {
    display: block;
    width: 100%;
    border: none;
    font-size: 1em;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
    border-bottom: 1px solid #4556a8;
    border-left: 1px solid #4556a8;
}
.p-selection th {
    padding: .5em;
    font-weight: normal;
    text-align: left;
    background-color: #f0f0ee;
}
.p-selection td {
    display: flow-root;
    padding: 0 .5em;
    background-color: #fff;
}
.p-selection ul {
    list-style: none;
    margin: .5em .3em;
}
@media screen and (min-width: 768px) {
    .p-selection {
        width: 86%;
        margin-inline: auto;
        border-spacing: 0;
        border-top: 1px solid #4556a8;
        border-right: 1px solid #4556a8;
    }
    .p-selection th, .p-selection td {
        display: table-cell;
    }
    .p-selection th:nth-child(1) {
        width: 8em;
    }
    .p-selection ul {
        display: flex;
        flex-wrap: wrap;
        gap: .5em 1em;
    }
    .p-selection li {
        width: 14em;
    }
}
.p-selection_btn {
    display: grid;
    margin: 1em auto;
}
@media screen and (min-width: 768px) {
    .p-selection ul {}
    .p-selection_btn {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
        width: 66%;
        margin: 2em auto 0;
    }
}
.simulation_item_list input[type="checkbox"], .p-selection input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    appearance: none;
}
.simulation_item_list label, .p-selection label {
    display: grid;
    grid-template-columns: 1em auto;
    gap: .5em;
    align-items: center;
    position: relative;
    padding: .5em;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .simulation_item_list label, .p-selection label {
        padding: 0em;
    }
}
.simulation_item_list label::before, .p-selection label::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #236db4;
}
.simulation_item_list label:has(input[type=checkbox]:checked)::before, .p-selection label:has(input[type=checkbox]:checked)::before {
    content: '';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='%23236db4' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 2px;
}
.simulation_item_list label:has(input[type="checkbox"]:focus), .p-selection label:has(input[type="checkbox"]:focus) {
    color: tomato;
}
.simulation_item_list label:has(input[type="checkbox"]:focus)::before, .p-selection label:has(input[type="checkbox"]:focus)::before {
    border-color: tomato;
}
.p-selection .p-selection--others label {
    justify-self: start;
}
.l-selection .error {
    width: fit-content;
    padding: .5em;
    margin: 1em auto 0;
    font-size: 1.25em;
    color: #ec003b;
}
.p-page-nav {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
    margin: 2em auto;
}
@media screen and (min-width: 768px) {
    .p-page-nav {
        grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
        gap: 1em;
        margin: 3em auto;
    }
}
.p-page-nav a {
    display: grid;
    grid-template-columns: 1fr 1em;
    gap: .2em;
    place-content: center;
    place-items: center;
    padding: .6em;
    box-sizing: border-box;
    height: 100%;
    font-size: 1em;
    text-decoration: none;
    color: #fff;
    background-color: #2788bb;
    border-radius: .5em;
}
@media screen and (min-width: 768px) {
    .p-page-nav a {
        padding: .8em .8em .7em;
        font-size: 1.25em;
        line-height: 1.2;
    }
}
.p-page-nav a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: .6em;
    height: .6em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
}
.p-page-nav a span {
    display: block;
    text-align: center;
}
/* Selection results
-------------------- */
.l-lines {
    width: 96%;
    margin: 1em auto;
}
.p-lines_wrap {
    margin: 1em auto;
    background-color: #f8f9fb;
    border: clamp(.188rem, .002rem + .93vw, .5rem) solid #2788bb;
}
.p-lines_body {
    margin: .8em;
}
.p-lines_ttl {
    padding: .5em;
    font-size: 1.3em;
    line-height: 1.2;
    color: #fff;
    background-color: #2788bb;
}
@media screen and (min-width: 768px) {
    .l-lines {
        width: var(--width-content);
    }
    .p-lines_wrap {
        margin: 3% auto;
    }
    .p-lines_body {
        margin: 2em;
    }
    .p-lines_ttl {
        padding: .35em .8em .6em;
        font-size: 2em;
    }
}
.l-lines summary {
    position: relative;
    display: grid;
    list-style: none;
    margin: 0 auto 1em;
    padding: .5em .5em .5em 2.8em;
    font-size: 1em;
    color: #1d6ca4;
    cursor: pointer;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
@media screen and (min-width: 768px) {
    .l-lines summary {
        font-size: 1.25em;
    }
}
.l-lines summary::-webkit-details-marker {
    display: none;
}
.l-lines summary::before {
    content: "";
    display: grid;
    place-content: center;
    place-items: center;
    position: absolute;
    top: 50%;
    left: .8em;
    width: 1em;
    height: 0;
    border: 1px solid currentColor;
    transform: rotate(0);
    transition: transform .2s;
}
.l-lines summary::after {
    content: "";
    display: grid;
    place-content: center;
    place-items: center;
    position: absolute;
    top: 50%;
    left: .8em;
    width: 1em;
    height: 0;
    border: 1px solid currentColor;
    transform: rotate(90deg);
    transition: transform .2s;
}
.l-lines details[open] summary::before {
    transform: rotate(180deg);
}
.l-lines details[open] summary::after {
    transform: rotate(180deg);
}
.l-lines details[open] {
    margin-bottom: 3em;
}
/* table */
.p-criterion {
    width: 100%;
    margin-inline: auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #4556a8;
    border-right: 1px solid #4556a8;
}
@media screen and (min-width: 768px) {
    .p-criterion {
        width: 90%;
    }
}
.p-criterion td:first-child {
    background: #fbf5f5;
}
.p-criterion thead {
    display: none;
}
@media screen and (min-width: 768px) {
    .p-criterion thead {
        display: table-header-group;
    }
}
.p-criterion tr {
    width: 100%;
}
.p-criterion th, .p-criterion td {
    padding: .5em;
    box-sizing: border-box;
    border-bottom: 1px solid #4556a8;
    border-left: 1px solid #4556a8;
}
.p-criterion th {
    background-color: #f0f0ee;
}
.p-criterion td {
    background-color: #fff;
    display: block;
    text-align: right;
    width: 100%;
}
.p-criterion td:first-child {
    background: #eee;
    font-weight: bold;
    text-align: center;
}
.p-criterion td:before {
    content: attr(data-label);
    float: left;
    margin-right: 1em;
}
.p-lines_caption {
    margin: .4em auto 1.5em;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2;
}
@media screen and (min-width: 768px) {
    .p-criterion td {
        display: table-cell;
        width: auto;
    }
    .p-criterion td:first-child {
        font-weight: normal;
        text-align: left;
    }
    .p-criterion td:before {
        display: none;
    }
    .p-lines_caption {
        font-size: 1.25em;
    }
}
.p-lines_item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0 1em;
    margin-bottom: 1.5em;
    padding: 1em;
    box-sizing: border-box;
    font-size: 1em;
    font-feature-settings: "palt";
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(157, 175, 184, 0.2);
}
.p-lines_item_title {
    margin-bottom: .2em;
    font-size: 1.25em;
    line-height: 1.2;
    color: #1269b0;
}
.p-lines_item_tag {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .4em;
    height: fit-content;
    margin: 1em 0 0;
    box-sizing: border-box;
}
.p-lines_item_tag li {
    margin: 0;
    padding: .25em .6em .4em;
    box-sizing: border-box;
    font-size: .9em;
    line-height: 1;
    border: 1px solid #999;
    border-radius: .2em;
}
.p-lines_item_txt {
    line-height: 1.4;
}
@media screen and (min-width: 768px) {
    .p-lines_item {
        padding: 1.4em 1em;
        font-size: 1.25em;
    }
    .p-lines_item_title {
        font-size: 1.5em;
    }
    .p-lines_item_tag {
        gap: .8em;
    }
    .p-lines_item {
        grid-template-columns: auto 13.7em;
        grid-template-rows: max-content 1fr;
    }
    .p-lines_item_title {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .p-lines_item_txt {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .p-lines_item_tag {
        list-style: none;
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        margin: .5em 0;
        padding-left: 1.2em;
    }
    .p-lines_item::before {
        content: "";
        position: absolute;
        top: 1.5em;
        right: 14.65em;
        width: 0;
        height: calc(100% - 3em);
        border-left: 2px dashed #c1d3e9;
    }
}
/* notes
-------------------- */
.notes {
    list-style: none;
    margin: 1em auto;
    font-size: .875em;
}
.notes li {
    display: grid;
    grid-template-columns: 1em 1fr;
}
/* btn
-------------------- */
.btn a {
    display: grid;
    grid-template-columns: 1em 1fr 1em;
    gap: .5em;
    place-items: center;
    width: fit-content;
    margin: 1em auto;
    padding: .25em 1em;
    box-sizing: border-box;
    font-size: 1.25em;
    color: #fff;
    text-decoration: none;
    background-color: #00c0f7;
    border-radius: 3em;
    box-shadow: 0 .4em 0 #369;
}
.btn a::before, .btn a::after {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
}
.btn a::after {
    background: url(/business/total-service/imgs/icon_arrow02.png) no-repeat center top / contain;
}
.btn-contact {
    display: flow-root;
    background-color: #fff;
}
.btn-contact a {
    width: 90%;
    padding: .7em 1em;
    font-size: 1.25em;
    font-weight: bold;
    background-color: var(--btn-color-contact);
    box-shadow: 0 .35em 0 var(--btn-color-contact-shadow);
}
@media screen and (min-width: 768px) {
    .btn a::before, .btn a::after {
        width: .65em;
        height: .65em;
    }
    .btn-contact a {
        width: 42.6153846%;
        padding: .3em .65em .25em;
        font-size: 2.375em;
        box-shadow: 0 .22em 0 var(--btn-color-contact-shadow);
    }
}
.head_wrap {
    position: relative;
}
.header .btn-contact {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
}
.header .btn-contact a {
    width: 84%;
    margin-bottom: -6%;
    padding: .8em .9em .9em;
    font-size: 1em;
}
.header .btn-contact a::before, .header .btn-contact a::after {
    width: 1.25em;
    height: 1.25em;
}
@media screen and (min-width: 768px) {
    .header .btn-contact a {
        width: 32%;
        margin-bottom: .2em;
        padding: .4em .9em .45em;
        font-size: 1.25em;
        box-shadow: 0 .38em 0 var(--btn-color-contact-shadow);
    }
}
.btn-quotation a {
    gap: .7em;
    width: 90%;
    margin: 1.5em auto;
    padding: .5em .8em;
    font-size: 1.25em;
    font-weight: bold;
    background-color: var(--btn-color-contact);
    box-shadow: 0 .25em 0 var(--btn-color-contact-shadow);
}
@media screen and (min-width: 768px) {
    .btn-quotation a {
        gap: .2em;
        width: 44%;
        padding: .25em .8em;
        font-size: 2.375em;
    }
}
/* sim-lineup
--------------------*/
/* Suggestion */
.suggestion {
    display: flow-root;
    margin: 4em auto 0;
}
.suggestion__ttl {
    display: grid;
    grid-template-columns: 1em 1fr 1em;
    place-items: center;
    position: relative;
    width: 90%;
    margin: 1em auto;
    font-size: 1.25em;
    color: #1e69b1;
}
@media screen and (min-width: 768px) {
    .suggestion__ttl {
        width: fit-content;
        margin: 2em auto 1.8em;
        font-size: 1.5em;
    }
}
.suggestion__ttl::before, .suggestion__ttl::after {
    content: "";
    width: 1em;
    height: 0;
    border-top: .1em solid currentColor;
}
.suggestion__ttl::before {
    transform: rotate(60deg);
}
.suggestion__ttl::after {
    transform: rotate(-60deg);
}
.suggestion__img {
    width: 90%;
    margin: 1em auto 0;
}
.suggestion__img img {
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .suggestion__img {
        width: 49.1538461%;
        margin: 1em auto .2em;
    }
}
.link__detail {
    width: fit-content;
    margin: 0 auto;
    font-size: 1.3em;
}
.link__detail a {
    position: relative;
    display: block;
    padding: 1em;
    box-sizing: border-box;
    font-weight: bold;
    letter-spacing: .05em;
    color: #363638;
    text-decoration: none;
}
.link__detail a::before, .link__detail a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-block;
    width: .5em;
    height: .5em;
    margin: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
}
.link__detail a::after {
    right: .4em;
}
/* setprice
-------------------- */
/* simulation */
.simulation {
    width: 96%;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .simulation {
        width: 76.9230769%;
    }
}
.simulation_chack {
    display: grid;
    gap: 1em;
    padding: 1em;
    box-sizing: border-box;
    background: #fff url(/business/total-service/imgs/setprice/simulation.jpg) no-repeat top 6.7% right 10% / 34% auto;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .simulation_chack {
        padding: 1.1em 1.9em 3.5em;
    }
}
.form_item {
    margin-bottom: 1.1em;
}
.simulation_label {
    display: block;
    margin-bottom: .05em;
    font-size: 1em;
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    .simulation_label {
        font-size: 1.25em;
    }
}
.simulation input[type="number"], .simulation select {
    padding: .45em;
    box-sizing: border-box;
    font-size: 1em;
    border: 1px solid #4457a5;
}
@media screen and (min-width: 768px) {
    .simulation input[type="number"], .simulation select {
        font-size: 1.25em;
    }
}
.simulation select {
    width: 100%;
}
.simulation input[type="number"]::placeholder {
    color: #ccc;
}
.simulation_item_list {
    list-style: none;
    display: grid;
    gap: .8em 2em;
    place-content: center;
    margin: .4em auto;
    font-size: 1em;
    line-height: 1.2;
}
@media screen and (min-width: 768px) {
    .simulation_item_list {
        grid-template-columns: auto 1fr;
        font-size: 1.125em;
    }
}
.form_item--service .simulation_item_list {
    display: flex;
    gap: 1em 3em;
}
.submitButton {
    width: 100%;
    margin: .4em auto;
    padding: .5em;
    font-size: 1.25em;
    color: #fff;
    background-color: #2688bb;
    border: none;
    border-radius: 3em;
    cursor: pointer;
}
.simulation .submitButton {
    width: 56%;
}
@media screen and (min-width: 768px) {
    .submitButton {
        padding: .25em 3em .4em;
        font-size: 2.375em;
    }
}
.l-selection .submitButton, .submitButton--reset {
    width: 100%;
    margin: .5em auto;
    padding: .6em;
    font-size: 1.2em;
    border: none;
    border-radius: 3em;
    cursor: pointer;
}
.l-selection .submitButton {}
.l-selection .submitButton {}
.submitButton--reset {
    color: #fff;
    background-color: #999;
}
@media screen and (min-width: 768px) {
    .submitButton--reset, .l-selection .submitButton {
        margin: 0;
    }
    .submitButton--reset {
        padding: .5em 1em;
    }
}
.form_item.form_option {
    margin-top: 1.6em;
}
@media screen and (min-width: 768px) {
    .form_item:nth-child(-n+4) {
        width: 56%;
    }
}
/* results */
.results {
    position: relative;
    margin: 7.5em auto;
    padding: 2.7em 3em;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .results {
        margin: 5.2em auto 8.6em;
    }
}
.results::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    background: #f39800;
    height: calc(tan(60deg) * 1.3em / 2);
    width: 3.4em;
    margin-bottom: -3em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
    .results::after {
        height: calc(tan(60deg) * 3.3em / 2);
        width: 8.4em;
        margin-bottom: -5.7em;
    }
}
.results::before {
    content: "";
    position: absolute;
    top: -2.7em;
    left: 0;
    width: 100%;
    border-top: 2px dashed #2688bb;
}
.results_ttl {
    font-size: 1.25em;
}
.results_list {
    list-style: none;
    margin: 1em auto;
    padding: 0 0 1em;
    font-size: 1.25em;
    border-bottom: 1px solid #999;
}
dl.results_list {
    display: grid;
}
dl.results_list div {
    display: grid;
    grid-template-columns: 11em 1fr;
}
dl.results_list dt {
    display: grid;
    grid-template-columns: 1fr 1em;
    justify-content: space-between;
    text-align: right;
}
.results_option {
    list-style: none;
    margin: 0;
    padding: 0;
}
.results_total {
    width: fit-content;
    margin: 0 auto;
    font-size: 3.25em;
    font-weight: bold;
    color: #2688bb;
}
.tax {
    font-size: .6em;
}
.set_wrap {
    width: 90%;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .set_wrap {
        width: 84.6153846%;
    }
}
.set_txt {
    margin: 1em 1em 2em;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .set_txt {
        margin: 2.5em 1.2em 5.4em;
        font-size: 1.5em;
    }
}
/* support-menu */
.support-menu {}
.support-menu_wrap {
    width: 96%;
    margin: 2em auto;
    padding-bottom: 1.5em;
    border: max(2px, .6154vw) solid #2688bb;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .support-menu_wrap {
        width: 76.92%;
        margin: 4.4em auto 3em;
        padding-bottom: 3.5em;
    }
}
.support-menu_ttl {
    margin: 0 0 1.15em;
    padding: .3em .7em .6em;
    box-sizing: border-box;
    font-size: 1.25em;
    color: #fff;
    background-color: #2688bb;
}
@media screen and (min-width: 768px) {
    .support-menu_ttl {
        font-size: 2.375em;
    }
}
.support-menu_wrap section {
    margin: 0 1em 1em 1.8em;
    font-size: 1em;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .support-menu_wrap section {
        margin: 0 1.5em 1.7em 2.7em;
        font-size: 1.25em;
    }
}
.support-menu_wrap .ttl {
    position: relative;
    display: grid;
    grid-template-columns: 1em 1fr;
    margin: 0 0 .2em -1em;
    font-weight: normal;
}
.support-menu_wrap .ttl::before {
    content: "";
    width: .75em;
    height: .75em;
    margin-top: .1em;
    background-color: #333;
}
/* summary */
.summary {
    width: 80%;
    margin: 0 auto 1em;
    font-size: 1em;
}
@media screen and (min-width: 768px) {
    .summary {
        margin: 0 auto 2.7em;
        font-size: 1.25em;
    }
}
.support-menu_wrap + .summary {
    width: 100%;
    padding: 0 1em;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .support-menu_wrap + .summary {
        width: 76.92%;
    }
}
/* plan */
.plan {}
.plan_ttl {
    margin: 0 0 .6em;
    padding-bottom: .3em;
    font-size: 1.25em;
    line-height: 1.4;
    color: #1e69b1;
    border-bottom: 1px solid #666;
}
.plan_ttl span {
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .plan_ttl {
        font-size: 2.6em;
    }
}
.plan_txt {
    margin: 0 0 1em;
    font-size: 1em;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .plan_txt {
        margin: 0 1.5em 1em;
        font-size: 1.25em;
    }
}
.plan_item {
    display: grid;
    gap: 2em 5em;
    width: 100%;
    margin: 0 auto 1em;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .plan_item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: max-content 1fr;
        width: 94.5454545%;
        margin: 0 auto 3.2em;
        padding: 2.5em 1.3em;
    }
    .plan_item > section:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .plan_item > section:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .plan_item > section:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
}
.terminal_ttl {
    display: inline-block;
    margin: 0 0 .5em;
    padding: .35em .7em;
    box-sizing: border-box;
    font-size: 1.125em;
    color: #fff;
    background-color: #2688bb;
}
@media screen and (min-width: 768px) {
    .terminal_ttl {
        margin: 0 0 .7em;
        font-size: 1.5em;
    }
}
.plan_item_terminal section:nth-child(1) .terminal_ttl {
    padding: .35em 1.5em;
}
@media screen and (min-width: 768px) {
    .plan_item_terminal section:nth-child(1) .terminal_ttl {
        margin-left: 5.5%;
    }
}
.plan_item_terminal section:nth-child(1) img {
    width: 89.6%;
    margin: 10% 0 0 5.5%;
}
.plan_item_terminal section:nth-child(n+2) img {
    width: 94%;
}
.reference {
    display: grid;
    gap: 1em 2em;
    margin-top: 1.8em;
    padding: 1em;
    background: #f8f9fb;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .reference {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 1.6em;
    }
}
.plan_item--package .reference {
    display: block;
    margin-top: 0;
}
.reference_ttl {
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 1em;
    align-items: center;
    margin-bottom: .8em;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .reference_ttl {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        gap: 1.5em;
        font-size: 1.25em;
    }
}
.reference_ttl > span:first-child {
    display: grid;
    place-content: center;
    width: 3.4em;
    height: 3.4em;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background: #2688bb;
    border-radius: 50%;
}
.reference_ttl span {
    display: block;
}
.regular {
    margin-bottom: 1.5em;
    font-size: 1em;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .regular {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        margin-bottom: 0;
        font-size: 1.25em;
    }
}
.package {
    position: relative;
    margin-bottom: 1.5em;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .package {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin-bottom: 0;
        font-size: 1.25em;
    }
}
.package::before, .package::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background: #f39800;
    height: calc(tan(60deg) * 1em / 2);
    width: 2em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translate(-50%, 0);
    margin-top: -1.6em;
}
.package::after {
    top: auto;
    bottom: 0;
    margin-bottom: -1.6em;
}
@media screen and (min-width: 768px) {
    .package::before, .package::after {
        top: 50%;
        left: 0;
        height: calc(tan(60deg) * 3em / 2);
        width: 1em;
        margin: 0;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: translate(0, -50%);
        margin-left: -1.5em;
    }
    .package::after {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        margin-right: -1.5em;
    }
}
.regular p:first-child, .package p:first-child {
    margin: 0 .6em .3em;
    color: #fff;
    background-color: #ababab;
}
.package p:first-child {
    background-color: #2688bb;
}
.regular p:first-child strong, .package p:first-child strong {
    font-weight: normal;
}
.regular p:last-child strong, .package p:last-child strong {
    font-size: 1.4em;
    line-height: 1;
}
.package span {
    color: #eb6100;
}
.annual {
    display: grid;
    place-content: center;
    place-items: center;
    margin: 0 .6em .3em;
    font-size: 1.25em;
    color: #fff;
    background-color: #2688bb;
}
@media screen and (min-width: 768px) {
    .annual {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
}
.annual strong {
    color: #fff100;
    font-weight: bold;
}
.annual span {
    font-size: 1.5em;
}
/* mdm */
.mdm {
    width: 96%;
    margin: 2em auto;
}
@media screen and (min-width: 768px) {
    .mdm {
        width: 80%;
        margin: 7.2em auto;
    }
}
.mdm_ttl {
    margin: 0 auto .5em;
    padding: 0 .5em;
    font-size: 1.5em;
    line-height: 1.4;
}
@media screen and (min-width: 768px) {
    .mdm_ttl {
        margin: 0 auto 1em;
        padding: 0;
    }
}
.mdm_wrap {
    display: grid;
    gap: 1.4em;
    padding: 1em;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .mdm_wrap {
        grid-template-columns: 66.3% 1fr;
        padding: 2.4em 2em;
    }
    .mdm_wrap_img {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .mdm_wrap_list {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .mdm_wrap_item {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
}
.mdm_wrap_list dt {
    padding: .25em .3em .2em;
    box-sizing: border-box;
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    .mdm_wrap_list dt {
        line-height: 1;
    }
}
.mdm_wrap_list ul {
    margin: .2em 0 1.4em 2em;
    line-height: 1.3;
}
.mdm_label01 {
    background-color: #86d6e8;
}
.mdm_label02 {
    background-color: #86d6e8;
}
.mdm_label03 {
    background-color: #77dfc8;
}
.mdm_label04 {
    background-color: #b0e0b7;
}
.mdm_wrap_item_ttl {
    padding: .3em;
    box-sizing: border-box;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    background-color: #2688bb;
}
.mdm_wrap_item ul {
    list-style: none;
    display: grid;
    gap: 1em;
    margin: 1em auto;
}
@media screen and (min-width: 768px) {
    .mdm_wrap_item ul {
        grid-template-columns: repeat(3, 1fr);
    }
}
.mdm_wrap_item li {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 1em;
    padding: 1em;
    box-sizing: border-box;
    background-color: #f8f9fb;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .mdm_wrap_item li {
        grid-template-columns: 35% 1fr;
        gap: 1em 0;
        padding: 1em 1em 1em 0;
    }
    .mdm_wrap_item li:nth-child(3) {
        grid-template-columns: 28% 1fr;
        gap: 1em;
        padding: 1em;
    }
}
.mdm_wrap_item p:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 1.1em;
}
.mdm_wrap_item p:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 1em;
}
.mdm_wrap_item p:nth-child(2) span {
    display: inline-block;
}
.mdm_wrap_item div:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
/* example */
.example {
    margin: 5em auto;
}
@media screen and (min-width: 768px) {
    .example {
        margin: 3em auto;
    }
}
.example_ttl {
    position: relative;
    width: fit-content;
    margin: 0 auto 2.5em;
    font-size: 1.625em;
    color: #fff;
}
.example_ttl::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    background: #f39800;
    height: calc(tan(60deg) * 3.4em / 2);
    width: 8.4em;
    margin-top: -.5em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}
.example ul {
    list-style: none;
    display: grid;
    gap: 1em;
}
@media screen and (min-width: 768px) {
    .example ul {
        grid-template-columns: repeat(3, 1fr);
    }
}
.example li {
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    gap: .5em;
    height: 100%;
    padding: 2em;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .example li {
        padding: 2em 1em;
    }
}
.example p {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.2;
}
@media screen and (min-width: 768px) {
    .example p {
        font-size: 1.25em;
        text-align: center;
    }
}
.example strong {
    color: #2064af;
}
.example p:last-child {
    margin: auto 0 0;
    padding-top: .5em;
    font-size: 1em;
    line-height: 1.4;
}
.example p:last-child span {
    display: inline-block;
}
.plan_item--package {
    display: grid;
    width: 100%;
    margin: 0 auto 3.2em;
    padding: .5em;
    box-sizing: border-box;
    background: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .plan_item--package {
        width: 94.5454545%;
        padding: 1.3em;
    }
}
.package_wrap {
    width: 100%;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .package_wrap {
        width: 71%;
    }
}
.package_label {
    width: fit-content;
    margin: 0 auto .8em;
    padding: .3em 1em;
    box-sizing: border-box;
    font-size: 1.25em;
    text-align: center;
    color: #fff;
    background-color: #ababab;
}
@media screen and (min-width: 768px) {
    .package_label {
        width: 40%;
    }
}
.price_regular .package_label {}
.price_package .package_label {
    background-color: #2688bb;
}
.package_table {
    width: 100%;
    margin: .3em auto .5em;
    font-size: .85em;
    box-sizing: border-box;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    border: .5em solid #fff;
}
.package_table span {
    display: block;
}
@media screen and (min-width: 768px) {
    .package_table {
        font-size: 1.25em;
    }
}
.package_table th {
    padding: .1em;
    box-sizing: border-box;
    font-weight: normal;
    text-align: left;
    border-bottom: 1px solid #666;
}
.package_table th:nth-child(n+2), .package_table td:nth-child(n+2) {
    text-align: right;
}
.package_table td {
    padding: .12em;
    box-sizing: border-box;
    border-bottom: 1px solid #666;
}
.package_table th:last-child, .package_table td:last-child {
    text-align: right;
}
.package_table tfoot td {
    border-bottom: none;
}
.package_table tfoot td:last-child {
    font-size: 1.5em;
}
.price_package {
    display: grid;
}
.price_package .price_reduction {
    order: 1;
    position: relative;
    width: fit-content;
    margin: .4em auto 1.3em;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.2;
    color: #fff;
}
.price_package .price_reduction::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background: #f39800;
    height: calc(tan(60deg) * 4.3em / 2);
    width: 10em;
    margin-top: -.3em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}
.price_package .price_reduction span {
    position: relative;
    z-index: 1;
    display: block;
}
.price_package .package_label {
    order: 2;
}
.price_package .package_txt {
    order: 3;
    font-size: 1.25em;
    line-height: 1.4;
    text-align: center;
}
.price_package .package_txt span {
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .price_package .package_txt {
        font-size: 2em;
    }
}
.package_txt strong {
    display: block;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.1;
    color: #eb6100;
}
@media screen and (min-width: 768px) {
    .package_txt strong {
        font-size: 1.4em;
    }
}
/* usecase
-------------------- */
.usecase_wrap {
    width: 96%;
    margin: 1em auto 2em;
    border: max(2px, .6154vw) solid #4457a5;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .usecase_wrap {
        width: 76.92%;
        margin: 4.4em auto 3em;
    }
}
.usecase_ttl {
    padding: .5em;
    box-sizing: border-box;
    font-size: 1.4em;
    line-height: 1.2;
    color: #fff;
    background-color: #4457a5;
}
@media screen and (min-width: 768px) {
    .usecase_ttl {
        padding: .3em .7em .35em;
        font-size: 2.375em;
    }
}
.usecase_item {
    padding: 1em;
    box-sizing: border-box;
}
.usecase01 .usecase_item {
    padding: 1em;
}
.usecase_item--column {
    display: grid;
    gap: 2em;
    padding: 1em;
}
.usecase_item figure {
    margin: 0;
    padding: 0;
}
.usecase_item figcaption {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .usecase_item {
        padding: 2em;
    }
    .usecase_item--column {
        display: grid;
        grid-template-columns: repeat(2, 47.5%);
        justify-content: space-between;
        padding: 2em;
    }
    .usecase_item figcaption {
        font-size: 1.125em;
    }
}
/* strengths
-------------------- */
.strengths {
    margin: 0 auto;
}
.strengths_wrap {
    width: 90%;
    margin: 0 auto;
}
.strengths_wrap .p-heading02 {
    margin-bottom: .8em;
}
.strengths_wrap + .strengths_wrap {
    margin-top: 2em;
}
@media screen and (min-width: 768px) {
    .strengths_wrap {
        width: 80%;
    }
    .strengths_wrap + .strengths_wrap {
        margin-top: 3em;
    }
}
.strengths_intro {
    width: 100%;
    margin: 1em auto 2em;
}
.strengths_intro_txt {
    display: grid;
    gap: .6em;
    place-items: center;
    width: fit-content;
    margin: 1em auto .9em;
    font-size: 1.6em;
    line-height: 1.2;
    color: #1e69b1;
}
@media screen and (min-width: 768px) {
    .strengths_intro_txt {
        font-size: 2.5em;
    }
}
.strengths_intro_txt::after {
    content: "";
    background: #f39800;
    height: calc(tan(60deg) * 1.3em / 2);
    width: 3.4em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.strengths_suggestion {
    display: grid;
    gap: 2em 1em;
    padding: .5em;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 1em;
}
@media screen and (min-width: 768px) {
    .strengths_suggestion {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.9em 2em;
    }
}
/* strengths02 */
.strengths02_list {
    list-style: none;
    display: grid;
    gap: 3em;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
    border-radius: 1.25em;
}
.strengths02_list li {
    position: relative;
}
.strengths02_list li:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    display: inline-block;
    width: 12.6666%;
    height: 0;
    margin-bottom: -2.5em;
    padding-top: 11.866666%;
    background: url(/business/total-service/imgs/strengths/strengths_img05_arrow_sp.png) no-repeat center center / contain;
    transform: translateX(-50%);
}
.strengths02_list p {
    position: absolute;
    top: 0;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.3;
}
.strengths02_list p span {
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .strengths02_list {
        grid-template-columns: 25.1% auto 25.1%;
        gap: 0;
        align-items: end;
        padding: 2.8846153%;
    }
    .strengths02_list li {
        position: relative;
        padding-top: .9em;
    }
    .strengths02_list li:not(:last-child)::before {
        display: none;
    }
    .strengths02_list li:nth-child(1)::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        display: inline-block;
        width: 31.707317%;
        height: 0;
        margin: 49% -22% 0 0;
        padding-top: 15.4471544%;
        background: url(/business/total-service/imgs/strengths/strengths_img05_arrow.png) no-repeat center center / contain;
    }
    .strengths02_list p {
        font-size: 1.025em;
        line-height: 1.6;
    }
    .strengths02_list li:nth-child(2) p {
        margin: 1em 0 0 6em;
    }
    .strengths02_list li:nth-child(3) p {
        width: 100%;
        margin: 1em auto;
        text-align: center;
    }
}
/* .strengths03_list */
.strengths03_list {
    list-style: none;
    display: grid;
    margin: 0;
    padding: 1em;
    background: #fff;
}
.strengths03_list p {
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    .strengths03_list {
        grid-template-columns: 56.8% 32%;
        justify-content: center;
        gap: 0 3em;
        padding: 2.8846153%;
    }
    .strengths03_list li {
        position: relative;
    }
    .strengths03_list li:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .strengths03_list li:nth-child(n+2) img {
        display: block;
        width: 65%;
        margin: 0 auto;
    }
    .strengths03_list p:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
    }
}
.suggestion_item {
    display: grid;
    grid-template-rows: max-content max-content 1fr;
    padding: 1em;
    box-sizing: border-box;
    border-radius: 1em;
    background-color: #f7fafb;
}
@media screen and (min-width: 768px) {
    .suggestion_item {
        padding: 1.5em;
    }
}
.suggestion_ttl {
    order: 2;
    font-size: 1em;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .suggestion_ttl {
        font-size: 1.125em;
    }
}
.suggestion_img {
    order: 1;
    margin-bottom: .8em;
}
.suggestion_txt {
    order: 3;
    font-size: 1.125em;
    line-height: 1.5;
}
.flow {
    display: flow-root;
    margin: 0 auto;
}
.flow_ttl {
    width: fit-content;
    margin: 1em auto;
    font-size: 1.5em;
    font-weight: bold;
}
.flow_wrap {
    width: 100%;
    padding: 2.4em 0;
    background: linear-gradient(to right, #c2ebef, #c1b3f0);
}
.flow_list {
    list-style: none;
    display: grid;
    gap: 1.1em;
    width: 92.31%;
    margin: 0 auto;
    padding: 0;
}
@media screen and (min-width: 820px) {
    .flow_list {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media screen and (min-width: 1100px) {
    .flow_list {
        width: 92.31%;
    }
}
.flow_list li {
    position: relative;
    padding: .7em;
    box-sizing: border-box;
    background: #fff;
    border-radius: .5em;
}
.flow_list li:not(:last-child):after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 50%;
    width: 2em;
    height: 2em;
    background: url(/business/total-service/imgs/strengths/icon_arrow03.png) no-repeat center center / contain;
    transform: translate(50%, 1.5em) rotate(90deg);
}
@media screen and (min-width: 820px) {
    .flow_list li:not(:last-child):after {
        bottom: auto;
        top: 50%;
        right: 0;
        width: 2em;
        height: 2em;
        background: url(/business/total-service/imgs/strengths/icon_arrow03.png) no-repeat center center / contain;
        transform: translate(76%, -50%) rotate(0deg);
    }
}
.flow_list_ttl img {
    display: block;
    width: 4.5em;
}
.flow_list_ttl > span {
    display: grid;
    align-items: center;
    min-height: 2.4em;
    margin: .4em 0;
    padding-left: 3.5em;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 1.2;
    word-break: keep-all
}
li:nth-child(1) .flow_list_ttl > span {
    padding-left: 2em;
    background: url(/business/total-service/imgs/strengths/step01_icon.png) no-repeat left center / auto 1.7em;
}
li:nth-child(2) .flow_list_ttl > span {
    padding-left: 2.5em;
    background: url(/business/total-service/imgs/strengths/step02_icon.png) no-repeat left center / auto 1.8em;
}
li:nth-child(3) .flow_list_ttl > span {
    padding-left: 2.5em;
    background: url(/business/total-service/imgs/strengths/step03_icon.png) no-repeat left center / auto 1.9em;
}
li:nth-child(4) .flow_list_ttl > span {
    background: url(/business/total-service/imgs/strengths/step04_icon.png) no-repeat left .2em center / auto 2em;
}
li:nth-child(5) .flow_list_ttl > span {
    background: url(/business/total-service/imgs/strengths/step05_icon.png) no-repeat left .2em center / auto 2em;
}
li:nth-child(6) .flow_list_ttl > span {
    background: url(/business/total-service/imgs/strengths/step06_icon.png) no-repeat left .6em center / auto 1.8em;
}
.flow_list_ttl span span {
    display: inline-block;
}
.flow_list li p:last-child {
    padding: 0 .5em;
    font-size: .875em;
    line-height: 1.571428571;
}
.support {
    display: flow-root;
    width: 96%;
    margin: 3em auto 4.3em;
    background-color: #fff;
    border-radius: 1.25em;
}
@media screen and (min-width: 768px) {
    .support {
        width: 84.62%;
    }
}
.support_ttl {
    width: fit-content;
    margin: 1.7em auto;
    font-size: 1.125em;
    font-weight: bold;
}
.support_list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
    width: 92.73%;
    margin: 0 auto 3.7em;
    padding: 0;
}
@media screen and (min-width: 768px) {
    .support_list {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5em;
    }
}
@media (any-hover: hover) {
    .btn-contact a {
        transition: box-shadow .2s, transform .2s;
    }
    .btn-contact a:hover {
        box-shadow: none;
        transform: translateY(.3em);
    }
    header menu a {
        transition: .2s;
    }
    header menu a:hover {
        opacity: .8;
    }
    .p-page-nav a {
        transition: .2s;
    }
    .p-page-nav a:hover {
        opacity: .8;
    }
    .link__detail a {
        transition: .2s;
    }
    .link__detail a:hover {
        color: var(--link-color-default);
    }
    .l-lines summary:hover {
        color: green;
    }
    .submitButton:hover {
        background-color: #06608f;
    }
    .submitButton--reset:hover {
        background-color: #666;
    }
    footer menu a {
        transition: .2s;
    }
    footer menu a:hover {
        color: #363638;
        text-decoration: none;
    }
}