@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: #020202;
    --color-main: #0562ab;
    --color-link: #000;
    --color-hover: #555;
    --color-accent: #daa21b;
    --color-attention: crimson;
    --color-dark-blue: #034a83;
    --color-light-blue: rgba(5, 98, 171, 0.1);
    --color-gray: #ddd;
    --contents-width-small: 800px;
    --contents-width-main: 1200px;
    --contents-width-large: 1680px;
    --weight-Light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;
}
html {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    color: var(--color-base-font);
    font-size: clamp(0.938rem, calc(0.885rem + 0.225vw), 1rem); /* min: 15px, max: 16px */
    font-weight: var(--weight-regular);
    line-height: 2.0;
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
    margin: 0;
    padding: 0;
}
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 {
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.025em;
    padding: 0;
    margin: 0;
}
a {
    color: var(--color-link);
    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;
}
@media only screen and (max-width: 820px) {
    body {
        line-height: 1.7em;
    }
    .pc {
        display: none;
    }
    .tb {
        display: block;
    }
    .mb {
        display: none;
    }
}
@media only screen and (max-width: 468px) {
    body {
        min-width: 375px;
    }
    a[href^="tel:"] {
        pointer-events: all;
    }
    .pc {
        display: none;
    }
    .tb {
        display: none;
    }
    .mb {
        display: block;
    }
}

/* =========================================================================================
Header
=========================================================================================*/
#header {
    width: 100%;
    height: 100px;
    background: transparent;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 100;
    transition: 0.5s;
}
#header .inner {
    width: calc(100% - 20px - 20px);
    max-width: 1920px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 20px;
    padding: 0;
    position: relative;
}
#header .logo {
    width: 30%;
    max-width: 200px;
}
#header .logo a:hover {
    opacity: 1;
}
@media screen and (max-width: 1400px) {
#header {
    width: 100%;
    height: auto;
    top: 10px !important;
}
}
@media screen and (max-width: 1080px) {
#header {
    top: 0 !important;
}
}

/*globalnavi ----------------------------------------------------------*/
#header #g-navi-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
}
#header #g-navi-list {
    height: 100%;
    background: rgba(255,255,255,0.9);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.4vw;
    align-items: center;
    border-radius: 100px;
    padding-block: 0.75em;
    padding-inline: 1.75em 0.75em;
}
@media screen and (max-width: 1240px) {
#header #g-navi-list {
    padding-inline: 1.75em 1.75em;
}
}
/*#g-navi*/
#header #g-navi {
    width: fit-content;
}
#header #g-navi ul {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: right;
    gap: 2vw;
}
#header #g-navi ul li {
    /* 1400pxまで14px、1900pxで16pxに到達、最大16px */
font-size: clamp(0.875rem, calc(0.525rem + 0.4vw), 1rem);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}
#header #g-navi ul li a {
    color: var(--color-base-font);
    display: block;
    position: relative;
    z-index: 1;
}
#header #g-navi ul li a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 2px;
    background: var(--color-main);
    position: absolute;
    left: 0;
    bottom: -0.1em;
    z-index: 1;
    transition: ease-in-out 0.25s;
}
#header #g-navi ul li a:hover {
    text-decoration: none;
    opacity: 1;
}
#header #g-navi ul li a:hover::before,
#header #g-navi ul li.current-menu-item a::before {
    width: 100%;
}
#header #g-navi ul li.menu-item-has-children {
    position: relative;
}
/* 2階層（.has-child） */
#header #g-navi ul li.has-child {
    position: relative;
    z-index: 1;
}
/*hoverしたら表示*/
#header #g-navi ul li.has-child:hover > ul,
#header #g-navi ul li.has-child ul li:hover > ul,
#header #g-navi ul li.has-child:active > ul,
#header #g-navi ul li.has-child ul li:active > ul {
    visibility: visible;
    opacity: 1;
}
/*2階層目以降*/
#header #g-navi ul ul {
    width: max-content;
    min-width: 100%;
    border: 3px solid var(--color-main);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.25em 1.5em 0.1em;
    margin: 0;
    position: absolute;
    background: #fff;
    top: calc(100% + 10px);
    left: 50%;
    translate: -50% 0;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: 0.3s;
    z-index: 10;
}

#header #g-navi ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 22px 10px;
  border-color: transparent transparent var(--color-main);
  translate: -50% -100%;
}

#header #g-navi ul ul::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 6.7px 14.8px 6.7px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}
/* 2つ目以降の li の前に区切りを追加 */
#header #g-navi ul ul li + li {
    margin-left: 0.75em;
    padding-left: 1.75em; /* ／の分の余白 */
    position: relative;
    z-index: 1;
}
#header #g-navi ul ul li + li::before {
    content: "／";
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    z-index: 1;
    font-weight: 100;
    opacity: 0.6;
}
#header #g-navi ul ul li a {
    padding: 0.25em 0;
}
#header #g-navi ul ul li a:hover {
    color: var(--color-main);
}
#header #g-navi ul ul li a::before {
    display: none;
}
/*.btn*/
#header .btn {
    width: 100%;
    justify-content: right;
    padding: 0;
    display:flex;
     gap: 0px;
}
#header .btn a {
    font-size: clamp(0.875rem, calc(0.525rem + 0.4vw), 1rem);
    padding: 0.8em 1.1em 0.7em;
    min-width: auto;
}
#header .btn a.blue {
   border-radius: 100px 0 0 100px;
   }
#header .btn a.orange {
   border-radius:  0 100px 100px 0;
   }

@media screen and (max-width: 1400px) {
#header #g-navi ul li:first-child {
      display: none;
    }
}
@media screen and (max-width: 1240px) {
#header .btn {
    display:block;
}
#header .btn a.blue {
   border-radius: 10px 10px 0px 0px;
   }
#header .btn a.orange {
   border-radius: 0px 0px 10px 10px;
   margin-top:0px;
   }
   #header .btn a {
    padding: 0.6em 0.8em;
}
}
@media screen and (max-width: 1080px) {
#g-navi-list .btn a {
    font-size: clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* min: 20px, max: 18px */
    padding: 0.7em 1.1em;
    min-width: auto;
}
#g-navi-list .btn a.orange {
   margin-top:10px;
    border-radius: 100px 100px 100px 100px;
   }
#g-navi-list .btn a.blue {
   color: var(--color-main);
   background: #fff;
   border: 1px #fff solid;
    border-radius: 100px 100px 100px 100px;
   }
