:root {
    --service-black: #201815;
    --service-border-black: #1e1e1e;
    --service-bgc-gray: #f0f0f0;
    --service-blue: #004ea2;
    --service-blue-rgb: 0, 78, 162;
    --service-orange: #f6ab00;
    --service-orange-rgb: 246, 171, 0;
    --service-red: #e60012;
    --service-light-green: #abcd03;
}

figure { margin-bottom: 0; }

/*株式会社 大川*/
.p-okawa .c-keyvisual-default {
    position: relative;
    z-index: 1;
}
.p-okawa .service-mv::after{
    background-image: url("../../../assets/service/images/okawa/mv-okawa.webp");
    aspect-ratio: 3847 / 2643;
    background-position: left bottom -50px;
    left: 41.5vw;
}
.p-okawa #mv .inner-container {
    padding-block: 95px 70px;
}
.p-okawa .service-header .logo {
    width: 317px;
    height: 98px;
    margin-bottom: 50px;
}
.p-okawa .service-header h4 {
    color: var(--service-blue);
    margin-bottom: 10px;
}
.p-okawa .service-header h4 span {
    font-size: 2.4rem;
    letter-spacing: 0.09em;
}
.p-okawa .service--txt-base {
    word-break: break-all;/*safari*/
    word-break: auto-phrase;
}
.p-okawa #company .service-grid {
    grid-template-columns: 0.89fr 1fr;
    gap: 0;
    padding-top: 85px;
}
.p-okawa .company-category {
    background-color: var(--service-blue);
    margin-bottom: 20px;
}
.p-okawa #company h3 {
    line-height: 1.6;
}
.p-okawa #company .btn a {
    color: var(--service-blue);
    border-color: var(--service-blue);
}
.p-okawa #company .btn a::after {
    color: var(--service-skyblue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.56' height='14.56' viewBox='0 0 14.56 14.56'%3E%3Cg%3E%3Crect x='0.5' y='3.38' width='10.68' height='10.68' fill='none' stroke='%23004ea2' stroke-miterlimit='10'/%3E%3Cpolyline points='3.38 0.5 14.06 0.5 14.06 11.18' fill='none' stroke='%23004ea2' stroke-miterlimit='10'/%3E%3C/g%3E%3C/svg%3E");
}
.p-okawa .section--wide-image {
   max-height: 374px;
   height: 100%;
}
.p-okawa .section--wide-image > img {
    aspect-ratio: 1480 / 748;
}

/* info 大川さんのみデザインのため、service.cssとの連携ほぼなし*/

.header-tag { 
    display: block;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;/*固定*/
    font-weight: bold;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    border-radius: 50rem;
}
.content-card {
    container-type: inline-size;
}
.content-card header .header-tag.customer {
    color: var(--service-orange);
    letter-spacing: 0.01em;
}
.header-title {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.7;
}
#describe-the-business .inner-container:has(.header-total) {
    padding-bottom: 0;
}
#describe-the-business header.header-total {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    margin-bottom: 35px;
}

#describe-the-business header.header-total h3 {
    display: flex;
    align-items: center;
    gap: 25px;
}
#describe-the-business header.header-total h3 > .header-tag {
    /* width: 200px; */
    height: 40px;
    line-height: 40px;
    background-color: var(--service-blue);
    color: #fff;
    font-weight: 700;
    padding-inline: 20px;
}

.nav-category {
    display: flex;
    justify-content: end;
    height: 75%;
    margin-top: 10px;
}
.nav-category li {
    font-size: 13px;
    letter-spacing: 0.1em;
    font-family: "Nunito Sans", sans-serif;
    text-transform: uppercase;
    border-inline: 0.52px solid var(--service-black);
}
.nav-category li:last-child {
    border-left: 0;
}
.nav-category li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 15px;
    font-weight: 800;
}
.nav-category li:first-child a {
    color: var(--service-blue);
}
.nav-category li:last-child a {
    color: var(--service-orange);
}

.nav-category li a span {
    margin-right: 5px;
}

.nav-list {
    grid-column: span 2;
    margin-top: 20px;
    border-top: 0.56px solid var(--service-black);
}
.nav-list ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.nav-list ul li {
    font-size: 17px;
    letter-spacing: 0.1em;
}
.nav-list ul li a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 20px 30px;
    position: relative;
    font-weight: 600;
}
.nav-list ul li a:first-child {
    padding-left: 20px;
}
.nav-list ul li a::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url(../../../assets/service/images/okawa/icon-circle-arrow-fill-primary.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
/* //ここまで　事業についてヘッダー */

/*コンテンツの背景*/
.content-bg {
    position: relative;
    z-index: 0;
    margin-bottom: 100px;
}
.content-bg::after {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 60px);
    position: absolute;
    top: 60px;
    right: 0;
    background-color: rgba(var(--service-blue-rgb), .1);
    z-index: -1;
}
.content-bg .inner-container {
    padding: 0 0 80px 0;
}

