@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/* YakuHanJP 読み込み */
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css');


// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <weight>: Use a value from 200 to 900
// <uniquifier>: Use a unique and descriptive class name

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


:root{
  --keycolor01: #d65a2a; /* 左～中ほどのオレンジ */
  --keycolor01-05: rgba(221, 85, 25, 0.05); /* 左～中ほどのオレンジ */
  --keycolor02: #339CD0; /* 右端のブルー */
  --keycolor02-05:  rgba(51, 156, 208, 0.05); /* 左～中ほどのオレンジ */
  --bar-width: clamp(180px, 40vw, 360px); /* アンダーラインの長さ */
  --bar-width2: 110px; /* アンダーラインの長さ */
  --bar-height: 4px;                      /* 線の太さ(画像は細め) */
  --bar-height2: 2px;                      /* 線の太さ(画像は細め) */
  --bar-split: 86%;                       /* どこから色を切り替えるか */
  --font-serif: "YakuHanJP", "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --text-size-m: 14px;
  --text-size-ml: 18px;
  --text-size-ls: 20px;
  --text-size-l: 24px;
  --text-size-xl: 28px;
  --sp-s: 8px;
  --sp-sm: 16px;
  --sp-m: 24px;
  --sp-ml: 32px;
  --sp-l: 40px;
  --sp-xl: 60px;
  --sp-3l: 80px;
}
@media screen and (max-width: 800px) {

}

@media screen and (min-width: 801px) {
    :root{
    --bar-width: 160px; /* アンダーラインの長さ */
    --bar-width2: 110px; /* アンダーラインの長さ */
    --bar-height: 4px;                      /* 線の太さ(画像は細め) */
    --bar-height2: 2px;                      /* 線の太さ(画像は細め) */
    --bar-split: 86%;                       /* どこから色を切り替えるか */
    --text-size-m: 18px;
    --text-size-ml: 18px;
    --text-size-ls: 24px;
    --text-size-l: 28px;
    --text-size-xl: 34px;
    --text-size-3l: 42px;
    --sp-s: 8px;
    --sp-sm: 16px;
    --sp-m: 24px;
    --sp-ml: 32px;
    --sp-l: 40px;
    --sp-xl: 60px;
    --sp-3l: 80px;
    }
}



body {
    background-color:#FBF8F2;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#232323;
}
h1,h2,h3,h4,h5,p,div {
}


#header_slider_content .catch  {
  text-align:left;
}

