@charset "utf-8";
/*
Theme Name: デジタル化マッチングプラットフォーム
Author: BASARA
Version: 1.0
*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}
*:before,
*:after {
    pointer-events: none;
}
:root {
    --color-base-font: #343434;
    --color-main: #1F76EC;
    --color-main-light:color-mix(in sRGB, #fff 92.5%, var(--color-main) 7.5%);
    --color-attention:crimson;
    --color-attention-light:color-mix(in sRGB, #fff 92.5%, var(--color-attention) 7.5%);
    --color-pink: #F27373;
    --color-pink-light:color-mix(in sRGB, #fff 92.5%, var(--color-pink) 7.5%);
    --color-gray:#A0A0A0;
    --color-gray-light:color-mix(in sRGB, #fff 92.5%, var(--color-gray) 7.5%);
    --color-yellow:#FFF100;
    --color-yellow-light:color-mix(in sRGB, #fff 92.5%, var(--color-yellow) 7.5%);
    --contents-width-small: 800px;
    --contents-width-main: 1200px;
    --contents-width-large: 1440px;
    /* --contents-width-large: 1680px; */
    --weight-Light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    --bg-gradient:linear-gradient(102deg, #B1E5FF 0%, #A7FFEA 67.18%, #B8FFA7 144.06%);
    --bg-gridLine:
        repeating-linear-gradient(90deg, #F8F8F8, #F8F8F8 2px, transparent 2px, transparent 1.5rem),
        repeating-linear-gradient(0deg,  #F8F8F8, #F8F8F8 2px, transparent 2px, transparent 1.5rem);
    --radius-main:10px;
    --border-bold:solid 2px var(--color-main);
    --border-normal:solid 1px var(--color-main);
}
html {
    margin: 0;
    padding: 0;
    font-size:16px;
}
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    color: var(--color-base-font);
    font-size:16px;
    font-weight: var(--weight-medium);
    line-height: 1.8;
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
    min-width: 375px;
    margin: 0;
    padding: 0;

    background-image:var(--bg-gridLine);
}
div,
p,
ul,
ul li,
dl,
dt,
dd {
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img,
video,
object {
    max-width: 100%;
    height: auto;
    border: none;
}
img {
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    border:none;
}
dt, dd {
    line-height:1.8;/* 外部cssの影響を打ち消し */
}
a {
    color: var(--color-main);
    text-decoration: none;
    transition: all ease 0.3s;
}
a:hover {
    opacity: 0.8;
    text-decoration: underline;
}
a[href^="tel:"] {
    text-decoration: none;
    pointer-events: none;
    text-emphasis: none !important;
}
a[href^="fax:"] {
    text-decoration: none;
    pointer-events: none;
}
.pc {
    display: inherit;
}
.tb {
    display: none;
}
.mb {
    display: none;
}
::placeholder {
    color:var(--color-gray);
}
@media only screen and (max-width: 820px) {
    .pc {
        display: none;
    }
    .tb {
        display: block;
    }
    .mb {
        display: none;
    }
}
@media only screen and (max-width: 468px) {
    a[href^="tel:"] {
        pointer-events: all;
    }
    .pc {
        display: none;
    }
    .tb {
        display: none;
    }
    .mb {
        display: block;
    }
}

/* =========================================================================================
Page Top
=========================================================================================*/
#page-top {
    display: none; /*最初は非表示*/
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
}
#page-top a {
    color: rgba(0, 0, 0, 0);
    line-height: 1;
    text-decoration: none;
    font-weight: var(--weight-bold);
    text-indent: -9999px;
    width: 50px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-main);
    position: relative;
}
#page-top a:before,
#page-top a::after {
    content: "";
    width: 3px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: calc(50% - 2.5px);
    transform-origin: 50% 1.5px;
    translate: 0 -40%;
    transition: 0.3s;
}
#page-top a::before {
    transform: rotate(45deg);
}
#page-top a::after {
    transform: rotate(-45deg);
}
#page-top a:hover {
    background-color: var(--color-gray);
    opacity: 1;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
    #page-top a {
        width: 40px;
    }
    #page-top a:before,
    #page-top a::after {
        height: 13px;
    }
}

/* =========================================================================================
Header
=========================================================================================*/
header {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:400;

    & *:not(svg, path) { font-size:1em;}
}


/* =========================================================================================
Footer
=========================================================================================*/
#footer {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:1.5;
    
    & *:not(svg, path) { font-size:1em;}
    & ul { padding-left:1.25rem;}
    & ul li { list-style:disc;}
    & ul ul li { list-style:circle;}
}
body:not(.home) footer {
    margin-top:clamp(5rem, calc(-1.648rem + 22.727vw), 10rem);/* vp:468-820px 80-160px */
}



