@charset "utf-8";

/* common css start */
:root {
    font-size: 10px;
}

html {
    text-rendering: optimizeLegibility !important;
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: #262626;
    background: transparent;
    text-rendering: optimizeLegibility;
}

button {
    font-family: "Noto Sans JP", sans-serif;
}

.overflow-hidden {
    overflow: hidden;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.tel {
    pointer-events: none;
}

a, p, div {
    word-break: break-all;
}

@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block;
    }

    .tel {
        pointer-events: auto;
    }
}

/* ===============================
Text align
=============================== */
.txt-left {
    text-align: left;
}

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

@media screen and (max-width: 768px) {
    .txt-left-sp {
        text-align: left;
    }

    .txt-center-sp {
        text-align: center;
    }

    .txt-right-sp {
        text-align: right;
    }
}

/* ===============================
Font weight
=============================== */
.fz-n {
    font-weight: normal !important;
}

.fz-m {
    font-weight: 500 !important;
}

.fz-b {
    font-weight: bold !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

/*inoue add start*/
.mt-column {
    margin: 40px auto 0;
    max-width: 984px;
}
/*inoue add end*/

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mt0-sp {
    margin-top: 0 !important;
}

/* =================================
Container
================================= */
.hc-container {
    max-width: 1190px;
    padding: 0 15px;
    margin: 0 auto;
}

.hc-sub-container {
    max-width: 1080px;
    margin: 0 auto;
}

.hc-sub-container-two {
    max-width: 984px;
    margin: 0 auto;
}

.hc-sub-container-three {
    max-width: 752px;
    margin: 0 auto;
}

.hc-sub-container-two-document{
    display: flex;
    justify-content: center;
}

/* Top Page Css Start */
.cus-portal-div {
    position: relative;
    text-align: center;
    padding: 40px 0 50px;
}

.cus-port-ttl-eng {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.5;
    color: #B60005;
}

.cus-port-ttl-jp {
    display: block;
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: -8px;
}

.animation-div {
    position: relative;
    max-width: 495px;
    width: 100%;
    margin: 0 auto;
}

.cus-port-para {
    display: block;
    max-width: 486px;
    width: 100%;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.8;
    background-image: url(/assets/img/top/cus_portal_bar.png);
    background-repeat: no-repeat;
    background-size: 100% 70%;
    background-position: bottom;
    margin: 13px auto;
}

.group-one {
    position: absolute;
    left: -11%;
    transform: translateX(9%);
    width: 256px;
    height: 202px;
    padding-top: 0;
}

.group-one-sub {
    position: relative;
}

.group-one-animation {
    position: absolute;
    top: 18%;
    left: 18%;
    width: 34px;
    height: 34px;
}

.group-two {
    position: absolute;
    right: -5%;
    transform: translateX(5%);
    width: 208px;
    height: 193px;
}

.group-two-sub {
    position: relative;
}

.group-two-animation {
    position: absolute;
    top: -10%;
    left: 10%;
    transform: translateY(-29%);
    width: 41px;
    height: 41px;
}

.people-one {
    position: absolute;
    top: -26px;
    left: -33%;
    width: 106px;
    height: 146px;
}

.people-one-sub {
    position: relative;
    width: 100%;
    height: 100%;
}

.people-one-sub img {
    width: 100%;
    height: 100%;
}

.people-one-animation {
    position: absolute;
    top: -15%;
    left: 34%;
    width: 42px;
    height: 42px;
}

.people-two {
    position: absolute;
    top: -40px;
    right: -30%;
    width: 88px;
    height: 160px;
}

.people-two-sub {
    position: relative;
    width: 100%;
    height: 100%;
}

.people-two-sub img {
    width: 100%;
    height: 100%;
}

.people-two-animation {
    position: absolute;
    top: -17%;
    left: 17%;
    width: 36px;
    height: 36px;
}

.people-two-animation svg {
    width: 100%;
    height: 100%;
}


/* column */
.column-section {
    background: url(/assets/img/top/column_bg.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.column-ani-container {
    width: fit-content;
    margin-left: auto;
}

.column-ani-img {
    width: 131px;
    height: 138px;
    margin-right: -30px;
}

.column-ani-img-sub {
    position: relative;
}

.column-animation {
    position: absolute;
    top: -32%;
    left: 46%;
    width: 43px;
    height: 43px;
}

.column-section .top-h2-ttl {
    margin-top: -30px;
}

.tcolumn-grid {
    display: grid;
    grid-template-areas: "tcolumn-grid-one tcolumn-grid-two tcolumn-grid-three"
        "tcolumn-grid-one tcolumn-grid-two tcolumn-grid-four"
        "tcolumn-grid-five tcolumn-grid-five tcolumn-grid-five";
    gap: 40px;
}

.tcolumn-grid-one {
    grid-area: tcolumn-grid-one;
}

.tcolumn-grid-two {
    grid-area: tcolumn-grid-two;
}

.tcolumn-grid-three {
    grid-area: tcolumn-grid-three;
}

.tcolumn-grid-four {
    grid-area: tcolumn-grid-four;
}

.tcolumn-grid-five {
    grid-area: tcolumn-grid-five;
}

.tcolumn-left {
    margin-top: 60px;
}

.tcolumn-left .column-tblog {
    margin-bottom: 65px;
}

.tcolumn-middle {
    margin-top: 135px;
}

.tcolumn-right {
    margin-top: -45px;
    padding-bottom: 65px;
}

.tcolumn-right .column-tblog {
    margin-bottom: 40px;
}

.tcolumn-grid .column-blog-img {
    margin-bottom: 8px;
}

.column-section .column-blog-ttl::after {
    content: "";
    background: url(/assets/img/common/lock_icon.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-left: 5px;
}

/* column end */

.document-download-button {
    font-size: 1.8rem;
    font-weight: 500;
    max-width: 269px;
    width: 88%;
    margin: 0px auto 0px;
    padding: 4px;
    border-radius: 8px;
    color: #FFFFFF;
    background: #B60005;
    position: relative;
}

.document-btn-span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 18px 37px 17px 60px;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    text-align: center;
}

.document-btn-span::before {
    content: "";
    background: url(/assets/img/common/download-2.png) no-repeat;
    background-size: contain;
    width: 19px;
    height: 21px;
    position: absolute;
    left: 49px;
    top: 53%;
    transform: translateY(-50%);
}



/* news */
.news-section {
    padding: 100px 0 80px;
}

.tnews-flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.top-h2-ttl {
    font-size: 7.2rem;
    font-weight: 200;
    color: #B60005;
}

.top-h2-ttl span {
    display: block;
    color: #262626;
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 5px;
}

.tlnews-img {
    width: 145px;
    height: 141px;
    margin-top: 70px;
}

.tlnews-img-sub {
    position: relative;
}

.news-animation {
    width: 83px;
    height: 73px;
    position: absolute;
    top: -31%;
    left: 31%;
}

.tnews-right {
    border-top: 1px solid #C7C7C7;
}

.tnews-right-container {
    max-width: 800px;
    margin-left: auto;
}

.tnews-right .category-info {
    max-width: 100%;
    padding: 24px 0 50px;
}

.tnews-right .watch-btn {
    margin: 0;
    margin-left: auto;
    margin-top: 64px;
}

/* news end */
.top-search-section {
    background-color: #EAEAEA;
    padding: 40px 0;
    position: sticky;
    top: 124px;
    z-index: 1;
}

.top-search-bar {
    max-width: 800px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 80px;
    border: 1px solid #C7C7C7;
    padding: 19px 24px 19px 48px;
    margin: 0 auto;
}

.top-search-section.top-search-section-active {
    transition: all 0.1s ease-in-out;
    padding: 16px 0;
}

.top-search-bar.top-search-bar-active .top-search-section {
    padding: 20px 0;
}

.top-search-bar.top-search-bar-active {
    max-width: 448px;
    padding: 9px 12px 9px 29px;
}

.top-search-bar.top-search-bar-active .top-search-input {
    font-size: 1.4rem;
    max-width: 350px;
    width: 100%;
}

.top-search-bar.top-search-bar-active .top-search-i {
    width: 28px;
    height: 28px;
}

.top-search-input {
    max-width: 664px;
    width: 100%;
    outline: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    color: #656565;
}

.top-search-input::placeholder {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    color: #656565;
}

.top-search-btn {
    outline: none;
    background: none;
    border: none;
    padding: 0;
}

.top-search-i {
    width: 48px;
    height: 48px;
}

.fe-content-container {
    margin: 88px auto 71px;
}

.fe-content-ttl {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    padding-left: 40px;
}

.fe-content-ttl::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 34px;
    height: 34px;
    background: url(/assets/img/top/feature.png) no-repeat;
    background-size: 100% 100%;
}

.news-cate {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    background-color: #B60005;
    border-radius: 24px;
    color: #fff;
    width: fit-content;
    padding: 1px 12px;
}

.fe-content {
    display: grid;
    grid-template-areas: "fe-grid-one fe-grid-four"
        "fe-grid-two fe-grid-four"
        "fe-grid-three fe-grid-four";
    justify-content: space-between;
    border: 1px solid #C7C7C7;
    border-radius: 16px;
    padding: 42px 48px;
    margin-top: 23px;
    column-gap: 32px;
}

.fe-grid-one {
    grid-area: fe-grid-one;
}

.fe-grid-two {
    grid-area: fe-grid-two;
}

.fe-grid-three {
    grid-area: fe-grid-three;
}

.fe-grid-four {
    grid-area: fe-grid-four;
}

.fe-content-head {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    border-bottom: 1px solid #B60005;
    padding-bottom: 6px;
}

.fe-content-para {
    font-size: 1.6rem;
    line-height: 1.5;
    word-break: break-all;
    margin: 12px 0 0 0;
}

.fe-content-img {
    width: 258px;
    border-radius: 8px;
    overflow: hidden;
}

.fe-content-img img{
    border-radius: 8px;
}

.import-notice-div {
    max-width: 896px;
    width: 100%;
    background-color: #F7F7F7;
    border-radius: 16px;
    display: flex;
    align-items: center;
    margin: 75px auto 0 auto;
}

.import-notice {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    background-color: #B60005;
    padding: 54px 0 58px 64px;
    max-width: 240px;
    width: 100%;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.import-notice-txt {
    position: relative;
}

.import-notice-txt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url(/assets/img/top/notice.png) no-repeat;
    background-size: 100% 100%;
}

.notice-div {
    max-width: calc(100% - 240px);
    width: 100%;
}

.notice-link-div {
    padding: 0 47px;
    position: relative;
}

.notice-link-div::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 31px;
    width: 10px;
    height: 10px;
    background: url(/assets/img/common/left_triangle.png) no-repeat;
    background-size: 100% 100%;
}

.notice-date {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #656565;
}

.notice-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 7px;
}

.fe-post-section {
    background-color: #FAFAFA;
    border-radius: 40px;
    padding: 104px 0;
    margin-bottom: 56px;
}

.fe-post-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 37px;
    row-gap: 64px;
}

.fe-post {
    width: calc((100% - 74px)/3);
}

.fe-post-img {
    max-width: 362px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.fe-post-img img {
    width: 100%;
    height: 100%;
}

.fe-ttl {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    padding-left: 24px;
}

.fe-ttl::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 16px;
    height: 4px;
    background-color: #B60005;
    border-radius: 24px;
}

@media screen and (max-width: 1400px) {
    .group-one {
        width: 222px;
        left: -9%;
    }

    .group-two {
        width: 170px;
        right: -3%;
    }

    .people-one {
        width: 96px;
        height: 136px;
        top: -17px;
    }

    .people-two {
        width: 78px;
        height: 150px;
        top: -27px;
    }
}

