@charset "utf-8";

/*===================================================

 page 共通 common

===================================================*/
/*===================================================
 main
===================================================*/
#main {
    padding: 170px 0 0;
    background: var(--main);
}
/*===================================================
 breadcrumbs
===================================================*/
#breadcrumbs {
    width: 100%;
    padding: 10px 0;
    background: var(--sub);
}
#breadcrumbs ul {
    display: flex;
}
#breadcrumbs li {
    margin-right: 25px;
    font-size: 1.5rem;
}
#breadcrumbs li:last-child {
    margin-right: 0;
}
#breadcrumbs li a,
#breadcrumbs li span {
    position: relative;
}
#breadcrumbs li a::after,
#breadcrumbs li span::after {
    width: 6px;
    height: 6px;
    margin: auto;
    border-top: 2px solid var(--black);
    border-right: 2px solid var(--black);
    border-radius: 2px;
    box-sizing: content-box;
    transform: rotate(45deg);
    transition: 0.6s cubic-bezier;
    content: '';
    position: absolute;
    top: 2px;
    bottom: 0;
    right: -15px;
}
/*===================================================
 title
===================================================*/
.title {
    margin-bottom: 50px;
}
.title h1 {
    margin: 0;
    font-size: 3.0rem;
    font-weight: 600;
}
/*===================================================
 mcontents
===================================================*/
#main .mcontents {
    padding: 40px 0 80px;
    background: var(--white);
}
#main .mcontents p.sample {
    text-align: center;
}
/*===================================================
 h1,h2,h3
===================================================*/
h1.border {
    padding-bottom: 10px;
}
h2,h3 {
    font-weight: 500;
}
h2.border {
    text-indent: 0.25em;
}
/*===================================================
 color
===================================================*/
.red {
    color: var(--red);
}
/*===================================================
 border
===================================================*/
.border {
    margin: 0 0 20px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gray);
    border-image: linear-gradient(90deg, rgba(252, 175, 0, 1) 40%, rgba(204, 204, 204, 1) 40%);
    border-image-slice: 1;
}
/*===================================================
 circle
===================================================*/
.circle::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
.circle2::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--base);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
/*===================================================
 nav-below
===================================================*/
.mcontents .nav-below {
    width: 100%;
    margin: 80px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.mcontents .nav-below li {
    width: 360px;
}
.mcontents .nav-below li a {
    padding: 10px 20px;
    display: block;
    position: relative;
}
.mcontents .nav-below li a:hover {
    background: var(--sub);
    text-decoration: none;
}
.mcontents .nav-below li a p:first-child {
    margin: 5px 0 10px !important;
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 500;
}
.mcontents .nav-below li a p:last-child {
    margin: 0 !important;
    line-height: 2.8rem !important;
}
.mcontents .nav-below li a:hover p:last-child {
    text-decoration: underline;
}
.mcontents .nav-below li.next a p {
    text-align: right;
}
/*===================================================
 link-area
===================================================*/
.mcontents .link-area {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.mcontents .link-area li + li {
    margin-left: 40px;
}
.mcontents .link-area.vertical {
    width: 240px;
}
.mcontents .link-area.vertical li + li {
    margin: 40px 0 0 0;
}
/*===================================================
 table
===================================================*/
table {
    width: 100%;
    border: 1px solid var(--gray);
}
table.color-table  {
    border: none;
}
table tr th,
table tr td {
    padding: 10px;
    border: 1px solid var(--gray);
}
table.color-table tr th,
table.color-table tr td {
    padding: 15px;
    border: none;
}
table tr th {
    background: var(--light-gray);
    text-align: left;
}
table.color-table tr th {
    border-right: 4px solid var(--white);
    border-bottom: 4px solid var(--white);
    background: var(--main);
    text-align: center;
}
table.color-table tr td {
    border-bottom: 4px solid var(--white);
    background: var(--light-gray);
}
table.color-table tr td p {
    margin: 0;
}
/*===================================================
 nav
===================================================*/
.type-nav {
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
}
.type-nav li {
    height: 40px;
    margin-right: 20px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    display: inline-block;
}
.type-nav li:last-child {
    margin-right: 0;
}
.type-nav li a {
    width: 100%;
    padding: 10px 20px;
    display: block;
    color: var(--accent);
    font-weight: 500;
    text-align: center;
    line-height: 1.6rem;
}
.type-nav li:hover,
.type-nav li.select,
.type-nav li:hover a {
    background: var(--accent);
    color: var(--white);
}
.type-nav li:hover a {
    text-decoration: none;
}
/*===================================================
 contact-form
===================================================*/
#contact-form {
    margin-bottom: 50px;
    border: none;
}
#contact-form tr th,
#contact-form tr td {
    padding: 20px 0;
    border: none;
}
#contact-form tr th {
    width: 260px;
    background: none;
    font-size: 2.0rem;
    font-weight: 500;
    text-align: left;
}
#contact-form tr th span {
    margin-left: -10px;
    display: block;
    font-size: 1.5rem;
}
#contact-form tr th span.required {
    width: 57px;
    height: 24px;
    margin-left: 0;
    border: 1px solid var(--accent);
    border-radius: 12px;
    color: var(--accent);
    text-align: center;
}
#contact-form tr td input[type='text'],
#contact-form tr td input[type='email'],
#contact-form tr td select {
    width: 540px;
    height: 60px;
    padding: 0 10px;
    background: var(--light-gray);
    border: 1px solid var(--gray);
    border-radius: 6px;
}
#contact-form tr td select {
    appearance: none;
}
#contact-form tr td select::-ms-expand {
    display: none;
}
#contact-form tr td:has(select)  {
    position: relative;
}
#contact-form tr td:has(select)::after {
    width: 8px;
    height: 8px;
    margin: auto;
    border-top: 3px solid #777;
    border-right: 3px solid #777;
    box-sizing: content-box;
    transition: 0.6s cubic-bezier;
    content: '';
    position: absolute;
    top: 42px;
    right: 20px;
    transform: translateX(calc(50% - 8px));
    rotate: 135deg;
    cursor: pointer;
    pointer-events: none;
}
#contact-form tr:nth-child(7) td .wpcf7-list-item {
    margin: 0;
}
#contact-form tr:nth-child(7) td input {
    display: none;
}
#contact-form tr:nth-child(7) td label {
    margin:  0 30px 10px 0;
    display: inline-block;
    font-size: 1.8rem;
    cursor: pointer;
}
#contact-form tr:nth-child(7) td label span {
    position: relative;
}
#contact-form tr:nth-child(7) td label span::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--light-gray);
    border: 1px solid var(--gray);
    display: inline-block;
    content: '';
}
#contact-form tr:nth-child(7) td label:hover span,
#contact-form tr:nth-child(7) td input[type='radio']:checked + span {
    color: var(--accent);
}
#contact-form tr:nth-child(7) td input[type='radio']:checked + span:after {
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    display: block;
    content: '';
    transform: rotate(40deg);
    position: absolute;
    top: 5px;
    left: 5px;
}
#contact-form tr td textarea {
    width: 540px;
    height: 180px;
    padding: 10px;
    background: var(--light-gray);
    border: 1px solid var(--gray);
    border-radius: 6px;
}
.wpcf7-not-valid-tip {
    color: var(--red) !important;
}
.wpcf7 form .wpcf7-response-output {
    margin: 50px 0 !important;
    padding: 0 !important;
    border: none !important;
    color: var(--red);
    text-align: center;
}
.wpcf7 .wpcf7-submit:not(:disabled) {
    cursor: pointer;
}
.wpcf7-form.sent .wpcf7-response-output {
    display: none;
}
/*===================================================
 bownow-form
===================================================*/
#bownow-form {
    margin-bottom: 50px;
}
/*===================================================
 input
===================================================*/
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
input:focus::-ms-input-placeholder {
    color: transparent;
}
input:focus::placeholder {
    color: transparent;
}
/*===================================================
 consent
===================================================*/
#consent {
    margin-bottom: 50px;
}
#consent p {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
}
#consent input {
    display: none;
}
#consent label {
    display: flex;
    justify-content: center;
}
#consent label span {
    position: relative;
}
#consent label span:before {
    width: 16px;
    height: 16px;
    margin: 4px 5px 0 0;
    background: var(--light-gray);
    border: 1px solid var(--gray);
    border-radius: 3px;
    display: inline-block;
    content: '';
}
#consent label:hover span,
#consent input[type='checkbox']:checked + label span {
    color: var(--accent);
}
#consent input[type='checkbox']:checked + label span:after {
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    display: block;
    content: '';
    transform: rotate(40deg);
    position: absolute;
    top: 5px;
    left: 5px;
}
#consent + p {
    margin-bottom: 80px;
    text-align: center;
}
#consent + p + input[type='submit'].disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
#consent + p + input[type='submit'] {
    width: 240px;
    max-width: 240px;
    height: 60px;
    margin: 0 auto;
    background: var(--accent);
    border: 2px solid #fffade;
    border-radius: 30px;
    display: block;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 5.6rem;
    text-align: center;
    transition: 0.5s;
    position: relative;
    cursor: pointer;
}
#consent + p + input[type='submit']:not(.disabled):hover {
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    transition: 0.5s;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1275px) {
    #main {
        padding: 0;
    }
    #breadcrumbs {
        padding: 10px;
    }
}
@media screen and (max-width: 800px) {
    .mcontents .nav-below li {
        width: 100%;
    }
    .mcontents .nav-below li.next a p {
        text-align: left;
    }
    .mcontents .nav-below li + li {
        border-top: 1px solid var(--gray);
    }
}
@media screen and (max-width: 700px) {
    #breadcrumbs {
        display: none;
    }
    #main .mcontents {
        padding: 96px 0 80px;
    }
}
@media screen and (max-width: 590px) {
    .mcontents .link-area {
        margin-top: 30px;
    }
    .mcontents .link-area li:first-child {
        margin-bottom: 20px;
    }
    .mcontents .link-area li + li {
        margin-left: 0;
    }
}
@media screen and (max-width: 500px) {
    #main .mcontents {
        padding: 40px 0 80px;
    }
    .title h1 {
        font-size: 2.3rem;
    }
    .mcontents .link-area.vertical li + li {
        margin: 20px 0 0 0;
    }
}