/* ここからがarticleのヘッダー */
.content-card > header { /*ベースカラーはbusiness*/
    display: grid;
    grid-template-columns: auto 1fr;
    color: #fff;
    background-color: var(--service-blue);
    padding: 25px 40px 23px 40px;
    margin-bottom: 60px;
}
.content-card header .header-tag {
    display: block;
    width: fit-content;
    height: 20px;
    font-size: 11.9px;
    letter-spacing: 0.1em;
    line-height: 20px;
    text-align: center;
    color: var(--service-blue);
    background-color: #fff;
    padding-inline: 10px;
    padding-top: 1px;
    margin-bottom: 10px;
}
.content-card header h3 {
    padding-right: 35px;
}
.content-card header .header-title {
    font-size: 3.2rem;
    letter-spacing: 0.06em;
    line-height: 1;
}
.content-card header p {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.7;
    padding-left: 25px;
    border-left: 2.83px solid #fff;
}
/* //ここまでがarticeのheader */

.content-card section h4 {
    color: var(--service-blue);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding-bottom: 18px;
    border-bottom: 3px solid var(--service-blue);
    margin-bottom: 15px;
}

.content-card section p {
    font-size: 1.6rem;
    letter-spacing: 0.04em;/* カンプとの誤差調整のため */
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 45px;
    /* word-break: break-all; 読みにくかったのでなし*/
    /* word-break: auto-phrase; */
}

.section-2column {
    display: grid;
    grid-template-columns: minmax(350px,460px) minmax(350px,460px);
    column-gap: 40px;
}

/* 個別のカード */
.company-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    justify-content: start;
    gap: 0;
    padding-top: 37px;
    padding-inline: 40px;
    background-color: #fff;
    position: relative;
}
.company-card h5 {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
    border-left: 20px solid #787dae;
    padding-left: 20px;
    margin-left: -40px;
    margin-bottom: 20px;
}

.company-card h5 .sub-title {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 10px;
}

.company-card h5 + p {
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin-bottom: 25px;
}
.company-card .logo {
    height: 47px;
    text-align: right;
    margin-left: auto;
    margin-bottom: 33px;
}
.company-card figure {
    margin-inline: -40px;
    margin-bottom: 0;
}
.company-card figure img {
    aspect-ratio: 921 / 601;
    object-fit: contain;
}

/* 個別設定 - 商品開発事業 */
#fb-product-dev #ambiente .logo {
    width: 217.8px;
    height: 31.7px;
}
#fb-product-dev #estilo .logo {
    width: 190px;
    height: 47px;
}
#fb-product-dev #estilo h5 {
    border-color: #82b5c4;
}

/* 個別設定 - 開発事業*/
#fb-dev .section-2column {
    margin-bottom: 25px;
}
#fb-dev .section-2column p {
    margin-bottom: 0;
}

#fb-dev dl {
    display: grid;
    grid-template-columns: 16.6% auto;
    align-items: center;
    height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 20rem;
    background-color: #5185c5;
    margin-bottom: 25px;
}
#fb-dev dl > dt {
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    border-right: 1px solid #fff;
}
#fb-dev dl > dd {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding-left: 25px;
    position: relative;
    top: -1px;
}
#fb-dev dl > dd span {
    padding-inline: 6px;
}

#raise {
    display: grid;
    grid-template-columns: 1fr 320px 219px;
    grid-template-areas: 
    "company-title company-image--1 company-image--2"
    "company-comment company-image--1 company-image--2"
    "company-logo company-image--1 company-image--2";
    column-gap: 18px;
    margin-bottom: 40px;
}

#raise h5 {
    grid-area: company-title;
    text-transform: uppercase;
    height: 50px;
    padding-block: 0;
    margin-bottom: 37px;
    border-color: var(--service-black);
}
#raise h5 .sub-title {
    font-size: 1.6rem;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 0;
}

#raise h5 + p {
    grid-area: company-comment;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-bottom: 50px;
    word-break: auto-phrase;
    font-weight: 600;
}
#raise .logo {
    grid-area: company-logo;
    width: 186px;
    height: 55.6px;
    margin-right: auto;
    margin-left: 0;
}
#raise figure {
    max-height: 280px;
    margin:0;
}
#raise figure:first-of-type {
    grid-area: company-image--1;
    grid-row: span 3;
    max-width: 320px;
    width: 100%;
}
#raise figure:first-of-type img {
    aspect-ratio: 399 / 299;
}
#raise figure:last-of-type {
    grid-area: company-image--2;
    grid-row: span 3;
    max-width: 219.9px;
    width: 100%;
    height: 100%;
}
#raise figure:last-of-type img {
    aspect-ratio: 220 / 240;
    width: 100%;
}
#raise figure > figcaption {
    color: #fff;
    text-align: center;
    font-size: 1.57rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    background-color: var(--service-black);
    padding-block: 1.3rem;
}