@media screen and (max-width: 1350px) {
    .group-one {
        width: 200px;
        left: -5%;
    }

    .group-one-animation {
        width: 24px;
        height: 24px;
    }

    .group-two {
        width: 150px;
        right: -1%;
    }

    .group-two-animation {
        width: 30px;
        height: 30px;
        left: 13%;
    }

    .people-one {
        width: 86px;
        height: 126px;
        top: -8px;
    }

    .people-two {
        width: 70px;
        height: 140px;
        top: -16px;
    }

    .people-one-animation {
        width: 32px;
        height: 32px;
    }

    .people-two-animation {
        width: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 1250px) {
    .group-one {
        width: 150px;
        left: 0;
    }

    .group-one-animation {
        width: 15px;
        height: 15px;
        top: 21%;
    }

    .group-two {
        width: 130px;
        right: 3%;
    }

    .group-two-animation {
        width: 25px;
        height: 25px;
        top: -12%;
    }

    .people-one {
        width: 76px;
        height: 116px;
        top: 4px;
        left: -26%;
    }

    .people-one-animation {
        width: 25px;
        height: 25px;
        top: -4%;
        left: 40%;
    }

    .people-two {
        width: 60px;
        height: 120px;
        top: 0;
        right: -25%;
    }

    .people-two-animation {
        width: 25px;
        height: 25px;
    }
}

@media screen and (max-width: 1200px) {
    .column-ani-img {
        margin-right: 0;
    }
}

@media screen and (max-width: 1080px) {
    .top-search-section {
        top: 59px;
    }

    .people-one {
        width: 66px;
        height: 106px;
        top: 15px;
        left: -15%;
    }

    .people-one-animation, .people-two-animation {
        width: 20px;
        height: 20px;
    }

    .people-two {
        width: 50px;
        height: 110px;
        top: 16px;
        right: -12%;
    }
}

@media screen and (max-width: 900px) {
    .tcolumn-grid {
        grid-template-columns: 1.46fr 1fr 1fr;
        gap: 20px;
    }

    .cus-port-ttl-jp {
        font-size: 4rem;
    }

    .cus-port-para {
        font-size: 1.6rem;
        background-size: 90% 70%;
    }

    .group-one {
        width: 120px;
        height: fit-content;
    }

    .group-one-animation {
        width: 10px;
        height: 10px;
        top: 18%;
    }

    .group-two {
        width: 100px;
        height: fit-content;
    }

    .group-two-animation {
        width: 18px;
        height: 18px;
        top: -10%;
    }

    .people-one {
        width: 56px;
        height: 86px;
        top: 27px;
        left: -10%;
    }

    .people-one-animation, .people-two-animation {
        width: 18px;
        height: 18px;
    }

    .people-two {
        width: 40px;
        height: 90px;
        top: 26px;
        right: -6%;
    }
}

@media screen and (max-width: 768px) {
    .cus-portal-div {
        padding-top: 20px;
    }

    .cus-port-ttl-eng {
        font-size: 1.2rem;
    }

    .cus-port-ttl-jp {
        font-size: 2rem;
        margin-top: 5px;
    }

    .cus-port-para {
        max-width: 243px;
        font-size: 1.3rem;
        background-image: url(/assets/img/top/cus_portal_bar_sp.png);
        background-repeat: no-repeat;
        background-size: 100% 74%;
        background-position: bottom;
    }

    .group-one {
        left: -7px;
        width: 79px;
        height: 63px;
    }

    .group-one-animation {
        position: absolute;
        top: 9%;
        left: 16%;
        width: 10px;
        height: 10px;
    }

    .group-two {
        position: absolute;
        right: 0;
        width: 65px;
        height: 68px;
        padding-top: 0;
    }

    .group-two-animation {
        top: -22%;
        left: 17%;
        width: 12px;
        height: 12px;
    }

    .people-one {
        position: absolute;
        top: 28px;
        left: 70px;
        width: 48px;
        height: 65px;
    }

    .people-one-animation {
        width: 19px;
        height: 19px;
    }

    .people-two {
        position: absolute;
        top: 23px;
        right: 80px;
        width: 39px;
        height: 72px;
    }

    .people-two-animation {
        width: 19px;
        height: 19px;
    }

    .top-search-section {
        padding: 16px 40px;
    }

    .hc-container.top-search-container {
        padding: 0;
    }

    .top-search-bar {
        max-width: 295px;
        padding: 9px 12px 9px 16px;
    }

    .top-search-i {
        width: 28px;
        height: 28px;
    }

    .top-search-input, .top-search-input::placeholder {
        font-size: 1.2rem;
        max-width: 194px;
        width: 100%;
    }

    .fe-content-container {
        margin: 46px auto 32px;
    }

    .fe-content-ttl {
        font-size: 1.8rem;
        padding-left: 20px;
    }

    .fe-content-ttl::before {
        width: 18px;
        height: 18px;
    }

    .fe-content {
        grid-template-areas: "fe-grid-one fe-grid-one"
            "fe-grid-two fe-grid-two"
            "fe-grid-three fe-grid-three"
            "fe-grid-four fe-grid-four";
        column-gap: 0;
        border-radius: 12px;
        padding: 18px 18px 20px;
    }

    .news-cate {
        font-size: 1.4rem;
        padding: 1px 12px 2px;
        display: inline;
        margin-left: 3px;
    }

    .fe-content-head {
        font-size: 1.6rem;
        padding-top: 10px;
    }

    .fe-content-para {
        font-size: 1.4rem;
    }

    .fe-content-img {
        margin: 19px auto 0;
    }

    .import-notice-div {
        flex-direction: column;
        border-radius: 12px;
        margin: 34px 0 0 0;
    }

    .import-notice {
        font-size: 1.8rem;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 0;
        max-width: 100%;
        text-align: center;
        padding: 13px;
    }

    .import-notice-txt::before {
        width: 20px;
        height: 20px;
        top: 56%;
        left: -24px;
    }

    .notice-div {
        max-width: 100%;
        padding: 0 0 25px;
    }

    .notice-link {
        display: block;
        font-size: 1.4rem;
        line-height: 1.7;
        margin-left: 0;
    }

    .notice-link-div::before {
        top: 24px;
        left: 24px;
    }

    .notice-link-div {
        padding: 17px 24px 0 40px;
    }

    .fe-post-section {
        border-radius: 24px;
        padding: 32px 0;
        margin-bottom: 32px;
    }

    .fe-post-div {
        column-gap: 9px;
        row-gap: 17px;
    }

    .fe-post {
        width: calc((100% - 9px) / 2);
    }

    .fe-ttl {
        font-size: 1.6rem;
        padding-left: 12px;
    }

    .fe-ttl::before {
        width: 8px;
        height: 2px;
        top: 12px;
    }

    .fe-post-img {
        margin-bottom: 5px;
    }

    .top-h2-ttl {
        font-size: 4rem !important;
    }

    .top-h2-ttl span {
        font-size: 1.4rem;
    }

    .column-section {
        background: url(/assets/img/top/column_bg_sp.png) no-repeat;
        background-position: 30% 70%;
        background-size: 144% 94%;
    }

    .column-section .top-h2-ttl {
        margin-top: -82px;
    }

    .column-ani-img {
        width: 89px;
        height: 94px;
    }

    .column-animation {
        width: 30px;
        height: 29px;
    }

    .tnews-flex {
        flex-direction: column;
    }

    .tlnews-img {
        width: 84px;
        height: 82px;
    }

    .news-section {
        padding-top: 51px;
    }

    .news-animation {
        width: 48px;
        height: 42px;
        top: -35%;
        left: 35%;
    }

    .tnews-left {
        display: flex;
        justify-content: space-between;
    }

    .tlnews-img {
        margin-top: 0;
    }

    .tnews-right .category-sm-img {
        border-radius: 4px;
    }

    .tnews-right .category-info {
        padding: 16px 0 25px;
    }

    .tnews-right .watch-btn {
        padding: 12px 0 15px;
        margin: 56px auto 0;
    }

    .tnews-right .watch-btn::after {
        width: 15px;
        height: 15px;
        right: 13px;
    }

    .tcolumn-grid {
        grid-template-areas: "tcolumn-grid-one tcolumn-grid-one tcolumn-grid-one"
            "tcolumn-grid-three tcolumn-grid-three tcolumn-grid-three"
            "tcolumn-grid-two tcolumn-grid-two tcolumn-grid-two"
            "tcolumn-grid-four tcolumn-grid-four tcolumn-grid-four"
            "tcolumn-grid-five tcolumn-grid-five tcolumn-grid-five";
        gap: 0;
    }

    .tcolumn-left {
        margin-top: 25px;
    }

    .tcolumn-left .column-tblog {
        margin-bottom: 32px;
    }

    .tcolumn-middle {
        margin-top: 20px;
    }

    .column-tblog-grid {
        display: grid;
        grid-template-areas: "column-blog-two column-blog-two"
            "column-blog-three column-blog-three"
            "column-blog-four column-blog-one";
        column-gap: 16px;
    }

    .column-blog-one {
        grid-area: column-blog-one;
        width: 128px;
        height: 90px;
        margin-top: 12px;
    }

    .column-blog-two {
        grid-area: column-blog-two;
    }

    .column-blog-three {
        grid-area: column-blog-three;
    }

    .column-blog-four {
        grid-area: column-blog-four;
    }

    .tcolumn-grid-five .watch-btn {
        margin-top: 41px;
        padding: 13px 0 14px;
    }

    .tcolumn-grid-five .watch-btn::after {
        width: 15px;
        height: 15px;
        right: 13px;
    }

    .top-search-section.top-search-section-active {
        padding: 12px 0;
    }

    .top-search-bar.top-search-bar-active .top-search-input {
        font-size: 1.2rem;
    }

    .top-search-bar.top-search-bar-active .top-search-i {
        width: 24px;
        height: 24px;
    }

    .top-search-bar.top-search-bar-active {
        max-width: 287px;
        padding: 7px 12px 7px 15px;
    }
    .column-blog-img {
         width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .people-one {
        left: 60px;
    }

    .people-two {
        right: 66px;
    }
}

@media screen and (max-width: 480px) {
    .people-one {
        left: 49px;
    }

    .people-two {
        right: 56px;
    }
}

@media screen and (max-width: 450px) {
    .people-one {
        left: 37px;
    }

    .people-two {
        right: 44px;
    }
}

@media screen and (max-width: 430px) {
    .people-one {
        left: 25px;
    }

    .people-two {
        right: 33px;
    }
}

@media screen and (max-width: 400px) {
    .people-one {
        left: 4px;
    }

    .people-two {
        right: 13px;
    }
}

@media screen and (max-width: 374px) {
    .cus-port-para {
        font-size: 1.2rem;
        background-size: 94% 74%;
    }

    .cus-port-ttl-jp {
        font-size: 1.8rem;
    }

    .people-one {
        left: 0;
    }

    .people-two {
        right: 7px;
    }
}

@media screen and (max-width: 350px) {
    .top-search-input, .top-search-input::placeholder {
        font-size: 1rem;
        max-width: 158px;
        width: 100%;
    }

    .cus-port-ttl-jp {
        font-size: 1.4rem;
    }

    .cus-port-para {
        font-size: 1rem;
        background-size: 82% 74%;
    }
}

/* Top Page Css End */

/* btn */
.news-btn {
    width: 280px;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 500;
    background: #B60005;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 52px 20px 80px;
    border: 1px solid #B60005;
    border-radius: 100vmax;
    position: relative;
}

.news-btn::before {
    content: "";
    background: url(/assets/img/common/news_btn_icon.png) no-repeat;
    background-size: contain;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
}

.news-btn:hover {
    background: #F7F7F7;
    color: #B60005;
}

.news-btn:hover::before {
    background: url(/assets/img/common/news_hover_btn_icon.png) no-repeat;
    background-size: contain;
}

.inquiry-btn {
    cursor: pointer;
    max-width: 534px;
    width: 100%;
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: 500;
    background: #B60005;
    color: #FFFFFF;
    text-align: center;
    padding: 37px 0;
    border: 1px solid #B60005;
    border-radius: 100vmax;
    position: relative;
}

.inquiry-btn::after {
    content: "";
    background: url(/assets/img/common/inquiry_btn_icon.png) no-repeat;
    background-size: contain;
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.inquiry-btn:hover {
    background: #F7F7F7;
    color: #B60005;
}

.inquiry-btn:hover::after {
    background: url(/assets/img/common/inquiry_hover_btn_icon.png) no-repeat;
    background-size: contain;
    right: 16px;
}

.watch-btn {
    font-family: "Noto Sans JP", sans-serif;
    cursor: pointer;
    display: block;
    width: 280px;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 500;
    background: #B60005;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 0;
    border: 1px solid #B60005;
    border-radius: 100vmax;
    position: relative;
}

.watch-btn::after {
    content: "";
    background: url(/assets/img/common/inquiry_btn_icon.png) no-repeat;
    background-size: contain;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.watch-btn:hover {
    background: #F7F7F7;
    color: #B60005;
}

.watch-btn:hover::after {
    background: url(/assets/img/common/inquiry_hover_btn_icon.png) no-repeat;
    background-size: contain;
    right: 12px;
}

.recommand-resource-btn {
    font-size: 1.8rem;
    font-weight: 500;
    max-width: 440px;
    width: 100%;
    margin: 80px auto 0;
    padding: 4px;
    border-radius: 8px;
    color: #FFFFFF;
    background: #B60005;
}

.resource-btn-span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px 0;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    text-align: center;
    position: relative;
}

.resource-btn-span::before {
    content: "";
    background: url(/assets/img/common/recommand_icon.png) no-repeat;
    background-size: contain;
    width: 17px;
    height: 21px;
    position: absolute;
    left: 130px;
    top: 52%;
    transform: translateY(-50%);
}

.recommand-resource-btn:hover {
    background: #EAEAEA;
    color: #B60005;
}

.recommand-resource-btn:hover .resource-btn-span::before {
    background: url(/assets/img/common/recommand_hover_icon.png) no-repeat;
    background-size: contain;
}

.recommand-resource-btn:hover .resource-btn-span {
    border: 1px solid #B60005;
}

@media screen and (max-width: 768px) {
    .hc-container {
        padding: 0 12px;
    }

    .inquiry-btn {
        font-size: 1.6rem;
        padding: 20px 0;
        margin-bottom: 65px;
    }

    .inquiry-btn::after {
        right: 18px;
    }
}

/* Header CSS starts */
.header-pc {
    display: block;
}

.header-sp {
    display: none;
}

.header-sticky {
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.header-part {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 0;
}

.header-div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo {
    width: 298px;
}

.header-nav {
    width: calc(100% - 308px);
}

.header-search-login {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 20px;
    position: relative;
}

.header-news-hover.login-btn-click {
    display: none;
    width: 210px;
    position: absolute;
    top: 45px;
    left: unset;
    right: 0;
    z-index: 2;
}

.header-news-hover.login-btn-click.login-btn-click-active {
    display: block;
}

.header-news-hover.login-btn-click .header-news-list-hover {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #656565;
    padding-bottom: 15px;
}

.header-news-hover.login-btn-click .header-news-list-hover::before {
    display: none;
}

.gray-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #EAEAEA;
}

.help-center-link {
    padding-top: 15px;
    padding-bottom: 0 !important;
}

.search-block {
    width: 280px;
    display: flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid #C7C7C7;
    border-radius: 40px;
}

.search-box {
    width: 220px;
    background: none !important;
    background-color: #ffffff !important;
    border: none;
    margin-right: 12px;
}

.search-box:focus {
    outline: none;
}

.search-icon-btn {
    background-color: #ffffff;
    border: none;
    padding: 0;
    cursor: pointer;
}

.search-icon {
    width: 24px;
    height: 24px;
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background-color: #ffffff;
    border: 1px solid #C7C7C7;
    border-radius: 40px;
    cursor: pointer;
    z-index: 1;
}

.login-txt {
    color: #656565;
    font-size: 1.4rem;
    font-weight: 500;
}

.login-icon {
    width: 24px;
    height: 24px;
    background-color: #656565;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-icon.login-icon-bg-changed {
    background-color: #B60005;
}

.login-icon-img {
    width: 12px;
    height: 15px;
}

.header-nav-list {
    display: flex;
    justify-content: end;
    gap: 28px;
}

.header-news-list {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.header-news-list:hover::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    background-color: #C7C7C7;
    width: 63px;
    height: 4px;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
}

.transparent-span {
    position: absolute;
    display: block;
    top: 50px;
    left: 0;
    width: 100px;
    height: 30px;
    cursor: pointer;
    z-index: 2;
}

.header-news-hover {
    background-color: #ffffff;
    position: absolute;
    top: 77px;
    left: -75px;
    width: 245px;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 2px 5px #707070;
    z-index: 1;
}

.header-news-list .header-news-hover {
    display: none;
}

.header-news-list:hover .header-news-hover,
.header-news-list.header-column-list:hover .header-news-hover,
.header-news-list.header-guide-list:hover .header-news-hover {
    display: block;
}

.header-news-list-hover {
    width: fit-content;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.2;
    position: relative;
}

.header-news-list-hover::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    background: url(/assets/img/common/list_bar.png) no-repeat;
    background-size: contain;
    width: 6px;
    height: 2px;
    transform: translateY(-50%);
}

.header-nav-single {
    color: #262626;
    font-weight: 500;
    line-height: 1.5;
    padding: 20px 15px 20px 25px;
    position: relative;
    z-index: 1;
}

.header-nav-single:hover {
    color: #C7C7C7;
}

.header-nav-single::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background: url(/assets/img/common/news_icon.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

.header-nav-single.nav-column::before {
    background: url(/assets/img/common/column_icon.png) no-repeat;
    background-size: contain;
}

.header-nav-single.nav-guide::before {
    background: url(/assets/img/common/guide_icon.png) no-repeat;
    background-size: contain;
}

.header-nav-single.nav-member-intro::before {
    background: url(/assets/img/common/member_intro_icon.png) no-repeat;
    background-size: contain;
}

.header-nav-single.nav-services::before {
    background: url(/assets/img/common/Service_material_icon.png) no-repeat;
    background-size: contain;
}

.header-nav-single.nav-contact::before {
    background: url(/assets/img/common/contact_form_icon.png) no-repeat;
    background-size: contain;
}

.header-nav-single.nav-member-intro,.header-nav-single.nav-services, .header-nav-single.nav-contact {
    padding-right: 0;
}

.header-nav-single.nav-member-intro::after, .header-nav-single.nav-services::after, .header-nav-single.nav-contact::after {
    display: none;
}

.header-nav-single::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    background: url(/assets/img/common/down_arr.png) no-repeat;
    background-size: contain;
    width: 9px;
    height: 8px;
    transform: translateY(-50%);
}

@media screen and (max-width:1080px) {
    .header-pc {
        display: none;
    }

    .header-sp {
        display: block;
    }

    .hc-container-sp-two {
        padding: 0 24px;
    }

    .disabled-scroll {
        overflow: hidden;
    }

    .header-div {
        padding: 12px 0;
    }

    .header-logo {
        width: 149px;
        height: 30px;
    }

    .header-nav {
        width: calc(100% - 159px);
    }

    .header-search-login {
        align-items: center;
        margin-top: 0;
    }

    .login-btn {
        flex-direction: column-reverse;
        gap: 0;
        padding: 0;
        border: none;
    }

    .login-txt {
        font-size: 0.8rem;
    }

    .header-menu-bar {
        height: fit-content;
        padding: 0;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    .header-menu-line {
        display: block;
        width: 16px;
        height: 2px;
        margin-bottom: 5px;
        border-radius: 8px;
        background-color: #B60005;
        transition: all 0.2s ease-in-out;
    }

    .upper-bar-rotate {
        transform: translateY(3px) rotate(25deg);
        transition: all 0.2s ease-in-out;
    }

    .lower-bar-rotate {
        transform: translateY(-4px) rotate(-25deg);
        transition: all 0.2s ease-in-out;
    }

    .header-nav-container {
        display: none;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease-in-out;
    }

    .header-nav-show {
        display: block;
        height: 80vh;
        overflow-y: scroll;
        transition: all 0.2s ease-in-out;
    }

    .header-nav-block {
        max-width: 280px;
        margin: 0 auto;
        padding: 30px 0 100px;
    }

    .header-nav-list {
        margin-top: 30px;
        flex-direction: column;
        gap: 15px;
        position: relative;
        z-index: 1;
    }

    .header-nav-single::after, .header-news-list:hover::after, .header-news-hover {
        display: none !important;
    }

    .header-news-hover.login-btn-click.login-btn-click-active {
        display: block !important;
    }

    .header-news-hover {
        padding: 32px;
    }

    .header-news-hover.login-btn-click {
        width: 212px;
        top: 48px;
    }

    .header-news-hover.login-btn-click .header-news-list-hover {
        padding-bottom: 5px;
    }

    .help-center-link {
        padding-top: 5px;
    }

    .header-nav-single {
        font-size: 2rem;
        padding: 10px 15px 10px 25px;
    }

    .sub-nav-single {
        margin-left: 30px;
    }

    .header-two-part {
        width: calc(100% / 3);
    }

    .head-logo-size {
        width: 150px;
        margin: 0 auto;
    }

    .login-circle-btn {
        width: 6px;
        height: 24px;
        cursor: pointer;
    }

    .slide-site-navi {
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(to right, rgba(101, 101, 101, 0.8), rgba(51, 51, 51, 0.8));
        position: absolute;
        top: 60px;
        left: -100%;
        transition: all 0.8s ease-in-out;
    }

    .slide-site-navi-show {
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.8s ease-in-out;
    }

    .slide-site-navi-link {
        width: 75%;
        height: 80%;
        padding: 24px;
        background-color: #ffffff;
        border-radius: 0 0 8px 0;
    }

    .slide-side-scroll {
        height: 100%;
        overflow-y: scroll;
    }
}

/* Header CSS ends */

/* common css end */
/* style css start here */

/* New list css start */
.news-ttl-div {
    padding: 34px 0 22px;
}

.ttl-bar-area {
    display: flex;
    gap: 2px;
}


.ttl-bar {
    display: block;
    width: 24px;
    height: 4px;
    background-color: #B60005;
    border-radius: 24px;
}

.ttl-bar-two {
    display: block;
    width: calc(100% - 26px);
    height: 4px;
    background-color: #C7C7C7;
    border-radius: 24px;
}

.news-ttl {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
}

.breadcrumb-ul {
    margin-top: 20px;
}

.breadcrumb-link {
    display: inline;
    font-size: 1.4rem;
    line-height: 1.7;
    width: fit-content;
    color: #656565;
}

.pre-page {
    position: relative;
    padding-left: 13px;
}

.pre-page::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #656565;
    border-radius: 50%;
}

.current-page {
    position: relative;
    color: #C96F6F;
    padding-left: 13px;
}

.current-page::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 3px;
    width: 4px;
    height: 4px;
    background-color: #B60005;
    border-radius: 50%;
}

.category-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 11px;
    margin: 45px 0px 36px 40px;
}

