@charset "utf-8";
/* 共通コンテンツエリア幅 */
.industry-contents {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
    margin: 0 auto;
    line-height: 1.5;
    box-sizing: border-box;
}
.industry-contents * {
    box-sizing: border-box;
}
div.contents .industry-contents p {
    font-size: 18px;
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .industry-contents {
        max-width: 100%;
    }
    div.contents .industry-contents p {
        font-size: 16px;
    }
}
/* h1 */
.industry-ttl__wrap {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0;
}
.industry-ttl {
    color: #2D29B6;
    font-size: 60px;
    font-weight: 500;
}
@media (max-width: 600px) {
    .industry-ttl__wrap {
        padding: 40px 0;
    }
    .industry-ttl {
        font-size: 36px;
    }
}
/* ボタン */
.industry-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 530px;
    height: 66px;
    border-radius: 33px;
    background-color: #2D29B6;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto;
}
a.industry-contact:link,
a.industry-contact:visited,
a.industry-contact:active {
    color: #ffffff;
}
.industry-contact:hover {
    background-color: #000f68;
}
@media (max-width: 600px) {
    .industry-contact {
        max-width: 100%;
        height: 56px;
        border-radius: 28px;
        padding: 10px;
        font-size: 20px;
    }
}
/* kv */
.industry-kv {
    padding: 80px 0;
    background-color: #DEE6F1;
}
.industry-kv__ttl {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 58px;
}
.industry-kv__inner {
    display: flex;
    gap: 40px;
}
.industry-kv__inner > div {
    width: calc((100% - 40px) / 2);
}
.industry-kv__img {
    width: 100%;
    height: auto;
}
.industry-kv__lead {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    gap: 15px;
}
div.contents .industry-kv__lead > p {
    text-align: center;
}
.industry-kv__lead > span {
    line-height: 1;
    font-size: 30px;
}
.industry-kv__txt {
    margin-top: 7px;
    font-size: 24px;
}
.industry-kv .industry-contact {
    margin-top: 60px;
}
@media (max-width: 600px) {
    .industry-kv {
        padding: 40px 0;
    }
    .industry-kv__ttl {
        font-size: 24px;
        margin-bottom: 22px;
    }
    .industry-kv__inner {
        flex-direction: column;
        gap: 24px;
    }
    .industry-kv__inner > div {
        width: 100%;
    }
    .industry-kv__inner > div:first-child {
        order: 2;
    }
    .industry-kv__inner > div:last-child {
        order: 1;
    }
    .industry-kv__lead {
        font-size: 20px;
    }
    .industry-kv__txt {
        margin-top: 12px;
        font-size: 20px;
    }
    .industry-kv .industry-contact {
        margin-top: 32px;
    }
}
/* セクション */
.industry-section {
    padding: 120px 0;
    background-color: #ffffff;
}
.industry-section__gray {
    padding: 80px 0;
    background-color: #F5F6F7;
}
.industry-section__ttl {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 58px;
}
.industry-section__btns {
    text-align: center;
}
@media (max-width: 600px) {
    .industry-section {
        padding: 80px 0;
    }
    .industry-section__gray {
        padding: 40px 0;
    }
    .industry-section__ttl {
        font-size: 24px;
        margin-bottom: 40px;
    }
}
/* コンポーネント01 */
.industry01-content {
    width: 100%;
    display: flex;
    gap: 32px;
}
.industry01-content > li {
    border-radius: 20px;
    border: 1px solid #aaaaaa;
    width: calc((100% - 64px) / 3);
    overflow: hidden;
    background-color: #ffffff;
}
.industry01-content__img {
    width: 100%;
    aspect-ratio: 343 / 240;
}
.industry01-content__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.industry01-content__inner {
    padding: 28px 20px 26px;
}
.industry01-content__ttl {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 28px;
}
.industry01-arrow {
    padding: 223px 0 93px;
    margin-top: -167px;
    background-image: url(/common/img/industry/content01-arrow.svg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    margin-bottom: 32px;
}
.industry01-arrow__txt {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}
.industry01-block {
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #aaaaaa;
    background-color: #ffffff;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}
.industry01-block > span {
    background: linear-gradient(transparent 80%, #f2cf39 0%);
}
@media (max-width: 600px) {
    .industry01-content__wrap {
        position: relative;
    }
    .industry01-content__wrap::before {
        content: '';
        position: absolute;
        width: 100vw;
        height: 100%;
        background-image: url(/common/img/industry/content01-arrow-sp.svg);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        z-index: 0;
        bottom: 0;
        left: -30px;
    }
    .industry01-content {
        flex-direction: column;
        position: relative;
        z-index: 1;
    }
    .industry01-content > li {
        width: 100%;
    }
    .industry01-content__inner {
        padding: 24px 20px 26px;
    }
    .industry01-content__ttl {
        margin-bottom: 24px;
    }
    .industry01-arrow {
        padding: 60px 0 107px;
        margin-top: 0;
        background-image: none;
        position: relative;
        z-index: 1;
    }
    .industry01-block {
        padding: 32px 27px;
        font-size: 20px;
    }
}

/* コンポーネント02 */
.industry02 {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
}
.industry02:not(:last-child) {
    margin-bottom: 60px;
}
.industry-section .industry02 {
    border: 1px solid #aaaaaa;
}
.industry02-ttl {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}
.industry02-ttl > span {
    font-size: 24px;
}
.industry02-content {
    display: flex;
    gap: 32px;
}
.industry02-content__img {
    width: 460px;
    min-width: 460px;
    aspect-ratio: 282 / 192;
    border-radius: 20px;
    overflow: hidden;
}
.industry02-content__img > img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.industry02-content__txt {
    font-size: 18px;
}
div.contents p.industry02-content__txt > a {
    color: #2D29B6;
    text-decoration: underline;
}
.industry02-content__txt:not(:last-child) {
    margin-bottom: 13px;
}
.industry02-subttl {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 23px;
}
@media (max-width: 600px) {
    .industry02 {
        padding: 24px;
    }
    .industry02:not(:last-child) {
        margin-bottom: 32px;
    }
    .industry02-ttl {
        font-size: 20px;
        margin-bottom: 24px;
    }
    .industry02-ttl > span {
        font-size: 16px;
    }
    .industry02-content {
        gap: 24px;
        flex-direction: column;
    }
    .industry02-content__img {
        width: 100%;
        min-width: 100%;
    }
    .industry02-content__txt {
        font-size: 16px;
    }
    .industry02-subttl {
        margin: 32px 0 24px;
        font-size: 20px;
    }
}

/* コンポーネント03：手順 */
.industry03 {
    display: flex;
    gap: 28px;
    counter-reset: number 0;
}
.industry03 > li {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #aaaaaa;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    position: relative;
}
.industry03 > li::before {
    counter-increment: number 1;
    content: counter(number) " ";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    border-radius: 30px;
    background-color: #2D29B6;
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
}
.industry03 > li:not(:last-child)::after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi42MjEiIGhlaWdodD0iMjIuMjQzIiB2aWV3Qm94PSIwIDAgMTIuNjIxIDIyLjI0MyI+IDxwYXRoIGlkPSJJY29uX2ZlYXRoZXItY2hldnJvbi1yaWdodCIgZGF0YS1uYW1lPSJJY29uIGZlYXRoZXItY2hldnJvbi1yaWdodCIgZD0iTTEzLjUsMjdsOS05LTktOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTExLjM3OSAtNi44NzkpIiBmaWxsPSJub25lIiBzdHJva2U9IiMyZDI5YjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIi8+PC9zdmc+");
    width: 9px;
    height: 18px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
}
.industry03-ttl {
    font-weight: bold;
    font-size: 18px;
}
.industry03-ttl > a {
    color: #2D29B6;
    text-decoration: underline;
}
div.contents p.industry03-txt {
    font-size: 16px;
}
@media (min-width: 599px) {
    .industry03[data-col="4"] > li {
        width: calc((100% - 84px) / 4);
    }
    .industry03[data-col="3"] > li {
        width: calc((100% - 56px) / 3);
    }
    .industry03[data-col="2"] > li {
        width: calc((100% - 28px) / 2);
    }
    .industry03 > li:not(:last-child)::after {
        top: 0;
        bottom: 0;
        right: -19px;
    }
}
@media (max-width: 600px) {
    .industry03 {
        flex-direction: column;
        gap: 40px;
    }
    .industry03 > li {
        padding: 20px;
    }
    .industry03 > li:not(:last-child)::after {
        transform: rotate(90deg);
        bottom: -30px;
        left: 0;
        right: 0;
    }
}

/* コンポーネント04：事例 */
.industry04 {
    border-radius: 20px;
    padding: 40px;
    background-color: #ffffff;
}
.industry04:not(:last-child) {
    margin-bottom: 40px;
}
.industry-section .industry04 {
    border: 1px solid #aaaaaa;
}
.industry04-head {
    display: flex;
    gap: 30px;
    margin-bottom: 32px;
}
.industry04-head__img {
    width: 50%;
    min-width: 50%;
    aspect-ratio: 510 / 204;
    border-radius: 16px;
    overflow: hidden;
}
.industry04-head__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.industry04-head__ttl {
    font-size: 16px;
}
.industry04-head__logo {
    width: 297px;
    aspect-ratio: 297 / 65;
}
.industry04-head__logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
    margin-bottom: 12px;
}
.industry04-head__ttl > span {
    display: block;
}
.industry04-subttl {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 22px;
}
.industry04-txt {
    font-size: 18px;
}
.industry04-btn__wrap {
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.industry04-btn {
    padding: 5px 40px;
    height: 42px;
    border-radius: 22px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in-out;
}
.industry04-btn.download {
    background-color: #FF9902;
    color: #ffffff;
}
.industry04-btn.download:hover {
    background-color: #ff6600;
}
.industry04-btn.continuation {
    background-color: #ffffff;
    border: 1px solid #2D29B6;
    color: #2D29B6;
}
.industry04-btn.continuation:hover {
    background-color: #2D29B6;
    color: #ffffff;
}
@media (max-width: 600px) {
    .industry04 {
        padding: 24px;
    }
    .industry04:not(:last-child) {
        margin-bottom: 32px;
    }
    .industry04-head {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
    }
    .industry04-head__img {
        order: 2;
        width: 100%;
        min-width: 100%;
    }
    .industry04-head__logo {
        width: 100%;
    }
    .industry04-head__logo > img {
        margin-bottom: 8px;
    }
    .industry04-subttl {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .industry04-txt {
        font-size: 16px;
    }
    .industry04-btn__wrap {
        margin-top: 24px;
        gap: 16px;
        flex-direction: column;
    }
    .industry04-btn {
        width: 100%;
        padding: 5px;
        height: 36px;
        font-size: 16px;
    }
}

/* お問い合わせエリア */
.industry-section__contact {
    background-color: #DEE6F1;
    padding: 80px 0;
}
.industry-section__contact .industry-contact {
    margin-top: 77px;
}
@media (max-width: 600px) {
    .industry-section__contact {
        padding: 60px 0;
    }
    .industry-section__contact .industry-contact {
        margin-top: 32px;
    }
}