#wao {
    display: grid;
    grid-template-columns: 368px 1fr;
    column-gap: 40px;
    grid-template-areas: 
    "wao-image wao-txt"
    "wao-image wao-title"
    "wao-image wao-btn";
    background-color: #fff;
    padding-right: 40px;
}
#wao figure {
    grid-area: wao-image;
    max-width: 368px;
    width: 100%;
    min-height: 200px;
    height: 100%;
}
#wao figure img {
    height: 100%;
    object-fit: cover;
}
#wao p {
    grid-area: wao-txt;
    font-size: 1.4rem;
    font-weight: bold;
    align-self: end;
    padding-inline: 3%;
    word-break: break-all;
    word-break: auto-phrase;
    position: relative;
}
#wao p span {
    position: relative;
}
#wao p span::before, #wao p span::after {
    content: '';
    display: inline-block;
    /* width: 18px; */
    /* height: 19px; */
    width: 30px;
    height: 19px;
    border-bottom: 1px solid var(--service-black);
    position: absolute;
}
#wao p span::before {
    transform: rotate(45deg);
    left: -25px;
}
#wao p span::after {
    transform: rotate(-45deg);
    /* right: 0; */
}
#wao h5 {
    grid-area: wao-title;
    color: var(--service-blue);
    font-size: 2.18rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.4;
    align-self: center;
}
#wao .section-2column {
    grid-area: wao-btn;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.business-btn a { /*建材事業でももう一度使用*/
    display: block;
    width: 240px;
    height: 40px;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    line-height: 40px;
    background-color: var(--service-red);
    text-align: center;
}
.business-btn:last-of-type a {
    background-color: var(--service-light-green);
}
.business-btn a span::after {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../../../assets/service/images/okawa/icon-circle-arrow-fill-red.svg) no-repeat;
    background-size: contain;
    background-position: center;
    margin-left: 10px;
    position: relative;
    top: 2px;
}
.business-btn:last-of-type a span::after {
    background: url(../../../assets/service/images/okawa/icon-circle-arrow-fill-green.svg) no-repeat;
}

/* 個別設定 建材事業 #fb-bldg-materials */
#fb-bldg-materials .section-2column {
    grid-template-columns: 420px 1fr;
}
#fb-bldg-materials .section-2column > section {
    order: 1;
}
#fb-bldg-materials .section-2column > figure {
    margin-bottom: 0;
    order: 0;
}
#fb-bldg-materials .section-2column > figure img {
    height: 100%;
    object-fit: cover;
}
#fb-bldg-materials section h4 + p {
    margin-bottom: 30px;
}
#fb-bldg-materials #maruwa {
    grid-template-columns: minmax(auto,247px) 1fr;
    grid-template-areas: 
    "maruwa-title maruwa-logo"
    "maruwa-txt maruwa-logo"
    "maruwa-btn maruwa-logo";
    padding: 30px;
    column-gap: 30px;
    position: relative;
}
#fb-bldg-materials #maruwa::after {
    content: '';
    display: block;
    width: 1px;
    height: calc(100% - 60px);
    background-color: var(--service-border-black);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 185px;
    margin: auto;
}
#fb-bldg-materials #maruwa h5 {
    grid-area: maruwa-title;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--service-orange);
}
#fb-bldg-materials #maruwa h5 + p {
    grid-area: maruwa-txt;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}
#fb-bldg-materials #maruwa .business-btn {
    grid-area: maruwa-btn;
}
#fb-bldg-materials #maruwa .business-btn a{
    width: 247px;
    background-color: var(--service-orange);
    font-weight: 600;
}
#fb-bldg-materials #maruwa .business-btn a > span::after {
    background-image: url(../../../assets/service/images/okawa/icon-circle-arrow-fill-orange.svg);
}
#fb-bldg-materials #maruwa .logo {
    grid-area: maruwa-logo;
    width: 123.5px;
    height: 118px;
    margin-bottom: 0;
    align-self: center;
    justify-content: center;
}

/* 都市再生事業 #fc-reraise */

#fc-reraise.content-bg::after {
    background-color: rgba(var(--service-orange-rgb), .1);
}
#fc-reraise .content-card > header {
    background-color: var(--service-orange);
    word-break: break-all;
    word-break: auto-phrase;
}
#fc-reraise .content-card > header h3 .header-title span {
    font-size: 1.86rem;
    font-weight: 500;
}
:is(#fc-reraise #renovation, #fc-reraise #reform) header {
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    background-color: transparent;
    color: var(--service-black);
    padding-block: 0;
    margin-bottom: 0;
    margin-bottom: 45px;
}
:is(#fc-reraise #renovation, #fc-reraise #reform) header > p {
    margin-bottom: 0;
}
#fc-reraise #renovation header {
    padding-right: 40px;
}
#fc-reraise header h4 {
    color: var(--service-black);
    font-size: 2.9rem;
    letter-spacing: 0.06em;
    border-bottom: 0;
    border-left: 8px solid var(--service-orange);
    padding-left: 20px;
    padding-bottom: 0;
    margin-bottom: 27px;
}
#fc-reraise section header p {
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    border-left: 0;
}
#fc-reraise section header p.logo {
    width: 296px;
    height: 70.3px;
    padding: 0;
    margin-left: auto;
    align-self: center;
}
#fc-reraise #renovation header p {
    margin-bottom: 0;
}

#fc-reraise .customer-card {
    grid-template-columns: 1fr 322.5px;
    gap: 35px;
    align-items: center;
    background-color: #fff;
    padding: 40px;
    padding-left: 35px;
}
#fc-reraise .customer-card > div h5 {
    color: var(--service-orange);
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    line-height: 1.5;
    font-family:  "Nunito Sans", "Noto Sans JP", sans-serif !important;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--service-orange);
    margin-bottom: 15px;
    word-break: break-all;
    word-break: auto-phrase;
}
#fc-reraise .customer-card div > h5 + p {
    font-size: 1.4rem;
    margin-bottom: 0;
}