.category-tab {
    font-size: 1.6rem;
    font-weight: 500;
    color: #262626;
    width: fit-content;
    position: relative;
    padding: 2px 36px 3px;
}

.category-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background-color: #B60005;
    border-radius: 24px;
}

.last-in-row::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #B60005;
    border-radius: 24px;
}

.category-tab.category-last::after {
    content: none;
}

.category-tab.tab-active {
    color: #fff;
    background-color: #B60005;
    opacity: 1;
}

.category-info-div {
    display: flex;
    gap: 118px;
}

.category-info-left {
    max-width: 688px;
    width: 100%;
}

.category-info {
    max-width: 688px;
    width: 100%;
    border-bottom: 1px solid #C7C7C7;
    padding: 25px 0 41px;
}

.category-date {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #656565;
    position: relative;
    padding-left: 12px;
}

.category-date::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 2px;
    background-color: #C7C7C7;
    border-radius: 4px;
}

.category-btn-div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.category-btn {
    display: inline-block;
    width: fit-content;
    border: 1px solid #B60005;
    border-radius: 24px;
    padding: 0 12px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.7;
    color: #B60005;
}

.category-img {
    max-width: 688px;
    width: 100%;
    margin-top: 12px;
}

.category-img img {
    width: 100%;
    height: 100%;
}

.category-para {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 16px 0 10px;
}

.category-para-two {
    font-size: 1.6rem;
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 18px;
}

.category-hastag {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 9px;
}

.hastag {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
    color: #656565;
    background-color: #EAEAEA;
    border-radius: 16px;
    padding: 4px 12px;
}

.category-info-flex {
    display: grid;
    grid-template-areas: "cate-grid-one cate-grid-four"
        "cate-grid-two cate-grid-four"
        "cate-grid-three cate-grid-four";
    justify-content: space-between;
    column-gap: 33px;
    word-break: break-all;
}

.cate-grid-one {
    grid-area: cate-grid-one;
}

.cate-grid-two {
    grid-area: cate-grid-two;
}

.cate-grid-three {
    grid-area: cate-grid-three;
}

.cate-grid-four {
    grid-area: cate-grid-four;
}

.category-sm-div {
    max-width: calc(100% - 248px);
    width: 100%;
}

.category-sm-img {
    max-width: 224px;
    width: 100%;
    height: max-content;
    margin-top: 62px;
    border-radius: 8px;
    overflow: hidden;
}

.category-sm-img img {
    width: 100%;
    height: 100%;
}

.cat-para-m {
    margin-top: 7px;
}

.pagination-div {
    margin: 104px 0 146px;
}

.pagination-ul {
    max-width: 688px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

.pagination-link {
    width: 40px;
    height: 40px;
    border: 1px solid #C7C7C7;
    border-radius: 50%;
    text-align: center;
    padding: 9px 8px 7px;
    color: #656565;
}

.pagination-link.pagi-active {
    color: #fff;
    background-color: #B60005;
    border: 1px solid #B60005;
    opacity: 1;
}

.pre-txt, .next-txt {
    position: relative;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
    padding: 0 21px;
}

.pre-txt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: url(/assets/img/common/pre_btn.png) no-repeat;
    background-size: 100% 100%;
}

.next-txt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: url(/assets/img/common/next_btn.png) no-repeat;
    background-size: 100% 100%;
}

.category-info-right {
    max-width: calc(100% - 806px);
    width: 100%;
    margin: 30px auto 0 auto;
}

.category-right-div {
    background-color: #F7F7F7;
    border-radius: 16px;
    padding: 28px;
}

.category-right-img {
    overflow: hidden;
    display: inline-block;
}

.category-right-img img {
    transition: transform 0.2s ease-in-out;
    width: 100%;
    height: auto;
}

.category-right-img:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0.6;
}

.category-right-para {
    font-weight: 500;
    line-height: 1.5;
    margin-top: 12px;
}

.popular-article {
    display: block;
    width: 100%;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    position: relative;
    padding: 54px 0 15px;
}

.popular-article::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 32px;
    width: 100%;
    height: 4px;
    background-color: #B60005;
    border-radius: 24px;
}

.popular-article::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 33px;
    max-width: calc(100% - 32px);
    width: 100%;
    height: 2px;
    background-color: #C7C7C7;
    border-radius: 16px;
}

.popular-div {
    border-bottom: 1px dashed #C7C7C7;
    padding: 18px 0 11px;
}

.popular-para {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
}

.popular-date {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #656565;
    position: relative;
    padding-left: 10px;
}

.popular-date::before {
    content: "";
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 2px;
    background-color: #C7C7C7;
    border-radius: 4px;
}

.popular-hastag {
    display: flex;
    max-width: 321px;
    width: 100%;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 9px;
    margin-top: 22px;
}

.popular-hastag .hastag {
    display: block;
    width: 103px;
}

@media screen and (max-width: 1200px) {
    .category-div {
        margin-left: 0;
    }

    .category-info-div {
        gap: 70px;
    }

    .category-info-right {
        max-width: calc(100% - 758px);
    }
}

@media screen and (max-width: 1080px) {
    .category-info-left {
        max-width: 60%;
    }

    .category-info-right {
        max-width: 40%;
    }
}

@media screen and (max-width: 1040px){
    .top-h2-ttl{
        font-size: 5.9rem;
    }
}

@media screen and (max-width: 932px) {

    .category-info-div {
        gap: 30px;
    }

    .category-info-left {
        max-width: 60%;
    }

    .category-info-right {
        max-width: 40%;
    }

    .category-right-div {
        padding: 20px;
    }
}

@media screen and (max-width: 861px) {

    .category-sm-div {
        max-width: 55%;
    }

}

@media screen and (max-width: 768px) {
    .ttl-bar {
        width: 18px;
        height: 2px;
    }

    .ttl-bar-two {
        width: calc(100% - 20px);
        height: 2px;
    }

    .breadcrumb-ul {
        margin-top: 5px;
        gap: 4px;
    }

    .breadcrumb-link {
        font-size: 1rem;
    }

    .current-page {
        padding-left: 5px;
    }

    .current-page::before {
        width: 2px;
        height: 2px;
        left: 0;
        top: 7px;
        transform: translateY(0);
    }

    .pre-page {
        padding-left: 6px;
    }

    .pre-page::before {
        width: 2px;
        height: 2px;
        left: 0;
        top: 7px;
        transform: translateY(0);
    }

    .category-info-flex {
        grid-template-areas: "cate-grid-one cate-grid-four"
            "cate-grid-one cate-grid-four"
            "cate-grid-two cate-grid-two"
            "cate-grid-three cate-grid-three";
        column-gap: 0;
        row-gap: 14px;
    }

    .category-sm-img {
        width: 128px;
        height: max-content;
        margin-left: auto;
        margin-top: 60px;
    }

    .cate-grid-one {
        width: calc(100vw - 170px);
    }

    .category-info-div {
        flex-direction: column;
        gap: 80px;
    }

    .category-info-left, .category-info, .category-img {
        max-width: 100%;
    }

    .category-info-right {
        max-width: 100%;
        width: unset;
        margin: 0 26px;
    }

    .category-right-para {
        font-size: 1.4rem;
        margin-top: 3px;
    }

    .cat-para-m {
        letter-spacing: -1px;
        margin-top: 6px !important;
    }

    .pagination-div {
        margin-top: 48px;
        margin-bottom: 0;
    }

    .pagination-link {
        width: 32px;
        height: 32px;
        padding: 5px 8px 7px;
    }

    .pre-txt {
        padding: 0 6px 0 24px;
    }

    .next-txt {
        padding: 0 24px 0 6px;
    }

    .pre-txt::before {
        left: 3px;
    }

    .next-txt::after {
        right: 3px;
    }

    .category-right-div {
        padding: 24px;
        border-radius: 8px;
    }

    .category-right-img {
        max-width: 100%;
        width: 100%;
    }

    .category-right-img img {
        max-width: 100%;
    }

    .category-div {
        margin: 17px 0 21px 0 !important;
    }

    .category-btn-div {
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 5px;
    }

    .category-tab {
        font-size: 1.4rem;
        padding: 2px 8px 3px;
    }

    .category-para {
        font-size: 1.6rem;
        margin: 11px 0 9px;
    }

    .category-para-two {
        font-size: 1.4rem;
        margin-bottom: 14px;
    }

    .hastag {
        padding: 4px 7px;
    }

    .category-hastag {
        align-items: end;
        column-gap: 4px;
        row-gap: 7px;
    }

    .category-info {
        padding: 10px 0 25px;
    }

    .news-ttl {
        font-size: 2rem;
    }

    .news-ttl-div {
        padding: 24px 0 5px;
    }

    .popular-article {
        font-size: 1.8rem;
        padding: 38px 0 12px;
    }

    .popular-div {
        padding: 14px 0 11px;
    }

    .popular-hastag {
        margin-bottom: 65px;
    }

    .popular-hastag .hastag {
        width: 93px;
    }

}