/*===================================================

 2.クラウド法人名刺とは #about

===================================================*/
#about #main .mcontents {
    padding: 40px 0 0;
}
#about-top {
    margin-bottom: 100px;
}
#about-top #logo {
    margin: 40px auto;
    display: block;
}
#about-top h2 {
    margin: 50px 0;
    color: var(--accent);
    font-size: 3.0rem;
    font-weight: 600;
    text-align: center;
    position: relative;
}
#about-top #youtube {
    margin-bottom: 30px;
    padding: 0 0 81px;
    position: relative;
}
#about-top #youtube::before {
    width: 210px;
    height: 375px;
    background: image-set(url('/wp-content/uploads/about_2.webp') 1x, url('/wp-content/uploads/about_2-2x.webp') 2x) no-repeat;
    display: block;
    content: '';
    position: absolute;
    top: 5px;
    left: 50px;
}
#about-top #youtube::after {
    width: 345px;
    height: 527px;
    background: image-set(url('/wp-content/uploads/about_3.webp') 1x, url('/wp-content/uploads/about_3-2x.webp') 2x) no-repeat;
    display: block;
    content: '';
    position: absolute;
    top: -100px;
    right: 0;
}
#about-top #youtube iframe {
    width: 600px;
    margin: 0 auto;
    border: 10px solid var(--white);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04);
    display: block;
    position: relative;
    z-index: 999;
}
#about-top #youtube + p {
    margin: 0 0 50px;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 4.8rem;
    text-align: center;
}
#about-top #youtube + p span {
    color: var(--accent);
}
#about-top #youtube + p span span {
    margin-left: 3px;
    font-size: 4.6rem;
}
#about-top #youtube + p + img {
    margin-bottom: 30px;
    display: block;
}
#about-middle {
    width: 100%;
    padding: 100px 0 40px;
    background: var(--sub);
}
#about-middle #features-1 {
    border-top: 1px solid var(--gray);
}
#about-middle .fblock {
    padding: 40px 0;
    border-bottom: 1px solid var(--gray);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#about-middle .fblock div:first-of-type {
    max-width: 650px;
    margin-right: 70px;
}
#about-middle .fblock  div + div {
    width: 440px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04);
}
#about-middle .fblock h5 {
    margin: 15px 0;
    color: var(--brown);
    font-size: 3.2rem;
}
#about-middle .fblock h5 span {
    margin: 0 10px;
    font-size: 4.8rem;
}
#about-middle .fblock p {
    margin-left: 80px;
    font-size: 1.8rem;
    font-weight: 500;
}
#about-middle .fblock .annotation {
    margin-top: 0;
    font-size: 1.4rem;
}
#about-middle #features-1 div + div {
    height: 280px;
}
#about-middle #features-2 div + div {
    height: 210px;
    margin-top: 30px;
}
#about-middle #features-3 div + div {
    height: 220px;
    margin-top: 60px;
}
#about-middle #features-4 div + div,
#about-middle #features-5 div + div,
#about-middle #features-6 div + div {
    height: 220px;
    margin-top: 30px;
}
#about-middle #features-6 {
    margin-bottom: 60px;
}
#about-middle #features-6 p span {
    margin: 0 0 0 5px;
    font-size: 4.2rem;
}
#about-middle #features-6 p:nth-of-type(2) {
    margin-bottom: 30px;
}
#about-bottom {
    padding: 0 0 100px;
    background: var(--sub);
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    #about-top h2 {
        font-size: 2.4rem;
    }
    #about-top img {
        height: auto;
    }
    #about-top #youtube::before,
    #about-top #youtube::after {
        content: none;
    }
    #about-top #youtube iframe {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 1.76 /1;
    }
    #about-middle .inner-1160 div:first-of-type {
        width: 100%;
        max-width: 100%;
        margin: 0 0 30px 0;
    }
    #about-middle .fblock div p {
        margin: 5px 0 5px 80px;
    }
    #about-middle .fblock div p br {
        display: none;
    }
    #about-middle div + div {
        margin: 0 auto;
    }
    #about-middle #features-2 div + div {
        margin-top: 0;
    }
    #about-middle .link-area {
        margin-left: 80px;
        justify-content: left;
    }
    #about-middle #features-4 .link-area {
        margin-top: 20px;
    }
    #about-middle #features-6 {
        margin-bottom: 0;
    }
    #about-middle #features-6 .annotation + a {
        margin: 20px 0 0 80px;
    }
}
@media screen and (max-width: 715px) {
    #about-middle .inner h5 {
        font-size: 2.4rem;
    }
    #about-middle .inner h5 span {
        font-size: 3.0rem;
    }
    #about-middle .fblock div p {
        margin: 5px 0 5px 55px;
        font-size: 1.6rem;
    }
    #about-middle .link-area {
        margin: 20px auto 0;
        justify-content: center;
    }
    #about-middle #features-6 .annotation + a {
        margin: 20px auto 0;
    }
}
@media screen and (max-width: 500px) {
    #about #about-top {
        margin-bottom: 0;
        padding-top: 0;
    }
    #about #about-top #logo {
        width: 70%;
    }
    #about #about-top h3 {
        font-size: 2.2rem;
    }
    #about #about-top h3 + p {
        font-size: 1.8rem;
        line-height: 3.6rem;
    }
    #about #about-top h3 + p span span {
        font-size: 3.6rem;
    }
    #about #about-top #youtube {
        padding: 0;
    }
    #about #about-top #youtube + p {
        font-size: 1.8rem;
        line-height: 3.2rem;
    }
    #about #about-top #youtube + p span span {
        font-size: 3.6rem;
    }
    #about #about-middle {
        margin-bottom: 40px;
        padding: 50px 0;
    }
    #about #about-middle .inner h5 {
        font-size: 2.0rem;
    }
    #about #about-middle .fblock div p {
        margin: 5px 0 5px 5px;
        font-size: 1.5rem;
    }
    #about #about-middle .inner-1160 div + div {
        width: 100%;
        height: auto !important;
    }
    #about #about-middle .inner-1160 div + div img {
        width: 100%;
        height: auto;
    }
    #about #about-middle #features-6 {
        margin-bottom: 0;
    }
    #about .mcontents #about-bottom {
        padding: 0 20px;
    }
}

/*===================================================

 3.機能・特徴 #function

===================================================*/
#function h2 {
    color: var(--accent);
    font-size: 3.0rem;
    text-align: center;
}
#function h2 + p {
    margin-bottom: 50px;
    text-align: center;
}
#function h2 + p + img {
    width: 600px;
    height: 350px;
    margin: 0 auto 30px;
    padding: 10px;
    background: var(--white);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04);
    display: block;
}
#function h2 + p + img + p {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 80px;
    padding: 10px 0;
    background: var(--light-gray);
    line-height: 3.0rem;
    text-align: center;
}
#function .fblock {
    margin-bottom: 80px;
}
#function .fblock h3 {
    width: 100%;
    padding: 10px 0;
    background: var(--sub);
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
}
#function .fblock ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#function .fblock ul::after {
    width: 360px;
    content: '';
    display: block;
}
#function .fblock ul li {
    width: 362px;
    margin: 40px 0;
}
#function .fblock ul li h4 {
    font-size: 1.8rem;
}
#function .fblock ul li p:first-of-type {
    margin: 5px 0;
}
#function .fblock ul li p.authority {
    margin-top: 10px;
    text-indent: -0.5em;
}
#function .fblock ul li p.authority span {
    margin: 0 5px;
    padding: 3px 7px;
    border-radius: 3px;
    color: var(--white);
    text-align: center;
}
#function .fblock ul li p.authority span.applicant {
    background: #bb9b61;
}
#function .fblock ul li p.authority span.approver {
    background: var(--brown);
}
#function .fblock ul li p.authority span.admin {
    background: #ffa800;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    #function .fblock ul {
        width: 760px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 815px) {
    #function .fblock ul {
        width: 360px;
    }
}
@media screen and (max-width: 720px) {
    #function h2 + p + img {
        width: 100%;
        height: auto;
        aspect-ratio: 1.71 / 1;
    }
}
@media screen and (max-width: 500px) {
    #function h2 {
        font-size: 2.4rem;
    }
    #function .fblock ul {
        width: 100%;
    }
    #function .fblock ul li {
        width: 100%;
        margin: 20px 0;
    }
    #function .fblock ul li img {
        width: 100%;
        height: auto;
    }
}

/*===================================================

 4.導入事例 #case

===================================================*/
#case .title + p {
    margin-bottom: 100px;
    text-align: center;
}
#case #case-list {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#case #case-list::after {
    width: 340px;
    content: '';
    display: block;
}
#case #case-list li {
    width: 340px;
    height: 400px;
    margin-bottom: 70px;
    background: var(--white);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.05);
}
#case #case-list li a {
    color: var(--black);
}
#case #case-list li a:hover {
    text-decoration: none;
}
#case #case-list li .catch {
    width: 100%;
    height: 212.5px;
    overflow: hidden;
}
#case #case-list li .catch img {
    transform: scale(1.2);
}
#case #case-list li .desc {
    width: 100%;
    height: 187.5px;
    padding: 15px 10px 0 15px;
    position: relative;
}
#case #case-list li .desc .post-title {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 500;
}
#case #case-list li a:hover .desc .post-title {
    color: var(--accent);
}
#case #case-list li .desc .post-excerpt {
    margin: 0;
    font-size: 1.5rem;
}
#case #case-list li a:hover .desc .post-excerpt {
    text-decoration: underline;
}
#case #case-list li .desc .icatch {
    width: 120px;
    height: 42px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
#case #case-list li a:hover .desc .icatch {
    opacity: 0.9;
}
#case #case-list li .desc span.post-tags {
    padding: 5px 10px;
    background: var(--main);
    color: var(--brown);
    font-weight: 500;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#case #case-list li#no-case {
    width: 100%;
    height: auto;
    background: none;
    box-shadow: none;
    text-align: center;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1140px) {
    #case #case-list {
        width: 720px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 790px) {
    #case #case-list {
        width: 340px;
    }
}

/*===================================================

 5.導入企業様紹介 #introduction

===================================================*/
#introduction #interview h1 {
    margin-bottom: 30px;
    font-size: 2.3rem;
}
#introduction #interview h2 {
    margin: 25px 0;
    padding: 20px 0;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    font-size: 1.6rem;
    line-height: 2.6rem;
}
#introduction #interview h3 {
    margin: 5px 0 25px;
    display: flex;
    font-size: 2.2rem;
}
#introduction #interview h3::after {
    height: 1px;
    margin: 17px 0 0 15px;
    display: block;
    background: var(--black);
    content: '';
    flex-grow: 1;
}
#introduction #interview p {
    margin: 15px 0;
}
#introduction #interview img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: block;
    aspect-ratio: 1.6 / 1;
}
#introduction #interview .cname {
    margin-bottom: 10px;
    font-weight: 500;
}
#introduction #interview .bold {
    font-weight: 500;
}
#introduction #interview .circle {
    font-weight: 500;
}
#introduction #interview .iblock {
    margin: 60px 0;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--gray);
}
#introduction #interview .iblock .ititle .circle2 {
    margin-bottom: 5px;
    color: #555;
    font-size: 1.8rem;
    font-weight: 600;
}
#introduction #interview .iblock img {
    margin-bottom: 30px;
}
#introduction #interview .accent {
    color: var(--accent);
    font-weight: 600;
}
#introduction #interview .ifaq {
    margin: 40px 0;
} 
#introduction #interview .ifaq .question p {
    margin: 15px 0 20px;
    padding-left: 0.5em;
    border-left: 5px solid var(--accent);
    font-size: 1.8rem;
    font-weight: 500;
}
#introduction #interview .ifaq .answer p {
    line-height: 2.8rem;
}
#introduction #interview .iblock .img-name {
    margin-top: -20px;
    font-size: 1.5rem;
    text-align: right;
}
#introduction #interview img#company-logo {
    width: 200px;
    height: 70px;
    margin: 0 auto 50px;
}
#introduction #interview table {
    margin-bottom: 80px;
}
#introduction #interview table tr th {
    min-width: 140px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 500px) {
    #introduction #interview h1 {
        font-size: 1.8rem;
    }
    #introduction #interview table.color-table tr th,
    #introduction #interview table.color-table tr td {
        font-size: 1.5rem;
    }
    #introduction #interview table.color-table tr td p:first-child {
        margin-bottom: 5px;
    }
}