#g-navi-list .btn a.contact::after {
    -webkit-mask-image: url(images/common/icon_mail.svg);
    mask-image: url(images/common/icon_mail.svg);
     background: var(--color-main);
}
#header .btn a.blue:hover {
    background: var(--color-accent);
     border: 1px var(--color-accent) solid;
     color: #fff;
}
#header .btn a.blue:hover::after {
    background: #fff;
    color: #fff;
}
#header .btn a.orange {
   border-radius: 100px 100px 100px 100px;
   margin-top:20px;
   }
}

@media screen and (max-width: 980px) {
#header #g-navi ul li:first-child {
      display: inline-block;
    }
}

/* display ----------------------------------------------------------------- */
#header .g-navi-logo,
#header .openbtn,
#header #g-navi-sp {
    display: none; /*PCでは非表示*/
}
@media only screen and (max-width: 1100px) {
    #header {
        height: 60px;
        padding: 0;
    }
    #header .inner {
        justify-content: space-between;
        padding-right: 50px;
    }
    #header .logo {
        width: 150px;
    }
    /* HAMBURGER MENU -------------------------------------------------*/
    #header .openbtn {
        color: #fff;
        font-size: 12px;
        line-height: 1;
        width: 65px;
        height: 60px;
        background: var(--color-main);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding-top: 2px;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        transition: 0.3s;
    }
    #header .openbtn span {
        width: 50%;
        height: 2px;
        background: #fff;
        border-radius: 10px;
        transform-origin: 50% 40%;
        transition: 0.5s;
    }
    #header .openbtn.active {
        background: var(--color-main);
        gap: 0;
        padding-top: 12px;
    }
    #header .openbtn.active span:nth-of-type(1) {
        display: none;
    }
    #header .openbtn.active span:nth-of-type(2) {
        width: 55%;
        transform: rotate(32.5deg);
    }
    #header .openbtn.active span:nth-of-type(3) {
        width: 55%;
        transform: rotate(-32.5deg) translateY(-2px);
        margin-bottom: 15px;
    }

    /*globalnavi ----------------------------------------------------------*/
    #header #g-navi-area {
        width: 350px !important;
        height: 100vh;
        background: var(--color-main);
        border-radius: 0;
        display: initial;
        padding: 0;
        position: fixed;
        z-index: 99;
        top: 0;
        right: -120%;
        transition: all 0.5s;
    }
    #header #g-navi-area.panelactive {
        /*アクティブクラスがついたら位置を0に*/
        right: 0;
    }
    #header #g-navi-area #g-navi-list {
        /*ナビの数が増えた場合縦スクロール*/
        width: 100%;
        height: 100vh;
        background: transparent;
        border-radius: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 5vh;
        padding: 100px 50px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 999;
    }
    /* .g-navi-logo ----------------------------------------------------*/
    #header #g-navi-area #g-navi-list .g-navi-logo {
        display: inline-block;
        width: 200px;
        position: absolute;
        top: 25px;
        left: 20px;
    }
    /* #g-navi ----------------------------------------------------------*/
    #header #g-navi {
        width: 100%;
    }
    #header #g-navi ul {
        width: 100%;
        flex-direction: column;
        align-items: start;
        justify-content: left;
        gap: 1em;
        padding: 0;
        margin: auto;
        position: relative;
        z-index: 999;
    }
    #header #g-navi ul li {
        font-size: clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* min: 20px, max: 18px */
        text-align: left;
    }
    #header #g-navi ul li a {
        color: #fff;
        padding: 0;
    }
    #header #g-navi ul li a::before {
        background: #fff;
    }
       /* 2階層（.has-child）--------------------------------------------- */
    #header #g-navi ul ul {
        width: fit-content;
        min-width: auto;
        background: transparent;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0.25em;
        padding: 0.5em 0 0 1.5em;
        margin: 0;
        position: static;
        translate: 0;
        /*最初から表示*/
        visibility: visible;
        opacity: 1;
    }
    #header #g-navi ul ul::before,
    #header #g-navi ul ul::after {
        display: none;
    }
    /* 2つ目以降の li の前に区切りを追加 ←解除 */
    #header #g-navi ul ul li,
    #header #g-navi ul ul li + li {
        margin-left: 0;
        padding-left: 1.5em;
        position: relative;
        z-index: 1;
    }
    #header #g-navi ul ul li::before,
    #header #g-navi ul ul li + li::before {
        content: "" !important;
        display: inline-block !important;
        background: #fff;
        width: 0.8em;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: 0 !important;
        translate: 0 -50% !important;
        z-index: 1;
        -webkit-mask-image: url(images/common/arrow_mask.svg);
        mask-image: url(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;
    }
    #header #g-navi ul ul li a {
        font-size: 0.9em;
        font-weight: var(--weight-medium);
        padding: 0.1em 0;
        position: relative;
        z-index: 1;
    }
    /*hover時*/
    #header #g-navi ul ul li a:hover {
        color: #fff;
    }
    #header #g-navi ul ul li:hover::before,
    #header #g-navi ul ul li + li:hover::before {
        translate: 40% -50% !important;
    }
    /*.btn ------------------------------------------------------------*/
    #header .btn a {
        width: 100%;
    }
    /*#g-navi-sp ------------------------------------------------------------*/
    #header #g-navi-sp {
        display: block;
        width: 100%;
    }
    #header #g-navi-sp ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.5em 1.5em;
        margin: auto;
    }
    #header #g-navi-sp ul li {
        font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
        position: relative;
    }
    #header #g-navi-sp ul li a {
        color: #fff;
    }
}
@media only screen and (max-width: 468px) {
    #header #g-navi-area {
        width: 100% !important;
        right: -150%;
    }
    #header #g-navi-area #g-navi-list {
        min-width: 375px;
        padding: 100px 45px;
    }
}