/* リノベーション事業 */
#fc-reraise #renovation {
    margin-bottom: 60px;
}
#fc-reraise #renovation .renov-card > div {
    align-self: start;
}
#fc-reraise #renovation .customer-image {
    background-color: var(--service-orange);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#fc-reraise #renovation .customer-image header {
    height: 40px;
    color: #fff;
    padding-block: 15px 10px;
    padding-inline: 18px 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}
#fc-reraise #renovation .customer-image header span:first-child {
    height: 31px;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    border: 1px solid #fff;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding-inline: 10px;
    padding-bottom: 5px;
    position: relative;
    top: -15px;
}
#fc-reraise #renovation .customer-image header span:last-child {
    font-size: 1.5rem;
    letter-spacing: 1rem;
    line-height: 1;
}
#fc-reraise #renovation .customer-image figure {
    margin-bottom: 0;
}
#fc-reraise #renovation .customer-image figure > img {
    width: 323px;
    height: 158px;
}
#fc-reraise #renovation .customer-image figure > figcaption {
    display: flex;
    align-items: center;
    height: 40px;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    line-height: 1;
    padding-inline: 18px;
    padding-block: 10px;
}
#reform header > .section-2column {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
#reform header h4 {
    margin-bottom: 0;
}
#reform header h4 + p {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    align-items: center;
    background-color: var(--service-orange);
    padding-left: 18px;
    padding-right: 18px;
    padding-block: 10px 8px;
    margin-bottom: 0;
    border-radius: 50rem;
}
#fc-reraise .reform-card div > h5 + p {
    margin-bottom: 25px;
    word-break: break-all;/* safari */
    word-break: auto-phrase;
}
#fc-reraise .reform-card figure {
    margin-bottom: 0;
}
.reform-card .customer-image {
    background-color: #fdeecc;
    margin-bottom: 0;
}
.reform-card .customer-image img {
    width: 322px;
    height: 213px;
}
.reform-card .customer-image > figcaption {
    padding: 20px 15px; /* 見た目の調整 */
}
.reform-card .customer-image > figcaption h6 {
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 16px;
    position: relative;
}
.reform-card .customer-image > figcaption h6::after {
    content: '';
    display: block;
    width: 122.7px;
    height: 3px;
    background-color: var(--service-orange);
    margin: 0 auto;
    position: relative;
    top: 16px;
}
.reform-card .customer-image > figcaption p {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 0;
    word-break: break-all;
    word-break: auto-phrase;
}

/* 戸建て住宅 */
#fc-detached.content-bg::after {
    background-color: var(--service-bgc-gray);
}
#fc-detached .content-card > header {
    grid-template-columns: max-content 142.4px 1fr;
    align-items: center;
    gap: 25px;
    background-color: #7d7d7d;
}
#fc-detached .content-card > header h3,
#fc-detached #fc-housing-development > header h4 {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 18px;    
}
#fc-detached .content-card > header h3 span:not(.header-tag),
#fc-detached #fc-housing-development > header h4 span:not(.header-tag) {
    grid-column: span 2;
}
#fc-detached .content-card > header h3 {
    padding-right: 0;
}
#fc-detached .border-block {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
    border: 3px solid #fff;
    padding: 0;
    padding-block: 15px;
}
#fc-detached .border-block span{
    font-size: 2.5rem;
    position: relative;
    top: 2px;
}
#fc-detached .content-card > header ul {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    line-height: 1.8;
    padding-left: 0.5em;
}
#fc-detached .content-card > header ul li {
    position: relative;
}
#fc-detached .content-card > header ul li::before {
    content: '・';
    margin-right: 0.5em;
}
/* 注文住宅 */
#fc-detached #fc-custom-housing {
    margin-bottom: 90px;
}
#fc-detached #fc-custom-housing header h4 {
    color: var(--service-black);
    font-size: 2.9rem;
    letter-spacing: 0.06em;
    border-left: 8.2px solid var(--service-orange) ;
    border-bottom: 0;
    padding-left: 24px;
    padding-bottom: 0;
}
#fc-detached #fc-custom-housing header .header-tag {
    color: #fff;
    background-color: var(--service-orange);
}
#fc-detached #fc-custom-housing header h4 + p {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.06em;
    border-left: 0;
}
#fc-detached #fc-custom-housing .section-2column {
    margin-bottom: 45px;
}
#fc-detached #fc-custom-housing section h5 {
    color: var(--service-orange);
    font-size: 2rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--service-orange);
    margin-bottom: 15px;
}
#fc-detached #fc-custom-housing section h5 + p {
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 1.7;
    margin-bottom: 40px;
}
#fc-detached #fc-custom-housing section:nth-child(2) h5 + p {
    margin-bottom: 20px;
}