@media screen and (max-width: 400px) {
    .category-info-flex {
        row-gap: 0;
    }
}

@media screen and (max-width: 374px) {
    .pagination-ul {
        gap: 5px;
    }

    .pagination-link {
        width: 25px;
        height: 25px;
        font-size: 1.2rem;
        padding-top: 4px;
    }

    .pre-txt, .next-txt {
        font-size: 1.2rem;
    }

    .pre-txt {
        padding-left: 24px;
    }

    .next-txt {
        padding-right: 24px;
    }
}

@media screen and (max-width: 360px) {
    .category-btn {
        padding: 0 8px;
        font-size: 1.2rem;
    }

    .category-tab {
        font-size: 1.2rem;
        padding-top: 5px;
    }
}

/* New list css end */

/* Column detail css starts */
.col-detail-category-info {
    max-width: 100%;
    border-bottom: none;
    padding: 0;
    margin: 50px 0 25px;
}

.content-builder-feature h1 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 10px 0 8px;
}

.col-detail-ttl-sec {
    display: flex;
    justify-content: space-between;
    align-items: end;
    column-gap: 10px;
}

.user-icon-round {
    background-color: transparent;
    border: none;
    border-radius: 50%;
    // cursor: pointer;
    width: 56px;
    height: 56px;
    padding: 0;
}

.col-detail-ttl {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 10px 0 8px;
}

.hash-upload-div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.upload-link {
    display: inline-block;
}

.upload-link-img {
    width: 20px;
    height: 20px;
}

.col-img-block {
    max-width: 100%;
    width: fit-content;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}

.col-detail-content-block {
    background-color: #F7F7F7;
    border-radius: 8px;
    padding: 42px 40px 70px 40px;
    margin: 152px 0 72px;
}

.col-detail-h4-ttl {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 42px;
    position: relative;
}

.col-detail-h4-ttl::after {
    position: absolute;
    content: "";
    bottom: -10px;
    left: 50%;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateX(-50%);
}

.content-ttl {
    display: block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 42px;
    position: relative;
}

.content-ttl::after {
    position: absolute;
    content: "";
    bottom: -10px;
    left: 50%;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateX(-50%);
}

.col-detail-list {
    width: fit-content;
    margin: 0 auto;
}

.col-detail-list li::marker {
    font-weight: 700;
}

.col-detail-list-single {
    width: fit-content;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    margin-bottom: 15px;
}

.recom-resource-div h2 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 24px;
    position: relative;
}

.recom-resource-div h2::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateY(-50%);
}

.recom-resource-div p {
    line-height: 1.6;
    margin-top: 20px;
}

.list-container h3 {
    font-size: 2.4rem;
    font-weight: 500;
    padding-left: 0;
    margin-bottom: 27px;
}

.col-detail-h3-ttl.empty-dashed::before {
    display: none;
}

.read-more-sec {
    /* height: 400px; */
    height: auto;
    overflow: hidden;
    transition: all 3s ease-in-out;
    position: relative;
}

.read-more-sec::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1));
}

.read-more-txt {
    height: auto;
    overflow: auto;
    transition: all 3s ease-in-out;
}

.read-more-sec.read-more-txt::after {
    display: none;
}

.watch-btn.watch-more-btn {
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-top: -67px;
}

.watch-btn.watch-more-btn:hover {
    background: #B60005;
    color: #fff;
    opacity: 0.7;
}

.watch-btn.watch-more-btn.watch-more-btn-active {
    margin-top: 15px;
}

.watch-btn.watch-more-btn::after {
    background: url(/assets/img/common/inquiry_down_btn.png) no-repeat;
    background-size: 100% 100%;
}

.watch-btn.watch-btn.watch-more-btn:hover::after {
    right: 16px;
}

.list-container ul li span {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 13px;
    position: relative;
}

.list-container ul li span::before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0;
    background-color: #B60005;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.col-detail-link-para {
    font-weight: 400;
    line-height: 1.5;
    padding-left: 16px;
    margin: 10px 0 20px;
}

.screen-operation-link {
    display: inline;
}

.screen-operation-link.blue-link {
    font-weight: 500;
    color: #344096;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.screen-operation-link.red-link {
    font-weight: 700;
    color: #B60005;
}

.screen-operation-link.red-link-normal {
    font-weight: 400;
    color: #B60005;
}

.screen-operation-link.black-link {
    font-weight: 700;
    color: #262626;
}

.screen-operation-link.pink-border {
    font-weight: 500;
    /*text-decoration: underline;
    text-decoration-color: #F7E5E6;
    text-decoration-thickness: 6px;
    text-underline-offset: -1px;*//*250423*/
    padding-left: 0;
    background: linear-gradient(transparent 70%, #F7E5E6 30%);/*250423*/
}

.screen-operation-link.pink-border::before {
    content: none;
}

.video-sec-one {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 100px 0 70px;
}

.video-sec-one-list {
    border-radius: 8px;
    overflow: hidden;
}

.caption-div {
    /* padding-top: 112px; */ /*250413*/
}

.caption-div h4 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 18px;
}

.caption-div ul li {
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 0 0 15px 14px;
    position: relative;
    padding-left: 37px;
}

.caption-div ul li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: url(/assets/img/common/left_triangle.png) no-repeat;
    background-size: 100% 100%;
}

.caption-div ul li:nth-child(2)::before {
    top: 9px;
    left: 0;
    transform: translateY(0);
}

.caption-div ul li::after {
    content: "1.";
    position: absolute;
    top: 0;
    left: 17px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
}

.caption-div ul li:nth-child(2)::after {
    content: "2.";
}

.caption-div ul li:nth-child(3)::after {
    content: "3.";
}

.caption-div ul li:nth-child(4)::after {
    content: "4.";
}

.caption-div ul li:nth-child(5)::after {
    content: "5.";
}

.caption-div ul li:nth-child(6)::after {
    content: "6.";
}

.caption-div span {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin: 16px auto 80px;
}

@media screen and (max-width:768px) {
    .col-detail-category-info {
        margin: 15px 0;
    }

    .col-detail-content-block {
        padding: 24px 0 44px;
        margin: 20px 0 50px;
    }

    .recommand-resource-btn {
        width: 350px;
        margin: 40px auto 0;
    }

    .resource-btn-span {
        padding: 34px 0;
    }

    .resource-btn-icon::before {
        left: 26%;
    }

    .content-builder-feature h1 {
        font-size: 1.6rem;
        margin: 10px 0 8px;
    }

    .content-builder-feature {
        width: calc(100% - 50px);
    }

    .user-icon-round {
        width: 40px;
        height: 40px;
    }

    .col-detail-ttl-sec {
        align-items: start;
        position: relative;
    }

    .red-upload-btn {
        position: absolute;
        bottom: -5px;
        right: 7px;
    }

    .content-ttl {
        font-size: 1.6rem;
    }

    .col-detail-list-single {
        font-size: 1.4rem;
    }

    .recom-resource-div h2 {
        font-size: 1.8rem;
    }

    .recom-resource-div p {
        font-size: 1.4rem;
    }

    .recommand-resource-btn {
        font-size: 1.6rem;
    }

    .video-sec-one {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
        margin: 56px 0 50px;
    }

    .video-sec-one-list {
        max-width: 311px;
        width: 100%;
        margin: 0 auto;
    }

    .video-sec-one-list>img {
        width: 100%;
    }

    .list-container h3 {
        font-size: 1.7rem;
    }

    .list-container ul li span {
        font-size: 1.5rem;
    }

    .col-detail-link-para {
        font-size: 1.4rem;
    }

    .caption-div {
        /* padding-top: 70px; */ /*250413*/
    }

    .caption-div h4 {
        font-size: 1.4rem;
    }

    .caption-div ul li {
        font-size: 1.4rem;
    }

    .caption-div ul li::after {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .caption-div span {
        margin: 16px auto 45px;
        font-size: 1.2rem;
    }

    .caption-div ul li::before,
    .caption-div ul li:nth-child(2)::before {
        top: 4px;
    }
}

@media screen and (max-width:423px) {
    .user-icon-round {
        margin-top: 10px;
    }
}

@media screen and (max-width:370px) {
    .recommand-resource-btn {
        width: 300px;
    }

    .resource-btn-icon::before {
        left: 22%;
    }
}

/* Column detail css ends */

/* Code block start */
.block-parent-div {
    max-width: 752px;
    width: 100%;
    margin: 88px auto 80px;
}

.block-parent-div>div {
    display: flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px dashed #C7C7C7;
    padding: 20px 16px 22px;
}

.block-parent-div>div:first-child {
    border-top: 1px dashed #C7C7C7;
}

.block-parent-div>div>span:first-child {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    width: 48px;
    height: 48px;
    display: block;
    background: #B60005;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    padding: 15px 0 16px;
}

.block-parent-div>div>span:nth-child(2) {
    font-size: 1.6rem;
    line-height: 1.5;
}

.table-one-parent {
    max-width: 750px;
    margin: 0 auto 50px; /*250413*/
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.table-one-parent table {
    width: 100%;
    border-collapse: collapse;
}

.table-one-parent th {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    background-color: #EAEAEA;
    width: 25%;
    border-right: 1px solid #FFFFFF;
    padding: 20px;
}

.table-one-parent td {
    font-size: 1.6rem;
    line-height: 1.5;
    border-bottom: 1px dashed #C7C7C7;
    padding: 20px;
    text-align: center;
}

.table-two-parent {
    max-width: 750px;
    width: 100%;
    margin: 80px auto;
}

.table-two-parent table {
    width: 100%;
}

.table-two-parent td:first-child {
    width: 25%;
    background-color: #EAEAEA;
    border-bottom: 1px solid #fff;
    padding: 20px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
}

.table-two-parent td:nth-child(2) {
    line-height: 1.5;
    padding: 20px 32px;
    border-bottom: 1px dashed #C7C7C7;
}

.col-pdf-icon::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/assets/img/common/col_pdf_icon.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(3px);
    margin-left: 4px;
}

.document-icon::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/assets/img/common/document_icon.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(3px);
    margin-left: 4px;
}

.expand-icon::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/assets/img/common/expand_icon.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(3px);
    margin-left: 4px;
}

.useful-link-ttl {
    display: block;
    width: 100%;
}

.useful-link-ttl.relate-arti-ttl {
    padding-left: 28px;
    border-bottom: 1px dashed #C7C7C7;
    padding-bottom: 7px;
}


.useful-link-ttl.relate-arti-ttl::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(/assets/img/common/article_icon.png) no-repeat;
    background-size: 100% 100%;
}

.relate-arti-link {
    margin-top: 17px;
}

.relate-arti-link .useful-link::before {
    top: 39%;
}

.useful-link-div.col-useful-link {
    margin-bottom: 48px;
    padding: 31px 32px;
}

.table-two-parent tr:last-child td {
    border-bottom: unset !important;
}

.register-contact-btn {
    display: flex;
    gap: 92px;
    margin: 120px 0 96px;
}

.register-btn, .contact-btn {
    max-width: 534px !important;
    width: 100% !important;
    padding: 36px 0 40px;
}

.register-btn:hover, .contact-btn:hover {
    opacity: 1;
}

.register-btn::after, .contact-btn::after {
    right: 24px;
}

@media screen and (max-width: 768px) {
    .register-contact-btn {
        flex-direction: column;
        gap: 20px;
    }

    .block-parent-div>div {
        padding: 15px 16px 22px;
    }

    .block-parent-div>div>span:nth-child(2) {
        font-size: 1.4rem;
    }

    .table-one-parent {
        grid-template-columns: repeat(1, 1fr);
    }

    .table-one-parent th {
        font-size: 1.4rem;
        text-align: left;
        padding: 14px;
    }

    .table-one-parent td {
        font-size: 1.4rem;
        text-align: left;
        padding: 14px;
    }

    .delete-border {
        border-bottom: none !important;
    }

    .table-two-parent {
        margin: 40px auto;
    }

    .table-two-parent td:first-child {
        font-size: 1.4rem;
    }

    .table-two-parent td:nth-child(2) {
        font-size: 1.4rem;
        padding: 14px 12px;
        letter-spacing: -1px;
    }

    .related-articles-ttl {
        font-size: 1.6rem !important;
    }

    .register-btn, .contact-btn {
        padding: 22px 0;
    }

    .register-btn, .contact-btn {
        margin-bottom: 0;
    }

    .register-contact-btn {
        gap: 25px;
        margin: 60px 0 65px;
    }

    .block-parent-div {
        margin: 40px auto;
    }

    .relate-arti-link {
        margin-top: 10px;
    }

    .relate-arti-link .useful-link::before {
        top: 7px;
        transform: translateY(0);
    }

    .useful-link-div.col-useful-link {
        padding: 20px 16px 22px;
    }

    .useful-link-ttl.relate-arti-ttl::before {
        width: 17px;
        height: 17px;
    }

    .useful-link-ttl.relate-arti-ttl {
        padding-left: 20px;
        padding-bottom: 4px;
    }
}

/* Code block end */

/* New detail css start */
.cate-info-right-mt {
    margin-top: 40px;
}

.cate-detail-info {
    border-bottom: unset;
    padding-top: 40px;
}

.cate-detail-para {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 10px;
}

.cate-detail-hastag {
    /* position: relative; */
    max-width: 463px;
    width: 100%;
    display: flex;
    column-gap: 1px;
    margin: 10px 0 25px;
}

.cate-detail-link {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 9px;
    width: calc(100% - 21px);
}

.download-up-img {
    width: 20px;
    height: 19px;
}

.download-up-img img {
    width: 100%;
    height: 100%;
}

.cate-detail-parent p {
    font-size: 1.6rem;
    line-height: 1.6;
    word-wrap: break-word;
    margin-top: 17px;
}

.cate-info-img {
    margin-bottom: 70px;
}

.cate-detail-parent h2 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 24px;
    position: relative;
}