/* =========================================================================================
Footer
=========================================================================================*/
#footer {
    color: #fff;
    font-size: clamp(0.938rem, calc(0.885rem + 0.225vw), 1rem); /* min: 15px, max: 16px */
    background: var(--color-main);
    padding-block: 50px 0;
    position: relative;
}
#footer .inner {
    display: grid;
    grid-template-columns: minmax(350px, 45%) 1fr;
    gap: 30px;
}
/* info */
#footer .info {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 35px;
}
#footer .info .logo {
    width: 100%;
    max-width: 250px;
}
#footer .info .address {
    display: flex;
    flex-direction: column;
    gap: 0.375em;
}
#footer .info .address p {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: start;
    gap: 0 1em;
}
#footer .info .address .btn {
    width: fit-content;
    display: inline-block;
    padding: 0;
}
#footer .info .address dl.tel {
    display: grid;
    grid-template-columns: 5em 1fr;
    align-items: start;
    gap: 0 1em;
}
#footer .info .address dl.tel dt {
    text-align-last: justify; /* Chrome・Firefox用 */
    text-justify: inter-ideograph; /* IE・Edge用 */
}
#footer .info .address dl.tel dd {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0 1em;
}
#footer .info .hours {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}
#footer .info .hours dl {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0 1em;
}
#footer .info .hours dt {
    color: var(--color-main);
    background: #fff;
    padding: 0.1em 0.5em 0em;
    font-weight: var(--weight-semibold);
}
#footer .info .hours dd {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0 1em;
}
@media only screen and (max-width: 468px) {
#footer .info .address p {
    display: block;
}
#footer .info .address .btn {
   margin-left: 1.0em;
}
}

/* footer-navi */
#footer .f-navi {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    margin-inline: auto 0;
}
#footer .f-navi ul.menu {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
#footer .f-navi ul.menu li {
    display: inline-table;
    list-style-type: none;
}
#footer .f-navi ul.menu li a,
#footer .f-navi ul.menu > li > span {
    color: #fff;
    font-weight: var(--weight-bold);
    display: block;
}
#footer .f-navi ul.sub-menu {
    width: 100%;
    display: inline-block;
    margin-top: 0.25em;
    margin-left: 1em;
}
#footer .f-navi nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 50px;
}
#footer .f-navi nav #f-navi-1 {
    grid-area: 1 / 1 / 3 / 2;
}
#footer .f-navi nav #f-navi-2 {
    grid-area: 1 / 2 / 2 / 3;
}
#footer .f-navi nav #f-navi-3 {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
#footer .f-navi nav #f-navi-3 li a,
#footer .f-navi nav #f-navi-3 > li > span {
    font-size: clamp(0.75rem, calc(0.697rem + 0.225vw), 0.813rem); /* min: 12px, max: 13px */
    font-weight: var(--normal-font-weight);
}
#footer .f-navi .btn a {
    width: 100%;
}
/*copyright*/
#footer .copyright {
    font-size: small;
    display: block;
    text-align: center;
    line-height: 1.2;
    background: var(--color-dark-blue);
    margin: 40px auto 0;
    padding: 1em;
}
@media only screen and (max-width: 980px) {
    #footer .inner {
        grid-template-columns: auto;
        gap: 50px;
    }
    #footer .info {
        align-items: center;
    }
    #footer .info .address {
        justify-content: center;
    }
    #footer .f-navi {
        width: 100%;
        margin: auto;
    }
}
@media only screen and (max-width: 468px) {
    #footer .f-navi nav {
        display: none;
    }
}

/* =========================================================================================
Page Top
=========================================================================================*/
#page-top {
    display: none; /*最初は非表示*/
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
}
#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-accent);
    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-main);
    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;
    }
}

/* =========================================================================================
Layout
=========================================================================================*/
#wrapper {
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#contents {
    padding-block: 0;
    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;
}
@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;
}

/* tabs ----------------------------------------------------------------------*/
.tabs {
    margin: auto;
}
.tabs .tab-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 5px;
    margin: 0;
}
.tabs .tab-list .tab-item {
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    background: var(--color-gray);
    border: none !important;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 20px 30px;
    cursor: pointer;
    transition: 0.3s;
}
.tabs .tab-list .tab-item.active {
    color: #fff;
    background: var(--color-main);
}
.tabs .tab-content {
    background-color: var(--color-main);
    padding: 70px 40px 40px;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}
.tabs .tab-content .box {
    background: #fff;
    padding: 30px;
}
.tabs .tab-content .box .btn {
    margin-top: 2em;
}
/*制御*/
.tabs .tab-content .tab-panel {
    display: none;
}
.tabs .tab-content .tab-panel.active {
    display: block;
}
@media only screen and (max-width: 820px) {
    .tabs .tab-list .tab-item {
        font-size: clamp(1rem, calc(0.789rem + 0.899vw), 1.25rem); /* min: 16px, max: 20px */
        padding: 15px 20px 10px;
    }
}
@media only screen and (max-width: 468px) {
    .tabs .tab-content {
        padding: 30px 20px 25px;
        margin-inline: -20px -20px;
    }
}

/*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);
    }
}

/* =========================================================================================
Btn / WP-block-button
=========================================================================================*/
.btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0;
}

.wp-block-buttons {
    display: flex;
    align-items: stretch;
}

/* --------------------------------------------------
Base button
-------------------------------------------------- */
.btn a,
.wp-block-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    color: #fff;
    font-size: clamp(1rem, calc(0.92rem + 0.449vw), 1.125rem);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    text-align: center;
    background: var(--color-main);
    border: 1px solid var(--color-main);
    border-radius: 100px;
    padding: 1em 1.75em;
    position: relative;
    transition: 0.3s;
}

.btn a {
    min-width: 150px;
}

.wp-block-button a {
    height: 100%;
    min-width: auto;
}

/* --------------------------------------------------
Icon (common)
-------------------------------------------------- */
.btn a::after,
.wp-block-button a::after {
    content: "";
    width: 1.25em;
    aspect-ratio: 1 / 1;
    background: #fff;
    order: -1; /* ← アイコンを左に */
    -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;
    -webkit-mask-image: url(images/common/arrow_mask.svg);
mask-image: url(images/common/arrow_mask.svg);
}

/* --------------------------------------------------
Hover
-------------------------------------------------- */
.btn a:hover,
.wp-block-button a:hover {
    color: var(--color-main);
    background-color: #fff;
    border-color: var(--color-main);
    text-decoration: none;
}

.btn a:hover::after,
.wp-block-button a:hover::after {
    background: var(--color-main);
}

/* =========================================================================================
Color variations
=========================================================================================*/
/* white */
.btn a.white {
    color: var(--color-base-font);
    background-color: #fff;
    border-color: #fff;
}

.btn a.white::after {
    background: var(--color-accent);
}