#fc-detached #fc-custom-housing figure figcaption {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: #272719;
    padding: 17px 40px 15px 30px;
    position: relative;
}
#fc-detached #fc-custom-housing figure figcaption p {
    font-size: 1.46rem;
    font-weight: 600;
    margin-bottom: 0;
}
#fc-detached #fc-custom-housing figure.custom-housing-image figcaption::after {
    content: '';
    width: 1px;
    height: 55%;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9%;
    left: 0;
    margin: auto;
}
#fc-detached #fc-custom-housing figure figcaption p:has(img) {
    width: 100%;
    height: 100%;
    max-width: 155px;
    max-height: 51px;
    align-self: end;
    padding-top: 2px;
}
#fc-detached #mujirushi {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    gap: 38px;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #6f2332;
    padding-left: 55px;
}
#fc-detached #mujirushi h4 {
    max-width: 274px;
    max-height: 69px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;    
}
#fc-detached #mujirushi h4 + div p {
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 18px;
}
#fc-detached #mujirushi h4 + div p + dl {
    width: 260px;
    border: 1px solid #6f2332;
}
#fc-detached #mujirushi h4 + div p + dl dt {
    color: #fff;
    font-size: 1.59rem;
    line-height: 30px;
    background-color: #6f2332;
    padding-left: 10px;
}
#fc-detached #mujirushi h4 + div p + dl dd {
    color: #6f2332;
    font-size: 1.69rem;
    line-height: 33px;
    padding-left: 10px;
}

#fc-detached #mujirushi figure {
    width: 100%;
    height: 100%;
    max-width: 277px;
    max-height: 158.6px;
    position: relative;
}
#fc-detached #mujirushi figure figcaption {
    color: #fff;
    font-size: 1.69rem;
    font-weight: bold;
    line-height: 1.56;
    background-color: #6f2332;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0;
    padding-block: 6px 8px;
    padding-inline: 10px;
}

#fc-detached #fc-housing-development header .title-wrap {
    border-left: 4.28px solid var(--service-orange);
}
#fc-detached #fc-housing-development header h4 {
    /* レイアウトは戸建て住宅headerと一緒に記入済み */
    column-gap: 6.8px;
    color: var(--service-black);
    font-size: 3rem;
    letter-spacing: 0.06em;
    padding-left: 23px;
    padding-bottom: 0;
    border-left: 4.28px solid var(--service-blue);
    border-bottom: 0;
    margin-bottom: 30px;
}
#fc-detached #fc-housing-development header h4 .header-tag {
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    background-color: var(--service-blue);
    padding-top: 0;
}
#fc-detached #fc-housing-development header h4 .header-tag.customer {
    background-color: var(--service-orange);
}
#fc-detached #fc-housing-development header p {
    border-left: 0;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1;
    padding-left: 31.56px;
    margin-bottom: 35px;
}
#fc-detached #fc-housing-development .section-2column {
    grid-template-columns: minmax(auto,499px) minmax(auto,429.5px);
    gap: 30px;
}
#fc-detached #fc-housing-development figure {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
}
#fc-detached #fc-housing-development figure img {
    aspect-ratio: 499 / 294;
    height: 100%;
    object-fit: cover;
}
#fc-detached #fc-housing-development figure figcaption {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    height: 105px;
    color: #fff;
    padding: 20px 45px 15px 45px;
    gap: 15px;
    position: relative;
}
#fc-detached #fc-housing-development figure figcaption::after {
    content: '';
    width: 1px;
    height: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#fc-detached #fc-housing-development figure:nth-child(2) figcaption::after {
    height: 65%;
}
#fc-detached #fc-housing-development figure figcaption p {
    margin-bottom: 0;
}
#fc-detached #fc-housing-development figure:first-child {
    color: #fff;
    background-color: var(--service-orange);
}
#fc-detached #fc-housing-development figure figcaption p:first-of-type {
    align-self: start;
}
#fc-detached #fc-housing-development figure:first-child figcaption p:has(img) {
    width: 100%;
    height: 100%;
    max-width: 153.4px;
    max-height: 42.4px;
}
#fc-detached #fc-housing-development figure:first-child figcaption p img {
    aspect-ratio: 153 / 42;
    height: auto;
}

#fc-detached #fc-housing-development figure:last-child {
    color: #fff;
    background-color: #4a6b8b;
}

#fc-detached #fc-housing-development figure:last-child figcaption p:has(img) {
    width: 100%;
    height: 100%;
    max-width: 120.2px;
    max-height: 72.7px;
}
#fc-detached #fc-housing-development figure:last-child figcaption p img {
  aspect-ratio: 120 / 73;
  height: auto;
}