.diag-set01 {
    position: relative;
    width: 124px;
    height: 151px;
}
.diag-set01::before {
    content: "";
    width: 116px;
    height: 116px;
    background: linear-gradient(
        135deg,  /* ／の向き */
        transparent calc(50% - 1px),
        #339CD0  calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    top: 0px;
    left: 0px;
    position: absolute;
}
.diag-set01::after {
    content: "";
    width: 116px;
    height: 116px;
    background: linear-gradient(
        135deg,  /* ／の向き */
        transparent calc(50% - 1px),
        var(--keycolor01)  calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    top: 35px;
    left: -8px;
    position: absolute;
}
.diag-set02 {
    position: relative;
    width: 60px;
    height: 60px;
}
.diag-set02::before {
    content: "";
    width: 43px;
    height: 43px;
    background: linear-gradient(
        135deg,  /* ／の向き */
        transparent calc(50% - 1px),
        #339CD0  calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    top: 0px;
    left: 0px;
    position: absolute;
}
.diag-set02::after {
    content: "";
    width: 43px;
    height: 43px;
    background: linear-gradient(
        135deg,  /* ／の向き */
        transparent calc(50% - 1px),
        var(--keycolor01)  calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    top: 12px;
    left: -4px;
    position: absolute;
}
.diag-slash {
  width: 116px;
  height: 116px;
  background: linear-gradient(
    135deg,  /* ／の向き */
    transparent calc(50% - 1px),
    var(--keycolor02)  calc(50% - 1px) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.diag-slash2 {
  width: 116px;
  height: 116px;
  background: linear-gradient(
    135deg,  /* ／の向き */
    transparent calc(50% - 1px),
    #DD5519  calc(50% - 1px) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

@media screen and (max-width: 800px) {
    #header_slider_content {
    padding:0 30px;
    top:40%;
    }
    #mobile_menu li.sab a {
    background:var(--main_color);
    }
}

@media screen and (max-width: 1200px) {
    .sp_content .main_content .catch {
    width:100%;
    }
}

@media screen and (max-width: 800px) {
    .top-msg {
        p {
            font-size: 14px;
            list-style: 2.0;;;
        }
    }
}




/*---ドロワーメニュー--------*/
@media screen and (max-width: 1250px) {
    #drawer_menu{
        background-color: #254172;

    }
    #mobile_menu li.sab a{
        background-color: #1C335A;
    }
    #mobile_menu li.sab{
        margin-left: 50px;;
    }
    #mobile_menu a{
        border-bottom:none;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/*---スマホヘッダー--------*/
@media screen and (max-width: 800px) {
    body  #page_header {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    body  #page_header .headline {
        background-color: transparent !important;

    }
}


/*-- TOPページ --------------*/

@media screen and (max-width: 800px) {
    #header_slider_content {
        top: 50%;
    }
    #header_slider_content h2::after {
        display: none !important;
    }
    #header_slider_content {
    }
    #header_slider_content .mv01 {
        position: relative;
        margin-left: -10px;
    }
    #header_slider_content .mv01 img {
        width: 242px;
        height: auto;
    }
    #header_slider_content .mv02 {
        position: relative;
        padding: 0;
        margin-top: 10px;
        height: auto;
        font-size: 14px;
        list-style: 1.0em;
    }
    #header_slider_content .mv02 span {
        font-size: var(--text-size-m);
        list-style: 1.0em;
        padding: 4px 4px 4px 24px;
        background: #339CD0;
        position: relative;
        margin-left: -30px;
    }
    section.num1 {
        position: relative;
        padding-top: 60px;
        padding-bottom: 60px !important;
        padding-left: 30px;
        padding-right: 30px;
    }
    .cb_free_space .post_content {
        padding-left: 0px !important;
        padding-right: 0px !important;

    }
    .top-contents01 {
        position: relative;

    }
    .top-contents01 .type1 {
        position: absolute;
        top: -100px;
        left: -50px;
        z-index: 40;
    }
    .top-contents01 .type2 {
        position: absolute;
        bottom: -80px;
        right: -80px;
        z-index: 40;
    }
    .top-contents01 .top-msg {
        
    }
    .top-contents01 .top-msg h2 {
        font-family: var(--font-serif);
        z-index: 50;
        padding-left: 0px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
    }
    .top-contents01 .top-msg h2 img {
        width: 150px;
        height: auto;
        
    }
    .top-contents01 .top-msg h2 span {
        font-size: var(--text-size-l);
        padding-left: 4px;
        padding-top: 8px;
        font-style: normal;
    }
    .top-contents01 .top-msg h2 span i.font-mini {
        font-size:var(--text-size-ml);
        font-style: normal;
    }
    .top-contents01 .top-msg p {
        font-size: var(--text-size-m);
        line-height: 2.4;
    }

    #cb_content_2_list_1 .sp_content_inner , #cb_content_2_list_3 .sp_content_inner , #cb_content_3 .post_content {
        padding-left: 68px !important;
        padding-right: 40px !important;
        padding-top: 80px;
        padding-bottom: 80px;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 100% auto;
        position: relative;
    }
    #cb_content_2_list_1 .sp_content_inner {
        background-image: url(org-img/back-overview.png);
        background-color: #122443;
    }
    #cb_content_2_list_3 .sp_content_inner {
        background-image: url(org-img/back-potential.png);
        background-color: #F0EBDF;
    }
    #cb_content_3 .post_content {
        background-color: #122443;
        color: #fff;
    }
    #cb_content_2_list_3 .sp_content_inner .desc , #cb_content_2_list_3 .sp_content_inner .catch  {
        color:#232323 !important;
    }
    #cb_content_2_list_1 .sp_content_inner::before {
        content: "";
        display: block;
        width: 50px;
        height: 295px;
        background-image: url(org-img/text-overview.svg);
        background-size: 100% auto;
        position: absolute;
        top: 80px;
        left: -5px;
    }
    #cb_content_2_list_3 .sp_content_inner::before {
        content: "";
        display: block;
        width: 50px;
        height: 295px;
        background-image: url(org-img/text-potential.svg);
        background-size: 100% auto;
        position: absolute;
        background-repeat: no-repeat;
        top: 80px;
        left: -5px;
    }
    #cb_content_3 .post_content::before {
        content: "";
        display: block;
        width: 50px;
        height: 295px;
        background-image: url(org-img/text-vision.svg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        position: absolute;
        top: 80px;
        left: -5px;
    }
        #cb_content_2 h3 {
            font-size: 24px;
            
        }
        #cb_content_2 h3 .font-mini {
            font-size: 18px;
            font-style: normal;
        }
        #cb_content_2 .bg_image {
            display: none;
        }
        #cb_content_2 img.sign-img {
            width: 163px;
            height: auto;
        }
    #cb_content_3 .post_content {

    }
    .cb_case_study_list {
    }
        .cb_case_study_list .desc p {
        font-size: 14px !important;
        line-height: 2.0;
        font-weight: 400 !important;
        text-align: left;
        }
}