.btn a.white:hover {
    color: #fff;
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.btn a.white:hover::after {
    background: #fff;
}

/* orange */
.btn a.orange {
color: #fff;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn a.orange:hover {
    color: var(--color-accent);
    background-color: #fff;
}

.btn a.orange:hover::after {
    background: var(--color-accent);
}

/* =========================================================================================
Icons
=========================================================================================*/
/* contact */
.btn a.contact::after {
    -webkit-mask-image: url(images/common/icon_mail.svg);
    mask-image: url(images/common/icon_mail.svg);
}

/* architect */
.btn a.architect::after {
    -webkit-mask-image: none;
    mask-image: none;
    display: none;
}

/* works */
.btn a.works::after {
    -webkit-mask-image: url(images/common/icon_product.svg);
    mask-image: url(images/common/icon_product.svg);
}

/* product */
.btn a.product::after {
    -webkit-mask-image: url(images/common/icon_product.svg);
    mask-image: url(images/common/icon_product.svg);
}

/* voice */
.btn a.voice::after {
    -webkit-mask-image: url(images/common/icon_voice.svg);
    mask-image: url(images/common/icon_voice.svg);
}

/* map */
.btn a.map {
    font-size: clamp(0.625rem, calc(0.572rem + 0.225vw), 0.75rem);
    padding: 0.5em 1.0em 0.3em;
    min-width: 80px;
}

.btn a.map::after {
    width: 1em;
    -webkit-mask-image: url(images/common/icon_map.svg);
    mask-image: url(images/common/icon_map.svg);
}

@media only screen and (max-width: 1100px) {
.btn a.architect::after {
    -webkit-mask-image: url(images/common/icon_mail.svg);
    mask-image: url(images/common/icon_mail.svg);
    display: block;
}
}

@media only screen and (max-width: 468px) {
.btn a.map {
    font-size: clamp(0.625rem, calc(0.572rem + 0.225vw), 0.688rem);
    padding: 0.5em 1.0em 0.3em;
    min-width: 80px;
}
}

/* =========================================================================================
Size
=========================================================================================*/
.btn a.size-xl {
    font-size: clamp(1.25rem, calc(0.829rem + 1.798vw), 1.5rem); /* min: 20px, max: 24px */
    padding-block: 0.75em;
}

.btn a.size-l {
    font-size: clamp(1.25rem, calc(0.829rem + 1.798vw), 1.5rem); /* min: 20px, max: 24px */
    width: 100%;
    max-width: 500px;
    padding-block: 0.75em;
}

.btn a.size-s {
    font-size: clamp(0.875rem, calc(0.77rem + 0.449vw), 1rem);/* min: 14px, max: 16px */
    min-width: auto;
    padding-block: 0.75em;
}

/* =========================================================================================
PDF
=========================================================================================*/
.btn a[href$=".pdf"] {
    min-width: auto;
}

.btn a[href$=".pdf"]::after {
    width: 1.75em;
    -webkit-mask-image: url(images/common/icon_pdf.svg);
    mask-image: url(images/common/icon_pdf.svg);
}

.btn a[href$=".pdf"]:hover::after {
    background: var(--color-accent);
}

/* =========================================================================================
WP block spacing
=========================================================================================*/
.wp-block-buttons + .wp-block-buttons {
    margin-top: 0.5em;
}

/* =========================================================================================
Responsive
=========================================================================================*/
@media only screen and (max-width: 820px) {
    .btn a.large {
        min-width: 100%;
    }
}

@media only screen and (max-width: 468px) {
    .btn {
        justify-content: center !important;
    }
    .btn a {
        min-width: 80% !important;
    }
}

/* =========================================================================================
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);
}
.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 {
    height: auto;
    display: inline-block;
}
.post-list .cat a {
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;z
    min-width: 80px;
    background: var(--color-gray);
    padding: 0.375em 0.5em 0.25em;
}

/*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-link);
    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(images/common/arrow_mask.svg);
    mask-image: url(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-link);
    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 ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-bottom: 50px;
}
.post-list.row li {
    padding: 0;
}
/*
.post-list.row li:only-child {
    max-width: 570px;
}
*/
.post-list.row li article {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.post-list.row li article a {
}
.post-list.row .thumbnail {
    margin-bottom: 0.5em;
    position: relative;
}
.post-list.row .thumbnail a {
    overflow: hidden;
    opacity: 1 !important;
    display:block;
}
.post-list.row .thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 57 / 35;
    transition: 0.5s;
}
.post-list.row .thumbnail img:hover {
    scale: 1.15;
}
.post-list.row .excerpt {
    width: 100%;
}
.post-list.row .date {
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    line-height: 1;
    width: 100%;
}
.post-list.row .title {
    font-size: clamp(1rem, calc(1.02rem + 0.449vw), 1.1875rem);; /* min: 16px, max: 19px */
    font-weight: var(--weight-semibold);
    line-height: 1.5;
}
@media only screen and (max-width: 820px) {
    .post-list.row ul {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;
    }
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Archive-Page
=========================================================================================*/
.post-content {
    padding-block: 50px;
}
.post-content section {
    padding-top: 25px;
}
.post-content .post-list {
    border-top: none;
    border-bottom: none;
    padding: 0;
}
@media only screen and (max-width: 820px) {
    .post-content {
        padding-block: 25px;
    }
}
@media only screen and (max-width: 468px) {
    .post-content {
        padding-block: 20px;
    }
}

/*pagination -------------------------------------------------------*/
.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-block: 25px;
}
.pagination .page-numbers li {
    margin: 0;
}
.pagination .page-numbers li a,
.pagination .page-numbers li span,
.pagination .page-numbers li .current {
    color: var(--color-main);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    width: 40px;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid;
    padding: 0.25em 1em;
}
/* .pagination .page-numbers li .current {
    color: var(--color-base-font);
    background: #fff;
} */
.pagination .page-numbers li .prev,
.pagination .page-numbers li .next {
    color: rgba(0, 0, 0, 0);
    text-indent: -9999px;
    background: var(--color-main);
    padding: 0;
    position: relative;
}
.pagination .page-numbers li .prev::before,
.pagination .page-numbers li .prev::after,
.pagination .page-numbers li .next::before,
.pagination .page-numbers li .next::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 35%;
    width: 0.7em;
    height: 3px;
    border-radius: 9999px;
    background-color: #fff;
    transform-origin: calc(100% - 1px) 50%;
}
.pagination .page-numbers li .prev::before,
.pagination .page-numbers li .next::before {
    transform: rotate(45deg);
}
.pagination .page-numbers li .prev::after,
.pagination .page-numbers li .next::after {
    transform: rotate(-45deg);
}
.pagination .page-numbers li .prev::before,
.pagination .page-numbers li .prev::after {
    right: 56.5%;
    scale: -1;
}
.pagination .page-numbers li a:hover {
    text-decoration: none;
}