/*===================================================

 6.導入までの流れ #flow

===================================================*/
#flow .title + p {
    margin-bottom: 100px;
    text-align: center;
}
#flow .step {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#flow .step:not(:last-of-type) {
    margin-bottom: 100px;
}
#flow .step .ico {
    width: 80px;
    height: 80px;
    margin-right: 60px;
    border-radius: 50%;
    background: var(--accent);
}
#flow .step .ico p {
    color: var(--white);
    text-align: center;
}
#flow .step .ico p {
    margin: 8px 0;
}
#flow .step .ico p + p {
    font-size: 3.3rem;
    line-height: 2.0rem;
}
#flow .step .fblock {
    width: calc(100% - 140px);
}
#flow .step .fblock h2 {
    margin-bottom: 30px;
}
#flow .step .fblock img {
    width: 280px;
    float: left;
    margin-right: 50px;
}
#flow .step .fblock .desc .link-area {
    margin-top: 30px;
    justify-content: left;
}
#flow #step1 .fblock .desc {
    width: calc(100% - 330px);
    float: right;
}
#flow #step1 .fblock .desc p:first-of-type {
    margin-top: 0;
}
#flow #step1 .fblock .desc p:nth-of-type(3) {
    margin-bottom: 0;
    font-weight: 500;
}
#flow #step1 .fblock .desc p:last-of-type {
    margin-top: 0;
}
#flow #step1 .fblock .desc p:last-of-type span {
    margin-right: 30px;
    font-size: 2.4rem;
    font-weight: 500;
}
#flow #step5 {
    margin-bottom: 100px;
}
#flow #after-support h3 {
    margin-top: 0;
    color: var(--accent);
    font-size: 3.2rem;
    text-align: center;
}
#flow #after-support ul {
    margin-bottom: 80px;
}
#flow #after-support ul li {
    width: 100%;
    height: auto;
    padding: 10px;
    background: var(--sub);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}
#flow #after-support ul li:first-child {
    margin-bottom: 30px;
}
#flow #after-support ul li img {
    margin-right: 20px;
}
#flow #after-support ul li h4 {
    margin: 10px 0;
    font-size: 2.0rem;
    font-weight: 500;
}
#flow #after-support ul li:first-child img {
    margin-top: 20px;
}
#flow #after-support ul li:first-child p:nth-of-type(2)  {
    margin: 0;
    font-weight: 500;
}
#flow #after-support ul li:first-child p:last-of-type {
    margin: 0;
}
#flow #after-support ul li:first-child p:last-of-type span {
    margin-right: 20px;
    font-size: 2.2rem;
    font-weight: 500;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #flow .step .ico {
        display: none;
    }
    #flow .step .fblock {
        width: 100%;
    }
}
@media screen and (max-width: 900px) {
    #flow .step .fblock .desc .link-area {
        width: 240px;
    }
    #flow .step .fblock .desc .link-area li + li {
        margin: 20px 0 0 0;
    }
    #flow #after-support ul li img {
        margin: 0 auto;
    }
    #flow #after-support ul li div {
        width: 100%;
        text-align: center;
    }
}
@media screen and (max-width: 740px) {
    #flow .step .fblock img {
        float: none;
        margin: 0 auto 30px;
        display: block;
    }
    #flow #step1 .fblock .desc,
    #flow .fblock .desc {
        width: 100%;
        float: none;
    }
    #flow .fblock .desc p {
        text-align: center;
    }
    #flow .step .fblock .desc .link-area {
        justify-content: center;
    }
    #flow #after-support ul li:first-child p:last-of-type span::after {
        content: '\A';
        white-space: pre;
    }
}
@media screen and (max-width: 500px) {
    #flow .title + p {
        margin-bottom: 50px;
    }
    #flow #step1 .fblock .desc p:last-of-type span::after {
        content: '\A';
        white-space: pre;
    }
    #flow #after-support h3 {
        font-size: 2.4rem;
    }
}

/*===================================================

 7.用紙一覧 #paper

===================================================*/
#paper #paper-type li {
    padding: 10px 20px;
    color: var(--accent);
    font-weight: 500;
    text-align: center;
    line-height: 1.6rem;
    cursor: pointer;
}
#paper #paper-type li.select,
#paper #paper-type li:hover {
    color: var(--white);
}
#paper .pblock {
    width: 100%;
    margin-bottom: 50px;
    display: inline-block;
    clear: both;
}
#paper .pblock h2 {
    margin: 20px 0;
    font-size: 2.3rem;
}
#paper .pblock ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#paper .pblock ul li a:hover {
    opacity: 0.9;
}
#paper .pblock ul +div {
    width: calc(100% - 420px);
    float: left;
}
#paper .pblock div h3 {
    margin-bottom: 10px;
    font-weight: 500;
}
#paper .pblock div h3 + p {
    margin: 0 0 20px 0;
    line-height: 2.8rem;
}
#paper .pblock table {
    width: 380px;
    float: right;
    margin-top: 20px;
    background: var(--light-gray);
    border: none;
}
#paper .pblock table tr th,
#paper .pblock table tr td {
    border: none;
}
#paper .pblock table tr th {
    padding: 5px 15px;
    text-align: left;
}
#paper .pblock table tr:first-child th,
#paper .pblock table tr:first-child td {
    padding-top: 10px;
}
#paper .pblock table tr:last-child th,
#paper .pblock table tr:last-child td {
    padding-bottom: 10px;
}
#paper .pblock table tr td span {
    margin: 0 5px;
}
#paper #lightbox .lb-data .lb-number {
    display: none !important;
}
#paper #all {
    margin: 60px 0 80px;
    position: relative;
}
#paper #all a {
    display: block;
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
#paper #all::after {
    width: 16px;
    height: 16px;
    margin: auto;
    border-top: 3px solid var(--accent);
    border-right: 3px solid var(--accent);
    border-radius: 2px;
    box-sizing: content-box;
    transition: 0.6s cubic-bezier;
    content: '';
    position: absolute;
    top: -20px;
    left: calc(50% - 8px);
    transform: translateX(calc(50% - 8px));
    rotate: 315deg;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #paper .pblock ul li {
        margin-right: 20px;
    }
    #paper .pblock ul li:last-child {
        margin-right: 0;
    }
}
@media screen and (max-width: 1055px) {
    #paper .pblock ul {
        justify-content: left;
    }
    #paper .pblock ul li:nth-child(2) {
        margin-right: 0;
    }
    #paper .pblock ul li:last-child {
        display: none;
    }
    #paper .pblock ul +div {
        width: 100%;
        float: none;
    }
    #paper .pblock table {
        width: 100%;
        max-width: 660px;
        float: none;
    }
}
@media screen and (max-width: 715px) {
    #paper .type-nav,
    #paper #all {
        display: none;
    }
    #paper .pblock h2 {
        font-size: 1.8rem;
    }
    #paper .pblock ul li {
        width: 100%;
        margin: 0;
    }
    #paper .pblock ul li a {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }
    #paper .pblock ul li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    #paper .pblock div h3 {
        font-size: 1.6rem;
    }
    #paper .pblock div h3 + p br {
        display: none;
    }
}

/*===================================================

 8.加工オプション #processing

===================================================*/
#processing #emboss-board {
    margin-bottom: 100px;
}
#processing-type li {
    padding: 0;
}
#processing .pblock {
    width: 100%;
    margin-bottom: 60px;
    display: inline-block;
    clear: both;
}
#processing .pblock .desc {
    width: 660px;
    float: left;
    margin-right: 40px;
}
#processing .pblock .desc .price span {
    margin: 0 0 0 5px;
    font-size: 2.2rem;
    font-weight: 500;
}
#processing #emboss .desc .price span,
#processing #emboss-board .desc .price span {
    margin: 0 20px 0 0;
    font-size: 1.6rem;
    font-weight: normal;
}
#processing #emboss .desc .price span span,
#processing #emboss-board .desc .price span span {
    margin: 0 0 0 10px;
    font-size: 2.2rem;
    font-weight: 500;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 700px) {
    #processing .pblock .desc {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}
@media screen and (max-width: 585px) {
    #processing #processing-type li a {
        padding: 10px;
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 540px) {
    #processing #processing-type {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    #processing .pblock h2 {
        font-size: 1.8rem;
    }
}