/* レスポンシブ */
@media screen and (max-width: 1198.98px) {
    .customer-card {
        padding: 3.75vw 2.917vw;
    }
    .content-card > header {
        padding: 3.55vw 5.67vw 3.26vw 5.67vw;
        margin-bottom: 5vw;
    }
    #raise h5 {
        margin-bottom: 3.337vw;
    }
    #raise h5 + p {
        margin-bottom: 4.167vw;
    }

    #fc-reraise #renovation header {
        column-gap: 1.98vw;
    }

    #fc-reraise header h4 {
        font-size: 2.417vw;
    }
    :is(#fc-reraise #renovation, #fc-reraise #reform) header {
        margin-bottom: 3.75vw;
    }
    #fc-detached #fc-housing-development figure figcaption {
        padding-right: 4vw;
    }
}
@media screen and (max-width: 1109.98px) {
    #describe-the-business .inner-container:has(.header-total) {
        padding-top: 0;
    }
    #wao {
        column-gap: 3.337vw;
        padding-right: 3.337vw;
    }
    #wao h5 {
        font-size: 1.8rem;
        margin-bottom: 10px;
        word-break: break-all;
        word-break: auto-phrase;
    }
    #wao .section-2column {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }
    #wao .business-btn a {
        width: 100%;
    }
    #fb-bldg-materials .section-2column {
        grid-template-columns: 1fr;
    }
    #fb-bldg-materials .section-2column > section {
        order: 0;
        margin-bottom: 35px;
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-template-rows: min-content 1fr;
        align-items: start;
        column-gap: 3.337vw;
    }
    #fb-bldg-materials .content-card section h4 {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
    }
    #fb-bldg-materials section h4 + p {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    #fb-bldg-materials #maruwa {
        grid-row: 1 / span 2;
        grid-column: 2 / 3;
        align-items: start;
        display: block;
        text-align: center;
    }
    #fb-bldg-materials #maruwa::after {
        display: none;
    }
    #fb-bldg-materials #maruwa h5 + p {
        font-size: 1.4rem;
    }
    #fb-bldg-materials #maruwa .business-btn {
        margin-bottom: 3vw;
    }
    #fb-bldg-materials #maruwa .logo {
        margin-right: auto;
    }
    #fb-bldg-materials .section-2column > figure {
        max-height: 40vh;
    }
    #fc-detached #fc-housing-development figure figcaption p:first-of-type {
        font-size: 1.4rem;
    }
    #fc-detached #fc-housing-development figure:first-of-type figcaption::after {
        right: 10%;
    }
}
@media screen and (max-width: 1057.98px) {
    #fc-detached .content-card > header {
        grid-template-columns: 142.4px 1fr;
    }
    #fc-detached .content-card > header h3 {
        grid-column: span 2;
    }
}
@media screen and (max-width: 995.98px) {
    .p-okawa .service-mv::after {
        height: 94vw;
        bottom: unset;
        top: -300px;
    }
    #fb-dev dl {
        grid-template-columns: 1fr;
        height: auto;
        padding-block: 1rem;
        border-radius: 0;
    }
    #fb-dev dl dt {
        text-align: left;
        border-right: 0;
        padding-bottom: 0.5rem;
        padding-inline: 2rem;
        border-bottom: 1px solid #fff;
        margin-bottom: 1rem;
    }
    #fb-dev dl dd {
        padding-inline: 2rem;
        word-break: break-all;
        word-break: auto-phrase;
    }
    #fc-detached #mujirushi {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    #fc-detached #mujirushi h4 {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        padding: 0;
        margin: auto;
        align-self: self-end;
    }
    #fc-detached #mujirushi h4 + div {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }
    #fc-detached #mujirushi figure {
        grid-row: 1 / 3;
        grid-column: 2 / 3;
        max-width: unset;
        max-height: unset;
    }
    #fc-detached #mujirushi figure figcaption {
        font-size: 1.4rem;
        padding-inline: 15px;
    }
    #fc-detached #mujirushi h4 + div p {
        text-align: center;
    }
    #fc-detached #mujirushi h4 + div p + dl {
        margin: 0 auto;
    }
}

@media screen and (max-width: 975.98px) {
    #wao p {
        display: inline-block;
    }
    #wao p span::before {
        left: -25px;
    }
}

@media screen and (max-width: 969.98px) {
    #wao {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "wao-image"
        "wao-txt"
        "wao-title"
        "wao-btn";
        row-gap: 10px;
        text-align: center;
        padding-inline: 20px;
        padding-bottom: 15px;
    }
    #wao figure {
        max-width: unset;
        width: unset;
        max-height: 150px;
        margin-inline: -20px;
        margin-bottom: 20px;
    }
    #wao .section-2column {
        row-gap: 15px;
    }
    #wao .business-btn a {
        min-height: 44px;
    }
    #fc-reraise #renovation header {
        display: block;
    }
}