@media screen and (min-width: 801px) {
    #header_slider_content {
        top: 60%;
    }
    #header_slider_content h2::after {
        display: none !important;
    }
    #header_slider_content {
    }
    #header_slider_content .mv01 {
        position: relative;
        margin-left: -10px;
    }
    #header_slider_content .mv01 img {
        width: 40vw;
        min-width: 350px;
        max-width: 500px;
        height: auto;
    }
    #header_slider_content .mv02 {
        position: relative;
        padding: 0;
        margin-top: 20px;
        height: auto;
        font-size: 14px;
        list-style: 1.0em;
    }
    #header_slider_content .mv02 span {
        font-size: var(--text-size-l);
        list-style: 1.0em;
        padding: 4px 40px 4px 40px;
        background: #339CD0;
        position: relative;
        margin-left: -50px;
    }
    section.num1 {
        position: relative;
        padding-top: 80px !important; 
        padding-bottom: 80px !important;
        padding-left: 30px;
        padding-right: 30px;
    }
    .cb_free_space .post_content {
        padding-left: 0px !important;
        padding-right: 0px !important;

    }
    .top-contents01 {
        position: relative;

    }
    .top-contents01 .type1 {
        position: absolute;
        top: -140px;
        left: -80px;
        z-index: 40;
    }
    .top-contents01 .type2 {
        position: absolute;
        bottom: -120px;
        right: -80px;
        z-index: 40;
    }
    .top-contents01 .top-msg {
        
    }
    .top-contents01 .top-msg h2 {
        z-index: 50;
        padding-left: 0px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        font-family: var(--font-serif);
        gap: var(--sp-s);
    }
    .top-contents01 .top-msg h2 img {
        width: 200px;
        height: auto;
        
    }
    .top-contents01 .top-msg h2 span {
        font-size: var(--text-size-l);
        padding-left: 4px;
        padding-top: 8px;

    }
    .top-contents01 .top-msg h2 span i.font-mini {
        font-size:var(--text-size-ml);
        font-style: normal;
    }
    .top-contents01 .top-msg p {
        line-height: 2.4;
    }

    #cb_content_2_list_1 .sp_content_inner , #cb_content_2_list_3 .sp_content_inner , #cb_content_3 .post_content {
        padding-top: 120px;
        padding-bottom: 120px;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 100% auto;
        position: relative;
    }
    #cb_content_2_list_1  {
        background-image: url(org-img/back-overview.png);
        background-repeat: repeat-x;
        background-position: center bottom ;
        background-color: #122443;
    }
    #cb_content_2_list_1 .sp_content_inner {
        background-image: none;
    }
        #cb_content_2_list_1  .main_content {
            width: calc(70% - 30px);
        }
    #cb_content_2_list_3  {
        background-image: url(org-img/potencial_back.jpg);
        background-color: #F0EBDF;
        background-size: cover;
        background-position: left bottom;
    }
        #cb_content_2_list_3  .main_content {
            width: calc(80% - 30px);
        }
    .sp_content.position_type2 .sp_content_inner {
    }
    #cb_content_2_list_3 .overlay {
        display: none;
    }
    #cb_content_3 {
        background-color: #122443 !important;
        background-image: url(./org-img/vision_back.jpg) !important;
        background-size: auto 100%  !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
    }
    #cb_content_3 .post_content {
        color: #fff;
    }
    #cb_content_2_list_3 .sp_content_inner .desc , #cb_content_2_list_3 .sp_content_inner .catch  {
        color:#232323 !important;
    }
    #cb_content_2_list_1::before {
        content: "";
        display: block;
        width: 100px;
        height: 850px;
        background-image: url(org-img/text-overview.svg);
        background-size: 100% auto;
        position: absolute;
        background-repeat: no-repeat;
        bottom: -250px;
        right: -0px;
    }
    #cb_content_2_list_3::before {
        content: "";
        display: block;
        width: 100px;
        height: 850px;
        background-image: url(org-img/text-potential.svg);
        background-size: 100% auto;
        position: absolute;
        background-repeat: no-repeat;
        top: 80px;
        left: 0px;
    }
    #cb_content_3 .post_content::before {
        content: "";
        display: block;
        width: 100px;
        height: 850px;
        background-image: url(org-img/text-vision.svg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        position: absolute;
        top: 40px;
        left: -140px;
    }
        #cb_content_3 .post_content p {
            padding-right: 240px;
        }

        #cb_content_2 h3 {
            font-size: var(--text-size-l);
            font-family: var(--font-serif);
        }
        #cb_content_2 h3 .font-mini {
            font-size: var(--text-size-m);
            font-style: normal;
        }
        #cb_content_2 .bg_image {
            display: none;
        }
        #cb_content_2 img.sign-img {
            width: 163px;
            height: auto;
        }
    #cb_content_3 .post_content {

    }
    #cb_content_4 {
        padding-top: 80px;
    }
    .cb_case_study_list {
    }
        .cb_case_study_list .desc p {
        font-size: 14px !important;
        line-height: 2.0;
        font-weight: 400 !important;
        text-align: left;
        }
}