@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Single-Page
=========================================================================================*/
body.single .entry-header {
    position: relative;
}
body.single .entry-header .inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-block: 0 1em;
}
body.single .entry-header .date {
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    text-align: left;
    display: inline-block;
}
body.single .entry-header .title {
    color: var(--color-main);
    font-size: clamp(1.25rem, calc(0.829rem + 1.798vw), 1.75rem); /* min: 20px, max: 28px */
    line-height: 1.7;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5em;
}
body.single .entry-content section:nth-last-of-type(1) {
    padding-bottom: 100px;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*single-navi -----------------------------------------------------------------*/
body.single .single-navi {
    display: flex;
    justify-content: space-between;
}
body.single .single-navi .prev-navi a,
body.single .single-navi .next-navi a {
    color: var(--color-main);
    font-weight: var(--weight-medium);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
body.single .single-navi .prev-navi a {
    text-align: left;
    padding-left: 1.5em;
    margin-right: 1.25em;
}
body.single .single-navi .next-navi a {
    text-align: right;
    padding-right: 1.5em;
    margin-left: 1.25em;
}
body.single .single-navi .prev-navi a .arrow,
body.single .single-navi .next-navi a .arrow {
    display: inline-block;
    width: 36px;
    aspect-ratio: 1 / 1;
    background: var(--color-main);
    border-radius: 100%;
    position: relative;
    z-index: 1;
}
body.single .single-navi .prev-navi a .arrow::before,
body.single .single-navi .prev-navi a .arrow::after,
body.single .single-navi .next-navi a .arrow::before,
body.single .single-navi .next-navi a .arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 35%;
    width: 0.7em;
    height: 3px;
    border-radius: 9999px;
    background-color: #fff;
    transform-origin: calc(100% - 1px) 50%;
}
body.single .single-navi .prev-navi a .arrow::before,
body.single .single-navi .next-navi a .arrow::before {
    transform: rotate(45deg);
}
body.single .single-navi .prev-navi a .arrow::after,
body.single .single-navi .next-navi a .arrow::after {
    transform: rotate(-45deg);
}
body.single .single-navi .prev-navi a .arrow::before,
body.single .single-navi .prev-navi a .arrow::after {
    right: 56.5%;
    scale: -1;
}

@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
  Editer
=========================================================================================*/
/*見出し全体*/
* + .mid-slash,
* + .mid-circle,
* + .mid-number,
* + .mid-s {
    margin-top: 1.5em;
}
/*見出し slash ------------------------------------------------------------------*/
.mid-slash {
    font-size: clamp(2rem, calc(1.473rem + 2.247vw), 2.625rem); /* min: 32px, max: 42px */
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.5em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
}
.mid-slash::before {
    content: "";
    width: 2.0em;
    aspect-ratio: 100 / 40;
    background: no-repeat center / contain;
    background-image: url(images/common/mid_slash_white.svg);
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    z-index: 1;
}
/*真ん中が青*/
.mid-slash.blue::before {
    background-image: url(images/common/mid_slash_blue.svg);
}
/*真ん中が白*/
.mid-slash.white::before {
    background-image: url(images/common/mid_slash_white.svg);
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*見出し circle ----------------------------------------------------------------------*/
.mid-circle {
    font-size: clamp(1.25rem, calc(0.743rem + 2.697vw), 1.875rem); /* min: 20px, max: 30px */
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0 0.5em;
    padding-left: 1.6em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
}
.mid-circle .en {
    color: #fff;
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    padding-right: 1em;
    margin-top: 0.5em;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
}
.mid-circle::before {
    content: "";
    width: 1.25em;
    aspect-ratio: 1 / 1;
    background: no-repeat center / contain;
    background-image: url(images/common/mid_circle_white.svg);
    position: absolute;
    top: 0.2em;
    left: 0;
    z-index: 1;
}
/*左がオレンジ*/
.mid-circle.orange .en {
    color: var(--color-accent);
}
.mid-circle.orange::before {
    background-image: url(images/common/mid_circle_orange.svg);
}
/*左がオレンジ 右が白*/
.mid-circle.ow::before {
    background-image: url(images/common/mid_circle_ow.svg);
}
/*線*/
.mid-circle::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
    margin-top: 0.25em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*見出し number ----------------------------------------------------------------------*/
.mid-number {
    font-size: clamp(1.25rem, calc(0.934rem + 1.348vw), 1.5rem); /* min: 20px, max: 24px */
    font-weight: var(--weight-bold);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1em;
}
.mid-number span.count {
    color: var(--color-accent);
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(3.75rem, calc(2.697rem + 4.494vw), 5rem); /* min: 60px, max: 80px */
    text-align: center;
    line-height: 1;
    width: 100%;
    margin-bottom: 0.175em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}
/*見出し小 ------------------------------------------------------------------------*/
.mid-s {
    font-size: clamp(1.25rem, calc(1.039rem + 0.899vw), 1.5rem); /* min: 20px, max: 24px */
    font-weight: var(--weight-bold);
    line-height: 1.5;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.25em;
    margin-bottom: 0.5em;
}
.mid-s::before {
    content: "";
    width: 0.75em;
    aspect-ratio: 1 / 1;
    display: block;
    background-color: var(--color-base-font);
    margin-top: 0.15em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*heading ----------------------------------------------------------*/
* + .wp-block-heading {
    margin-top: 1.5em;
}
.wp-block-heading {
    font-weight: var(--weight-bold);
    line-height: 1.5;
    margin-bottom: 0.75em;
}
h1.wp-block-heading {
    font-size: clamp(2.5rem, calc(1.447rem + 4.494vw), 3.75rem); /* min: 40px, max: 60px */
}
h2.wp-block-heading {
    color: var(--color-main);
    font-size: clamp(1.25rem, calc(0.829rem + 1.798vw), 1.75rem); /* min: 20px, max: 28px */
    line-height: 1.7;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5em;
    margin-bottom: 1.25em;
}
h3.wp-block-heading {
    font-size: clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem); /* min: 18px, max: 22px */
}
h4.wp-block-heading {
    color: var(--color-main);
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.25em;
}
h4.wp-block-heading::before {
    content: "";
    display: inline-block;
    width: 1em;
    aspect-ratio: 1 / 1;
    background: var(--color-main);
    border-radius: 50%;
    opacity: 0.5;
    translate: 0 27.5%;
}
h5.wp-block-heading {
    font-size: clamp(0.875rem, calc(0.77rem + 0.449vw), 1rem); /* min: 14px, max: 16px */
}
h6.wp-block-heading {
    font-size: clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem); /* min: 12px, max: 14px */
}

/*p -----------------------------------------------------------------*/
.entry-content .inner > p + p {
    margin-top: 1em;
}

/*Hr ----------------------------------------------------------------*/
hr,
.wp-block-separator {
    width: 100%;
    max-width: 500px;
    height: 1px;
    border: none;
    background-color: var(--color-base-font);
    margin: 10vh auto;
}
.wp-block-separator.is-style-dots:before {
    font-size: 3em;
    letter-spacing: 1em;
    padding-left: 1em;
}
@media only screen and (max-width: 820px) {
    hr,
    .wp-block-separator {
        width: 50%;
    }
}

/*Table --------------------------------------------------------------*/
.wp-block-table table,
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.wp-element-caption,
.entry-content .caption,
.wp-block-flexible-table-block-table figcaption {
    color: var(--color-base-font);
    opacity: 0.7;
    padding: 0.5em 0;
}
.wp-block-table thead th {
    border-bottom: none;
}
.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
    text-align: left;
    vertical-align: top;
    border: none;
    position: relative;
}
.wp-block-table th,
.entry-content th {
    padding-block: 0.75em;
    border-bottom: 1px solid var(--color-gray);
}
.wp-block-table td,
.entry-content td {
    padding-block: 0.75em;
    border-bottom: 1px solid var(--color-gray);
}
.wp-block-table th,
.wp-block-table td strong,
.entry-content th {
    color: var(--color-base-font);
}
.wp-block-table.is-style-stripes .wp-element-caption {
    border-top: 2px solid;
}
/* scroll-table*/
.entry-content .scroll-table {
    width: 100%;
    overflow: auto;
}
.entry-content .scroll-table table {
    width: auto;
    min-width: 800px;
}