.cate-detail-parent h2::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateY(-50%);
}

.detail-code-div {
    margin: 52px 0 48px;
}

.detail-code-div .line-numbers.detail-code {
    border: none;
    border-radius: 0;
    padding: 0 7px;
    max-height: 124px;
}

.detail-code-div pre[class*=language-].line-numbers>code {
    left: -168px;
}

.detail-code-div pre[class*=language-] {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.6;
}

.detail-code-div .line-numbers .line-numbers-rows {
    width: unset;
    left: 108px;
    top: 30px;
    border-right: 1px solid #fff;
    letter-spacing: 0px;
}

.detail-code-div .token.tag {
    color: #EDE58F;
}

.detail-code-div .line-numbers-rows span:nth-child(4),
.detail-code-div .line-numbers-rows span:nth-child(5) {
    display: none;
}

.detail-code-div .line-numbers-rows>span:before {
    content: counter(linenumber) ".";
    color: #fff;
}

.cate-detail-parent h3 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 50px;
}

.useful-link-div {
    padding: 24px 32px;
    background-color: #F7F7F7;
    border-radius: 8px;
    margin: 63px 0 104px;
}

.useful-link-ttl {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    padding-left: 20px;
}

.useful-link-ttl::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(/assets/img/common/link_circle.png) no-repeat;
    background-size: 100% 100%;
}

.useful-link-m {
    margin: 12px 0 0 22px;
}

.useful-link {
    width: fit-content;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #262626;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    position: relative;
    padding: 0 0 8px 16px;
    word-break: break-word;
}

.useful-link::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 9px;
    background: url(/assets/img/common/link_icon.png) no-repeat;
    background-size: 100% 100%;
}

@media screen and (max-width: 768px) {
    .cate-detail-para {
        font-size: 1.6rem;
    }

    .cate-detail-parent h2 {
        font-size: 1.8rem;
    }

    .cate-detail-parent p {
        font-size: 1.4rem;
    }

    .cate-detail-hastag {
        max-width: 420px;
    }

    .cate-info-img {
        margin-bottom: 50px;
    }

    .detail-code-div {
        margin: 30px 0 25px;
    }

    .detail-code-div .line-numbers.detail-code {
        font-size: 1.4rem;
        margin: 0;
        max-height: 116px;
    }

    .language-html {
        top: 5px;
    }

    .detail-code-div .line-numbers .line-numbers-rows {
        top: 23px;
        left: 143px;
    }

    .detail-code-div pre[class*=language-].line-numbers>code {
        left: -240px;
    }

    .cate-detail-parent h3 {
        font-size: 1.7rem;
    }

    .useful-link-ttl, .useful-link {
        font-size: 1.4rem;
    }

    .useful-link-div {
        padding: 23px 16px;
        margin: 50px 0 55px;
    }

    .category-info-detail-div {
        gap: 0;
    }

    .useful-link::before {
        top: 7px;
        transform: translateY(0);
    }
}

/* New detail css end */

/* Member introduction css starts */
.member-intro-one {
    margin: 50px 0 70px;
}

.member-intro-one-ttl {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
    padding-left: 25px;
    position: relative;
}

.member-intro-one-ttl::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateY(-50%);
}

.member-intro-one-ttl.no-mb {
    margin-bottom: 0;
}

.member-intro-one-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 55px;
}

.member-intro-card {
    border-radius: 8px;
}

.member-image {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.member-image>img {
    width: 100%;
}

.member-data {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #262626;
}

.member-data-block {
    background-color: #FAFAFA;
    padding: 40px;
    border-radius: 0 0 8px 8px;
    height: 100%; //Kumagai add
}

.member-service {
    font-weight: 500;
    line-height: 1.5;
    position: relative;
}

.member-service::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -15px;
    background-color: #B60005;
    width: 8px;
    height: 2px;
    border-radius: 4px;
    transform: translateY(-50%);
}

.member-name-wrapper {
  display: flex;
  align-items: center;
  gap: 7px; 
  margin-bottom: 15px;
}


.member-surname {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 15px;
}

.member-surname-lang {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
}

.member-intro-two-card {
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.member-intro-one-sub-ttl {
    font-size: 2.4rem;
    margin-bottom: 25px;
}

.member-data-block-two {
    padding: 20px 40px 40px;
}

.member-data-block-two .member-surname {
    font-size: 2rem;
}

.member-intro-three-card {
    gap: 25px;
    margin-bottom: 115px;
}

.member-intro-three-card .member-data-block {
    border-radius: 0;
    padding: 25px 32px 32px 40px;
}

.member-intro-three-card .member-service {
    font-size: 1.4rem;
}

.member-intro-three-card .member-surname {
    font-size: 1.8rem;
}

.member-intro-three-card .member-surname-en {
    font-size: 1.3rem;
}


.member-img-circle {
    display: flex;
    align-items: center;
    gap: 32px;
}

.member-img-side {
    width: 88px;
}

.member-txt-side {
    width: calc(100% - 120px);
}

.member-rounded-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}

.member-intro-card-bg {
    background-color: #FAFAFA;
    border-radius: 8px;
}

.member-pb {
    padding-bottom: 0;
}

.member-pt {
    padding-top: 0;
}

@media screen and (max-width: 900px) {
    .member-intro-two-card {
        gap: 20px;
    }
}

@media screen and (max-width:768px) {
    .member-intro-one-card {
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }

    .member-intro-two-card {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

    .member-intro-three-card {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
        margin-top: -38px;
        margin-bottom: 64px;
    }

    .member-intro-one-ttl {
        font-size: 1.8rem;
        padding-left: 14px;
        margin-bottom: 15px;
    }

    .member-intro-one {
        margin: 23px 0 50px;
    }

    .member-intro-one-ttl::before {
        width: 10px;
        height: 2px;
    }

    .member-service::before {
        width: 6px;
        left: -10px;
    }

    .member-surname {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }

    .member-intro-one-sub-ttl {
        font-size: 1.7rem;
        margin-top: -5px;
        margin-bottom: 18px;
    }

    .member-data-block {
        padding: 14px 30px 24px;
    }

    .member-intro-card.member-intro-card-bg a {
        display: grid;
        grid-template-areas: "member-g-one member-g-two"
            "member-g-three member-g-three";
        grid-template-columns: 135px 1fr;
    }

    .member-g-one {
        width: 135px;
        grid-area: member-g-one;
        border-radius: 4px 0 0 0;
    }

    .member-g-two {
        grid-area: member-g-two;
        padding: 19px 23px 24px;
    }

    .member-g-three {
        grid-area: member-g-three;
    }

    .member-pt {
        padding: 12px 20px 18px;
    }

    .member-intro-three-card .member-data-block {
        padding: 20px 20px 20px 30px;
    }

    .member-img-circle {
        justify-content: space-between;
        gap: 12px;
    }


    .member-txt-side {
        width: calc(100% - 89px);
    }

    .member-img-side {
        width: 77px;
    }

    .member-rounded-img {
        width: 77px;
        height: 77px;
    }

    .member-service, .member-data {
        font-size: 1.4rem;
    }

    .member-surname.member-surname-two {
        font-size: 1.6rem;
    }
}

@media screen and (max-width:550px) {

    .member-intro-one-card,
    .member-intro-two-card {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Member introduction css ends */

/* Footer css */
.top-btn-container {
    border-bottom: 4px solid #B60005;
}

.top-btn-inner {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.top-btn {
    cursor: pointer;
    background: url(/assets/img/common/to_top_btn.png) no-repeat;
    background-size: contain;
    width: 64px;
    height: 72px;
    position: relative;
    bottom: 16px;
}

.top-btn:hover {
    background: url(/assets/img/common/hover_to_top_btn.png) no-repeat;
    background-size: contain;
    opacity: 1;
}

.footer {
    background: #F7F7F7;
}

.footer-div-grid {
    padding: 56px 0 72px;
    display: grid;
    grid-template-columns: 18.5% 18.5% 22% 20.5% 20.5%;
}

.footer-dot-list {
    width: fit-content;
    /* font-size: 1.8rem; */
    font-weight: 500;
    padding-left: 26px;
    position: relative;
}


.footer-dot-list-inquiry {
    width: fit-content;
    /* font-size: 1.8rem; */
    font-weight: 500;
    padding-left: 13px;
    position: relative;
    padding-top: 20px;
}

.footer-dot-list-service {
    width: fit-content;
    /* font-size: 1.8rem; */
    font-weight: 500;
    padding-left: 13px;
    position: relative;
}


.footer-dot-list::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: url(/assets/img/common/red_dot.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
}


.footer-dot-list-inquiry::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: url(/assets/img/common/red_dot.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -4px;
    top: 76%;
    transform: translateY(-50%);
}

.footer-dot-list-service::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: url(/assets/img/common/red_dot.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
}


.footer-dot-list.ml-auto {
    margin-left: auto;
}

.inner-list-container {
    margin-top: 15px;
    margin-left: 26px;
}


.footer-inner-list {
    width: fit-content;
    color: #656565;
    font-size: 1.4rem;
    padding-left: 14px;
    margin-bottom: 15px;
    position: relative;
}

.footer-inner-list::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background: url(/assets/img/common/list_bar_footer.png) no-repeat;
    background-size: contain;
    width: 6px;
    height: 2px;
    transform: translateY(-50%);
}

.logo-footer-img {
    width: 140px;
}

.footer-lower-sec {
    display: flex;
    margin: 20px 0 30px;
    column-gap: 15px;
}

.footer-lower-left {
    width: 145px;
}

.hc-lower-footer-links {
    width: calc(100% - 160px);
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
}

.hc-lower-footer-links>li {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2;
}

.about-hc-footer-link {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
}

.about-hc-footer-link::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    background-color: #B60005;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
}

.lower-footer-single-link {
    padding: 0 25px;
    position: relative;
}

.lower-footer-single-link::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    background-color: #C7C7C7;
    width: 1px;
    height: 100%;
    transform: translateY(-50%);
}

.hide-link-bar::after {
    display: none;
}

.lower-footer-single-link>a {
    padding-right: 20px;
    position: relative;
}

.lower-footer-single-link>a::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    background: url(/assets/img/common/expand_icon.png) no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.footer-copyright-txt {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: #656565;
    padding-bottom: 25px;
}

@media screen and (max-width: 1080px) {
    .footer-div-grid {
        grid-template-columns: 17.5% 17.5% 24% 15.5% 25.5%;
    }
}

@media screen and (max-width: 900px) {
    .footer-div-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .top-btn {
        bottom: -25px;
        width: 48px;
        height: 48px;
    }

    .footer-div-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 32px 17px 20px;
    }

    .footer-dot-list.ml-auto {
        margin-left: 0;
    }

    .footer-dot-list {
        font-size: 1.4rem;
        padding-left: 16px;
    }

    .footer-dot-list::before {
        left: 0;
    }

    .inner-list-container {
        margin-top: 10px;
        margin-left: 18px;
    }

    .footer-inner-list {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .footer-inner-list:last-child {
        margin-bottom: 0;
    }

    .logo-footer-img {
        margin: 0 auto;
    }

    .footer-copyright-txt {
        padding: 20px 0;
    }

    .footer-lower-sec {
        flex-direction: column;
    }

    .hc-lower-footer-links {
        flex-direction: column;
        width: fit-content;
        gap: 0;
    }

    .footer-lower-sec {
        margin: 0;
        padding-left: 16px;
    }

    .about-hc-footer-link::before {
        left: -16px;
    }

    .lower-footer-single-link {
        padding: 0;
    }

    .lower-footer-single-link>a {
        width: fit-content;
        font-size: 1.2rem;
    }

    .lower-footer-single-link::after {
        display: none;
    }

    .about-hc-footer-link {
        font-size: 1.4rem;
    }
}

/* Footer css end */


/* column list page start */
.cate-accor-div {
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    background-color: #FAFAFA;
    text-align: center;
    margin: 24px 0 19px;
    padding: 7px 0;
}

.cate-accor-ttl {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.7;
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

.cate-accor-ttl::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    width: 12px;
    height: 10px;
    background: url(/assets/img/common/down_arr.png) no-repeat;
    background-size: 100% 100%;
}

.column-cate-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    margin-bottom: 64px;
}

.column-display-cate {
    width: fit-content;
    padding: 0 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    color: #B60005;
    border: 1px solid #B60005;
    border-radius: 100vmax;
}

.column-display-cate.column-display-cate-active {
    background-color: #B60005;
    color: #fff;
}

.column-row-div {
    margin-bottom: 73px;
}

.column-blog-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 37px;
}

.column-blog-img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.column-blog-img img {
    width: 100%;
}

.red-news .column-blog-img {
    position: relative;
}

.red-news .column-blog-img::before {
    content: "新着";
    font-size: 1.6rem;
    color: #FFFFFF;
    background: #B60005;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 32px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.white-news .column-blog-img {
    position: relative;
}

.white-news .column-blog-img::before {
    content: "新着";
    font-size: 1.6rem;
    color: #656565;
    background: #FFFFFF;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 32px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.column-blog-info {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.blog-info-date {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
    color: #656565;
    padding-left: 12px;
    position: relative;
}

.column-blog-info .blog-info-date-service {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
    color: #656565;
    padding: 0;   
    margin-bottom: 4px;
    position: relative;
}

.blog-info-date::after {
    content: "";
    width: 8px;
    height: 2px;
    background: #C7C7C7;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.blog-info-cate {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.blog-info-right {
    width: 40px;
    height: 40px;
    align-self: flex-end;
}

.column-blog-ttl {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 8px 0;
    letter-spacing: 0.36px;
}

.column-blog-ttl-no-icon {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 8px 0;
    letter-spacing: 0.36px;
}


.column-blog-text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin-bottom: 16px;
}

.column-blog-text::after {
    content: "";
    background: url(/assets/img/common/lock_icon.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-left: 5px;
}

.blog-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.two-column-div {
    margin-bottom: 132px;
}

.two-column-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 0;
}

.two-column-blog {
    max-width: 540px;
    width: 100%;
    display: grid;
    gap: 8px 24px;
    grid-template-columns: 1fr 224px;
    grid-template-areas: "columnTwoInfo .""columnTwoData columnTwoImg""columnTwoText columnTwoImg";
    margin-top: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid #C7C7C7;
}

.two-column-info {
    grid-area: columnTwoInfo;
}

.two-column-info .column-blog-info {
    width: 100%;
}