/* =========================================================================================
Layout
=========================================================================================*/
#wrapper {
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#contents {
    margin: 0 auto;
    position: relative;
}
#main {
    margin: 0;
    padding: 0;
}
section {
    position: relative;
    padding-block: 100px;
    margin: 0;
}
.inner {
    max-width: var(--contents-width-main);
    width: calc(100% - 40px - 40px); /*左右の余白40pxずつ*/
    margin: 0 auto;
    position: relative;
}
.inner.contentsWrap {
    margin-top:clamp(1.25rem, calc(-0.246rem + 5.114vw), 2.375rem);/* vp:468-820px 20-38px */
    padding-block:clamp(1.875rem, calc(-0.618rem + 8.523vw), 3.75rem);/* vp:468-820px 30-60px */
    padding-inline:clamp(0.625rem, calc(-2.699rem + 11.364vw), 3.125rem);/* vp:468-820px 10-50px */
    background-color:#fff;
    border-radius:var(--radius-main);
    border:solid 2px var(--color-main);
}
.heading-box + .inner.contentsWrap {
    margin-top:30px;
}
.inner-large {
    max-width:var(--contents-width-large);
    width:calc(100% - 40px - 40px);
    margin-inline:auto;
    position:relative;
}
@media only screen and (max-width: 980px) {
    #contents {
        /* padding-block: 60px 0; */
    }
}
@media only screen and (max-width: 820px) {
    section {
        padding-block: 75px;
    }
    .inner {
        width: calc(100% - 30px - 30px);
    }
}
@media only screen and (max-width: 468px) {
    section {
        padding-block: 50px;
    }
    .inner {
        width: calc(100% - 20px - 20px);
    }
}

/* iframe ----------------------------------------------------------------------*/
#contents iframe {
    pointer-events: all !important;
}

/*sidebar ----------------------------------------------------------------------*/
#contents .post-content:has(#sidebar) /*#sidebarがあるとき*/ {
    width: calc(100% - 40px - 40px);
    max-width: var(--contents-width-main);
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 5%;
    padding-block: 50px;
    margin: 0 auto;
}
#contents .post-content:has(#sidebar) .post-content-main {
    width: calc(100% - 5% - 200px);
    order: 2;
}
#contents .post-content:has(#sidebar) .post-content-main section {
    padding-top: 0;
}
#contents .post-content:has(#sidebar) .post-content-main .inner {
    width: 100%;
}
#sidebar {
    width: 200px;
    padding-block: 0 50px;
    margin: 0;
    order: 1;
}
#sidebar h2 {
    font-size: 1.25rem;
    border-bottom: 1px solid;
    padding-block: 0.5em;
    margin-bottom: 0.5em;
}
#sidebar nav {
    margin-bottom: 50px;
}
#sidebar .banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
    gap: 5%;
}
#sidebar .banner a {
    display: block;
}
@media only screen and (max-width: 820px) {
    #contents .post-content:has(#sidebar) /*#sidebarがあるとき*/ {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    #contents .post-content:has(#sidebar) .post-content-main {
        width: 100%;
        order: 1;
    }
    #contents .post-content:has(#sidebar) .post-content-main .inner,
    #sidebar {
        width: calc(100% - 30px - 30px);
    }
    #sidebar {
        order: 2;
        margin-inline: auto;
    }
}
@media only screen and (max-width: 468px) {
    #contents .post-content:has(#sidebar) .post-content-main .inner,
    #sidebar {
        width: calc(100% - 20px - 20px);
    }
}

/* =========================================================================================
Post list
=========================================================================================*/
/*common*/
.post-list {
    width: 100%;
    margin: 0;
    padding: 0;
}
.post-list ul {
    width: 100%;
    margin: 0;
    padding: 0;
}
.post-list ul a {
    color: var(--color-base-font);
    display: inline-block;
}
.post-list ul a:hover {
    text-decoration: none;
}
.post-list ul li {
    width: 100%;
}
.post-list .no-post {
    text-align: center;
    display: block;
    padding: 10vh 1em;
}
.post-list .cat {
    font-size: 0.8rem;
    line-height: 1.4;
    height: auto;
}
.post-list .cat a {
    text-align: center;
    display: block;
    min-width: 80px;
    background: var(--color-gray);
    padding: 0.375em 0.5em 0.25em;
}

/* animation */
.post-list a .thumbnail img { transition:scale 0.3s;}
.post-list a .title::after { transition:translate 0.3s;}

.post-list a:is(:focus-visible, :active) {
    & .thumbnail img { scale:1.05;}
    & .title::after { translate:0.5em 0;}
}
@media(hover:hover){
    .post-list a:hover {
        & .thumbnail img { scale:1.05;}
        & .title::after { translate:0.5em 0;}
    }
}