/*-- 共通 --------------------*/
@media screen and (max-width: 800px) {
    .catch , h2.headline {
        position:relative;
        font-family: var(--font-serif);
        font-size: var(--text-size-l) !important;
        line-height:1.2;
        font-weight:500;
        letter-spacing:.02em;
        margin-bottom: calc(16px + 16px) !important;
    }
    .catch , h2.headline {
        margin-bottom: calc(16px + 16px) !important;
    }
    .title {
        font-family: var(--font-serif);
        margin-bottom: 0 !important;
    }
    .catch.left {
        text-align: left !important;
    }
    .catch .font-mini {
        font-size: var(--text-size-ml);
        font-style:normal ;
    }
    .catch::after , h2.headline::after {
        content:"";
        bottom: -16px;
        left: calc(50% - 100px);
        position: absolute;
        display:block;
        width: var(--bar-width);
        height: var(--bar-height);
        margin-top: 16px;              /* 文字と帯の間隔 */
        background:
            linear-gradient(to right,
            var(--keycolor01) 0 var(--bar-split),
            var(--keycolor02) var(--bar-split) 100%);
    }
    .catch.left::after , .num1 .catch::after , .num3 .catch::after{
        left: 0px !important;
    }

    .catch-02 {
        font-family: var(--font-serif);
        font-size: var(--text-size-l) !important;
        line-height: 1.5;
        font-weight: 500;
        margin-top: var(--sp-m) !important;
        margin-top: 0px;
        margin-bottom: 0px;
    }
        .catch-02 em {
            font-size: var(--text-size-ml);
            font-style: normal;
        }
    .text-center {
        text-align: center;
    }

    p.desc , .desc p {
        font-size: 14px !important;
        line-height: 2.0;
        font-weight: 400 !important;
    }
    #content_builder .design_header {
        padding-left: 24px;
        padding-right: 24px;
    }
    #footer {
        background-color: #001D46;
        color: #fff;
    }
        #footer a {
            color: #fff;
        }
    #copyright{
        background-color: #232323;
        color: #fff;
    }
    body.single #page_header , body #page_header , body.no_header_image #page_header {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
    }
        #page_header .headline {
            position: relative;            
        }
            #page_header .headline::after {
                content:"";
            }
        #page_header img {
            object-position: center bottom;
        }
            #page_header .headline span.cate-title {
                color: #232323;
                font-family: var(--font-serif);
                font-size: 32px;
                display: block;
                text-align: center;
                font-weight: 400;
            }
            #page_header .headline span.eng-title {
                font-size: 18px;
                color: var(--keycolor01);
                display: block;
                text-align: center;
                padding: 0;
                line-height: 1em;
                margin: 0;
                font-weight: 300 !important;
                font-weight: normal;
            }

        #page_header .overlay {
            display: none;
        }
        .entry-title {
            position:relative;
            font-family: var(--font-serif);;
            font-size: 24px !important;
            line-height:1.2;
            font-weight:500;
            letter-spacing:.02em;
            margin-bottom: calc(16px + 16px) !important;
        }
        .entry-title .font-mini {
            font-size: 18px;
            font-style:normal ;
        }
        .entry-title::after{
            content:"";
            bottom: -16px;
            left: calc(50% - 60px);
            position: absolute;
            display:block;
            width: var(--bar-width2);
            height: var(--bar-height2);
            margin-top: 16px;              /* 文字と帯の間隔 */
            background:
                linear-gradient(to right,
                var(--keycolor01) 0 var(--bar-split),
                var(--keycolor02) var(--bar-split) 100%);
        }
        #single_service {
            padding-top: var(--sp-l);
        }


    #service_category_list {
        background-color: transparent !important;
    }
    #service_list_type2 {
        padding-left: var(--sp-m);
        padding-right:var(--sp-m);
    }
        #service_list_type2 .image_link {
            margin-bottom: var(--sp-m);
        }
        #service_list_type2 .item {
            margin-bottom: var(--sp-xl);

        }
        #service_list_type2 .link {

        }
    .category-title-wrap {
        padding: 60px 20px 8px;
    }
    #footer_logo img {
        width: 100px !important;
        height: auto !important;
    }
}