/*List ------------------------------------------------------------------*/
/* ul.list*/
ul.wp-block-list,
ul.list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin: 0.5em 0 0.5em 1.375em;
}
ul.wp-block-list li,
ul.list li {
    line-height: 1.5;
    position: relative;
}
ul.wp-block-list li::before,
ul.list li::before {
    position: absolute;
    content: "";
    background: var(--color-base-font);
    width: 4px;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    top: 0.75em;
    left: -0.9em;
}
ul.list.red li::before {
    background: red;
}
ul.list.green li::before {
    background: green;
}

/* ol.list*/
ol.wp-block-list,
ol.list {
    /*list-style: none;
	counter-reset: number;*/
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin: 0.5em 0 0.5em 1.5em;
}
ol.wp-block-list li,
ol.list li {
    line-height: 1.5;
    position: relative;
}
ol.list.row {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.75em 2.25em;
}
/* ol.wp-block-list li::before,
ol.list li::before {
	color: #fff;
	font-size: 0.9em;
	text-align: center;
	line-height: 1.25;
	counter-increment: number;
	content: counter(number);
	width: 1.375em;
	aspect-ratio: 1 / 1;
	background: var(--color-main);
	border-radius: 50%;
	position: absolute;
	top: 0.2em;
	left: 0;
} */