/*column ------------------------------------------------------------*/
.post-list.column ul {
    margin-bottom: 20px;
}
.post-list.column ul li {
    border-bottom: 1px solid var(--color-gray);
    padding: 1.5em 0 1.25em;
}
.post-list.column ul li:last-child {
    border-bottom: none;
}
.post-list.column ul li article {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    align-items: start;
    justify-content: left;
    gap: 0 1em;
}
.post-list.column .date {
    color: var(--color-base-font);
    font-size: 0.9em;
}
.post-list.column .title {
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    font-weight: var(--weight-medium);
    line-height: 1.5;
}
.post-list.column .title a {
    display: block;
    padding-right: 2.25em;
    position: relative;
    z-index: 1;
}
.post-list.column .title a:hover {
    color: var(--color-main);
    opacity: 1;
}
.post-list.column .title a::after {
    content: "";
    background: var(--color-base-font);
    width: 1.5em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
    -webkit-mask-image: url(assets/images/common/arrow_mask.svg);
    mask-image: url(assets/images/common/arrow_mask.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: 0.3s;
}
.post-list.column .title a:hover::after {
    background: var(--color-main);
    translate: 15px -50%;
}

@media only screen and (max-width: 820px) {
    .post-list.column ul li article {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em 1em;
    }
    .post-list.column .date {
        width: auto !important;
    }
    .post-list.column .title {
        width: 100% !important;
    }
}
@media only screen and (max-width: 468px) {
}

/* row ------------------------------------------------------------------------*/
.post-list.row {
    --border-width:2px;/* カードの枠線の太さ。radiusなどの計算に使用 */
}
.post-list.row ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap:40px 45px;
    margin-bottom:clamp(1.875rem, calc(0.213rem + 5.682vw), 3.125rem);/* vp:468-820px 30-50px */
}
.post-list.row li {
    padding:0em;
    border:var(--border-width) solid var(--color-main);
    border-radius:var(--radius-main);
    background-color:#fff;
}
.post-list.row li:only-child {
    max-width: 380px;
}
.post-list.row li article {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.post-list.row li article a {
    display: block;
}
.post-list.row .thumbnail {
    /* border: 1px solid;
    position: relative; */
    aspect-ratio:350/180;
    overflow:hidden;
    
    margin:0px;
    padding:0px;
    border-radius:calc(var(--radius-main) - var(--border-width)) calc(var(--radius-main) - var(--border-width)) 0 0;
    border:none;
}
.post-list.row .thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.post-list.row .thumbnail .new {
    color: #fff;
    font-size: small;
    background: var(--color-main);
    padding: 2px 10px 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}
.post-list.row .date {
    width: 100%;
}
.post-list.row .title {
    display: grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:1em;
    color:var(--color-main);
    font-size:clamp(1.313rem, calc(1.063rem + 0.852vw), 1.5rem);/* vp:468-820px 21-24px */
    font-weight:var(--weight-black);
    line-height:1.5;

    &::after {
        content:"";
        display:block;
        width:1.45em;
        aspect-ratio:1;
        background:url(assets/images/common/arrow_color.svg) no-repeat center / contain;
    }
}
@media only screen and (max-width: 820px) {
    .post-list.row ul {
        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
        gap:5vw;
    }
}
@media only screen and (max-width: 468px) {
}


/* ITベンダー */
.post-list.vendorPost {

    & li article { display:contents;}
    & a { height:100%;}
    & .thunbnail { aspect-ratio:370/180;}
    & .vendorPost_body { padding-block:30px;}
    & .vendorPost_introWrap { padding-inline:30px;}
    & p {
        display:-webkit-box;
        margin-top:1em;
        overflow:hidden;
        text-overflow:ellipsis;
        -webkit-line-clamp:5;
        -webkit-box-orient:vertical;
        font-size:15px;
    }
    & .vendorPost_rangeWrap {
        position:relative;
        display:flex;
        flex-wrap:wrap;
        gap:5px;
        margin-top:1.5em;
        margin-inline:75px 15px;

        & img {
            position:absolute;
            inset:-1em calc(100% + 1em) auto auto;
        }
        & span {
            padding-inline:0.5em;
            border:solid 1px var(--color-main);
            background-color:var(--color-main-light);
            border-radius:100vmax;
            font-size:12px;
        }
    }
}
@media only screen and (max-width: 820px) {
    .post-list.vendorPost {
        & .vendorPost_introWrap { padding-inline:2.5vw;}
    }
}
@media only screen and (max-width: 468px) {
}

/* デジタル化事例 */
.post-list.csPost {

    & li article { display:contents;}
    & a { height:100%;}
    & .csPost_taxonomys {
        display:flex;
        flex-wrap:wrap;

        & span {
            padding-inline:1em;
            color:#fff;
            font-size:clamp(0.875rem, calc(0.792rem + 0.284vw), 0.938rem);/* vp:468-820px 14-15px */
            font-weight:bold;
            background-color:var(--bg-color, var(--color-main));/* 変数：--bg-colorが未設定であればメインカラーを適用 */
        }
    }
    & .csPost_body {
        padding-top:clamp(0.875rem, calc(0.543rem + 1.136vw), 1.125rem);/* vp:468-820px 14-18px */
        padding-inline:clamp(1rem, calc(0.668rem + 1.136vw), 1.25rem);/* vp:468-820px 16-20px */
        padding-bottom:clamp(1.875rem, calc(1.044rem + 2.841vw), 2.5rem);/* vp:468-820px 30-40px */

        & p {
            display:-webkit-box;
            overflow:hidden;
            text-overflow:ellipsis;
            color:var(--color-main);
            font-size:clamp(0.938rem, calc(0.771rem + 0.568vw), 1.063rem);/* vp:468-820px 15-17px */
            font-weight:var(--weight-black);
            margin-top:1em;
            padding:0.5em 1em;
            background-color:var(--color-main-light);
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
        }
    }
}


/* =========================================================================================
FORM
=========================================================================================*/
.grecaptcha-badge {
    /*visibility: hidden;*/
} /*reCAPTCHAバッジ（ロゴマーク）を消す ※設定がうまくいったことを確認してからこのCSSを有効化すること*/
.entry-content form {
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
.entry-content form ::placeholder {
    color: #ccc;
}
.entry-content form input[type="text"],
.entry-content form input[type="number"],
.entry-content form input[type="tel"],
.entry-content form input[type="email"],
.entry-content form textarea,
.entry-content form select {
    width: 100%;
    background: #fefefe;
    border: 1px solid #ccc;
    padding: 0.25em 1em;
    transition: 0.3s;

    &.full { width:100%;}
    &.half { width:max(50%, 20em);}
    &.quarter { width:max(25%, 10em);}

    &.beforeText { margin-inline-start:10px;}
    &.afterText { margin-inline-end:10px;}
    &:user-invalid {
        border-color:var(--color-attention);
        background-color:var(--color-attention-light);
    }
}
.entry-content form input:focus,
.entry-content form textarea:focus {
    border: 1px solid var(--color-gray);
    background-color:var(--color-main-light);
}
.entry-content form textarea {
    min-height:4lh;
    height:4lh;
    resize:vertical;
}
.entry-content form :is(.wpcf7-radio, .wpcf7-checkbox) {
    /*ラジオボタンの位置調整*/
    display:flex;
    flex-wrap:wrap;
    gap:0px 20px;
    
    & .wpcf7-list-item { margin:0;}
}
.entry-content form select {
    width: fit-content;
    min-width: 300px;
    padding-right: 4em;
    background: #fff url(assets/images/common/icon_dropdown.svg) no-repeat;
    background-position: right 1em center;
    background-size: 1em;
}
.entry-content form .post-add input {
    max-width: 150px;
}
.entry-content form .select-pref select {
    min-width: 100px;
}
.entry-content form :is(input[type="submit"], input[type="button"]) {
    font-size:18px;
    color: #fff;
    font-weight: var(--weight-bold);
    background-color:var(--color);
    padding: 0.75em 1.5em;
    line-height: 1.4;
    border-radius:100vmax;
    min-width: 250px;
    border:solid 2px var(--color);
    transition: 0.3s;
}
.entry-content form input[type="submit"] {
    --color:var(--color-main);
}
.entry-content form input[type="button"] {
    --color:#555;
}
.entry-content form :is(input[type="submit"], input[type="button"]):is(:focus-visible, :active) {
    background-color:#fff;
    color:var(--color);
}
@media(hover:hover){
    .entry-content form :is(input[type="submit"], input[type="button"]):hover {
        background-color:#fff;
        color:var(--color);
    }
}
.entry-content form .wpcf7-list-item.first {
    margin:0;
}
.entry-content form .btn-area {
    margin-top: 3em;
}
.entry-content form .btn-area p {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    width: 100%;
}
.entry-content form .btn-area p br {
    display: none;
}
.entry-content form .btn-area .wpcf7-spinner {
    position: absolute;
    right: -80px;
    top: 30%;
}
@media only screen and (max-width: 820px) {
    .entry-content form .btn-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 800px;
    }
    .entry-content form .btn-area p {
        position: relative;
    }
    .entry-content form .btn-area .wpcf7-spinner {
        position: absolute;
        right: -80px;
        top: 30%;
    }
}
@media only screen and (max-width: 468px) {
    .entry-content form input[type="submit"],
    .entry-content form input[type="button"] {
        width: 100%;
        min-width: 100%;
    }
}

/*問い合わせ画面 --------------------------------------------------------*/
.entry-content .contact-bg {
    padding-block: 50px;
    margin: 0;
}
.entry-content .contact-bg .privacy {
    text-align: center;
    margin-bottom: 2em;
}
.entry-content .contact-bg .privacy .wpcf7-list-item {
    margin: 0;
}
.entry-content .contact-bg .privacy a {
    text-decoration: underline;
}
.entry-content .contact-bg .center {
    text-align: center;
    margin-top: 3em;
}
.entry-content form dl {
    width: 100%;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px 20px;
    margin:10px auto;
}
.entry-content form dt {
    font-weight: var(--weight-medium);
    text-align: left;
    line-height: 1.6;
}
.entry-content form dt label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.875em;
}
.entry-content form dt span {
    font-size: small;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    display: inline-block;
    background: var(--color-pink);
    border-radius: 2px;
    padding: 0.6em 0.25em 0.5em;
    margin-left: 0.5em;
}
.entry-content form dd p {
    display: block;
}
.entry-content form small {
    display: block;
    line-height: 1.7;
}