@media screen and (max-width: 939.98px) {
    #describe-the-business header.header-total {
        row-gap: 15px;
    }
    #describe-the-business header.header-total h3 {
        grid-column: span 2;
        order: 1;
    }
    .nav-category {
        order: 0;
    }
    .nav-list {
        order: 2;
        margin-top: 10px;
    }
    .nav-list ul li a {
        padding: 2.5vw 2.5vw;
    }
    .section-2column {
        gap: 2.5vw;
    }
    
    #raise {
        grid-template-columns: max-content minmax(auto, 130px) minmax(auto, 130px) minmax(auto, 130px) max-content;
        justify-content: space-between;
        grid-template-areas: 
        "company-title company-comment company-comment company-comment company-logo"
        "company-image--1 company-image--1 company-image--1 company-image--2 company-image--2";
        padding-bottom: 35px;
    }
    #raise figure:first-of-type {
        margin-left: auto;
    }
}
@media screen and (max-width: 886.98px) {
    #fc-reraise #renovation .customer-image {
        height: auto;
        align-self: start;
        margin-bottom: 0;
    }

    #fc-reraise header h4 {
        font-size: 2.2rem;
    }
}
@media screen and (max-width: 910.98px) {
    .section-2column {
        grid-template-columns: 1fr;
        gap: 3vw;
    }
    #fc-detached #fc-custom-housing figure figcaption {
        justify-content: center;
        gap: 40px;
    }
    #fc-detached #fc-custom-housing figure.custom-housing-image figcaption::after {
        right: 4%;
    }
    #fc-detached #fc-housing-development figure figcaption {
        padding-right: 3vw;
        padding-left: 3vw;
    }
}
@media screen and (max-width: 768.98px) {
    .content-card > header {
        display: block;
    }
    .content-card header h3 {
        padding-bottom: 15px;
        border-bottom: 2.83px solid #fff;
        padding-right: 0;
        margin-bottom: 15px;
    }
    .content-card header p {
        border-left: 0;
        padding-left: 0;
    }
    #raise {
        grid-template-columns: 1fr;
        grid-template-areas:
        "company-title company-title"
        "company-comment company-comment"
        "company-logo company-logo"
        "company-image--1 company-image--2";
    }
    #raise .logo {
        margin-right: 0;
        margin-left: auto;
    }
    #raise figure:first-of-type {
        margin-right: auto;
    }
    #raise figure:last-of-type {
        margin-inline: auto;
    }
    #fb-bldg-materials .section-2column > section {
        display: block;
    }
    #fb-bldg-materials #maruwa {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-areas: 
        "maruwa-title maruwa-logo"
        "maruwa-txt maruwa-logo"
        "maruwa-btn maruwa-logo";
        padding: 30px;
        column-gap: 30px;
        position: relative;
    }
    #fb-bldg-materials #maruwa::after {
        content: '';
        display: block;
        width: 1px;
        height: calc(100% - 60px);
        background-color: var(--service-border-black);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 40%;
        margin: auto;
    }
    #fb-bldg-materials #maruwa .logo {
        margin-right: 17%;
    }
    #fb-bldg-materials #maruwa h5 + p {
        text-align: center;
    }
    #fb-bldg-materials #maruwa .business-btn {
        margin-bottom: 0;
    }
    #fb-bldg-materials #maruwa .business-btn a {
        width: 100%;
    }
    #fc-reraise .customer-card {
        display: block;
    }
    #fc-reraise #renovation .renov-card > div {
        margin-bottom: 25px;
    }
    #fc-reraise #renovation .customer-image figure > img {
        width: 100%;
        height: auto;
        aspect-ratio: 323 / 158;
    }
    #fc-reraise .reform-card figure:first-of-type {
        margin-bottom: 25px;
    }
    .reform-card .customer-image img {
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
    #fc-detached .content-card > header {
        display: grid;
        row-gap: 0;
    }
    #fc-detached .border-block {
        display: inline-block;
        padding-inline: 15px;
    }
    #fc-detached #mujirushi {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 20px;
        padding-left: 0;
    }
    #fc-detached #fc-housing-development .section-2column {
        grid-template-columns: 1fr;
    }

    #fc-detached #fc-housing-development figure figcaption {
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        gap: 40px;
    }
    #fc-detached #fc-housing-development figure:first-of-type figcaption::after {
        right: 0;
    }
    #fc-detached #fc-housing-development figure figcaption p {
        margin-bottom: 0;
    }
    #fc-detached #fc-housing-development figure figcaption p:first-of-type {
        text-align: right;
        align-self: auto;
    }
}

@media screen and (max-width: 720.98px) {
    #raise figure:first-of-type img {
        object-fit: cover;
    }
}
@media screen and (max-width: 720.98px) {
    #fb-bldg-materials #maruwa .logo{
        margin-right: 15%;
    }
}
@media screen and (max-width: 679.98px) {
    #fc-detached .content-card > header {
        display: block;
    }
    #fc-detached .content-card > header ul li {
        position: relative;
        text-indent: -1em;
        padding-left: .5em;
        text-align: justify;
        line-height: 1.5;
        margin-bottom: 5px;
    }
    #fc-detached .border-block {
        width: 100%;
        margin-bottom: 15px;
    }
    #fc-detached .border-block br {
        display: none;
    }
    
}

@media screen and (max-width: 629.98px) {
    #reform header > .section-2column {
        flex-direction: column;
        align-items: start;
        margin-bottom: 4.25vw;
    }
}