/*===================================================

 9.料金案内 #price

===================================================*/
#price .title + p {
    margin-bottom: 50px;
    text-align: center;
}
#price .pblock {
    margin-bottom: 100px;
}
#price h2 {
    margin-bottom: 40px;
    font-size: 2.2rem;
}
#price h2 + ul {
    display: flex;
    justify-content: right;
}
#price h2 + ul li {
    margin-right: 20px;
}
#price h2 + ul li:last-child {
    margin-right: 0;
}
#price .color-white::before {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#price .color-ivory::before {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: var(--gray);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#price .color-env::before {
    width: 17px;
    height: 12px;
    margin-right: 3px;
    background: image-set(url('/wp-content/uploads/price_5.webp') 1x, url('/wp-content/uploads/price_5-2x.webp') 2x) no-repeat;
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#price p.sub {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 500;
}
#price p.sub::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#price table {
    width: 100%;
    margin-bottom: 10px;
    border: none;
}
#price table tr:first-child {
    background: var(--sub);
}
#price table tr.gray {
    background: var(--light-gray);
}
#price table tr.line {
    border-bottom: 1px solid var(--gray);
}
#price table tr th,
#price table tr td {
    padding: 15px;
    border: none;
}
#price table tr th {
    font-weight: 500;
    background: var(--sub);
}
#price table tr th:not(:first-child) {
    text-align: center;
}
#price table tr:first-child th:first-child {
    text-align: left;
}
#price table tr td:not(:first-child) {
    text-align: center;
}
#price table tr td.left {
    text-align: left;
}
#price table tr td p {
    margin: 0;
}
#price table tr td p:not(:last-child) {
    margin-bottom: 5px;
}
#price table tr td span {
    font-size: 2.0rem;
}
#price table tr td span.remarks {
    font-size: 1.3rem;
}
#price table tr td span.free {
    color: var(--red);
}
#price table + p {
    text-align: right;
}
#price #processing-table table tr:nth-child(4) td:nth-child(2) {
    font-size: 1.4rem;
}
#price #processing-table table tr th:nth-child(2),
#price #processing-table table tr:nth-child(-n + 4) td:nth-child(2),
#price #processing-table table tr:nth-child(5) td:nth-child(-n + 3),
#price #processing-table table tr:nth-child(8) td:nth-child(2),
#price #processing-table table tr:nth-child(11) td:nth-child(2) {
    text-align: left;
}
#price #processing-table table tr th:nth-child(2) {
    width: 200px;
}
#price #processing-table table tr:nth-child(5) td:nth-child(2),
#price #processing-table table tr:nth-child(8) td:nth-child(2) {
    width: 120px;
}
#price #template-table table tr th:first-child {
    width: 250px;
}
#price #template-table table tr th:nth-child(2) {
    width: 180px;
}
#price #template-table table tr th:nth-child(3) {
    width: 130px;
}
#price #template-table table tr td {
    text-align: left;
}
#price #template-table table tr td:last-child {
    font-size: 1.5rem;
}
#price #template-table table tr td:nth-child(2),
#price #template-table table tr td:nth-child(3),
#price #template-table table tr:nth-child(3) td {
    text-align: center;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 955px) {
    #price .pblock table tr,
    #price .pblock table tr th,
    #price .pblock table tr td {
        display: block;
    }
    #price .pblock table tr:first-child {
        display: none;
    }
    #price .pblock table tr td.t-title {
        font-size: 1.7rem;
        font-weight: 500;
    }
    #price .pblock table tr td.t-title p {
        margin: 10px 0;
    }
    #price .pblock table tr td::before {
        float: left;
        margin-right: 10px;
        content: attr(data-label);
    }
    #price #processing-table table tr:nth-child(5) td:nth-child(2) {
        display: none;
    }
    #price #processing-table table tr:nth-child(-n + 4) td:nth-child(2),
    #price #processing-table table tr:nth-child(5) td:nth-child(-n + 3),
    #price #processing-table table tr:nth-child(6) td:first-child,
    #price #processing-table table tr:nth-child(7) td:first-child,
    #price #processing-table table tr:nth-child(8) td:nth-child(2),
    #price #processing-table table tr:nth-child(9) td:first-child,
    #price #processing-table table tr:nth-child(10) td:first-child {
        text-align: center;
    }
    #price #processing-table table tr:nth-child(5) td:first-child {
        text-align: left;
    }
    #price #processing-table table tr:nth-child(n + 8) {
        background: var(--white);
    }
    #price #shipping-table table tr td {
        padding: 15px;
    }
    #price #template-table table tr td:last-child {
        font-size: 1.4rem;
        text-align: center;
    }
    #price #template-table table tr td:nth-child(3),
    #price #template-table table tr:nth-child(11) td:nth-child(4) {
        text-align: center;
    }
}
@media screen and (max-width: 540px) {
    #price h2,
    #price h2 + ul,
    #price p.sub,
    #price table + p {
        margin: 0 auto 20px;
    }
    #price #price-type {
        display: none;
    }
    #price table tr th,
    #price table tr td {
        padding: 10px 20px;
    }
    #price .pblock table tr td.t-title p {
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 500px) {
    #price .title + p {
        font-size: 1.4rem;
    }
}

/*===================================================

 10.料金比較シミュレーター #simulator

===================================================*/
#simulator .title + p {
    margin-bottom: 40px;
    line-height: 3.0rem;
    text-align: center;
}
#simulator #premise {
    width: 100%;
    margin-bottom: 60px;
    padding: 20px 40px;
    border-radius: 8px;
    background: var(--light-yellow);
}
#simulator #premise p:first-of-type {
    margin-top: 0;
    font-size: 2.0rem;
    font-weight: 600;
}
#simulator #premise p span.sub {
    width: 190px;
    margin-right: 20px;
    padding: 5px;
    display: inline-block;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}
#simulator #premise p:nth-of-type(2) span.sub {
    background: var(--gray);
}
#simulator #premise p:nth-of-type(3) {
    margin-bottom: 0;
}
#simulator #premise p:nth-of-type(3) span.sub {
    background: var(--accent);
}
#simulator #simform .step {
    margin-bottom: 60px;
}
#simulator #simform .step .stitle {
    color: var(--accent);
    font-size: 2.0rem;
    font-weight: 600;
}
#simulator #simform .step .stitle span {
    margin-right: 10px;
    color: var(--accent);
    font-size: 1.6rem;
}
#simulator #simform .step table {
    border: none;
}
#simulator #simform .step table tr th,
#simulator #simform .step table tr td {
    padding: 10px 0;
    border: none;
}
#simulator #simform .step table tr th {
    width: calc(100% - 450px);
    padding-top: 30px;
    background: none;
    font-size: 1.8rem;
    font-weight: 500;
    vertical-align: baseline;
    text-align: left;
}
#simulator #simform .step table tr td {
    width: 450px;
}
#simulator #simform .step table tr td input {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    background: var(--light-gray);
    border: 1px solid var(--gray);
    border-radius: 6px;
}
#simulator #simform .step table tr td input[type='number']::-webkit-inner-spin-button,
#simulator #simform .step table tr td input[type='number']::-webkit-outer-spin-button {
    opacity: 1.0;
}
#simulator #simform .step table tr td #printTypeWrapper {
    position: relative;
    user-select: none;
}
#simulator #simform .step table tr td .ImageSelector__display {
    width: 450px;
    height: 60px;
    padding: 0 10px;
    border: 1px solid var(--gray);
    border-radius: 6px;
    background: var(--light-gray);
    display: flex;
    line-height: 5.8rem;
    align-items: center;
    cursor: pointer;
}
#simulator #simform .step table tr td .ImageSelector__display img {
    margin: 0 10px 0 0;
    vertical-align: sub;
}
#simulator #simform .step table tr td .ImageSelector__display::after {
    width: 8px;
    height: 8px;
    margin: auto;
    border-top: 3px solid #777;
    border-right: 3px solid #777;
    box-sizing: content-box;
    transition: 0.6s cubic-bezier;
    content: '';
    position: absolute;
    top: 22px;
    right: 20px;
    transform: translateX(calc(50% - 8px));
    rotate: 135deg;
    cursor: pointer;
}
#simulator #simform .step table tr td .ImageSelector {
    background: var(--light-gray);
    display: inline-flex;
    position: relative;
    cursor: pointer;
}
#simulator #simform .step table tr td .ImageSelector__display,
#simulator #simform .step table tr td .ImageSelector__preview,
#simulator #simform .step table tr td .ImageSelector__preview-child {
    display: flex;
    align-items: center;
}
#simulator #simform .step table tr td .ImageSelector__option {
    padding: 10px;
    display: inline-flex;
}
#simulator #simform .step table tr td .ImageSelector__option img {
    margin: 0 10px 0 0;
    vertical-align: sub;
}
#simulator #simform .step table tr td .ImageSelector__option:hover {
    background: var(--light-gray);
}
#simulator #simform .step table tr td .ImageSelector__icon {
    display: none;
}
#simulator #simform .step table tr td .ImageSelector__pulldown {
    width: 100%;
    border: 1px solid var(--gray);
    background: var(--white);
    display: none;
    border-radius: 6px;
    box-sizing: border-box;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: -1px;
    overflow-y: auto;
    z-index: 10;
}
#simulator #simform .step table tr td .ImageSelector__s-spread {
    display: flex;
}
#simulator #simform .step table tr td input + p {
    margin-top: 5px;
    color: #666;
}
#simulator #simform button {
    width: 700px;
    height: 80px;
    margin: 0 auto 60px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    display: block;
    color: var(--white);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 8.0rem;
    text-align: center;
    cursor: pointer;
}
#simulator #simform button:hover {
    opacity: 0.9;
}
#simulator #result {
    width: 100%;
    margin-bottom: 100px;
    padding: 10px 0;
    background: var(--light-yellow);
}
#simulator #result p {
    text-align: center;
}
#simulator #result p:first-of-type {
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 500;
}
#simulator #result p:nth-of-type(2) {
    margin: 0 0 5px 0;
    color: var(--accent);
    font-size: 3.0rem;
    font-weight: 600;
}
#simulator #result p:nth-of-type(2) #totalSavingsDisplay {
    margin-right: 5px;
    font-size: 4.4rem;
}
#simulator #result p:nth-of-type(3) {
    margin-top: 0;
    color: var(--accent);
    font-weight: 500;
}
#simulator #result p:last-of-type {
    margin-bottom: 20px;
    color: #666;
    font-size: 1.4rem;
}
#simulator #result p + a {
    margin-bottom: 15px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 740px) {
    #simulator #premise p span {
        margin: 0 0 10px 0;
        display: block;
    }
    #simulator #simform .step table tr,
    #simulator #simform .step table tr th,
    #simulator #simform .step table tr td {
        width: 100%;
        display: block;
    }
    #simulator #simform .step table tr td #printTypeWrapper,
    #simulator #simform .step table tr td .ImageSelector__display {
        width: 100%;
    }
    #simulator #simform button {
        width: 90%;
    }
}
@media screen and (max-width: 500px) {
    #simulator .title + p {
        font-size: 1.4rem;
    }
}

/*===================================================

 11.翌日到着便 #arrival-nextday

===================================================*/
#arrival-nextday .title + p {
    margin-bottom: 60px;
    text-align: center;
}
#arrival-nextday #time-service {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#arrival-nextday #time-service div {
    width: 510px;
    margin-top: 100px;
}
#arrival-nextday #time-service div ul li {
    padding-left: 25px;
    position: relative;
}
#arrival-nextday #time-service div ul li:not(:last-child) {
    margin-bottom: 5px;
}
#arrival-nextday #time-service div ul li:before {
    width: 15px;
    height: 15px;
    display: block;
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
}
#arrival-nextday #time-service div ul li:first-child:before {
    background: #f9f19a;
}
#arrival-nextday #time-service div ul li:nth-child(2):before {
    background: #a2d1ea;
}
#arrival-nextday #time-service div ul li:nth-child(3):before {
    background: #e6a68f;
}
#arrival-nextday #time-service div ul li:not(:last-child) {
    margin-bottom: 10px;
}
#arrival-nextday #time-service div ul li span {
    font-size: 1.4rem;
}
#arrival-nextday #time-service div ul + p {
    font-size: 1.3rem;
}
#arrival-nextday #time-service + table {
    margin-bottom: 60px;
    border: none;
}
#arrival-nextday #time-service + table tr th,
#arrival-nextday #time-service + table tr td {
    border: none;
}
#arrival-nextday #time-service + table tr td {
    font-size: 1.8rem;
    font-weight: 500;
}
#arrival-nextday #time-service + table tr td span {
    font-size: 1.3rem;
}
#arrival-nextday #time-service + table tr td p {
    font-size: 1.3rem;
}
#arrival-nextday #time-service-area {
    margin-bottom: 100px;
}
#arrival-nextday #time-service-area h2 {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    font-weight: 500;
}
#arrival-nextday #time-service-area h2::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#arrival-nextday #time-service-area #nav {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
}
#arrival-nextday #time-service-area #nav li {
    width: 158px;
    height: 46px;
    margin: 0 10.4px 10px 0;
    border: 1px solid var(--accent);
    display: block;
    color: var(--accent);
    font-weight: 500;
    line-height: 4.4rem;
    text-align: center;
    cursor: pointer;
}
#arrival-nextday #time-service-area #nav li:nth-child(6n) {
    margin-right: 0;
}
#arrival-nextday #time-service-area #nav li.select,
#arrival-nextday #time-service-area #nav li:hover {
    background: var(--accent);
    color: var(--white);
}
#arrival-nextday #time-service-area #nav + ul {
    margin-bottom: 60px;
    padding: 20px 0 20px 10px;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}