/*-- pc --*/
@media screen and (min-width: 801px) {
    .catch , h2.headline {
        position:relative;
        font-family: var(--font-serif);
        font-size: var(--text-size-l) !important;
        line-height:1.2;
        font-weight:500;
        letter-spacing:.02em;
        margin-bottom: calc(16px + 16px) !important;
    }
    .catch , h2.headline {
        margin-bottom: calc(16px + 16px) !important;
    }
    .title {
        font-family: var(--font-serif);
        margin-bottom: 0 !important;
    }
    .catch.left {
        text-align: left !important;
    }
    .catch .font-mini {
        font-size: var(--text-size-ml);
        font-style:normal ;
    }
    .catch::after , h2.headline::after {
        content:"";
        bottom: -16px;
        left: calc(50% - 80px);
        position: absolute;
        display:block;
        width: var(--bar-width);
        height: var(--bar-height);
        margin-top: 16px;              /* 文字と帯の間隔 */
        background:
            linear-gradient(to right,
            var(--keycolor01) 0 var(--bar-split),
            var(--keycolor02) var(--bar-split) 100%);
    }
    .catch.left::after , .num1 .catch::after , .num3 .catch::after{
        left: 0px !important;
    }

    .catch-02 {
        font-family: var(--font-serif);
        font-size: var(--text-size-3l) !important;
        line-height: 1.5;
        font-weight: 500;
        margin-top: var(--sp-m) !important;
        margin-top: 0px;
        margin-bottom: 0px;
    }
        .catch-02 em {
            font-size: var(--text-size-xl);
            font-style: normal;
        }
        .catch-02 br {
            display: none;
        }
    .text-center {
        text-align: center;
    }

    p.desc , .desc p {
        font-size: var(--text-size-m);
        line-height: 2.0;
        font-weight: 400 !important;
    }
    #content_builder .design_header {
        padding-left: 24px;
        padding-right: 24px;
    }
    #footer {
        background-color: #001D46;
        color: #fff;
    }
        #footer a {
            color: #fff;
        }
    #copyright{
        background-color: #232323;
        color: #fff;
    }
    body.single #page_header , body #page_header , body.no_header_image #page_header {
        max-height: 650px;
        height: 45vh;
        min-height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
    }
    #page_header {
        background-image: url(./org-img/headBack.png);
        background-position: bottom left;
        background-repeat: repeat-x;
        background-size: 80% auto;
    }
    #page_header img {
        display: none !important;
    }
        #page_header .headline {
            position: relative;            
        }
            #page_header .headline::after {
                content:"";
            }
        #page_header img {
            object-position: center bottom;
        }
            #page_header .headline span.cate-title {
                color: #232323;
                font-family: var(--font-serif);
                font-size: var(--text-size-xl);
                display: block;
                text-align: center;
                font-weight: 400;
            }
            #page_header .headline span.eng-title {
                font-size: 18px;
                color: var(--keycolor01);
                display: block;
                text-align: center;
                padding: 0;
                line-height: 1em;
                margin: 0;
                font-weight: 300 !important;
                font-weight: normal;
            }

        #page_header .overlay {
            display: none;
        }
        .entry-title {
            position:relative;
            font-family: var(--font-serif) !important;
            font-size: var(--text-size-xl) !important;
            line-height:1.2;
            font-weight:400 !important;
            letter-spacing:.02em;
            margin-bottom: calc(16px + 16px) !important;
        }
        .entry-title .font-mini {
            font-size: 18px;
            font-style:normal ;
        }
        .entry-title::after{
            content:"";
            bottom: -16px;
            left: calc(50% - 60px);
            position: absolute;
            display:block;
            width: var(--bar-width2);
            height: var(--bar-height2);
            margin-top: 16px;              /* 文字と帯の間隔 */
            background:
                linear-gradient(to right,
                var(--keycolor01) 0 var(--bar-split),
                var(--keycolor02) var(--bar-split) 100%);
        }
        #single_service {
            padding-top: 100px;
        }


    #service_category_list {
        background-color: transparent !important;
    }
    #service_list_type2 {
        padding-left: var(--sp-m);
        padding-right:var(--sp-m);
    }
        #service_list_type2 .image_link {
            margin-bottom: var(--sp-m);
        }
        #service_list_type2 .item {
            margin-bottom: var(--sp-xl);

        }
        #service_list_type2 .link {

        }
    .category-title-wrap {
        padding: 60px 20px 8px;
    }
    #footer_logo img {
        width: 120px !important;
        height: auto !important;
    }

}