/*List - note*/
ul.note {
    list-style: none;
}
ul.note.center {
    width: fit-content;
    margin: auto;
}
ul.note li {
    padding-left: 0.25em;
    position: relative;
    z-index: 1;
}
ul.note li:before {
    content: "※";
    background: none !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/*List - check*/
ul.list.check {
    gap: 0.5em;
}
ul.list.check li:before {
    content: "";
    display: block;
    width: 0.8em;
    height: 0.5em;
    background: none;
    border-left: 3px solid var(--color-main);
    border-bottom: 3px solid var(--color-main);
    border-radius: 0;
    position: absolute;
    top: 0.45em;
    left: -1.25em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
ul.list.check.red li::before {
    border-color: red;
}
ul.list.check.green li::before {
    border-color: green;
}

/*grid -----------------------------------------------------------------------*/
.is-layout-grid {
    column-gap: 5%;
    row-gap: clamp(1.25rem, calc(0.344rem + 3.867vw), 3.438rem);
}
@media only screen and (max-width: 820px) {
    .is-layout-grid {
        column-gap: 20px;
    }
}
@media only screen and (max-width: 468px) {
    .is-layout-grid {
        column-gap: 10px;
    }
}

/*wp-block-file -----------------------------------------------------------------*/
.wp-block-file {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5em;
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
    padding-block: 1em;
}
.wp-block-file:has(object) {
    display: block;
}
.wp-block-file + .wp-block-file {
    border-top: none;
}
.wp-block-file:not(.wp-element-button) {
    font-size: 1em;
}
.wp-block-file * + .wp-block-file__button {
    font-size: 0.9em;
    background: var(--color-main) url(images/common/icon_download.svg) no-repeat;
    background-position: center right 0.75em;
    background-size: auto 50%;
    padding: 0.25em 2.25em 0.25em 1em;
}
.wp-block-file a:hover {
    text-decoration: none;
}

/*blockquote --------------------------------------------------------------------------*/
blockquote {
    position: relative;
    padding: 3em 2em;
    background: #f5f5f5;
}
blockquote cite {
    display: block;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
    padding-right: 20px;
}

/*wp-block-media-text -------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .wp-block-media-text .wp-block-media-text__content {
        margin: 0;
        padding: 1em 0;
    }
}

/*image ----------------------------------------------------------------------------------*/
.wp-block-image {
    margin-bottom: 1em;
}

/* =========================================================================================
FORM
=========================================================================================*/
.grecaptcha-badge {
    /*visibility: hidden;*/
} /*reCAPTCHAバッジ（ロゴマーク）を消す ※設定がうまくいったことを確認してからこのCSSを有効化すること*/

.entry-content form {
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
.entry-content form ::placeholder {
    color: #c7c7c7;
}
.entry-content form input[type="text"],
.entry-content form input[type="tel"],
.entry-content form input[type="email"],
.entry-content form textarea,
.entry-content form select {
    width: 100%;
    background: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 5px;
    padding: 0.75em 1em;
    transition: 0.3s;
}
.entry-content form input:focus,
.entry-content form textarea:focus {
    border: 1px solid #c7c7c7;
}
.entry-content form .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.entry-content form .wpcf7-radio .wpcf7-list-item {
    margin-left: 0.1em;
}
.entry-content form select {
    width: fit-content;
    min-width: 300px;
    padding-right: 4em;
    background: #fff url(images/common/icon_dropdown.svg) no-repeat;
    background-position: right 1em center;
    background-size: 1em;
}
.entry-content form .wpcf7-form-control-wrap {
    width: 100%;
}
.entry-content form input[type="submit"],
.entry-content form input[type="button"] {
    color: #fff;
    font-weight: var(--weight-bold);
    background-color: var(--color-base-font);
    padding: 0.75em 1.5em;
    line-height: 1.4;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    border-radius: 100px;
    min-width: 200px;
    border: none;
    transition: 0.3s;
}
.entry-content form input[type="submit"] {
    background-color: var(--color-accent);
}
.entry-content form input[type="button"] {
    background-color: #555;
}
.entry-content form input[type="submit"]:hover,
.entry-content form input[type="button"]:hover {
    opacity: 0.8;
}
.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 {
    background: var(--color-light-blue);
    padding-block: 40px;
    padding-inline: 40px;
    margin-block: 60px 20px;
}
section.entry_form {
}
section.entry_form .contact-bg {
    margin-block: 0 20px 60px !important;
    margin-top: 0;
}
.entry-content .contact-bg > h2 {
    color: #fff;
    font-size: clamp(1.125rem, calc(0.809rem + 1.348vw), 1.5rem); /* min: 18px, max: 24px */
    text-align: center;
    line-height: 1.4;
    background: var(--color-main);
    padding: 0.375em 1em;
    margin-bottom: 2em;
}
.entry-content .contact-bg .privacy {
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    padding: 20px 20px 30px;
}
.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: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    gap: 1em;
    padding: 20px;
    margin: 0 auto 2em;
}
.entry-content form dt {
    font-weight: var(--weight-bold);
    text-align: left;
    line-height: 1.6;
}
.entry-content form dt label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
}
.entry-content form dt span {
    color: #fff;
    font-size: small;
    font-weight: var(--weight-semibold);
    display: inline-block;
    background: var(--color-main);
    padding: 0.1em 0.5em;
    margin-left: 0.5em;
}
.entry-content form dd p {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em 1.5em;
}
.entry-content form dd p > br {
    display: none;
}
.entry-content form dd.row p {
    display: grid;
    grid-template-columns: auto 1fr;
}
.entry-content form dd.row p .post-add {
    max-width: 285px;
}
.entry-content .post-age {
    max-width: 200px;
}
.entry-content .age>p {
   display:flex;
   flex-direction: row;
}
.entry-content .age>p>span {
   display:inline-block;
   width: auto;
}
.entry-content form small {
    display: block;
    line-height: 1.7;
}

@media only screen and (max-width: 820px) {
    .entry-content .contact-bg {
        padding: 0 0 50px;
    }
    .entry-content form dl {
        width: calc(100% - 40px);
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-inline: auto;
    }
    .entry-content form dt {
        text-align: left;
        width: 100%;
    }
    .entry-content form dt label {
        justify-content: left;
    }
    .entry-content form dt span {
        font-size: 0.8rem;
        padding: 0.15em 0.5em 0.2em;
        margin-left: 0.75em;
    }
    .entry-content form dd {
        width: 100%;
        margin-bottom: 1em;
    }
}
@media only screen and (max-width: 468px) {
    .entry-content .contact-bg {
        padding-top: 0;
    }
}

/*入力確認画面 -------------------------------------------------------------------*/
.entry-content .confirm-bg {
    width: 100%;
    background: var(--color-light-blue);
    padding-block: 40px;
    padding-inline: 40px;
}
.entry-content .confirm-bg > h2 {
    color: #fff;
    font-size: clamp(1.125rem, calc(0.809rem + 1.348vw), 1.5rem); /* min: 18px, max: 24px */
    text-align: center;
    line-height: 1.4;
    background: var(--color-main);
    padding: 0.375em 1em;
    margin-bottom: 2em;
}
.entry-content form .confirm-bg dl {
    width: 100%;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
}
.entry-content form .confirm-bg dt,
.entry-content form .confirm-bg dd {
    font-weight: var(--weight-normal);
    text-align: left;
    line-height: 1.6;
    padding: 1em;
    margin: 0;
}
.entry-content form .confirm-bg dt {
    font-weight: var(--weight-bold);
}
.entry-content form .confirm-bg dd p {
    display: block;
    text-align: left;
}

@media only screen and (max-width: 820px) {
    .entry-content .confirm-bg {
        padding: 0 0 50px;
    }
    .entry-content form .confirm-bg dl {
        width: calc(100% - 40px);
        display: flex;
        flex-wrap: wrap;
        margin-inline: auto;
    }
    .entry-content form .confirm-bg dt {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 468px) {
}

/*送信完了画面 -------------------------------------------------------------------*/
body.contact-completion .entry-content .inner {
    max-width: var(--contents-width-small);
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Parts (MADOGUCHI)
=========================================================================================*/
.parts-madoguchi {
    border: 4px solid rgba(5, 98, 171, 0.3);
    padding: 20px;
    margin-top: 50px;
}
.parts-madoguchi .inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 2.5em;
}
.parts-madoguchi .inner strong {
    color: var(--color-main);
    font-size: clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem); /* min: 18px, max: 22px */
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.parts-madoguchi .inner p {
    font-size: clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* min: 18px, max: 20px */
    font-weight: var(--weight-medium);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Parts (TEL)
=========================================================================================*/
.parts-tel, .parts-tel-fax {
    border: 4px solid rgba(5, 98, 171, 0.3);
    padding: 20px;
    margin-top: 50px;
}
.parts-tel .inner {
    color: var(--color-main);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75em 1.5em;
}
.parts-tel .inner strong {
    font-size: clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem); /* min: 18px, max: 22px */
    letter-spacing: 0.05em;
}
.parts-tel .tel-number {
    font-weight: var(--weight-bold);
    line-height: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.parts-tel .tel-number::before {
    content: "";
    width: 72px;
    display: inline-block;
    aspect-ratio: 72 / 40;
    background: url(images/common/icon_freecall_blue.svg) no-repeat center / contain;
    translate: 0 5%;
}
.parts-tel .tel-number b {
    font-size: clamp(2.5rem, calc(0.342rem + 4.211vw), 3.5rem); /* min: 40px, max: 56px */
    display: inline-block;
    line-height: 1;
}
.parts-tel .tel-number b a {
    color: var(--color-main);
}

.parts-tel .tel-number {
    font-weight: var(--weight-bold);
    line-height: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.parts-tel-fax .inner {
    color: var(--color-main);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4em 1.5em;
}
.parts-tel-fax .inner strong {
    background: var(--color-light-blue);
    color: #000;
    padding: 0.4em 2.0em 0.2em;
    border-radius: 30px;-webkit-border-radius: 30px;-moz-border-radius: 30px;
    
}
.parts-tel-fax .tel-number  b {
    font-size: clamp(1.25rem, calc(0.932rem + 1.579vw), 1.875rem); /* min: 20px, max: 30px */
    display: inline-block;
    line-height: 1;
    padding: 0.5em 0;
}
.parts-tel-fax .tel-number  b+b {
   margin-left: 1.0em;
}
.parts-tel-fax .tel-number  b a {
    color: var(--color-main);
}


@media only screen and (max-width: 820px) {
.parts-tel-fax .inner {
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
.parts-tel-fax .inner strong {
  margin: auto auto 0.8em;;
  text-align: center;
    
}
.parts-tel-fax .tel-number {
display: block;
    text-align: center;
}

.parts-tel-fax .tel-number  b {
    padding: 0 0;
     display: block;
}
.parts-tel-fax .tel-number  b+b {
   margin-left: 0;
   margin-top: 0.5em;
}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Parts (CONTACT)
=========================================================================================*/
.parts-contact {
    background: url(images/parts/parts_contact_bg.webp) no-repeat center / cover;
    padding-block: 100px;
    margin: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.parts-contact::before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-main);
    mix-blend-mode: multiply;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
}
.parts-contact .inner {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.parts-contact .inner strong {
    font-size: clamp(1.125rem, calc(0.868rem + 2.697vw), 1.75rem); /* min: 18px, max: 28px */
    letter-spacing: 0.05em;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}
.parts-contact .inner .box {
    width: 100%;
    border: 4px solid #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5em 30px;
    padding: 40px 30px;
    margin-top: 6.5vh;
}
.parts-contact .inner .box h3 {
    font-size: clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem); /* min: 18px, max: 22px */
}
.parts-contact .inner .box .tel {
    font-size: clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* min: 18px, max: 20px */
    font-weight: var(--weight-bold);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25em 0;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}
.parts-contact .inner .box .tel a {
    color: #fff;
    font-size: clamp(2.125rem, calc(0.966rem + 4.944vw), 3.5rem); /* min: 34px, max: 56px */
    line-height: 1;
    white-space: nowrap;
    translate: 0 -5%;
}
.parts-contact .inner .box .tel a::before {
    content: "";
    width: 1.5em;
    max-width: 72px;
    aspect-ratio: 72 / 41;
    display: inline-block;
    background: url(images/common/icon_freecall.svg) no-repeat center / contain;
    margin-right: 0.1em;
}
.parts-contact .inner .download {
    width: 100%;
    background: var(--color-accent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 15px 20px;
    padding: 40px 120px 40px 50px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.parts-contact .inner .download::before {
    content: "";
    width: 40%;
    max-width: 322px;
    aspect-ratio: 322 / 360;
    background: url(images/parts_contact_download_bg.webp) no-repeat center / contain;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -35%;
    z-index: 1;
}
.parts-contact .inner .download > * {
    position: relative;
    z-index: 5;
}
.parts-contact .inner .download b {
    color: var(--color-base-font);
    font-size: clamp(1.25rem, calc(0.829rem + 1.798vw), 1.75rem); /* min: 20px, max: 28px */
    line-height: 1.7;
    display: flex;
    flex-wrap: wrap;
}
.parts-contact .inner .download b span.white {
    color: #fff;
}
@media only screen and (max-width: 820px) {
    .parts-contact .inner .box {
        padding: 30px 20px 20px;
    }
    .parts-contact .inner .box .btn {
        translate: 0 -15%;
    }
    .parts-contact .inner .download {
        padding: 30px 100px 30px 30px;
    }
}
@media only screen and (max-width: 468px) {
    .parts-contact .inner .download {
        padding: 25px 100px 25px 25px;
    }
    .parts-contact .inner .download::before {
        min-width: 200px;
        translate: 25% -55%;
        transform: rotate(15deg);
    }
}

/* =========================================================================================
Parts (LIGHTBOX)
=========================================================================================*/
/* body スクロール制御 */
body.is-lightbox-open{overflow:hidden;}

/* lightbox 基本 */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:9999;}
.lightbox.is-active{opacity:1;pointer-events:auto;}

.lightbox-inner{transform:scale(.9);transition:transform .4s ease;}
.lightbox.is-active .lightbox-inner{transform:scale(1);}

.lightbox-inner img{max-width:80vw;max-height:80vh;opacity:0;transition:opacity .4s ease;}
.lightbox-inner img.is-show{opacity:1;}

/* buttons */
.lightbox-close{position:absolute;top:20px;right:20px;font-size:32px;color:#fff;background:none;border:0;cursor:pointer;}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);font-size:48px;color:#fff;background:none;border:0;cursor:pointer;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}

/* =========================================================================================
Parts (VOICE)
=========================================================================================*/
.single-voice div+div {
argin-top: 3.0em;
}
.single-voice h3.wp-block-heading {
display:flex;
}
.single-voice h3.wp-block-heading b {color: var(--color-main);
position: relative;
top: -0.2em;
font-size: 1.5em;
margin-right: 0.4em;
color: var(--color-accent);
white-space: nowrap;
 font-family: "Public Sans", sans-serif;
    font-weight: 600;
}
.single-voice .info-area {
    font-weight: var(--weight-bold);
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: end;
}
.single-voice .info-area .owner{
    color: #fff;
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    line-height: 1.4;
    padding: 0.25em 0.75em;
}
.single-voice .info-area .owner {
    background: var(--color-main);
}
.single-voice .info-area .cat {
    color: #fff;
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    line-height: 1.4;
    padding: 0.25em 0.75em;
    background: #000;
}
.single-voice p.catch{
color: var(--color-main);
    margin-top: 0.7em;
    font-weight: 600;
    font-size: 1.2em;
}
.single-voice p+p{
    margin-top: 0.9em;
}