@media screen and (max-width: 599.98px) {
    .p-okawa #mv.service-mv::after {
        bottom: -65vw;
    }
    .p-okawa .company-category + h3 {
        letter-spacing: 0.03em;
    }
    .p-okawa .service--txt-base {
        width: 60vw;
    }
    #describe-the-business header.header-total h3 {
        flex-direction: column;
        align-items: start;
        gap: 5px;
    }
    #describe-the-business header.header-total h3 .header-title {
        padding-left: 1rem;
    }
    .nav-category {
        grid-column: span 2;
        justify-content: start;
    }
    .nav-list {
        margin-top: 0;
    }
    .nav-list ul {
        justify-content: start;
        padding-top: 10px;
    }
    .nav-list ul li {
        font-size: 15px;
    }
    .nav-category li a {
        padding-inline: 10px;
    }
    .content-card > header {
        padding: 3.55vw 5.67vw 3.26vw 5.67vw;
    }
    .customer-card {
        padding: 6.38vw 4.96vw;
    }
    .p-okawa #mv .inner-container {
        padding-top: 12vw;
    }
    .p-okawa .service-grid > div {
        order: 1;
        margin-bottom: 40px;
    }
    .p-okawa .service-header .logo {
        margin-bottom: 7.1vw;
    }
    
    .p-okawa .service-header h4 {
        font-size: 2rem;
    }
    .p-okawa .service-header h4 span {
        font-size: 1.6rem;
    }
    .p-okawa .service--txt-base {
        text-align: justify;
    }
    .content-bg {
        margin-bottom: 14.18vw;
    }
    .content-bg .inner-container {
        padding-bottom: 11.34vw;
    }
    .content-card > header {
        margin-bottom: 8.5vw;
    }
    .content-card header .header-title {
       font-size: 2.2rem;
    }
    .content-card header p {
        font-size: 1.4rem;
        word-break: break-all;
        word-break: auto-phrase;
    }
    .section-2column {
        gap: 2.5rem;
    }
    .content-card section h4 {
        font-size: 1.6rem;
    }
    .content-card section p {
        font-size: 1.4rem;
        line-height: 1.6;
        margin-bottom: 40px;
    }
    #fb-dev dl > dt {
        font-size: 1.6rem;
    }
    #fb-dev dl > dd {
        font-size: 1.4rem;
    }
    #raise {
        grid-template-columns: 1fr;
        grid-template-areas:
        "company-title company-title"
        "company-comment company-comment"
        "company-logo company-logo"
        "company-image--1 company-image--1"
        "company-image--2 company-image--2";
    }
    #raise h5 + p {
        font-size: 1.5rem;
        margin-bottom: 6.5vw;
    }
    #raise h5 + p br {
        display: none;
    }
    #raise figure:first-of-type {
        margin-bottom: 30px;
    }
    #raise figure:first-of-type img {
        height: auto;
        object-fit: fill;
    }
    #raise figure:last-of-type {
        max-width: 320px;
        max-height: unset;
    }
    #raise figure figcaption {
        font-size: 1.4rem;
    }
    #wao .business-btn a {
        line-height: 44px;
    }

    #fb-bldg-materials #maruwa .logo{
        margin-right: 7%;
    }
    #fc-reraise section header p {
        font-size: 1.4rem;
    }
    #fc-reraise .customer-card > div {
        margin-bottom: 6.38vw;
    }
    #fc-reraise .customer-card > div h5 {
        font-size: 1.8rem;
    }
    #fc-reraise #renovation header > div {
        margin-bottom: 6.38vw;
    }
    #fc-reraise #renovation header p {
        text-align: left;
    }
    #fc-reraise #renovation .customer-image figure > figcaption {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
    }
    :is(#fc-reraise #renovation, #fc-reraise #reform) header {
        /* padding: 5.67vw; */

        margin-bottom: 6.38vw;
    }
    #fc-detached #fc-housing-development header p {
        line-height: 1.5;
        padding-left: 0;
    }
    #fc-detached #fc-housing-development figure figcaption {
        padding-inline: 25px;
        justify-content: center;
    }
    #fc-detached #fc-housing-development figure figcaption p:first-of-type {
        align-self: center;
    }
    #fc-detached #fc-custom-housing figure figcaption {
        padding-inline: 2vw;
    }
    #fc-reraise .reform-card figure:first-of-type {
        margin-bottom: 0;
    }
}
@media screen and (min-width: 559px) {
    #wao p br {
        display: none;
    }
}
@media screen and (max-width: 558.98px) {
    #fb-bldg-materials #maruwa::after {
        display: none;
    }
    #wao p {
        display: inline-block;
        line-height: 1.6;
    }
    #wao p span br {
        display: block;
    }
    #wao p span::before, #wao p span::after {
        bottom: 10px;
    }
    #wao p span::before {
        left: -55px;
    }
}
@media screen and (max-width: 529.98px) {
    #fb-bldg-materials #maruwa {
        display: block;
    }
    #fb-bldg-materials #maruwa > * {
        text-align: center;
    }
    #fb-bldg-materials #maruwa .business-btn {
        margin-bottom: 6vw;
    }

    #fb-bldg-materials #maruwa .business-btn a {
        width: 100%;
    }
    #fb-bldg-materials #maruwa .logo {
        margin-right: auto;
    }
}
@media screen and (max-width: 517.98px) {
    .p-okawa .service--txt-base {
        width: 90%;
    }
}

@media screen and (max-width: 508.98px) {
    #wao p span::before, #wao p span::after {
        bottom: 20px;
    }
}

@media screen and (max-width: 438.98px) {
    /* .p-service .service-mv::after {
        bottom: -120px;
        top: unset;
    } */
    #fc-detached #fc-custom-housing figure figcaption {
        padding-inline: 20px;
    }
    #fc-detached #fc-custom-housing figure figcaption p {
        font-size: 1.4rem;
    }
    #fc-detached #fc-custom-housing figure figcaption p:has(img) {
        padding-top: 5px;
    }
}

@media screen and (max-width: 375.98px) {
    #fc-detached #fc-custom-housing section h5 {
        font-size: 1.9rem;
    }
    #fc-detached #fc-custom-housing figure.custom-housing-image figcaption::after {
        right: 0;
    }
}