@charset 'utf-8';
/* recruit
------------------------------------------------ */
.page-headline{ background-image: url(img/visual.jpg); }
.dev-case--container{ width: 100%; max-width: 1366px; margin: 0 auto; padding-top: 93px; }
.dev-case--menu{ width: 423px; background-color: #fff; padding: 22px 46px 16px 80px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.dev-case--menu-list{ }
.dev-case--menu-list li{}
.dev-case--menu-list li+li{ border-top: 1px solid #D6D6D6; }
.dev-case--menu-list li a{ font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(70 / 16); transition: .2s ease; text-decoration: none; }
.dev-case--menu-list li a:hover,
.dev-case--menu-list li.on a{ color:#32A0EF; }

/* [data-lang="en"]  */
[data-lang="en"] .dev-case--menu-list li a{ display: block; padding: 15px 0; line-height: calc(20 / 16); }

.dev-case--content{ padding-left: 20px; }
.dev-case--content h2{ margin-left: -20px; margin-bottom: 30px; padding:16px 0 16px 17px; font-size: 2.2rem; font-weight: bold; text-transform: capitalize; letter-spacing: 0.072em; line-height: calc(27 / 22); border-left:6px solid #32A0EF; border-bottom:1px solid #32A0EF; }
.dev-case--content{ font-size: 1.6rem; font-weight: 400; line-height: calc(30 / 16); }
.block+.block,
.sg-block-group+.sg-block-group{ margin-top: 100px; }
.dev-case--content p{ margin-bottom: 25px; }
.dev-case--content p strong{ display: inline-block; line-height: calc(50 / 16); }
.dev-case--content a{ text-decoration: underline; color:#1F85CF; }
.dev-case--content a:hover{ text-decoration: none; }
.dev-case--content ul{ padding-left: 2.2rem; list-style: disc; }
.dev-case--content ol{ padding-left: 1.5rem; list-style: decimal; }
.dev-case--content ul li+li{ margin-top: 8px; }
.dev-case--content ol li+li{ margin-top: 8px; }

@media only screen and (min-width: 769px) {
    .dev-case--container{ display: flex; flex-wrap: wrap; align-items: flex-start; padding-right: 20px; }
    .dev-case--content{ margin-left: 76px; width: calc(100% - 500px); max-width: 783px; }
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .dev-case--menu{ width: 325px; padding: 22px 20px 16px 40px; }
    .dev-case--menu-list li a{ font-size: 1.4rem; }
    .dev-case--content{ margin-left: 50px; width: calc(100% - 375px); }
}

@media only screen and (max-width: 768px) {
    .page-headline{ background-image: url(img/visual-sp.jpg); }
    .dev-case--container{ padding:44px 20px 0; }
    .dev-case--content{ padding: 0; font-size: 1.4rem; line-height: calc(50 / 28); }
    .dev-case--content h2{ margin-left: 0; margin-bottom: 25px; padding: 8px 0 8px 10px; font-size: 1.5rem; border-left-width: 5px; }
    .block+.block,
    .sg-block-group+.sg-block-group{ margin-top:60px; }
    .dev-case--content p{ margin-bottom: 20px; }
    .dev-case--content p strong{ line-height: calc(80 / 28); }
    .dev-case--content ul{ padding-left: 1.9rem; }
    .dev-case--content ul li+li{ margin-top: 11px; }
    .dev-case--content ol li+li{ margin-top: 11px; }
}

/* case-table-01
-------------------------------------------------*/
.sg-block-table { overflow-x: auto; }
.sg-block-table { overflow-x: auto; }
.sg-block-table table { border-collapse: collapse; width: 100%; }
.has-fixed-layout { table-layout: fixed !important; }
.has-text-align-center { text-align: center !important; }

/* block-columns */
.sg-block-columns { display: flex; flex-wrap: wrap; margin-bottom: 1.75em; box-sizing: border-box; gap: 2em; }
.sg-block-column { flex-grow: 1; flex-basis: 0; min-width: 0; word-break: break-word; }
.sg-block-column[style*="flex-basis"] { flex-grow: 0; }

@media (min-width: 782px) {
    .sg-block-columns { flex-wrap: nowrap !important; }
}

@media (max-width: 781px) {
    .sg-block-columns:not(.is-not-stacked-on-mobile) > .sg-block-column { flex-basis: 100% !important; }
}

.case-table-01 table{ }
.case-table-01 table tr:first-child td,
.case-table-01 table tr td:first-child{ color:#fff; background-color: #319FEE; }
.case-table-01 table tr td{ padding: 11px 0; font-size: 1.6rem; line-height: calc(27 / 18); border:1px solid #D1ECFF; }
.case-linkgroup{ font-size: 1.8rem; }
.case-linkgroup a{ display: inline-block; }
.case-linkgroup a:not(:first-of-type){ margin-top: 5px; }

.case-table-02 table tr td:first-child{ width: 20%; color:#fff; background-color: #319FEE; }
.case-table-02 table tr td{ padding: 11px 0; font-size: 1.6rem; line-height: calc(27 / 18); border:1px solid #D1ECFF; vertical-align: top; }
.case-table-02 table tr td:last-child{ padding: 11px 30px; }

@media only screen and (max-width: 768px) {
    .case-table-01{ margin-top: 45px; }
    .case-table-01 table tr td{ padding: 8px 12px; font-size: 1.4rem; line-height: calc(38 / 28);}
    .case-table-02{ margin-top: 45px; }
    .case-table-02 table tr td{ padding: 8px 12px; display: block; width: 100%; text-align: left; font-size: 1.3rem; line-height: calc(38 / 28);}
    .case-table-02 table tr td:last-child{ padding: 8px 12px; }
    .case-linkgroup{ font-size: 1.4rem; }

}

/* dev-case-list
-------------------------------------------------*/
.dev-case-list { margin-top: -20px; }
.case-portal .dev-case--content { width: 100%; max-width: 1000px; margin: 0 auto; padding-left: 0; }
.dev-case-item { margin-bottom: 40px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s ease; }
.dev-case-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.dev-case-item--link { display: flex; text-decoration: none !important; color: inherit !important; }
.dev-case-item--img { width: 300px; line-height: 0; flex-shrink: 0; }
.dev-case-item--img img { width: 100%; height: 200px; object-fit: cover; }
.dev-case-item--body { flex: 1; padding: 20px 30px; }
.dev-case-item--body h2 { margin-left: 0 !important; margin-bottom: 15px !important; padding: 0 !important; border: none !important; font-size: 2rem !important; color: #32A0EF; border-bottom: none !important; text-decoration: none !important; }
.dev-case-item--body p { font-size: 1.5rem; line-height: 1.6; color: #666; margin-bottom: 15px !important; text-decoration: none !important; }
.more-btn { display: inline-block; padding: 8px 20px; background-color: #32A0EF; color: #fff !important; border-radius: 4px; font-size: 1.4rem; transition: background-color 0.2s; text-decoration: none !important; }
.dev-case-item:hover .more-btn { background-color: #1F85CF; }

@media only screen and (max-width: 768px) {
    .dev-case-item--link { flex-direction: column; }
    .dev-case-item--img { width: 100%; }
    .dev-case-item--img img { height: auto; aspect-ratio: 3/2; }
    .dev-case-item--body { padding: 20px; }
    .dev-case-item--body h2 { font-size: 1.8rem !important; }
    .dev-case-item--body p { font-size: 1.4rem; }
}

.hcb_wrap .token.keyword.def { font-style: normal !important; }