@media only screen and (max-width: 820px) {
    .entry-content .contact-bg {
        padding: 20px 0 50px;
    }
    .entry-content form {
        & dl { grid-template-columns:1fr; gap:0px;}
        & dt { text-align: left; width: 100%;}
        & dt label { justify-content: left;}
        & dt span { font-size: 0.8rem; padding: 0.15em 0.2em 0.2em; margin-left: 0.75em;}
        & dd { width: 100%; margin-bottom: 1em;}
    }
}
@media only screen and (max-width: 468px) {
    .entry-content .contact-bg {
        padding-top: 0;
    }
}


.entry-content form {
    --border:solid 1px #ccc;
    
    & :is(h2, h3, h4, h5, h6) {
        font-size:clamp(1.063rem, calc(0.73rem + 1.136vw), 1.313rem);/* vp:468-820px 17-21px */
        font-weight:var(--weight-black);
        color:var(--color-main);
        margin-block:3em 1.5em;
        padding:0.25em 0.75em;
        background-color:var(--color-main-light);
    }
    & table {
        width:100%;
        border-top:var(--border);
        border-left:var(--border);
    }
    & :is(th, td) {
        padding:1em 1.25em;
        border-right:var(--border);
        border-bottom:var(--border);
    }
    & th {
        width:25%;
        background-color:var(--color-main-light);
        font-weight:var(--weight-medium);
    }
    & td { width:75%;}
    & label { font-weight:var(--weight-medium);}
    & span.required {
        float:right;
        color:#fff;
        font-size:0.75em;
        font-weight:var(--weight-bold);
        padding:0.1em 0.5em;
        background-color:var(--color-attention); 
    }
    & p { font-size:15px;}
}
@media only screen and (max-width:820px){
    .entry-content form {

        & p { font-size:14px;}
        & :is(th, td) { display:block; width:100%; padding:0.75em 1em;}
    }
}