#arrival-nextday #time-service-area #nav + ul li:not(:last-child) {
    margin-bottom: 10px;
}
#arrival-nextday #time-service-area #nav + ul li:before {
    width: 15px;
    height: 15px;
    float: left;
    margin: 7px 10px 0 0;
    display: block;
    content: '';
}
#arrival-nextday #time-service-area #nav + ul li:first-child:before {
    background: #f9f19a;
}
#arrival-nextday #time-service-area #nav + ul li:nth-child(2):before {
    background: #9fc7b7;
}
#arrival-nextday #time-service-area #nav + ul li:nth-child(3):before {
    background: #a2d1ea;
}
#arrival-nextday #time-service-area #nav + ul li:nth-child(4):before {
    background: #adaeda;
}
#arrival-nextday #time-service-area #nav + ul li:last-child:before {
    background: #e6a68f;
}
#arrival-nextday #time-service-area .area {
    display: none;
}
#arrival-nextday #time-service-area .area01 {
    display: block;
}
#arrival-nextday #time-service-area .area h3 {
    margin-bottom: 30px;
    font-size: 2.2rem;
}
#arrival-nextday #time-service-area .area div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
#arrival-nextday #time-service-area .area table {
    margin-bottom: 50px;
    border: none;
}
#arrival-nextday #time-service-area .area table tr th {
    border: none;
}
#arrival-nextday #time-service-area .area table tr td {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--gray);
    border-left: none;
}
#arrival-nextday #time-service-area .area table tr td:first-child {
    width: 240px;
    padding-left: 20px;
}
#arrival-nextday #time-service-area .area table tr td:nth-child(2) {
    width: 240px;
}
#arrival-nextday #time-service-area .area table tr:last-child td {
    border-bottom: none;
}
#arrival-nextday #time-service-area .area table tr td span.level {
    width: 45px;
    height: 15px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: initial;
}
#arrival-nextday #time-service-area .area table tr td span.level1 {
    background: #f9f19a;
}
#arrival-nextday #time-service-area .area table tr td span.level2 {
    background: #9fc7b7;
}
#arrival-nextday #time-service-area .area table tr td span.level3 {
    background: #a2d1ea;
}
#arrival-nextday #time-service-area .area table tr td span.level4 {
    background: #adaeda;
}
#arrival-nextday #time-service-area .area table tr td span.level5 {
    background: #e6a68f;
}
#arrival-nextday #time-service-area .area table tr td:first-child span {
    margin-left: 3px;
    font-size: 1.0rem;
    font-weight: 600;
    vertical-align: super;
}
#arrival-nextday #time-service-area .area .attention {
    display: inline-block;
}
#arrival-nextday #time-service-area .area .attention p {
    margin: 10px 0;
}
#arrival-nextday #time-service-area .area .attention p span {
    margin-right: 10px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1015px) {
    #arrival-nextday #time-service img {
        margin: 0 auto 20px;
    }
    #arrival-nextday #time-service div {
        width: 100%;
        margin: 0;
    }
    #arrival-nextday #time-service div ul {
        width: 400px;
        margin: 0 auto;
    }
    #arrival-nextday #time-service div ul + p {
        text-align: center;
    }
    #arrival-nextday #time-service + table tr,
    #arrival-nextday #time-service + table tr th,
    #arrival-nextday #time-service + table tr td {
        width: 100%;
        display: block;
    }
    #arrival-nextday #time-service + table tr:first-child {
        display: none;
    }
    #arrival-nextday #time-service + table tr:nth-child(2) td:first-child,
    #arrival-nextday #time-service + table tr:nth-child(2) td:nth-child(2) {
        height: 112px;
    }
    #arrival-nextday #time-service + table tr:nth-child(2) td:nth-child(3),
    #arrival-nextday #time-service + table tr:nth-child(2) td:last-child {
        height: 47px;
    }
    #arrival-nextday #time-service + table tr td::before {
        width: 100px;
        float: left;
        margin-right: 10px;
        background: var(--light-gray);
        font-size: 1.6rem;
        text-align: center;
        content: attr(data-label);
    }
    #arrival-nextday #time-service + table tr td div {
        width: calc(100% - 110px);
        float: right;
    }
    #arrival-nextday #time-service-area #nav + ul li {
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 560px) {
    #arrival-nextday #time-service-area #nav li {
        width: 48%;
        margin-right: 4%;
    }
    #arrival-nextday #time-service-area #nav li:nth-child(2n) {
        margin-right: 0;
    }
}

/*===================================================

 12.サポート #support

===================================================*/
#support .sblock {
    margin-bottom: 80px;
}
#support .sblock h2 {
    margin-bottom: 40px;
}
#support #guide .gblock ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#support #guide .gblock ul::after {
    width: 360px;
    content: '';
    display: block;
}
#support #guide .gblock ul li {
    width: 360px;
    height: 110px;
    margin-bottom: 20px;
    border: 1px solid var(--gray);
}
#support #guide .gblock ul li:hover {
    border: 1px solid var(--accent);
}
#support #guide .gblock ul li a {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    vertical-align: middle;
    color: var(--black);
    align-items: center;
}
#support #guide .gblock ul li:hover a {
    color: var(--accent);
    text-decoration: none;
}
#support #guide .gblock ul li a img {
    width: 90px;
    margin-right: 20px;
}
#support #guide .gblock ul li a p {
    width: calc(100% - 110px);
}
#support #guide .gblock + a {
    margin: 60px auto 120px;
}
#support #movie #youtube {
    width: 600px;
    height: 348px;
    margin: 0 auto;
    padding: 10px;
    display: block;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04);
}
#support #movie #youtube iframe {
    width: 580px;
    height: 326px;
    margin: 0 auto;
    border: none;
    display: block;
}
#support #contact {
    width: 100%;
    margin-bottom: 120px;
    padding: 20px 20px 30px;
    background: var(--main);
    text-align: center;
}
#support #contact p {
    font-size: 2.0rem;
}
#support #contact p + p {
    margin-bottom: 20px;
    font-weight: 500;
}
#support #contact p + p span:first-of-type {
    margin-left: 20px;
    font-size: 3.2rem;
}
#support #contact p + p span:last-of-type {
    margin-left: 20px;
    font-size: 1.8rem;
    font-weight: normal;
}
#support #plan table,
#support #plan table tr th,
#support #plan table tr td {
    border: none;
}
#support #plan table {
    margin-bottom: 80px;
}
#support #plan table tr th:not(:first-child),
#support #plan table tr:nth-child(2) td:nth-child(2),
#support #plan table tr:nth-child(2) td:nth-child(3),
#support #plan table tr:nth-child(3) td {
    text-align: center;
}
#support #plan table tr:nth-child(2) td:nth-child(2) {
    border-bottom: 1px solid var(--gray);
}
#support #plan table tr td span {
    font-size: 2.0rem;
}
#support #plan ul {
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#support #plan ul li {
    width: 550px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.06);
}
#support #plan ul li#plan1,
#support #plan ul li#plan2 {
    margin-bottom: 60px;
}
#support #plan ul li p {
    text-align: center;
}
#support #plan ul li p:first-of-type {
    width: 100%;
    height: 80px;
    margin-top: 0;
    border-radius: 8px 8px 0 0;
    color: var(--white);
    font-size: 3.8rem;
    font-weight: 500;
    line-height: 8.0rem;
}
#support #plan ul li#plan1 p:first-of-type {
    background: #ff9f71;
}
#support #plan ul li#plan2 p:first-of-type {
    background: #67c2b4;
}
#support #plan ul li p:nth-of-type(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.0rem;
    font-weight: 500;
}
#support #plan ul li#plan1 p:nth-of-type(2) {
    color: #ff9f71;
}
#support #plan ul li#plan2 p:nth-of-type(2) {
    color: #67c2b4;
}
#support #plan ul li#plan1 p:nth-of-type(2)::before,
#support #plan ul li#plan1 p:nth-of-type(2)::after,
#support #plan ul li#plan2 p:nth-of-type(2)::before,
#support #plan ul li#plan2 p:nth-of-type(2)::after {
    width: 16px;
    height: 2px;
    content: '';
}
#support #plan ul li#plan1 p:nth-of-type(2)::before,
#support #plan ul li#plan1 p:nth-of-type(2)::after {
    background: #ff9f71;
}
#support #plan ul li#plan2 p:nth-of-type(2)::before,
#support #plan ul li#plan2 p:nth-of-type(2)::after {
    background: #67c2b4;
}
#support #plan ul li#plan1 p:nth-of-type(2)::before,
#support #plan ul li#plan2 p:nth-of-type(2)::before {
    margin-right: 5px;
    transform: rotate(60deg);
}
#support #plan ul li#plan1 p:nth-of-type(2)::after,
#support #plan ul li#plan2 p:nth-of-type(2)::after {
    margin-left: 5px;
    transform: rotate(-60deg);
}
#support #plan ul li#plan1 p:nth-of-type(3),
#support #plan ul li#plan2 p:nth-of-type(3) {
    font-size: 2.5rem;
    font-weight: 600;
}
#support #plan ul li#plan1 p:nth-of-type(3) {
    color: #ff9f71;
}
#support #plan ul li#plan2 p:nth-of-type(3) {
    color: #67c2b4;
}
#support #plan ul li img {
    margin: 0 auto 30px;
    display: block;
}
#support #plan ul li table {
    width: 470px;
    margin: 0 auto 30px;
    border: 2px solid var(--white);
}
#support #plan ul li#plan1 table,
#support #plan ul li#plan1 table tr th {
    background: #ff9f71;
}
#support #plan ul li#plan2 table,
#support #plan ul li#plan2 table tr th {
    background: #67c2b4;
}
#support #plan ul li table tr th,
#support #plan ul li table tr td {
    padding: 8px;
    border: 2px solid var(--white);
    color: var(--white);
    text-align: center;
}
#support #plan ul li table tr th {
    font-weight: normal;
}
#support #plan ul li table tr td span {
    font-size: 1.4rem;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1190px) {
    #support #plan ul {
        width: 550px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1165px) {
    #support #guide .gblock ul {
        width: 760px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1015px) {
    #support #plan h2 + table tr,
    #support #plan h2 + table tr th,
    #support #plan h2 + table tr td {
        width: 100%;
        display: block;
    }
    #support #plan h2 + table tr:first-child {
        display: none;
    }
    #support #plan h2 + table tr td:nth-child(-n + 3) {
        height: 47px;
    }
    #support #plan h2 + table tr td:last-child {
        height: 68px;
    }
    #support #plan h2 + table tr td::before {
        width: 100px;
        float: left;
        margin-right: 10px;
        background: var(--light-gray);
        font-size: 1.6rem;
        text-align: center;
        content: attr(data-label);
    }
    #support #plan h2 + table tr td div {
        width: calc(100% - 110px);
        float: right;
    }
}
@media screen and (max-width: 815px) {
    #support #guide .gblock ul {
        width: 360px;
    }
    #support #guide .gblock h3 {
        text-align: center;
    }
}
@media screen and (max-width: 660px) {
    #support #movie #youtube {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 1.73 / 1;
    }
    #support #contact p + p span:last-of-type {
        display: block;
    }
}
@media screen and (max-width: 635px) {
    #support #plan ul,
    #support #plan ul li {
        width: 100%;
        max-width: 550px;
    }
    #support #plan ul li table {
        width: calc(100% - 40px);
        max-width: 470px;
    }
    #support #plan ul li#plan2 {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 540px) {
    #support #support-type {
        display: none;
    }
    #support .sblock h2 {
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 500px) {
    #support #guide .gblock h3 {
        text-align: left;
    }
    #support #guide .gblock ul,
    #support #guide .gblock ul li {
        width: 100%;
    }
    #support #contact p + p span:first-of-type {
        margin: 0 0 10px 0;
        display: block;
        font-size: 2.6rem;
    }
    #support #plan h2 + table tr td::before {
        width: 100%;
        margin: 0 0 10px 0;
    }
    #support #plan h2 + table tr td div {
        width: 100%;
        float: none;
    }
    #support #plan h2 + table tr td:nth-child(-n + 3),
    #support #plan h2 + table tr td:last-child {
        height: auto;
    }
    #support #plan ul li p:first-of-type {
        height: 60px;
        font-size: 2.4rem;
        line-height: 6.0rem;
    }
    #support #plan ul li#plan1 p:nth-of-type(3),
    #support #plan ul li#plan2 p:nth-of-type(3) {
        font-size: 1.8rem;
    }
    #support #plan ul li table {
        width: calc(100% - 20px);
    }
    #support #plan ul li table tr th,
    #support #plan ul li table tr td {
        font-size: 1.4rem;
    }
}