.two-cloumn-img {
    grid-area: columnTwoImg;
    width: 224px;
}

.two-column-imgdiv {
    width: 224px;
    border-radius: 8px;
    overflow: hidden;
}

.news .two-column-imgdiv {
    position: relative;
}

.news .two-column-imgdiv::before {
    content: "新着";
    font-size: 1.6rem;
    color: #656565;
    background: #FFFFFF;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 32px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.two-column-data {
    grid-area: columnTwoData;
}

.two-column-text {
    grid-area: columnTwoText;
}

.twocolumn-blog-text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin-bottom: 16px;
}

/* Add shimaguchi 2025-05-09 START*/
.img-80 {
  height: auto;
  max-width: 80%;
  display: block;
  margin: auto;
}

.anchor-target {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせて調整 */
}
@media (min-width: 1080px) {
  .anchor-target {
    scroll-margin-top: 130px;
  }
}


.col-detail-content-block-column {
  background-color: #F7F7F7;
  border-radius: 8px;
  padding: 30px 20px 30px 20px;
  margin: 40px 0 40px;
}

/* Add shimaguchi 2025-05-09 END*/



@media screen and (max-width:1080px) {
    .two-column-container {
        column-gap: 25px;
    }
}

@media screen and (max-width: 1020px) {
    .two-cloumn-img {
        width: 100%;
    }

    .two-column-blog {
        grid-template-areas:
            "columnTwoInfo columnTwoInfo"
            "columnTwoData columnTwoImg"
            "columnTwoText columnTwoText";
        gap: 8px 15px;
    }
}

@media screen and (max-width: 900px) {
    .two-column-blog {
        grid-template-columns: 1fr 180px;
    }

    .two-column-imgdiv {
        width: 180px;
    }
}

@media screen and (max-width: 800px) {
    .column-blog-container {
        gap: 15px;
    }

    .column-blog-info {
        gap: 8px;
    }
}

@media screen and (max-width: 768px) {
    .column-blog-container {
        gap: 40px;
        grid-template-columns: repeat(1, 1fr);
    }

    .two-column-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .two-column-blog {
        max-width: 100%;
        padding-bottom: 25px;
    }

    .column-cate-parent.column-cate-parent-active {
        border: 1px solid #C7C7C7;
        border-radius: 8px;
        background-color: #FAFAFA;
        margin: 24px 12px;
    }

    .cate-accor-div.cate-accor-div-border {
        border: none;
        border-bottom: 1px solid #C7C7C7;
        background-color: unset;
        border-radius: 0;
        margin: 0;
    }

    .cate-accor-ttl.cate-accor-ttl-active::after {
        top: 55%;
        transform: translateY(-50%) rotate(60deg);
    }

    .column-cate-container {
        display: none;
    }

    .column-cate-container.column-cate-container-active {
        display: flex;
        column-gap: 3px;
        row-gap: 6px;
        margin: 16px 0;
    }

    .column-display-cate {
        text-align: center;
        padding: 0 0 2px 0;
        font-size: 1rem;
        width: 70px;
    }

    .column-blog-ttl {
        font-size: 1.6rem;
    }

    .column-blog-text {
        font-size: 1.4rem;
    }

    .two-column-div {
        margin-bottom: 55px;
    }

    .column-row-div {
        margin-bottom: 50px;
    }

    .news .two-column-imgdiv::before {
        font-size: 1.2rem;
        width: 40px;
        height: 21px;
    }

    .blog-info-cate {
        gap: 4px;
    }
}

@media screen and (max-width: 500px) {
    .two-column-blog {
        grid-template-columns: 1fr 131px;
    }

    .two-column-imgdiv {
        width: 131px;
    }
}

/* column list page end */

/* login page start */
.login-container {
    padding: 104px 0 94px;
    display: flex;
    justify-content: center;
    gap: 100px;
}

.login-container .login-form {
    max-width: 480px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 64px 48px 72px 48px;
}

.login-container .input-group {
    margin-bottom: 32px;
}

.login-container .input-group .last {
    margin-bottom: 24px;
}

.login-container .form-label {
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

.login-container .form-input {
    width: 100%;
    height: 64px;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    font-size: 1.6rem;
    padding: 10px;
}

.login-container .form-input+.eye-icon {
    position: relative;
    cursor: pointer;
}

.login-container .form-input+.eye-icon::after {
    content: "";
    background: url(/assets/img/common/eye_icon.png) no-repeat;
    background-size: contain;
    width: 23px;
    height: 12px;
    position: absolute;
    right: 18px;
    transform: translateY(26px);
}

.login-container .forget-pssword {
    font-size: 1.6rem;
    font-weight: 500;
    color: #344096;
    text-decoration: underline;
    text-align: center;
    margin-top: -5px;
}

.login-button {
    font-family: "Noto Sans JP", sans-serif;
    cursor: pointer;
    display: block;
    max-width: 384px;
    width: 100%;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 1.6rem;
    font-weight: 500;
    border: unset;
    box-sizing: border-box;
    padding: 20px 0;
    border-radius: 100vmax;
    background: #B60005;
    color: #FFFFFF;
}

.login-button:hover {
    opacity: 0.7;
}

.login-container .login-right {
    width: 100%;
    max-width: 580px;
}

.login-container .login-right-img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.login-container .login-right-img img {
    width: 100%;
}

.login-right.login-right-hide {
    display: none;
}

.login-container.login-display {
    justify-content: space-between;
    display: flex;
}

.login-left.login-left-active {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.login-left-plain{
   width: 100%;
   display: flex;
   justify-content:center;
}



.login-category-container {
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cate-block {
    padding: 0 12px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #B60005;
    border: 1px solid #B60005;
    border-radius: 100vmax;
}

.login-side-text {
    font-size: 2.4rem;
    color: #262626;
    font-weight: 500;
    line-height: 1.4;
    margin: 8px 0 16px;
}

.login-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contact-modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.contact-modal-content {
    background-color: #fff;
    max-width: 730px;
    width: 100%;
    margin: 96px auto;
    padding: 60px 94px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.close {
    cursor: pointer;
    background: url(/assets/img/common/close_btn.png) no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 30px;
    right: 30px;
}

.contact-model-text {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
}

.contact-model-text a {
    display: inline;
    font-weight: 500;
    color: #344096;
    text-decoration: underline;
}

.contact-modal-content .model-form {
    margin-top: 40px;
}

.contact-modal-content .input-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.contact-modal-content .model-label {
    font-size: 1.6rem;
    font-weight: 500;
}

.contact-modal-content .star {
    color: #B60005;
    font-size: 1rem;
    position: relative;
    top: -5px;
}

.contact-modal-content .model-input {
    max-width: 416px;
    width: 100%;
    height: 56px;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    padding: 10px;
    font-size: 1.6rem;
}

.contact-modal-content .input-row-left {
    max-width: 416px;
    width: 100%;
}

.form-error-design {
    background: rgba(182, 0, 5, 0.1) !important;
    border: unset !important;
}

.form-error-message {
    font-size: 1.6rem;
    color: #B60005;
    text-align: left;
    line-height: 2;
}

.form-error-message.text-center {
    text-align: center;
}

.contact-modal-content .model-radio {
    display: flex;
}

.contact-modal-content .model-radio-group,
.contact-modal-content .model-radio-container {
    max-width: 416px;
    width: 100%;
}

.contact-modal-content .model-radio {
    width: fit-content;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}

.model-radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #C7C7C7;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 0;
    margin-right: 6px;
    position: relative;
    cursor: pointer;
    min-width: 20px;
}

.model-radio input[type="radio"]:checked {
    background-color: #FFFFFF;
    border: 1px solid #C7C7C7;
}

.model-radio input[type="radio"]::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: #B60005;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease-in-out;
}

.model-radio input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

.model-agree-div {
    margin: 48px 0 40px;
}

.model-agree-check {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-message.text-center {
    text-align: center;
}

.model-agree-div label {
    font-size: 1.6rem;
}

.model-agree-div a {
    display: inline;
    text-decoration: underline;
}

.model-agree-div input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #C7C7C7;
    border-radius: 2px;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
}

/* Custom checkmark */
.model-agree-div input[type="checkbox"]::before {
    content: "";
    font-size: 14px;
    position: absolute;
    background: url(/assets/img/common/check_icon.png) no-repeat;
    background-size: contain;
    width: 12px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease-in-out;
}

.model-agree-div input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

@media screen and (max-width:1080px) {
    .login-container.login-display {
        gap: 50px;
    }
}

@media screen and (max-width: 900px) {
    .login-container.login-display {
        flex-direction: column;
        align-items: center;
    }

    .login-container .login-right {
        max-width: 480px;
    }
}

@media screen and (max-width:768px) {
    .contact-modal-content {
        max-width: 360px;
        margin: 10px auto;
        padding: 50px 30px;
    }

    .contact-model-text {
        font-size: 1.4rem;
    }

    .contact-modal-content .model-label {
        text-align: start;
        width: 52px;
        font-size: 1.4rem;
    }

    .contact-modal-content .model-input {
        height: 48px;
    }

    .contact-modal-content .input-row-left, .contact-modal-content .model-radio-container {
        max-width: unset;
        width: calc(100% - 72px);
    }

    .input-row.item-txt {
        align-items: start;
    }

    .contact-modal-content .model-radio {
        font-size: 1.4rem;
    }


    .model-radio input[type="radio"] {
        margin: 0 5px 12px 0;
    }

    .other-radio {
        margin-bottom: 0 !important;
    }

    .model-agree-div label {
        font-size: 1.4rem;
    }

    .watch-btn {
        width: 220px;
        padding: 12px 0;
    }

    .model-agree-div {
        margin: 4px 0 32px;
    }

    .login-container.login-display {
        gap: 24px;
        padding: 24px 0 41px;
    }

    .login-container .form-label {
        font-size: 1.4rem;
    }

    .login-container .login-form {
        padding: 35px 32px 64px 32px;
    }

    .login-container .form-input {
        height: 56px;
    }

    .login-container .input-group {
        margin-bottom: 25px;
    }

    .login-container .forget-pssword {
        font-size: 1.4rem;
    }

    .login-container .form-input+.eye-icon::after {
        transform: translateY(23px);
    }

    .login-category-container {
        margin-top: 12px;
        gap: 4px;
    }

    .login-side-text {
        font-size: 1.6rem;
    }

    .login-tag-container {
        gap: 4px;
    }
}

@media screen and (max-width:370px) {
    .contact-modal-content {
        max-width: 300px;
    }
}

/* login page end */

/* Search result page css starts */
.site-navi {
    /*height: 1456px;*/
    height: auto;
    overflow-y: scroll;
    scrollbar-color: #EAEAEA #FFFFFF;
}

.guide-navi-data {
    display: grid;
    grid-template-columns: 264px calc(100% - 320px);
    gap: 56px;
    margin-bottom: 100px;
}

.guide-navi-data.no-gap {
    gap: 0;
    grid-template-columns: 264px calc(100% - 264px);
}

.search-data {
    grid-template-columns: 264px calc(100% - 320px);
    gap: 56px;
    margin-bottom: 100px;
}

.search-data.no-gap {
    gap: 0;
    grid-template-columns: 264px calc(100% - 264px);
}

.site-navi-ttl {
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 10px;
    margin: 50px 0 25px;
    position: relative;
}

.site-navi-ttl.first-navi-ttl {
    margin-top: 0;
}

.site-navi-ttl::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    background: url(/assets/img/common/site_navi_ttl_bar.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 4px;
}

.site-navi-link {
    line-height: 1.5;
    color: #656565;
    width: fit-content;
    padding-left: 15px;
    margin: 11px 0;
    position: relative;
}

.site-navi-link::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background: url(/assets/img/common/site_navi_link_arr.png) no-repeat;
    background-size: contain;
    width: 6px;
    height: 8px;
    transform: translateY(-50%);
}

@media screen and (max-width:1080px) {
    .guide-navi-data {
        margin-bottom: 65px;
    }

    .guide-navi-data.no-gap {
        grid-template-columns: 100%;
    }

    .site-navi {
        display: none;
    }

    .guide-navi-data {
        grid-template-columns: 100%;
    }
}

/* Search result page css ends */

/* Technical operation css starts */
.category-div {
    margin: 45px 20px 36px 20px;
}

.guide-category-div .category-tab {
    padding: 2px 32px 3px;
}

.guide-category-div-toggle {
    padding-top: 45px;
}

.guide-catenew-container {
    padding-top: 45px;
    max-width: 872px;
    margin: 0 auto;
}

.guide-catenew-div {
    display: flex;
    justify-content: space-between;
}

.catenew-list {
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    position: relative;
    padding-left: 26px;
}

.catenew-list::before {
    content: "";
    background: #FFF;
    background-size: contain;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
}

.catenew-list.s-manual::before {
    background: url(/assets/img/common/standard_manual.png) no-repeat;
    background-size: contain;
}

.catenew-list.fs-manual::before {
    background: url(/assets/img/common/function_specific_manual.png) no-repeat;
    background-size: contain;
}

.catenew-list.function-list::before {
    background: url(/assets/img/common/function_list.png) no-repeat;
    background-size: contain;
}

.catenew-list.faq::before {
    background: url(/assets/img/common/faq.png) no-repeat;
    background-size: contain;
}

.catenew-list.note::before {
    background: url(/assets/img/common/note.png) no-repeat;
    background-size: contain;
}

.catenew-list.troubleshot::before {
    background: url(/assets/img/common/troubleshot.png) no-repeat;
    background-size: contain;
}

.catenew-list.maintain-info::before {
    background: url(/assets/img/common/maintainance_info.png) no-repeat;
    background-size: contain;
}

.guide-heart-core-txt {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin: 60px 0 20px;
    opacity: 1;
    transition: all 0.1s ease-in-out;
}

.guide-heart-core-txt-hide {
    opacity: 0;
    transition: all 0.1s ease-in-out;
}

.guide-search-sticky {
    position: sticky;
    top: 100px;
    background-color: #ffffff;
    z-index: 1;
}

.guide-search-height {
    height: auto;
    margin-bottom: 20px;
    padding-bottom: 1px;
}

.guide-search-box {
    width: unset;
    max-width: 800px;
    margin: 0 auto 80px;
    padding: 19px 24px;
    border-radius: 80px;
    transition: all 0.3s ease-in-out;
}

.guide-search-box .search-box {
    width: calc(100% - 48px);
    height: 30px;
}

.guide-search-box::placeholder {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    color: #656565;
}

.guide-search-box .search-icon {
    width: 48px;
    height: 48px;
}

.guide-search-box .search-box {
    width: calc(100% - 48px);
}

.guide-search-box-move {
    max-width: 448px;
    padding: 8px 12px 8px 30px;
    border-radius: 80px;
    margin-top: -65px;
    margin-bottom: 35px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

.guide-search-box .search-box {
    font-size: 1.6rem;
    font-weight: 500;
}

.guide-search-box.guide-search-box-move .search-box {
    font-size: 1.4rem;
}

.guide-search-box-move .search-icon {
    width: 28px;
    height: 28px;
}

.guide-search-box-move .search-box {
    width: calc(100% - 28px);
}

.document-ttl {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.5;
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
}

.document-ttl::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateY(-50%);
}

.document-txt {
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.initial-txt-link {
    display: inline;
    font-weight: 500;
    color: #344096;
    text-decoration: underline !important;
}

.document-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 25px;
}

.document-card-div {
    background-color: #FAFAFA;
    border-radius: 8px;
    padding: 30px;
}

.document-navi-ttl {
    font-size: 1.8rem;
    margin: 0;
    padding-left: 14px;
    border-bottom: 1px dashed #C7C7C7;
    position: relative;
}

.document-navi-ttl::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    background-color: #B60005;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.site-navi-ttl.document-navi-ttl::after {
    display: none;
}