.font-serif {
    font-family: var(--font-serif);
}
.mb-0-3 {
    margin-bottom: .3em !important;
}
.mb-0-5 {
    margin-bottom: .5em !important;
}
.mb-01 {
    margin-bottom: 1em !important;
}
.mb-02 {
    margin-bottom: 2em !important;
}
.mb-03 {
    margin-bottom: 3em !important;
}
.post_content table {
    border-left: transparent;
    border-top: transparent;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){
    background-color:rgba(242, 235, 210, .5);
}



/*--- credo ----------------*/

@media screen and (max-width: 800px) {
    .credo-text {

    }
    .credo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--sp-l);

    }
        .credo-img img {
            width: 192px;   
            height: auto;
            
        }
    .credo-list-wrap {
            padding-bottom: var(--sp-3l);

    }
        .credo-list {
            margin-bottom: var(--sp-3l);
            padding-left: var(--sp-s);
            padding-right: var(--sp-s);
            position: relative;
        }
            .credo-list .wp-block-group__inner-container {
                position: relative;
                z-index: 30;
            }
                .credo-list::before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 150px;
                    height: 130px;
                    z-index: 10;
                }
                .credo-01::before {
                    bottom: -60px;
                    right: -20px;
                    z-index: 10;
                    background: var(--keycolor01-05);
                    width: 145px;
                    height: 120px;                
                }
                .credo-02::before {
                    bottom: -40px;
                    left: -20px;
                    background: var(--keycolor02-05);
                }
                .credo-03::before {
                    bottom: -10px;
                    right: -40px;
                    background: var(--keycolor01-05);
                    width: 145px;
                    height: 120px;                
                }
                .credo-04::before {
                    bottom: -50px;
                    left: -20px;
                    background: var(--keycolor02-05);
                    width: 145px;
                    height: 140px;                
                }
                .credo-05::before {
                    top: 20px;
                    right: -50px;
                    background: var(--keycolor01-05);
                    width: 145px;
                    height: 120px;                
                }
                .credo-06::before {
                    background: var(--keycolor02-05);
                    bottom: -20px;
                    left: -20px;
                }

            .credo-list h3 {
                font-size: var(--text-size-ls);
                list-style: 1.3 !important;
                font-family: var(--font-serif);
                margin-bottom: var(--sp-s);
                font-weight: 500;
                margin-bottom: 0px !important;
            }
                .credo-list h3 em {
                    font-size: var(--text-size-ml);
                    font-style: normal;
                }
            .credo-list p {
                line-height: 2.4;
                padding-left: var(--sp-l);
                position: relative;
                padding-top: 4px;
                z-index: 20;
            }
            .credo-list .diag-set02 {
                margin-left: calc(var(--sp-m) * -1);
                margin-top: 0px;
                z-index: 20;
            }
            .credo-list::after {
                top: -20px;
                left: -20px;
                content: "";
                display: block;
                position: absolute;
                width: 90px;
                height: 70px;
                background-repeat: no-repeat;
                background-size: auto 100%;
                background-position: left top;
            }
            .credo-01::after {
                background-image: url(org-img/credo/01.svg);
            }
            .credo-02::after {
                background-image: url(org-img/credo/02.svg);
            }
            .credo-03::after {
                background-image: url(org-img/credo/03.svg);
            }
            .credo-04::after {
                background-image: url(org-img/credo/04.svg);
            }
            .credo-05::after {
                background-image: url(org-img/credo/05.svg);
            }
            .credo-06::after {
                background-image: url(org-img/credo/06.svg);
            }
}