/*===================================================

 13.品質基準・商品保証 #quality

===================================================*/
#quality h2 {
    margin-bottom: 30px;
}
#quality h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 500;
}
#quality h3::before {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    content: '';
}
#quality .qblock {
    margin-bottom: 80px;
}
#quality .qblock div {
    margin: 0 0 50px 0;
}
#quality .qblock p.red {
    margin: 0;
    font-size: 1.8rem;
}
#quality .qblock ul {
    margin-top: 20px;
}
#quality .qblock ul li:not(:last-child) {
    margin-bottom: 5px;
}
#quality .qblock ul + ul {
    margin-top: 30px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}
#quality .qblock ul + ul li {
    margin: 0;
    height: 60px;
}
#quality .qblock ul + ul li:first-child {
    margin: 0 30px 0 0;
}
#quality .qblock ul + ul li:last-child p {
    margin: 0;
}
#quality .qblock ul + ul li:last-child p:first-child {
    font-weight: 500;
}
#quality .qblock ul + ul li:last-child p:last-child span {
    margin-right: 20px;
    font-size: 2.8rem;
    font-weight: 500;
}
#quality #warranty {
    margin-bottom: 100px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 725px) {
    #quality .qblock ul + ul li:first-child {
        margin: 0 0 30px 0;
    }
    #quality .qblock ul + ul li {
        width: 100%;
    }
}
@media screen and (max-width: 540px) {
    #quality #quality-type {
        display: none;
    }
    #quality .qblock p.red {
        font-size: 1.6rem;
    }
}

/*===================================================

 14.マンガで分かるクラウド法人名刺 #comic

===================================================*/
#comic .title + p {
    margin-bottom: 50px;
    text-align: center;
}
#comic #cblock {
    width: 100%;
    margin-bottom: 80px;
    position: relative;
}
#comic #cblock .page {
    position: absolute;
    top: 350px;
}
#comic #cblock .page span {
    width: 60px;
    height: 60px;
    margin: 0 auto 5px;
    background: var(--accent);
    border-radius: 50%;
    display: block;
    position: relative;
}
#comic #cblock .page:hover span {
    opacity: 0.9;
}
#comic #cblock .page span::after {
    width: 16px;
    height: 16px;
    margin: auto;
    border-top: 3px solid var(--white);
    border-right: 3px solid var(--white);
    border-radius: 2px;
    box-sizing: content-box;
    transition: 0.6s cubic-bezier;
    content: '';
    position: absolute;
    top: 20px;
    transform: translateX(calc(50% - 8px));
    cursor: pointer;
}
#comic #cblock #back {
    left: 130px;
    display: none;
}
#comic #cblock #back span::after {
    right: 15px;
    rotate: 225deg;
}
#comic #cblock #next {
    right: 130px;
}
#comic #cblock #next span::after {
    left: 15px;
    rotate: 45deg;
}
#comic #cblock div {
    width: 500px;
    height: 706px;
    margin: 0 auto;
    display: block;
}
#comic #cblock img {
    width: 100%;
    display: block;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
}
#comic #cblock img:not(.show) {
    display: none;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
    #comic #cblock .page {
        font-size: 0;
    }
    #comic #cblock #back {
        left: 50px;
    }
    #comic #cblock #next {
        right: 50px;
    }
}
@media screen and (max-width: 770px) {
    #comic .title + p {
        width: calc(100% - 40px);
        margin: 0 auto 50px;
    }
    #comic #cblock {
        padding-bottom: 140px;
    }
    #comic #cblock .page {
        font-size: 1.6rem;
        top: auto;
        bottom: 0;
    }
    #comic #cblock #back {
        left: 150px;
    }
    #comic #cblock #next {
        right: 150px;
    }
}
@media screen and (max-width: 555px) {
    #comic #cblock {
        width: calc(100% - 40px);
        margin: 0 auto 80px;
    }
    #comic #cblock div {
        width: 100%;
        height: auto;
        aspect-ratio: 0.7 / 1;
    }
    #comic #cblock #back {
        left: 50px;
    }
    #comic #cblock #next {
        right: 50px;
    }
}
@media screen and (max-width: 500px) {
    #comic .title h1 {
        font-size: 2.0rem;
    }
    #comic .title + p {
        font-size: 1.4rem;
    }
}

/*===================================================

 15.よくある質問 #faq

===================================================*/
#faq .title + p {
    margin-bottom: 50px;
    line-height: 3.2rem;
    text-align: center;
}
#faq .link-area {
    margin-bottom: 100px;
}
#faq .mcontents #fblock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#faq .mcontents .fblock {
    width: 340px;
}
#faq .mcontents .genre {
    margin-bottom: 60px;
}
#faq .mcontents .genre h2 {
    font-size: 2.0rem;
}
#faq .mcontents .genre ul li:not(:last-child) {
    margin-bottom: 15px;
}
#faq .mcontents .genre ul li a {
    padding-left: 1.0em;
    display: inline-block;
    color: var(--black);
    font-size: 1.5rem;
    text-indent: -1.0em;
}
#faq .mcontents #fblock ul li a:hover {
    color: var(--accent);
    text-decoration: none;
}
#faq #fblock + .link-area {
    margin-bottom: 0;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1130px) {
    #faq .mcontents #fblock {
        width: 720px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 775px) {
    #faq .mcontents #fblock,
    #faq .mcontents .fblock {
        width: 100%;
    }
}
@media screen and (max-width: 605px) {
    #faq .link-area {
        width: 240px;
    }
    #faq .link-area li:first-child {
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 500px) {
    #faq .title + p {
        font-size: 1.4rem;
    }
}

/*===================================================

 16.よくある質問 回答 #answer

===================================================*/
#answer .fblock {
    display: none;
}
#answer .category {
    margin-bottom: 60px;
    padding: 5px 10px;
    background: var(--accent);
    display: inline;
    color: var(--white);
    font-size: 1.4rem;
    text-align: center;
}
#answer h1 {
    margin: 20px 0;
    font-size: 2.4rem;
}
#answer .answer {
    margin-bottom: 80px;
}
#answer .answer p {
    line-height: 3.0rem;
}
#answer .answer p.connection {
    margin-top: 40px;
}
#answer .link {
    margin-bottom: 80px;
    padding: 20px;
    background: var(--main);
    text-align: center;
}
#answer .link p {
    margin-bottom: 30px;
    line-height: 3.2rem;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 630px) {
    #answer .mcontents .link-area {
        width: 240px;
    }
    #answer .mcontents .link-area li {
        margin-bottom: 20px;
    }
    #answer .mcontents .link-area li + li {
        margin-left: 0;
    }
}
@media screen and (max-width: 500px) {
    #answer h1{
        font-size: 1.8rem;
    }
    #answer .link {
        margin-bottom: 0;
    }
}

/*===================================================

 17.オンライン相談 #consultation

===================================================*/
#consultation .title + ul {
    margin-bottom: 30px;
}
#consultation .title + ul li:not(:last-child) {
    margin-bottom: 5px;
}
#consultation .title + ul li span {
    margin-right: 0.25em;
}
#consultation .title + ul + div {
    width: 100%;
    margin-bottom: 50px;
    padding: 10px 20px;
    background: var(--light-gray);
}
#timerex_calendar {
    margin-bottom: 80px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 840px) {
    #timerex_calendar > div {
        min-width: 100% !important;
    }
}
@media screen and (max-width: 615px) {
    #consultation .title + ul li {
        padding-left: 1.0em;
        text-indent: -1.0em;
    }
}
@media screen and (max-width: 500px) {
    #timerex_calendar {
        margin-bottom: 50px;
    }
}

/*===================================================

 18.お問い合わせ #contact

===================================================*/
#contact .mcontents .title + p {
    margin-bottom: 50px;
    line-height: 2.8rem;
    text-align: center;
}
#contact .title + p + img {
    display: none;
}
#contact .link-area {
    margin-bottom: 60px;
}
#contact .link-area + p {
    font-size: 1.4rem;
    text-align: center;
}

/*===================================================

 19.資料請求 #document

===================================================*/
#document .title + p {
    display: none;
}
#document .title + p + img {
    margin-bottom: 50px;
}
#document .link-area {
    margin-bottom: 60px;
}
#document .link-area + p {
    font-size: 1.4rem;
    text-align: center;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 840px) {
    #document .title + p + img {
        width: 100%;
        height: auto;
    }
}

/*===================================================

 20.料金表 請求 #price-list

===================================================*/
#price-list .title + p,
#price-list .title + p + img {
    display: none;
}
#price-list .link-area {
    margin-bottom: 60px;
}
#price-list .link-area + p {
    font-size: 1.4rem;
    text-align: center;
}

/*===================================================

 21.お問い合わせ 完了（共通） #complete

===================================================*/
#complete .mcontents .cblock {
    display: none;
}
#complete .mcontents .title p {
    margin: 0 0 10px;
}
#complete .mcontents p {
    text-align: center;
}
#complete .title + p {
    margin-bottom: 40px;
    font-size: 1.8rem;
    font-weight: 500;
}
#complete .title + p + p {
    margin-bottom: 20px;
    font-size: 1.6rem;
    line-height: 3.2rem;
}
#complete .title + p + p + p {
    margin-bottom: 50px;
    font-size: 1.6rem;
}
#complete .mcontents p.att {
    margin-bottom: 60px;
    color: #ff2929;
    font-size: 1.6rem;
    line-height: 2.8rem;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 840px) {
    #complete .title + p + p br {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    #complete .title + p {
        font-size: 1.6rem;
    }
    #complete .title + p + p,
    #complete .title + p + p + p {
        font-size: 1.5rem;
    }
    #complete .mcontents p.att {
        font-size: 1.3rem;
    }
}