.document-navi-txt {
    line-height: 1.6;
    letter-spacing: 0.4px;
    margin: 10px 0 20px;
}

.document-card-div .site-navi-link {
    font-size: 1.4rem;
}

.version-capsule {
    position: relative;
}

.version-capsule::after {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    color: #262626;
    position: absolute;
    content: "V12.1";
    top: 50%;
    right: 15px;
    border: 1px solid #C7C7C7;
    border-radius: 24px;
    padding: 0 5px;
    transform: translateY(-50%);
}

@media screen and (max-width:1080px) {
    .guide-search-sticky {
        top: 50px;
    }

    .guide-search-box {
        padding: 15px;
        margin-bottom: 50px;
    }

    .guide-search-box::placeholder {
        font-size: 1.4rem;
    }

    .guide-search-box .search-icon {
        width: 32px;
        height: 32px;
    }

    .guide-search-box .search-box {
        width: calc(100% - 44px);
    }

    .guide-search-box-move {
        margin-bottom: 24px;
    }

    .guide-catenew-container {
        padding-top: 24px;
        margin-top: 9px;
    }

    .guide-catenew-div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: unset;
        row-gap: 16px;
    }

    .catenew-list-div {
        /* padding: 13px 0; */
        border-left: 1px dashed #C7C7C7;
        /* border-left: 1px dashed #C7C7C7;
        border-bottom: 1px dashed #C7C7C7; */
    }

    /* 
    .catenew-list-div.one,
    .catenew-list-div.four {
        border-left: unset;
    } */

    .guide-last-in-row {
        border-right: 1px dashed #C7C7C7;
    }

    .catenew-list-div.four,
    .catenew-list-div.five,
    .catenew-list-div.six {
        border-bottom: unset;
    }

    .catenew-list {
        width: fit-content;
        text-decoration: none !important;
        text-align: center;
        margin: 0 auto;
        padding-left: 0;
        padding-top: 28px;
    }

    .catenew-list::before {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }

    .document-cards {
        gap: 12px;
    }

    .document-ttl {
        font-size: 1.8rem;
        margin-bottom: 0;
    }

    .guide-category-div .category-tab {
        padding: 2px 8px 3px;
    }

    .guide-category-div-toggle {
        padding-top: 30px;
    }

    .guide-heart-core-txt {
        font-size: 1.4rem;
        margin: 40px 0 20px;
    }
}

@media screen and (max-width: 768px) {
    .guide-catenew-div {
        row-gap: 8px;
    }

    .guide-search-box.guide-search-box-move {
        max-width: 287px;
        height: 40px;
        padding-right: 10px;
        gap: 5px;
        justify-content: space-around;
    }

    .guide-search-box {
        padding: 11px 17px;
        padding-right: 12px;
        max-width: 351px;
        width: 100%;
        height: 64px;
    }

    .guide-search-box .search-box {
        font-size: 1.4rem;
        font-weight: 500;
        padding-top: 5px;
    }

    .guide-search-box.guide-search-box-move .search-box {
        width: calc(100% - 28px);
        font-size: 1.2rem;
        height: 17px;
        padding: 0;
        margin: 0;
        padding-top: 3px;
    }

    .guide-search-box.guide-search-box-move .search-icon {
        width: 24px;
        height: 24px;
    }

    .guide-heart-core-txt {
        margin: 24px 0 8px;
    }

    .guide-heart-core-txt-hide {
        margin-top: 47px;
    }

    .search-ttl-flex {
        margin-bottom: 21px;
    }

    .document-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .guide-search-box-move {
        margin-top: -50px;
    }

    .catenew-list {
        font-size: 1rem;
    }

    .document-txt {
        font-size: 1.4rem;
    }

    .initial-txt-link {
        font-size: 1.6rem;
    }

    .document-navi-txt {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 375px) {
    .catenew-list.troubleshot {
        letter-spacing: -1px;
    }
}

/* Technical operation css ends */

/* contact-section start */
.cnt-sec {
    margin-top: 48px;
}

.cnt-form-container {
    max-width: 896px;
    margin: 24px auto 106px;
    padding: 64px 72px 125px;
    border-radius: 16px;
    background-color: #FAFAFA;
}

.cnt-sec .inquire-txt {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 15px;
}

.cnt-sec .form_ttl {
    font-size: 1.6rem;
    line-height: 1.7;
    text-align: left;
    font-weight: 400;
    padding-left: 15px;
    max-width: 896px;
    margin: 2px auto 0;
   
}

.cnt-sec .form_ttl_support {
    font-size: 1.3rem;
    line-height: 1.7;
    text-align: center;
    font-weight: 400;
}

.form_ttl_support a {
  color: blue;
  text-decoration: underline;
  display: inline
}

.cnt-sec .form-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 47px;
}

.cnt-sec .form-div.form-div-start {
    align-items: start;
}

.cnt-sec .form-div:last-child {
    margin-bottom: 0;
}

.cnt-sec .form-left {
    display: flex;
    align-items: start;
    max-width: 105px;
    width: 100%;
    height: fit-content;
}

.cnt-sec .form-right {
    max-width: calc(100% - 105px);
    width: 100%;
}

.cnt-sec .form-flex div:not(:last-child) {
    margin-bottom: 5px;
}

.cnt-sec .form-flex-w {
    max-width: 578px;
    width: 100%;
}

.cnt-sec .inquiry-items {
    font-size: 1.6rem;
    font-weight: 500;
    text-wrap: nowrap;
    line-height: 1.6;
}

.cnt-sec .required {
    width: fit-content;
    font-size: 1rem;
    font-weight: 500;
    color: #B60005;
    margin-top: 4px;
    padding: 0 3px;
}

/*Jennifer add - start*/

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cnt-sec input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.cnt-sec label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
}

.cnt-sec label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #C7C7C7;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  box-sizing: border-box;
}

.cnt-sec input[type="radio"]:checked+label::before {
  background-color: #B60005;
  border-color: #B60005;
}

.cnt-sec input[type="radio"]:focus + label::before {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
}

/*Jennifer end*/


.cnt-sec input[type="radio"]:checked+label::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #B60005;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.cnt-sec textarea {
    width: 100%;
    height: 264px;
    background-color: #ffffff;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    resize: none;
    padding: 10px 20px;
    outline: none;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", serif;
}

.cnt-sec .input-box {
    width: 100%;
    height: 56px;
    background: #ffffff;
    outline: none;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    padding: 0 20px 0 18px;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", serif;
}

.cnt-sec .checkbox-label label {
    padding-left: 10px;
}

.cnt-sec .checkbox-label label::before {
    content: none;
}

.cnt-sec .checkbox-label>li {
    display: flex;
    align-items: center;
}

.cnt-sec input[type="checkbox"] {
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0 -20px 0 0;
    position: relative;
    top: 0;
    left: 4px;
    z-index: 1;
    cursor: pointer;
}

.cnt-sec .custom-checkbox {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    top: 0;
    cursor: pointer;
}

.cnt-sec input[type="checkbox"]:checked+.custom-checkbox::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 20%;
    background: url(/assets/img/common/check_icon.png) no-repeat;
    background-size: contain;
    width: 13px;
    height: 10px;
    transform: translateY(-50%);
}

.cnt-sec .select_box {
    text-align: start;
    padding: 0 20px;
    width: 296px;
    height: 56px;
    color: #656565;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    background-color: white;
    background-image: url(/assets/img/common/drop_down_ico.png);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 12px;
    font-size: 16px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.cnt-sec .select_box:focus {
    outline: 0;
}

.check-input-btn {
    max-width: 280px;
    height: 64px;
    background: #B60005;
    margin: 0 auto;
    border-radius: 80px;
}

.check-input-btn a {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 64px;
}

.check-input-btn a span {
    display: block;
    position: relative;
    padding-left: 32px;
}

.check-input-btn a span::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 17px;
    background: url(/assets/img/common/cnt_sent_icon.png)no-repeat center/contain;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.send-btn-input {
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    border: unset;
    max-width: 280px;
    width: 100%;
    height: 64px;
    background: #B60005;
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 64px;
}

.send-btn-input span {
    position: relative;
    padding-left: 31px;
}

.send-btn-input span::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(/assets/img/common/cnt_sent_icon.png)no-repeat center/contain;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.send-btn-input:hover {
    opacity: 0.7;
}

.btn-container {
   display: flex;
   justify-content: space-between;
}

.send-btn {
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    /*border: unset;*/
    border: 1px solid #B60005;
    max-width: 280px;
    width: 100%;
    height: 64px;
    background: #B60005;
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 80px;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    margin-top: 64px;
}

.send-btn span {
    position: relative;
    padding-left: 31px;
}

.send-btn span::before {
    content: "";
    position: absolute;
    width: 22px;
    /* height: 17px; */
    height: 22px;
    background: url(/assets/img/common/cnt_sent_icon.png)no-repeat center/contain;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.send-btn:hover {
    /*opacity: 0.7;*/
    color: #B60005;
    background-color: #FFFFFF;
}
/* Jennifer add */
.send-btn:hover span::before {
    background: url(/assets/img/common/cnt_sent_icon_red.png) no-repeat center/contain;
}

.return-btn {
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    border: 1px solid #B60005;
    max-width: 280px;
    width: 100%;
    height: 64px;
    background: #FFFFFF;
    color: #B60005;
    margin: 0 auto;
    border-radius: 80px;
    /*display: inline;*/
    justify-content: center;
    align-items: center;
    margin-top: 64px;
}

.return-btn span {
    position: relative;
    padding-left: 31px;
}

.return-btn span::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(/assets/img/common/news_btn_icon.png)no-repeat center/contain;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.return-btn:hover {
    color: #FFFFFF;
    background-color: #B60005;
}


@media screen and (max-width:768px) {
    .cnt-form-container {
        border-radius: 8px;
        padding: 23px 32px 56px;
        margin-bottom: 67px;
    }

    .cnt-sec .select_box {
        width: 245px;
    }

    .cnt-sec .form-div {
        flex-direction: column;
        align-items: unset;
        gap: 1px;
        margin-bottom: 13px;
    }

    .cnt-sec .form-right {
        max-width: 100%;
    }

    .select_box.select_box_w {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 1.4rem;
        height: 48px;
    }

    .cnt-sec {
        margin-top: 0;
        padding: 0 12px;
    }

    .cnt-sec .form_ttl {
        font-size: 1.4rem;
        text-align: start;
        margin: 24px 0 17px;
    }

    .cnt-sec label::before {
        width: 17px;
        height: 17px;
        top: 50%;
    }

    .cnt-sec input[type="radio"]:checked+label::after {
        width: 10px;
        height: 10px;
        left: 3px;
        top: 50%;
        transform: translate(0.5px, -50%);
    }

    .cnt-sec .inquiry-items {
        font-size: 1.4rem;
    }

    .cnt-sec .form-div.form-div-start {
        margin-top: 20px;
    }

    .cnt-sec label {
        font-size: 1.4rem;
        padding-left: 23px;
    }

    .cnt-sec .input-box {
        font-size: 1.4rem;
        height: 48px;
        border-radius: 3px;
    }

    .inqury-radio {
        margin-top: 3px;
    }

    .cnt-sec .custom-checkbox, .cnt-sec input[type="checkbox"] {
        width: 17px;
        height: 17px;
    }

    .cnt-sec input[type="checkbox"]:checked+.custom-checkbox::after {
        width: 9px;
        height: 6px;
        left: 24%;
    }

    .rec-radio-btn {
        gap: 5px !important;
    }

    .send-btn,.return-btn,.g-recaptcha {
        margin-top: 40px;
    }
}

@media screen and (max-width:550px) {
    .cnt-sec .select_box {
        width: 185px;
    }
}

/* contact-section end */

/* Operation Manual start */
.system-manage-txt {
    display: block;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 17px;
}

.system-manage-div {
    margin-top: 63px;
    padding: 24px 0;
    border-bottom: 1px dashed #C7C7C7;
}

.unlogin-link {
    padding: 16px 0;
    border-bottom: 1px dashed #C7C7C7;
    position: relative;
}

.unlogin-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url(/assets/img/common/play_btn.png) no-repeat;
    background-size: 100% 100%;
}

.unlogin-txt {
    display: block;
    width: 90%;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
}

.unlogin-txt::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: #B60005;
}

.unlogin-para {
    display: block;
    width: 90%;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #656565;
    padding-left: 17px;
}

@media screen and (max-width: 768px) {
    .system-manage-div {
        margin-top: 17px !important;
    }

    .system-manage-txt {
        font-size: 1.7rem;
    }

    .unlogin-txt {
        font-size: 1.5rem;
        padding-left: 11px;
    }

    .unlogin-para {
        font-size: 1.2rem;
    }

    .unlogin-txt::before {
        top: 8px;
        left: 0;
        transform: translateY(0);
        width: 6px;
        height: 6px;
        border-radius: 1px;
    }

    .unlogin-link::after {
        width: 18px;
        height: 18px;
    }

    .unlogin-link {
        padding: 10px 0;
    }
}