/*--- pc ---*/
@media screen and (min-width: 801px) {
    .credo-text {

    }
    .credo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--sp-l);

    }
        .credo-img img {
            width: 400px;   
            height: auto;
            
        }
    .credo-list-wrap {
            padding-bottom: var(--sp-3l);

    }
        .credo-list {
            margin-bottom: var(--sp-3l);
            padding-left: var(--sp-s);
            padding-right: var(--sp-s);
            position: relative;
        }
            .credo-list .wp-block-group__inner-container {
                position: relative;
                z-index: 30;
            }
                .credo-list::before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 150px;
                    height: 130px;
                    z-index: 10;
                }
                .credo-01::before {
                    top: -60px;
                    right: -120px;
                    z-index: 10;
                    background: var(--keycolor01-05);
                    width: 245px;
                    height:220px;                
                }
                .credo-02::before {
                    top: -40px;
                    right: 100px;
                    background: var(--keycolor02-05);
                }
                .credo-03::before {
                    top: -70px;
                    right: -40px;
                    background: var(--keycolor01-05);
                }
                .credo-04::before {
                    top: -100px;
                    right: -220px;
                    background: var(--keycolor02-05);
                    width: 245px;
                    height: 220px;                
                }
                .credo-05::before {
                    top: -120px;
                    right: -50px;
                    background: var(--keycolor01-05);
                    width: 185px;
                    height: 170px;                
                }
                .credo-06::before {
                    background: var(--keycolor02-05);
                    top: -150px;
                    right: -240px;
                    width: 280px;
                    height: 280px;                   
                }

            .credo-list h3 {
                font-size: var(--text-size-ls);
                list-style: 1.3 !important;
                font-family: var(--font-serif);
                margin-bottom: var(--sp-s);
                font-weight: 500;
                margin-bottom: 0px !important;
            }
                .credo-list h3 em {
                    font-size: var(--text-size-ml);
                    font-style: normal;
                }
                .credo-list h3 br {
                    display: none;
                }
            .credo-list p {
                line-height: 2.4;
                padding-left: var(--sp-l);
                position: relative;
                padding-top: 4px;
                z-index: 20;
            }
            .credo-list .diag-set02 {
                margin-left: calc(var(--sp-m) * -1);
                margin-top: 0px;
                z-index: 20;
            }
            .credo-list::after {
                top: -20px;
                left: -20px;
                content: "";
                display: block;
                position: absolute;
                width: 120px;
                height: 100px;
                background-repeat: no-repeat;
                background-size: auto 100%;
                background-position: left top;
            }
            .credo-01::after {
                background-image: url(org-img/credo/01.svg);
            }
            .credo-02::after {
                background-image: url(org-img/credo/02.svg);
            }
            .credo-03::after {
                background-image: url(org-img/credo/03.svg);
            }
            .credo-04::after {
                background-image: url(org-img/credo/04.svg);
            }
            .credo-05::after {
                background-image: url(org-img/credo/05.svg);
            }
            .credo-06::after {
                background-image: url(org-img/credo/06.svg);
            }
}


/*--- yakuin ----------------*/

@media screen and (max-width: 800px) {
    .officer-list {
        padding-left: var(--sp-l);
        padding-right: var(--sp-l);
        padding-bottom: var(--sp-3l);
    }
        .officer-list .catch-02 {

        }
        .officer-list .photo-wrap {
            position: relative;
        }
            .officer-list .photo-wrap .line-01 {
                position: absolute;
                top: 0px;
                right: -40px;
            }
            .officer-list .photo-wrap .line-02 {
                position: absolute;
                bottom: 30px;
                left: -25px;
            }
            .officer-list .photo img {
                z-index: 20;
                
            }
            .officer-list .photo-wrap::before {
                content: "";
                display: block;
                position: absolute;
                width: 180px;
                height: 180px;
                z-index: 10;
            }
            #shimizu.officer-list .photo-wrap::before {
                    background: var(--keycolor01-05);
                    bottom: -50px;
                    left: -50px;
            }
            #nagata.officer-list .photo-wrap::before {
                    background: var(--keycolor02-05);
                    bottom: -50px;
                    right: -50px;
            }

        .officer-list .post-name {
            margin-top: var(--sp-s);
        }
            .officer-list .post {
                color: #7E7F80;
                text-align: center;
                font-size: var(--text-size-m);
                font-style: normal;
                margin-bottom:  0px !important;
                margin-top: 0px !important;
            }
            .officer-list .name {
                font-size: var(--text-size-l);
                font-family: var(--font-serif);
                margin-bottom: var(--sp-s) !important;
                margin-top: 0px !important;
            }
        .officer-list .comment-wrap {
            
        }
            .officer-list .comment-wrap p {
                line-height: 2.4;   
            }
}