/*===================================================

 22.資料請求 完了 #document-complete

===================================================*/
#document-complete p + ul {
    margin-bottom: 50px;
}
#document-complete .mcontents p.att {
    margin-bottom: 100px;
}
#document-complete .dblock {
    margin-bottom: 60px;
}
#document-complete .inner-1160 .dblock:last-of-type {
    margin-bottom: 80px;
}
#document-complete .dblock ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#document-complete .dblock ul li {
    width: 200px;
    margin: 0 40px 40px 0;
}
#document-complete .dblock ul li:last-child {
    margin-right: 0 !important;
}
#document-complete .dblock ul li h3 {
    margin-bottom: 10px;
}
#document-complete .dblock ul li img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#document-complete .dblock ul li .btn {
    width: 200px;
    height: 46px;
    line-height: 4.2rem;
}
@media screen and (max-width: 788px) {
    #document-complete .dblock ul li:nth-child(3) {
        margin-right: 0;
    }
}
@media screen and (max-width: 748px) {
    #document-complete .dblock ul {
        width: 440px;
        justify-content: space-between;
    }
    #document-complete .dblock ul li {
        margin: 0 0 40px 0;
    }
}
@media screen and (max-width: 494px) {
    #document-complete .dblock ul {
        width: 200px;
        margin: 0 auto;
    }
    #document-complete .inner-1160 .dblock:last-of-type {
        margin-bottom: 60px;
    }
}

/*===================================================

 23.料金表請求 完了 #price-list-complete

===================================================*/


/*===================================================

 24.資料ダウンロード #document-download

===================================================*/
#document-download .title + p {
    margin-bottom: 50px;
    line-height: 3.2rem;
    text-align: center;
}
#document-download .title + p + ul {
    margin-bottom: 100px;
}
#document-download .dblock {
    margin-bottom: 60px;
}
#document-download .inner-1160 .dblock:last-of-type {
    margin-bottom: 120px;
}
#document-download .dblock ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#document-download .dblock ul li {
    width: 200px;
    margin: 0 40px 40px 0;
}
#document-download .dblock ul li:last-child {
    margin-right: 0 !important;
}
#document-download .dblock ul li h3 {
    margin-bottom: 10px;
}
#document-download .dblock ul li img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#document-download .dblock ul li .btn {
    width: 200px;
    height: 46px;
    line-height: 4.2rem;
}
@media screen and (max-width: 788px) {
    #document-download .dblock ul li:nth-child(3) {
        margin-right: 0;
    }
}
@media screen and (max-width: 748px) {
    #document-download .dblock ul {
        width: 440px;
        justify-content: space-between;
    }
    #document-download .dblock ul li {
        margin: 0 0 40px 0;
    }
}
@media screen and (max-width: 494px) {
    #document-download .dblock ul {
        width: 200px;
        margin: 0 auto;
    }
    #document-download .inner-1160 .dblock:last-of-type {
        margin-bottom: 60px;
    }
}

/*===================================================

 25.お知らせ #news

===================================================*/
#news .inner-1000 .title {
    margin-bottom: 100px;
}
#news #news-list {
    width: 100%;
    margin-bottom: 100px;
}
#news #news-list li {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid var(--gray);
    font-size: 1.8rem;
}
#news #news-list li .date {
    margin-right: 80px;
    color: var(--accent);
    font-weight: 500;
}
#news #news-list li:first-child {
    padding-top: 0;
}
#news #news-list li:last-child {
    padding-bottom: 0;
    border: none;
}
#news #news-list li a {
    color: var(--black);
}
#news #news-list li a:hover {
    color: var(--accent);
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
    #news #news-list li .date {
        width: 100%;
        margin: 0 0 5px 0;
        display: block;
    }
}
@media screen and (max-width: 500px) {
    #news .inner-1000 .title {
        margin-bottom: 50px;
    }
    #news #news-list li {
        font-size: 1.6rem;
    }
}

/*===================================================

 26.お知らせ詳細 #news-info

===================================================*/
#news-info .mcontents h1 {
    font-size: 2.2rem;
}
#news-info .mcontents h2 {
    font-size: 2.0rem;
}
#news-info .mcontents p.date {
    font-weight: 500;
    color: #555;
}
#news-info .mcontents p:not(.date) {
    margin-bottom: 10px;
    line-height: 3.2rem;
}
#news-info .mcontents img {
    max-width: 600px;
    height: auto;
    margin: 20px auto;
    display: block;
}
#news-info .mcontents p.circle {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: 500;
}
#news-info .mcontents p.circle2 {
    font-size: 1.8rem;
    font-weight: 500;
}
#news-info .mcontents .line {
    background-image: linear-gradient(to bottom, transparent, transparent 70%, var(--base) 70%, var(--base));
    font-weight: 500;
}
#news-info .mcontents .bold {
    font-weight: 500;
}
#news-info .mcontents .nblock {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}
#news-info .mcontents .nblock + .nblock {
    border-top: none;
}
#news-info .mcontents .nblock div {
    padding: 5px 0;   
}
#news-info .mcontents .nblock p {
    margin: 10px 0;
}
#news-info .mcontents table {
    margin: 40px 0 0;
}
#news-info .mcontents p.circle + table {
    margin: 0 0 40px 0;
}
#news-info .mcontents table tr th {
    width: 180px;
}
#news-info .mcontents table tr td span.small {
    font-size: 1.3rem;
}
#news-info .mcontents table + a {
    display: block;
    text-align: center;
}
#news-info .link-area {
    margin: 60px auto 0;
}
@media screen and (max-width: 1040px) {
    #news-info .mcontents h1 {
        font-size: 2.0rem;
    }
}
@media screen and (max-width: 640px) {
    #news-info .mcontents img {
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    #news-info .mcontents table tr,
    #news-info .mcontents table tr th,
    #news-info .mcontents table tr td {
        width: 100%;
        display: block;
    }
    #news-info .mcontents table tr th {
        padding: 8px;
        border-right: none;
    }
}

/*===================================================

 27.イベント・セミナー情報 #event

===================================================*/
#event .title {
    margin-bottom: 100px;
}
#event #event-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#event #event-list::after {
    width: 340px;
    content: '';
    display: block;
}
#event #event-list li {
    width: 340px;
    margin-bottom: 70px;
}
#event #event-list li a {
    color: var(--black);
}
#event #event-list li a:hover {
    text-decoration: none;
}
#event #event-list li a:hover img {
    opacity: 0.9;
}
#event #event-list li img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
#event #event-list li h2 {
    font-size: 1.9rem;
}
#event #event-list li a:hover h2 {
    color: var(--accent);
}
#event #event-list .tags {
    display: flex;
}
#event #event-list .tags span {
    padding: 3px 7px;
    background: var(--main);
    display: block;
    color: var(--brown);
    font-size: 1.3rem;
    font-weight: 600;
}
#event #event-list .tags span:not(:last-child) {
    margin-right: 10px;
}
#event #event-list .tags span + span {
    background: var(--light-gray);
    color: var(--black);
}
#event #event-list .date {
    font-size: 1.8rem;
    font-weight: 500;
}
#event #event-list .date span {
    font-size: 1.4rem;
}
#event #event-list li#no-event {
    width: 100%;
    margin-bottom: 100px;
    text-align: center;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1125px) {
    #event #event-list {
        width: 720px;
        margin: 0 auto 70px;
    }
}
@media screen and (max-width: 775px) {
    #event #event-list,
    #event #event-list li {
        width: 100%;
    }
    #event #event-list li:last-child {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 500px) {
    #event .title {
        margin-bottom: 50px;
    }
    #event #event-list li h2 {
        font-size: 1.7rem;
    }
}

/*===================================================

 28.イベント・セミナー詳細 #info

===================================================*/
#info .title {
    margin-bottom: 100px;
}
#info #iblock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
#info #information {
    width: 680px;
}
#info #information h1 {
    margin-bottom: 30px;
    font-size: 2.2rem;
}
#info #information img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
#info #information table {
    margin-top: 40px;
}
#info #information table tr th {
    width: 136px;
}
#info #information table tr:first-child td {
    font-weight: 500;
}
#info #information table tr td span {
    font-size: 1.4rem;
}
#info #form {
    width: 420px;
    padding: 25px;
    background: var(--sub);
}
#info #form h2 {
    margin: 0 auto 30px;
    font-size: 2.0rem;
    text-align: center;
}
#info #form div {
    margin-bottom: 20px;
}
#info #form div:last-of-type {
    margin-bottom: 10px;
}
#info #form div p {
    margin: 0 0 5px 0;
    font-weight: 500;
}
#info #form div input[type='text'],
#info #form div input[type='email'] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--gray);
    border-radius: 6px;
}
#info #form div label span {
    font-size: 1.5rem;
}
#info #form input[type='submit'] {
    width: 240px;
    max-width: 240px;
    height: 60px;
    margin: 30px auto 0;
    background: var(--accent);
    border: 2px solid #fffade;
    border-radius: 30px;
    display: block;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 5.6rem;
    text-align: center;
    transition: 0.5s;
    position: relative;
}
#info #form input[type='submit'].disabled {
    opacity: 0.6;
}
#info #form input[type='submit']:not(.disabled):hover {
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    transition: 0.5s;
}
#info .wpcf7-form .wpcf7-spinner {
    display: none !important;
}
#info .wpcf7 form .wpcf7-response-output {
    margin: 50px 0 0 !important;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1160px) {
    #info #information {
        width: 100%;
        max-width: 640px;
        margin: 0 auto 60px;
    }
    #info #form {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 715px) {
    #info #information h1 {
        font-size: 2.0rem;
    }
}
@media screen and (max-width: 500px) {
    #info #information h1 {
        font-size: 1.8rem;
    }
    #info #information table tr,
    #info #information table tr th,
    #info #information table tr td {
        width: 100%;
        display: block;
    }
    #info #information table tr th {
        padding: 8px;
        border-right: none;
    }
}

/*===================================================

 29.会社概要 #company

===================================================*/
#company .mcontents table {
    margin-bottom: 80px;
    border: none;
}
#company .mcontents table tr th,
#company .mcontents table tr td {
    padding: 20px;
    border: none;
    letter-spacing: 0.1em;
}
#company .mcontents table tr th {
    width: 25%;
    background: none;
    border-bottom: 1px solid var(--accent);
}
#company .mcontents table tr td {
    width: 75%;
    border-bottom: 1px solid var(--gray);
}
#company .mcontents table tr td iframe {
    margin-top: 10px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #company .mcontents table tr th {
        padding: 20px 10px 0 10px;
    }
}
@media screen and (max-width: 500px) {
    #company .mcontents table tr,
    #company .mcontents table tr th,
    #company .mcontents table tr td {
        width: 100%;
        display: block;
    }
    #company .mcontents table tr th {
        padding: 20px 0 0 0;
        border: none;
    }
    #company .mcontents table tr td {
        padding: 10px 0 20px;
    }
}