/* Operation Manual end */

/* Operation detail start */
.operation-navi-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
}

.operation-site-navi {
    width: 264px;
}

.operation-data-right {
    width: 584px;
}

.operation-detail {
    position: relative;
}

.operation-detail h3 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.5;
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
}

.operation-detail h3::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    background-color: #B60005;
    width: 16px;
    height: 4px;
    border-radius: 24px;
    transform: translateY(-50%);
}

.version-txt {
    position: absolute;
    top: 12px;
    right: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
    border-radius: 24px;
    border: 1px solid #C7C7C7;
    background-color: #fff;
    padding: 1px 9px;
}

.operation-detail .version-txt {/*250424*/
    position: static;
    display: inline;
}

.operation-detail p {
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.operation-detail p:nth-of-type(2) {
    margin-top: 26px;
}

.token {
    z-index: 0 !important;
}

.copy-div {
    /* max-width: 312px; */
    width: 100%;
    position: relative;
}

.copy-wrap {
    width: fit-content;
    height: fit-content;
    position: relative;
    /* margin: 50px 0 16px; */
    margin: 50px auto 16px;
}

.copy-btn {
    display: flex;
    /* white-space: pre-wrap; */
    white-space: nowrap;
    word-break: break-all;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    /* width: 312px; */
    /* max-height: 88px; */
    height: 88px;
    border-radius: 8px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;
    background-color: #EAEAEA;
    /*overflow: auto; */
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    padding: 0 20px;
}

.btn-clipboard {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: none;
    background: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.copy-txt {
    display: block;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}

.copied-position {
    position: absolute;
    right: -20px;
}

.copied-message {
    position: relative;
    font-size: 1.4rem;
    color: #fff;
    padding: 7px 12px;
    border-radius: 4px;
    background-color: #262A32;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.copied-message.show {
    opacity: 1;
    transform: translateY(0);
}

.copied-message::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 10px;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background-color: #262A32;
}

.highlight {
    background-color: #1177BD;
    color: #fff;
}

.operation-detail p:nth-of-type(3) {
    margin: 16px 0 40px;
}

.operation-code-div {
    margin: 16px 0 50px;
}

.output-result-div span {
    display: block;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 25px;
}

.output-result-div>div {
    border: 1px solid #C7C7C7;
    background-color: #fff;
    border-radius: 8px;
    padding: 24px 32px;
}

.output-result-div>div span {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    padding-left: 20px;
    margin-bottom: 11px;
    position: relative;
}

.output-result-div>div span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #262626;
}

.output-result-div ul {
    margin: 13px 0 0 24px;
}

.output-result-div ul li {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9;
    padding-left: 12px;
    position: relative;
}

.output-result-div ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: url(/assets/img/common/list_arr.png) no-repeat;
    background-size: 100% 100%;
}

.operation-table {
    max-width: 584px;
    width: 100%;
    margin: 50px 0 98px;
}

.operation-table td:first-child {
    width: 186px;
    padding: 34px;
}

.operation-table td>div {
    margin-top: 5px;
}

.operation-table td a {
    display: inline;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #344096;
    text-decoration: underline;
    text-underline-offset: 1px;
}

.operation-table td a:nth-of-type(2) {
    margin-left: 14px;
    position: relative;
}

.operation-table td a:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 66%;
    right: -20px;
    transform: translateY(-50%);
    width: 12px;
    height: 6px;
    background: url(/assets/img/common/blue_down.png) no-repeat;
    background-size: 100% 100%;
}

.helpful-div {
    background-color: #FAFAFA;
    border-radius: 9px;
    padding: 24px 20px 40px;
    text-align: center;
    margin: 59px 0 104px;
}

.helpful-div span {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
}

.helpful-div>div {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 25px;
}

.helpful-div a {
    max-width: 160px;
    width: 100%;
    display: inline;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 12px;
    color: #fff;
    border-radius: 5px;
    background-color: #B60005;
}

.helpful-div a:nth-of-type(2) {
    background-color: #8E8E8E;
}

.function-list-btn {
    padding: 20px 30px 20px 67px;
    margin: 100px auto 115px;
}

.function-list-btn::before {
    left: 37px;
}

.built-in-module {
    max-width: 200px;
    width: 100%;
    height: 518px;
    background-color: #FAFAFA;
    border-radius: 8px;
    padding: 24px 12px;
}

.built-in-link {
    width: fit-content;
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.built-in-link.built-in-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    width: 4px;
    height: 24px;
    background-color: #B60005;
}

.built-in-link.built-in-active {
    position: relative;
    font-weight: 500;
}

@media screen and (max-width:1150px) {
    .operation-navi-data {
        gap: 20px;
    }
}

@media screen and (max-width: 1080px) {
    .operation-navi-data {
        grid-template-columns: calc(100% - 220px) 1fr;
    }

    .operation-data-right {
        width: 100%;
    }

}

@media screen and (max-width:768px) {
    .operation-detail h3 {
        font-size: 1.8rem;
        padding-left: 15px;
    }

    .operation-detail h3::before {
        width: 10px;
        height: 2px;
    }

    .operation-navi-data {
        grid-template-columns: repeat(1, 1fr);
        display: block;/* sdl 250527 */
    }

    .operation-site-navi {
        width: 100%;
    }

    .operation-data-right {
        width: 100%;
    }

    .detail-code-div.operation-code-div {
        width: calc(100vw - 40px);
        margin: 6px 0 40px;
    }

    .version-txt {
        font-size: 1rem;
        padding: 0px 5px;
    }

    .operation-detail p {
        font-size: 1.4rem;
    }

    .copy-div {
        margin: 0 auto;
    }

    .copy-wrap {
        margin: 40px auto 8px;
    }

    .copy-btn {
        font-size: 1.6rem;
        width: 240px;
        max-height: 64px;
    }

    .btn-clipboard {
        width: 32px;
        height: 32px;
    }

    .copy-txt {
        margin-top: -5px;
    }

    /*
    .operation-detail p:nth-of-type(3) {
        text-align: center;
    }
    */

    .operation-table td:first-child {
        width: 115px;
        padding: 25px 7px;
    }

    .output-result-div span {
        font-size: 1.7rem;
        margin-bottom: 17px;
    }

    .output-result-div>div {
        padding-bottom: 20px;
    }

    .output-result-div>div span {
        font-size: 1.6rem;
        padding-left: 17px;
    }

    .output-result-div ul {
        margin-top: -6px;
    }

    .output-result-div ul li {
        font-size: 1.4rem;
    }

    .output-result-div>div span::before {
        width: 12px;
        height: 12px;
    }

    .operation-table {
        margin: 17px 0 44px;
    }

    .operation-table td a {
        font-size: 1.4rem;
    }

    .operation-table td a:nth-of-type(2) {
        margin-left: 9px;
    }

    .operation-table td a:nth-of-type(2)::after {
        width: 10px;
        height: 5px;
        right: -13px;
    }

    .helpful-div {
        margin: 22px 0 0;
        padding: 24px 46px;
    }

    .helpful-div>div {
        gap: 20px;
        margin-top: 15px;
    }

    .helpful-div span {
        font-size: 1.4rem;
    }

    .helpful-div a {
        font-size: 1.4rem;
        max-width: 120px;
        padding: 10px;
    }

    .function-list-btn {
        margin: 56px auto 65px !important;
    }

    .built-in-module {
        max-width: 100%;
        width: 100%;
        height: fit-content;
        margin-bottom: 66px;
    }
}

/* Operation detail end */

/* search result page start */
.search-result-right {
    max-width: 856px;
    margin-left: auto;
    padding-left: 20px;
}

.search-result {
    margin-left: auto;
    padding-left: 20px;
}

.search-info-text {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 25px 0 20px;
}

.sresultOne {
    grid-area: sresultOne;
}

.sresultTwo {
    grid-area: sresultTwo;
}

.sresultThree {
    grid-area: sresultThree;
}

.sresultFour {
    grid-area: sresultFour;
}

.sresultFive {
    grid-area: sresultFive;
}

.search-result-post {
    padding: 16px 0 18px;
    border-top: 1px dashed #C7C7C7;
    display: grid;
    column-gap: 30px;
    row-gap: 10px;
    grid-template-columns: 1fr 160px;
    grid-template-areas: "sresultOne sresultThree""sresultTwo sresultThree";
}

.search-result-post.search-result-post-two {
    grid-template-columns: 1fr;
    grid-template-areas: "sresultFour""sresultFive";
}

.search-result-post:last-child {
    border-bottom: 1px dashed #C7C7C7;
}

.sresult-right {
    width: 100%;
    max-width: 160px;
}

.sresult-right .sresult-img {
    border-radius: 8px;
    overflow: hidden;
}

.sresult-ttl-outer {
    margin-left: 14px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.sresult-ttl {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 3px;
}

.sresult-ttl-outer:has(.version-block) .sresult-ttl {
    width: calc(100% - 84px);
}

.version-block {
    width: 77px;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 4px 0;
    text-align: center;
    border: 1px solid #C7C7C7;
    border-radius: 100vmax;
}

.sresult-link {
    margin-left: 14px;
    width: fit-content;
    font-size: 1.6rem;
    text-decoration: underline !important;
    color: #344096;
}

.sresult-text {
    font-size: 1.4rem;
    padding-left: 12px;
    line-height: 1.4;
    position: relative;
}

.sresult-text::before {
    content: "";
    background: url(/assets/img/common/red_round_rectangle.png) no-repeat;
    background-size: contain;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 5px;
}

.sresult-guide::after {
    content: "";
    background: url(/assets/img/common/lock_icon.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-left: 5px;
}

@media screen and (max-width:1080px) {
    .search-result-right {
        max-width: unset;
        width: 100%;
        padding-left: 0;
    }

    .search-ttl-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .search-result-post {
        column-gap: 30px;
        row-gap: 10px;
        grid-template-areas: "sresultOne sresultOne""sresultTwo sresultThree";
    }

    .search-info-text {
        font-size: 1.4rem;
        margin: 0;
    }

    .sresult-ttl {
        font-size: 1.6rem;
    }

    .version-block {
        font-size: 1rem;
    }

    .sresult-link {
        font-size: 1.4rem;
    }

    .search-result-post {
        gap: 10px;
    }
}

@media screen and (max-width: 890px) {
    .search-result-post {
        grid-template-columns: 1fr 150px;
    }

    .sresult-right {
        max-width: 100%;
        width: 150px;
    }

    .search-result-post:has(.sresult-right) .sresult-left {
        width: 100%;
    }
}

@media screen and (max-width: 830px) {
    .search-result-post {
        grid-template-columns: 1fr 130px;
    }

    .sresult-right {
        max-width: 100%;
        width: 130px;
    }

    .search-result-post:has(.sresult-right) .sresult-left {
        width: 100%;
    }
}

/* 20250411 */

.column-blog-img {
    border-radius: 0;
}

.column-blog-img img {
    border-radius: 8px;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 258px;
    margin: 0 auto;
    object-fit: cover;
}
.column-blog-img02 {
    width: 80%;
    margin: 20px auto;
}
.red-news .column-blog-img::before {
    z-index: 1;
}

/* search result page end */


/* 20250422 */

.search-result-right {
    margin-left: 0;
}

.column-blog-img {
    position: relative;
}

.mv_play .column-blog-img::after {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    background-image: url(/assets/img/common/play_ic.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0.9;
}

.col-img-block.mv_play {
    position: relative;
}

.col-img-block.mv_play::after {
    content: '';
    display: block;
    width: 112px;
    height: 112px;
    background-image: url(/assets/img/common/play_ic.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0.9;
}

.two-column-imgdiv.mv_play {/*250426*/
    position: relative;
}

.two-column-imgdiv.mv_play::after {/*250426*/
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    background-image: url(/assets/img/common/play_ic.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0.9;
}

@media screen and (max-width:768px) {
    .col-img-block.mv_play::after {
        width: 56px;
        height: 56px;
    }
}


/* 20250514 */

.table_wrap {
    margin: 80px auto 80px;
}

table.tb01 {
    max-width: 752px;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
    border-collapse: collapse;
}

table.tb01 th,
table.tb01 td {
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    padding: 20px 20px 20px;
    vertical-align: middle;
}

table.tb01 td.one-col {
    text-align: left;
}

table.tb01 th {
    font-weight: 500;
    background-color: #EAEAEA;
    border-right: 1px solid #fff;
    border-bottom: 1px dashed #C7C7C7;
}

table.tb01 td {
    font-weight: 400;
    border-bottom: 1px dashed #C7C7C7;
    text-align: center;
}

table.tb01 th.one-col {
    text-align: left;
}

table.tb02 {
    max-width: 752px;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
    border-collapse: collapse;
}

table.tb02 th,
table.tb02 td {
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 20px 20px 20px;
    vertical-align: middle;
}

table.tb02 th {
    font-weight: 500;
    background-color: #EAEAEA;
    border-right: 1px solid #fff;
    border-bottom: 1px dashed #fff;
}

table.tb02 td {
    font-weight: 400;
    border-bottom: 1px dashed #C7C7C7;
    text-align: center;
}

table.tb02 tr:last-of-type td {
    border-bottom: none;
}

@media screen and (max-width: 768px) {
    .table_wrap {
        margin: 30px auto 30px;
    }
    table.tb01 {
        max-width: 100%;
    }
    table.tb01 th,
    table.tb01 td {
        font-size: 1.4rem;
        padding: 14px;
    }
    table.tb02 {
        max-width: 100%;
    }
    table.tb02 th,
    table.tb02 td {
        display: block;
        font-size: 1.4rem;
        text-align: left;
        padding: 14px;
    }
    table.tb02 th {
        border-top: none;
        border-bottom: none;
    }
    table.tb02 tr:last-of-type td {
        border-bottom: 1px dashed #C7C7C7;
    }
    table.tb02 tr td:last-child {
        border-bottom: none;
    }
    .table_scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table_scroll table {
        min-width: 850px;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    
}

/* Add Start code-area 250526*/

.code-area {
  max-width: 95vw;
  padding: 0 16px;
}

.left-align {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Add End code-area 250526*/

/* Add feature in operation-detail 250524*/
.operation-detail .mb50 {
    margin-bottom: 50px;
}
.right-side-sticky {
    position: sticky;
    top: 290px;
    margin-bottom: 100px;
}

/* Add feature in operation-detail */