/*--- pc ---------*/

@media screen and (min-width: 801px) {
    #single_service {
        width: 1030px;
    }
    .officer-list {
        padding-left:0;
        padding-right: 0;
        padding-bottom: var(--sp-3l);
    }
    .officer-list .wp-block-spacer {
        display: none;
    }

        .officer-list > .wp-block-group__inner-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
            .officer-list .catch-02 {
                width: 100%;
                display: block;
            }
                .officer-list .catch-02 br {
                    display: none;
                }
        .officer-list .photo-wrap {
            position: relative;
            width: 340px;
        }
        .officer-list .text-wrap {
            width: calc(100% - 340px - 40px);
        }
            .officer-list .photo-wrap .line-01 {
                position: absolute;
                top: 0px;
                right: -40px;
            }
            .officer-list .photo-wrap .line-02 {
                position: absolute;
                bottom: 30px;
                left: -25px;
            }
            .officer-list .photo img {
                z-index: 20;
                
            }
            .officer-list .photo-wrap::before {
                content: "";
                display: block;
                position: absolute;
                width: 180px;
                height: 180px;
                z-index: 10;
            }
            #shimizu.officer-list .photo-wrap::before {
                    background: var(--keycolor01-05);
                    bottom: -50px;
                    left: -50px;
            }
            #nagata.officer-list .photo-wrap::before {
                    background: var(--keycolor02-05);
                    bottom: -50px;
                    right: -50px;
            }
        .officer-list .post-name  {
            margin-top: var(--sp-s);
            margin-bottom: var(--sp-m);
            border-bottom: 4px solid #F6F2E2;
            padding-bottom: var(--sp-s);
        }

        .officer-list .post-name > .wp-block-group__inner-container {
            display: flex;
            flex-direction: row;
            gap: var(--sp-m);
        }
            .officer-list .post {
                color: #7E7F80;
                text-align: center;
                font-size: var(--text-size-m);
                font-style: normal;
                margin-bottom:  0px !important;
                margin-top: 0px !important;
            }
            .officer-list .name {
                font-size: var(--text-size-l);
                font-family: var(--font-serif);
                margin-bottom: var(--sp-s) !important;
                margin-top: 0px !important;
            }
        .officer-list .comment-wrap {
            
        }
            .officer-list .comment-wrap p {
                line-height: 2.4;   
            }
}


.office-list {
    position: relative;
}
    .office-list .diag-set02 {
        position: absolute;
    }
@media screen and (max-width: 800px) {
    .office-list .diag-set02 {
        top: -10px;
        left: -10px;
    }
    .office-list h3 {
        margin-left: 30px;
    }
    .office-list p {
        margin-left: 0px;
    }
}
@media screen and (min-width: 801px) {
    .office-list .diag-set02 {
        top: -10px;
        left: -20px;
    }
    .office-list h3 {
        margin-left: 30px;
    }

    .office-list p {
        margin-left: 30px;
    }
        .office-list p br {
            display: none;
        }
}


/*--- intro --------------------*/
.case_study_list .category {
    display: none;
}


#single_case_header {
    display: none;
}
@media screen and (max-width: 800px) {
    #archive_desc {
        text-align: left;
        padding-left: 30px;
        padding-right: 30px;
    }
    #archive_case_study {
        margin-left: 30px;
        margin-right: 30px;
    }
    #case_study_category_list_area {

    }
        #case_study_category_list_area a {
            
        }
            #case_study_category_list .catch_area {
                height: 80px !important;
            }
            #case_study_category_list_area a .catch {
                font-size: var(--text-size-m) !important;
                margin-bottom: 0px !important;
            }
            #case_study_category_list_area a .catch::after {
                display: none;
            }
    .case_study_list .item{
        margin-bottom: 1em;
    }
    /*--事業紹介の特定のページのタイトルの開業位置を強引に調整--*/
    .postid-180 #single_case_title_area .title {

    }
     .postid-181 #single_case_title_area .title {

    }
}
@media screen and (min-width: 801px) {
    #single_case {
        width: 1030px;
    }
    .case_study_list {
        gap: 1em;
    }
    .case_study_list .item{
        width: calc(50% - .5em);
        border: none !important;
    }

}