/*===================================================

 30.個人情報保護方針 #personal

===================================================*/
#personal .pblock h2 {
    margin: 40px 0 20px;
    font-size: 2.0rem;
}
#personal .pblock ul {
    margin-bottom: 80px;
}
#personal .pblock ul li {
    margin-bottom: 20px;
    padding-left: 1.0em;
    text-indent: -1.5em;
}
#personal .title + .pblock {
    margin-bottom: 60px;
}
#personal .pblock div p {
    margin: 5px 0;
    text-align: right;
}
#personal .pblock div + div p {
    text-align: left;
}
#personal .pblock + .pblock {
    margin-bottom: 80px;
    padding: 15px;
    background: var(--light-gray);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#personal .pblock + .pblock img {
    margin-right: 30px;
}
#personal .pblock + .pblock p {
    margin: 15px 0 0 0;
    line-height: 3.4rem;
    text-align: left;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #personal .pblock + .pblock img {
        margin: 0 auto;
    }
    #personal .pblock + .pblock p {
        width: 100%;
        line-height: 2.8rem;
    }
}

/*===================================================

 31.特定商取引法に基づく表記 #law

===================================================*/
#law .mcontents table {
    margin-bottom: 80px;
    border: none;
}
#law .mcontents table  tr th,
#law .mcontents table  tr td {
    padding: 20px;
    border: none;
    letter-spacing: 0.1em;
}
#law .mcontents table  tr th {
    width: 25%;
    border-bottom: 1px solid var(--accent);
    background: none;
}
#law .mcontents table  tr td {
    width: 75%;
    border-bottom: 1px solid var(--gray);
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #law .mcontents table tr,
    #law .mcontents table tr th,
    #law .mcontents table tr td {
        width: 100%;
        display: block;
    }
    #law .mcontents table tr th {
        padding: 20px 0 0 0;
        border: none;
    }
    #law .mcontents table tr td {
        padding: 10px 0 20px;
    }
}

/*===================================================

 32.プライバシーポリシー #privacy

===================================================*/
#privacy h2 {
    margin-bottom: 50px;
    font-size: 1.6rem;
    font-weight: normal;
}
#privacy .sec {
    margin-bottom: 40px;
}
#privacy .sec h3 {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
}
#privacy .sec h4 {
    margin: 20px 0 5px;
}
#privacy .sec p {
    margin: 5px 0;
}
#privacy .sec div {
    margin: 20px 0 20px 10px;
}
#privacy .sec ol {
    padding-left: 20px;
}
#privacy .sec ol li {
    margin-bottom: 5px;
}
#privacy table {
    margin: 20px 0;
}
#privacy #sec7 p,
#privacy #sec7 ul {
    margin-bottom: 10px;
}
#privacy #sec7 ul li a,
#privacy #sec7 div a {
    overflow-wrap: anywhere;
}
#privacy #sec7 div:last-of-type a:first-of-type {
    margin-bottom: 10px;
    display: block;
}
#privacy #sec8 p:nth-of-type(2) {
    margin: 10px 0;
}
#privacy #sec9 + div {
    text-align: right;
}
#privacy #sec9 + div p {
    margin: 5px 0;
}
#privacy #sec9 + div p span {
    margin: 0 0.25em 0 0.5em;
}
#privacy #sec9 + div + div {
    margin-bottom: 80px;
}
#privacy #sec9 + div + div p {
    margin: 5px 0;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1040px) {
    #privacy .mcontents table {
        border: none;
    }
    #privacy .mcontents table tr,
    #privacy .mcontents table tr th,
    #privacy .mcontents table tr td {
        width: 100%;
        display: block;
    }
    #privacy .mcontents table tr th {
        border-bottom: none;
    }
    #privacy .mcontents table tr td {
        border-left: 1px solid var(--gray);
        border-right: 1px solid var(--gray);
        border-bottom: none;
    }
    #privacy .mcontents table tr:last-child td:last-child {
        border-bottom: 1px solid var(--gray);
    }
}
@media screen and (max-width: 500px) {
    #privacy .sec h3 {
        font-size: 1.6rem;
    }
    #privacy #sec9 + div {
        margin-bottom: 50px;
    }
}

/*===================================================

 33.利用規約 #members

===================================================*/
#members .mblock {
    margin-bottom: 80px;
}
#members .mblock h2 {
    margin-bottom: 50px;
    font-size: 1.6rem;
    font-weight: normal;
}
#members .sec {
    margin-bottom: 50px;
}
#members .sec h3 {
    font-weight: 500;
}
#members .sec ol {
    padding-left: 1.0em;
}
#members .sec ol li {
    margin-bottom: 10px;
    padding-left: 0.25em;
}
#members .sec ol li ul {
    margin: 20px 0;
}
#members .sec ol li ul li {
    padding-left: 1.0em;
    text-indent: -1.25em;
}
#members .sec ol li ul li span {
    margin-right: 0.25em;
}
#members #sec25 + div p {
    margin: 0 0 5px 0;
    text-align: right;
}

/*===================================================

 34.関連サービス #related

===================================================*/
#related #rblock {
    margin-bottom: 80px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#related #rblock li {
    width: 460px;
}
#related #rblock li .rtitle {
    margin: 0 0 40px 0;
    font-size: 2.2rem;
    font-weight: 500;
}
#related #rblock li img {
    margin: 0 auto 30px;
    display: block;
}
#related #rblock li p {
    margin-bottom: 20px;
    line-height: 2.8rem;
}
#related #rblock li a {
    display: block;
    text-align: center;
}
#related #rblock li a + a {
    margin-top: 10px;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
    #related #rblock {
        width: 460px;
        margin: 0 auto 80px;
    }
    #related #rblock li:first-child {
        margin-bottom: 80px;
    }
}
@media screen and (max-width: 500px) {
    #related #rblock {
        width: 100%;
    }
}

/*===================================================

 35.サイトマップ #sitemap

===================================================*/
#sitemap .mcontents a#top {
    width: 270px;
    margin: 0 auto 80px;
    display: block;
}
#sitemap .mcontents a#top:hover {
    opacity: 0.8;
}
#sitemap .mcontents #sblock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#sitemap .mcontents .sblock {
    width: 330px;
}
#sitemap .mcontents .genre {
    margin-bottom: 50px;
}
#sitemap .mcontents .genre h2 {
    font-size: 2.0rem;
}
#sitemap .mcontents .genre ul li {
    margin-bottom: 15px;
}
#sitemap .mcontents .genre ul li a {
    color: var(--black);
}
#sitemap .mcontents ul li a:hover {
    color: var(--accent);
    text-decoration: none;
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 1070px) {
    #sitemap .mcontents #sblock {
        width: 700px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 740px) {
    #sitemap .mcontents #sblock,
    #sitemap .mcontents .sblock {
        width: 100%;
    }
}

/*===================================================

 37.404 #error404

===================================================*/
#error404 .mcontents p {
    text-align: center;
}
#error404 .mcontents p:first-of-type {
    margin: 0;
    color: var(--brown);
    font-size: 18.0rem;
    font-weight: 800;
    line-height: 20.0rem;
}
#error404 .mcontents p:nth-of-type(2) {
    color: var(--brown);
    margin: -30px 0 30px;
    font-size: 5.7rem;
}
#error404 .mcontents p:last-of-type {
    margin-bottom: 60px;
}
@media screen and (max-width: 500px) {
    #error404 .mcontents {
        padding: 96px 0 40px;
    }
    #error404 .mcontents p:first-of-type {
        font-size: 13.0rem;
        line-height: 16.0rem;
    }
    #error404 .mcontents p:nth-of-type(2) {
        margin: -20px 0 30px;
        font-size: 4.0rem;
    }
    #error404 .mcontents p:last-of-type {
        width: calc(100% - 40px);
        margin: 0 auto 60px;
        font-size: 1.4rem;
    }
}

/*===================================================

 38.AUTHOR .author

===================================================*/
body.author .title + img {
    margin: 0 auto 30px;
    display: block;
}
body.author .mcontents img + p {
    margin-bottom: 100px;
}
body.author .mcontents h2 {
    margin: 0 0 70px 0;
    font-size: 3.0rem;
    font-weight: 600;
    text-align: center;
} 
body.author #news-list {
    width: 100%;
    margin-bottom: 100px;
}
body.author #news-list li {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid var(--gray);
    font-size: 1.8rem;
}
body.author #news-list li .date {
    width: 93px;
    margin-right: 80px;
    display: inline-block;
    color: var(--accent);
    font-weight: 500;
}
body.author #news-list li:first-child {
    padding-top: 0;
}
body.author #news-list li:last-child {
    padding-bottom: 0;
    border: none;
}
body.author #news-list li a {
    color: var(--black);
}
body.author #news-list li a:hover {
    color: var(--accent);
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
    body.author #news-list li .date {
        width: 100%;
        margin: 0 0 5px 0;
        display: block;
    }
}
@media screen and (max-width: 500px) {
    body.author .inner-1000 .title + p {
        margin-bottom: 50px;
    }
    body.author #news-list li {
        font-size: 1.6rem;
    }
}

/*===================================================

 39.CATEGORY .category

===================================================*/
body.category .mcontents h1 {
    font-size: 3.0rem !important;
}
body.category .mcontents .title + p {
    margin-bottom: 100px !important;
    text-align: center;
}
body.category .mcontents h2 {
    margin: 0 0 70px 0;
    font-size: 3.0rem !important;
    font-weight: 600;
    text-align: center;
} 
body.category #category-list {
    width: 100%;
    margin-bottom: 100px;
}
body.category #category-list li {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid var(--gray);
    font-size: 1.8rem;
}
body.category #category-list li .date {
    width: 93px;
    margin-right: 80px;
    display: inline-block;
    color: var(--accent);
    font-weight: 500;
}
body.category #category-list li:first-child {
    padding-top: 0;
}
body.category #category-list li:last-child {
    padding-bottom: 0;
    border: none;
}
body.category #category-list li a {
    color: var(--black);
}
body.category #category-list li a:hover {
    color: var(--accent);
}
/*-------------------------------------------------------------------------------------
 responsive
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
    body.category #category-list li .date {
        width: 100%;
        margin: 0 0 5px 0;
        display: block;
    }
}
@media screen and (max-width: 500px) {
    body.category .inner-1000 .title + p {
        margin-bottom: 50px;
    }
    body.category #category-list li {
        font-size: 1.6rem;
    }
}

/*===================================================

 40.マニュアル #manual

===================================================*/
#manual .content,
.manual-page .content {
    margin-bottom: 80px;
}
#manual .content ul,
.manual-page .content ul {
    padding-left: 1.5em;
}
#manual .content ul li,
.manual-page .content ul li {
    margin-bottom: 10px;
    list-style: inherit;
}
#manual .content ol,
.manual-page .content ol {
    padding-left: 1.5em;
}