/* =========================================================================================
プラグイン固有要素
=========================================================================================*/
/* ===== FE Advanced Search ===== */

[id^="feas-searchform"] {

    /* button, submit, resetボタン共通 */
    & input:where([type="submit"], [type="reset"], [type="button"]) {
        padding:0.5em 1.5em;
        font-size:clamp(1rem, calc(0.834rem + 0.568vw), 1.125rem);/* vp:468-820px 16-18px */
        font-weight:var(--weight-bold);
        border-radius:var(--radius-main);
        border:solid 1px;
        transition:background-color 0.3s, color 0.3s;
    }
    /* submitボタン */
    & :is(.feas-submit-button, [type="submit"]) {
        color:#fff;
        background-color:var(--color-main);
        border-color:var(--color-main);
    
        &:is(:focus-visible, :active) {
            color:var(--color-main);
            background-color:#fff;
        }
        @media(hover:hover) {
            &:hover {
                color:var(--color-main);
                background-color:#fff;
            }
        }
    }
    /* resetボタン */
    & input[type="reset"] {
        background-color:color-mix(in sRGB, #fff 85%, var(--color-gray) 15%);
        border-color:color-mix(in sRGB, #fff, var(--color-gray));
    
        &:is(:focus-visible, :active) {
            background-color:#fff;
        }
        @media(hover:hover) {
            &:hover { background-color:#fff;}
        }
    }

    /* checkbox, radioボタン共通 */
    & input:where([type="checkbox"], [type="radio"]) {
        position:absolute;
        opacity:0;
        pointer-events:none;
        z-index:-1;
    }
    & label[class^="feas_clevel"] {
        font-size:clamp(0.875rem, calc(0.709rem + 0.568vw), 1rem);/* vp:468-820px 14-16px */
        padding-inline:0.75em;
        font-weight:var(--weight-medium);
        border:solid 1px var(--color-main);
        border-radius:100vmax;
        cursor:pointer;
        transition:background-color 0.3s, color 0.3s;

        &:has(:is([type="checkbox"], [type="radio"]):focus-visible) {
            outline:solid 1px;
        }
        &:has(:is([type="checkbox"], [type="radio"]):checked) {
            color:#fff;
            background-color:var(--color-main);
        }
        &:active {
            color:#fff;
            background-color:var(--color-main);
        }
        @media(hover:hover) {
            &:hover {
                color:#fff;
                background-color:var(--color-main);
            }
        }
    }

    /* その他 */
    & p {
        margin-bottom:1em;
        color:var(--color-main);
        font-weight:var(--weight-bold);
        font-size:clamp(1rem, calc(0.834rem + 0.568vw), 1.125rem);/* vp:468-820px 16-18px */

        & strong { font-size:1.15em;}
    }
}



/* =========================================================================================
OTHER
=========================================================================================*/
/* ===== グラデーションのある背景 ===== */
.bg_gradient {
    padding-top:0px;
    background:url(assets/images/common/bg_noise.webp) top left / 6em auto, var(--bg-gradient);
    border-block:solid 2px var(--color-main);
}
body.home .bg_gradient + .bg_gradient { margin-top:clamp(12rem, calc(6.682rem + 18.182vw), 16rem);/* vp:468-820px 192-256px */}
body:not(.home) .bg_gradient + .bg_gradient { margin-top:clamp(6rem, calc(3.341rem + 9.091vw), 8rem);/* vp:468-820px 96-128px */}
body.page :nth-last-child(1 of .bg_gradient) { padding-bottom:clamp(6rem, calc(3.341rem + 9.091vw), 8rem);/* vp:468-820px 96-128px */}


/* 画面右上にあるMENU、お問合せボタン およびMENU内容 */
.fixedMenuWrap {
    --addRange:clamp(0.938rem, calc(-1.14rem + 7.102vw), 2.5rem);/* vp:468-820px  15-40px  common.js にて使用 */

    position:fixed;
    right:clamp(0.938rem, calc(-0.309rem + 4.261vw), 1.875rem);/* vp:468-820px 15-30px */
    z-index:9999;
    
    & :is(.btn_mpfMenu, .btn_contact) {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:0.5em;
        width:clamp(4.375rem, calc(3.378rem + 3.409vw), 5.125rem);/* vp:468-820px 70-82px */
        aspect-ratio:1;
        border-radius:100%;
        color:#fff;
        font-size:clamp(0.75rem, calc(0.584rem + 0.568vw), 0.875rem);/* vp:468-820px 12-14px */
        font-weight:var(--weight-black);
        text-align:center;
        line-height:1;
    }
    /* .btn_mpfMenu */
    & .btn_mpfMenu {
        background-color:var(--color-main);
    }
    & .mpfMenu_lines {
        position:relative;
        width:60%;
        aspect-ratio:49/21;
        
        & span {
            position:absolute;
            left:0;
            display:block;
            height:2px;
            background-color:currentColor;
            border-radius:100vmax;
            transition:0.3s;
        }
        & span:nth-of-type(1) { width:100%; top:0;}
        & span:nth-of-type(2) { width:75%; top:50%; translate:0 -50%;}
        & span:nth-of-type(3) { width:50%; bottom:0;}
    }
    & .textWrap {
        display:grid;

        & p { grid-area:1/-1; transition:opacity 0.3s;}
        & p:nth-of-type(1) { opacity:1;}
        & p:nth-of-type(2) { opacity:0;}
    }
    & .btn_contact {
        background-color:var(--color-pink);
        margin-top:clamp(0.938rem, calc(0.522rem + 1.42vw), 1.25rem);/* vp:468-820px 15-20px */
        transition:opacity 0.3s, visibility 0.3s, display 0.3s allow-discrete;

        &::before {
            content:"";
            display:block;
            width:55%;
            aspect-ratio:44/28;
            background-color:#fff;
            mask:url(assets/images/common/icon_contact.svg) no-repeat center / contain;
        }
    }

    /* active */
    &:has(.btn_mpfMenu.active) { top:var(--addRange)!important;}
    & .btn_mpfMenu.active {

        & .mpfMenu_lines {

            & span:is(:nth-of-type(1), :nth-of-type(3)) { left:50%; width:75%; height:3px;}
            & span:nth-of-type(1) { top:50%; translate:-50% -50%; rotate:-45deg;}
            & span:nth-of-type(2) { opacity:0;}
            & span:nth-of-type(3) { bottom:50%; translate:-50% 50%; rotate:45deg;}
        }
        & .textWrap {
            & p:nth-of-type(1) { opacity:0;}
            & p:nth-of-type(2) { opacity:1;}
        }

        & + .btn_contact { display:none; opacity:0; pointer-events:none; visibility:hidden;}
    }
}
body:has(.btn_mpfMenu.active) { overflow:hidden;}

.mpfMenuContent {
    position:fixed;
    inset:auto auto 0 0;
    width:100%;
    height:100vh;
    border:none;
    overscroll-behavior:contain;
    z-index:9998;
    font-size:18px;

    pointer-events:none;
    opacity:0;
    transition:0.3s;

    & .inner {
        display:grid;
        align-items:center;
        height:100%;
    }
    & .mpfMenuContentWrap {
        display:grid;
        grid-template:
            "title menu" auto
            "img menu" 1fr / 1fr auto;
        /* gap:40px 1em;
        width:min(1000px, 100%);
        margin-inline:auto; */
        gap:clamp(1em, 5.28vh, 40px) 1em;
        width:min(1000px, calc(100% - 90px));
        margin-inline:auto 100px;
    }
    & nav {
        grid-area:menu;
        width:min(350px, 100%);
        max-height:80vh;
        overflow-y:auto;
        scrollbar-width:thin;
    }
    & .menu_title { grid-area:title; width:auto; height:min(180px, 23.76vh); aspect-ratio:387/180;}
    & .menu_img { grid-area:img; width:auto; height:min(386px, 50.95vh); aspect-ratio:430/385.5;}

    & ul {
        display:flex;
        flex-direction:column;
        gap:1em;

        & ul { padding:0 1em 1em;}
    }
    & :is(a, button) {
        display:flex;
        justify-content:space-between;
        gap:1em;
        width:100%;
        padding:0.75em 1em;
        color:var(--color-main);
        font-size:clamp(1rem, calc(0.92rem + 0.273vw), 1.125rem);/* vp:468-1200px 16-18px */
        font-weight:var(--weight-black);
    }
    & a {

        &.contactLink { color:var(--color-pink);}
        &::after {
            content:"";
            display:block;
            width:1em;
            background-color:currentColor;
            mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
            transition:translate 0.3s;
        }
        &:is(:focus-visible, :active)::after { translate: 0.5em 0%;}
        @media(hover:hover){
            &:hover::after { translate:0.5em 0%;}
        }
    }
    & button {

        & .btnIcon {
            display:block;
            width:1em;
            aspect-ratio:1;
            position:relative;
        }
        & span {
            position:absolute;
            inset:50% auto auto 50%;
            translate:-50% -50%;
            display:block;
            width:0.75em;
            height:3px;
            background-color:currentColor;
            transition:rotate 0.3s;
        }
        & span:nth-of-type(2) { rotate:90deg;}

        & + .mpfMenuContent_subMenuWrap {
            display:grid;
            grid-template-rows:0fr;
            transition:grid-template-rows 0.3s;

            & > ul { overflow:hidden; transition:padding 0.3s;}
        }

        /* no active */
        &:not(.active) + .mpfMenuContent_subMenuWrap > ul { padding-block:0px;}
        &:not(.active) + .mpfMenuContent_subMenuWrap a { visibility:hidden;}
        /* active */
        &.active span:nth-of-type(2) { rotate:180deg;}
        &.active + .mpfMenuContent_subMenuWrap { grid-template-rows:1fr;}
        &.active + .mpfMenuContent_subMenuWrap a { visibility:visible;}
    }
    
    & .mpfMenuContent_l1 {
        background-color:#fff;
        border-radius:var(--radius-main);
    }
    & .mpfMenuContent_l2 a {
        background-color:var(--color-main-light);
        border-radius:100vmax;
    }
}
#contents:has(.btn_mpfMenu.active) .mpfMenuContent {
    pointer-events:auto;
    opacity:1;
}
@media only screen and (max-width:820px){
    .mpfMenuContent {
        max-height:100dvh;
        overflow:auto;

        & .inner { place-items:unset; padding-block:1em 2em; height:auto;}
        & .mpfMenuContentWrap { display:block; margin-inline:auto; width:100%;}
        & .menu_title { width:49.1094vw;/* vp:393px 193px */ height:auto;}
        & .menu_img { width:min(370px, 100%); height:auto; margin-inline:auto;}
        & nav { width:100%; max-height:unset; margin-block:1em;}
    }
}
/* @media only screen and (max-width:768px){
    .mpfMenuContent {
        max-height:100dvh;
        overflow:auto;

        & .inner { place-items:unset; padding-block:1em 2em; height:auto;}
        & .mpfMenuContentWrap { display:block;}
        & .menu_title { width:49.1094vw;/* vp:393px 193px /}
        & .menu_img { width:min(370px, 100%); margin-inline:auto;}
        & nav { width:100%; margin-block:1em;}
    }
} */


/* ===== 箱型見出し ===== */
.heading-box {
    position:relative;
    width:fit-content;
    margin-inline:auto;
    translate:0 -50%;
}
.heading-box-sub {
    position:absolute;
    padding-bottom:0.5em;
    font-size:clamp(1.5rem, calc(0.835rem + 2.273vw), 2rem);/* vp:468-820px 24-32px */
    font-weight:var(--weight-black);
    color:var(--color-main);
    inset:auto auto calc(100% + 0.5em) 50%;
    text-wrap:nowrap;
    translate:-50% 0;
    overflow-x:clip;
}
.heading-box-sub::after {
    content:"";
    position:absolute;
    inset:auto auto 0 50%;
    width:100%;
    height:0.375em;
    background-color:currentColor;
    mask:url(assets/images/common/icon_heading-box-sub.svg) no-repeat center / auto 100%;
    translate:-50% 0;
}

/* ITベンダー一覧・詳細 */
body:is(.post-type-archive-vendor, .single-vendor) .heading-box {
    width:min(560px, 68.2926vw);/* vp:820px 560px */
    @media only screen and (max-width:468px){
        width:auto;
        height:12.7226vw;/* vp:393px 50px */
    }
}
/* デジタル化事例一覧 */
body.post-type-archive-case .heading-box {
    width:min(627.5px, 76.5243vw);/* vp:820px 627.5px */
    @media only screen and (max-width:468px){
        width:auto;
        height:12.7226vw;/* vp:393px 50px */
    }
}
/* デジタル化事例詳細 */
body.single-case .heading-box{
    width:min(491px, 59.8780vw);/* vp:820px 491px */
    @media only screen and (max-width:468px){
        width:auto;
        height:12.7226vw;/* vp:393px 50px */
    }
}
/* 新規登録申込 / 登録内容更新ページ（確認・完了ふくむ） */
body:is(.registration, .preview, .thanks) .heading-box {
    width:min(899px, 74.9166vw);/* vp:1200px 74.9166vw */
    @media only screen and (max-width:468px){
        width:auto;
        height:22.3918vw;/* vp:393px 88px */
    }
}
body .heading-box img { margin-inline:auto; width:auto; height:100%;}


/* ===== インデント：注釈 ===== */
.caution {
    padding-left:1em;
    text-indent:-1em;

    &::before { content:"※";}
}

/* ===== ITベンダー検索フォーム ===== */
.vendorForm {

    & .vendorForm_head {
        display:flex;
        align-items:center;
        gap:clamp(0.5rem, calc(-0.165rem + 2.273vw), 1rem);/* vp:468-820px 8-16px */
    }
    & .vendorForm_heading {
        flex:1;
        padding:0.5em 0.625em;
        border-block:solid 2px currentColor;
        color:var(--color-main);
        font-size:clamp(1.25rem, calc(0.253rem + 3.409vw), 2rem);/* vp:468-820px 20-32px */
        font-weight:var(--weight-black);
    }
    & .vendorForm_toggleButton {
        position:relative;
        padding:1em 2.5em 1em 1.5em;
        color:#fff;
        background-color:var(--color-main);
        border-radius:var(--radius-main);
        font-size:clamp(1rem, calc(0.501rem + 1.705vw), 1.375rem);/* vp:468-820px 16-22px */
        font-weight:var(--weight-bold);
        transition:border-radius 0.3s;

        &::after {
            content:"";
            position:absolute;
            inset:50% 1em auto auto;
            translate:0% -50%;
            display:block;
            width:0.75em;
            aspect-ratio:231/150;
            background-color:currentColor;
            mask:url(assets/images/common/icon_dropdown.svg) no-repeat center / contain;
            transition:rotate 0.3s;
        }
        /* hover */
        &:is(:focus-visible, :active, .active)::after {
            rotate:180deg;
        }
        @media(hover:hover) {
            &:hover::after { rotate:180deg;}
        }
    }
    & .vendorForm_wrap {
        display:grid;
        grid-template-rows:0fr;
        transition:grid-template-rows 0.3s;

        & > div { 
            overflow:hidden;
            background-color:#fff;
            border:none;
            border-radius:var(--radius-main) 0 var(--radius-main) var(--radius-main);
            padding-inline:min(3.125em, 5vw);
            transition:padding-block 0.3s, border 0.3s;
        }
    }
    /* .active */
    & .vendorForm_toggleButton.active {
        border-radius:var(--radius-main) var(--radius-main) 0 0;
    }
    &:has(.vendorForm_toggleButton.active) .vendorForm_wrap {
        grid-template-rows:1fr;

        & > div {
            padding-block:clamp(1.25rem, calc(-1.077rem + 7.955vw), 3rem);/* vp:468-820px 20-48px */
            border:solid 1px var(--color-main);
            border-top:none;
        }
    }

    /* ITベンダー検索が展開されていない場合、その中にある要素へのfocus無効化 */
    &:has(.vendorForm_toggleButton:not(.active)) .vendorForm_wrap :is(input, textarea, button){
        visibility:hidden;
    }

    /* form */
    & form + form { margin-top:45px;}
    & .vendorForm_field {
        margin-block:1em;
        padding:0.25em 1em;
        color:var(--color-main);
        font-size:clamp(1.125rem, calc(0.876rem + 0.852vw), 1.313rem);/* vp:468-820px 18-21px */
        font-weight:var(--weight-black);
        background-color:var(--color-main-light);
    }
    & form :nth-child(1 of .vendorForm_field) { margin-top:0px;}
    & .vendorForm_keywordWrap {

        & form {
            display:grid;
            grid-template-columns:1fr auto;
            max-width:600px;
        }
        & input[type="text"] {
            padding:0.5em 1.5em;
            min-width:0px;
            font-weight:var(--weight-bold);
            border-radius:var(--radius-main) 0 0 var(--radius-main);
            border:solid 2px var(--color-main);
            border-right:none;
        }
        & input[type="submit"] {
            border-radius:0 var(--radius-main) var(--radius-main) 0;
            border-width:2px;
        }
        
    }
    & .vendorForm_labelWrap {
        display:flex;
        flex-wrap:wrap;
        gap:clamp(0.5rem, calc(-0.165rem + 2.273vw), 1rem);/* vp:468-820px 8-16px */
        padding:0 1em 1em;
        border-bottom:dotted 1px var(--color-main);

        & p { margin-block:0px; width:100%;}
        & + .vendorForm_labelWrap { padding-top:1em;}
    }

    /* reset、submitボタン */
    & .vendorForm_buttons {
        display:flex;
        justify-content:center;
        align-items:center;
        gap:clamp(1rem, calc(-0.33rem + 4.545vw), 2rem);/* vp:468-820px 16-32px */
        margin-top:2em;
    }
}
@media only screen and (max-width:820px){
    
}
@media only screen and (max-width:468px){
    .vendorForm {
        & .vendorForm_toggleButton { padding:0.75em 2em 0.75em 1em;}
        & .vendorForm_labelWrap { padding-inline:0;}
        & .vendorForm_buttons {
            flex-direction:column-reverse;

            & input:is([type="reset"], [type="submit"]) { width:12.5em;}
        }
    }
}