/**
 * page-kodawari.php Styles
 */

/* ==========================================================================
   Page MV
   ========================================================================== */
.page-mv {
    position: relative;
    width: 100%;
    height: 60rem; /* 固定高さまたは調整可 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-mv .mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.page-mv .mv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 背景を少し暗くする場合 */
.page-mv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.page-mv .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 120rem;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
}

.page-mv .text.boxstyle {
    background: linear-gradient(to right, transparent, rgba(65, 39, 20, 0.7), transparent);
    padding: 6rem 0;
    text-align: center;
    color: #fff;
    width: 100%;
}

.page-mv h1 {
    margin: 0;
}

.page-mv h1 strong {
    display: block;
    font-size: 4.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.page-mv h1 strong span {
    font-size: 6.4rem;
    margin-right: 0.2em;
}

.page-mv h1 .sub {
    display: block;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    font-family: var(--base-font);
    opacity: 0.9;
}

/* ==========================================================================
   Introduction
   ========================================================================== */
.introduction {
    background-color: var(--base-beige);
    padding: 15rem 0 0 0;
}

.introduction .kei,
.introduction .kei:before,
.introduction .kei:after{
    background-color: var(--base-brown);    ;
}



.introduction .inner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 4rem;
}

.introduction .text {
    text-align: center;
    color: var(--base-brown);
}

.introduction h2.title-with-lines {
    line-height: 1.8;
    margin-bottom: 6rem;
    letter-spacing: 0.05em;
}

.introduction p {
    font-size: 2.2rem;
    line-height: 2.4;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Philosophy
   ========================================================================== */
.philosophy {
    position: relative;
    padding: 15rem 0;
    overflow: hidden;
    background-color: var(--base-beige);
}

/* Checkerboard Borders */
.philosophy .inner::before,
.philosophy .inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2rem;
    background-image: conic-gradient(var(--base-brown) 90deg, #fff 90deg 180deg, var(--base-brown) 180deg 270deg, #fff 270deg);
    background-size: 2rem 2rem; /* 2 columns in 2rem width */
    z-index: 2;
}

.philosophy .inner::before {
    left: 0rem;
}

.philosophy .inner::after {
    right: 0rem;
}

.philosophy .inner {
    background-color: #fff;
    border-top: 0.8rem solid var(--base-brown);
    border-bottom: 0.8rem solid var(--base-brown);
    width:90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 6rem;
    position: relative;
}

.philosophy .block {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    width:90%;
    margin:6.4rem auto
}

.philosophy .box {
    display: flex;
    align-items: center;
    position: relative;
}


.philosophy .box:nth-child(even) {
    flex-direction: row-reverse;
}

.philosophy .box .text {
    flex: 1;
}

.philosophy .box figure {
    flex: 1;
    position: relative;
    margin: 0;
}

.philosophy .box figure img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* Image Offset Background */
.philosophy .box figure::after {
    content: "";
    position: absolute;
    top: 3rem;
    right: -3rem;
    width: 100%;
    height: 100%;
    background-color: var(--base-gold);
    z-index: 0;
}

.philosophy .box:nth-child(even) figure::after {
    right: auto;
    left: -3rem;
}

.philosophy .box h3 {
    display: flex;
    align-items: flex-end;
    gap: 2.5rem;
    border-bottom: 1px solid var(--base-brown);
    padding-bottom: 2rem;
    margin-bottom: 3.5rem;
    font-size:2.4rem;
    white-space: nowrap;
}

.philosophy .box h3 img {
    width: 12rem;
    height: auto;
}

.philosophy .box h3 strong {
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-family: var(--base-font);
    font-weight: bold;
    color: var(--base-brown);
}

.philosophy .box h3 strong i {
    font-style: normal;
    font-size:3.6rem
}

.philosophy .box p {
    font-size: 2rem;
    line-height: 2.2;
    margin-bottom: 2rem;
}

.philosophy .box:nth-child(odd) h3 {
    padding-right:3.2rem
}
.philosophy .box:nth-child(even) h3 {
    padding-left:3.2rem
}

.philosophy .box:nth-child(odd) p {
    padding:0 3.2rem 0 0
}
.philosophy .box:nth-child(even) p {
    padding:0 0 0 3.2rem
}




.philosophy .box p:last-child {
    margin-bottom: 0;
}

/* Marker Style */
.philosophy .marker {
    font-size:2.4rem;
    background: linear-gradient(transparent 60%, var(--base-gold) 60%);
    padding: 0.2rem 0.5rem;
    font-weight: 500;
}

/* ==========================================================================
   Truth
   ========================================================================== */
.truth {
    background-color: var(--base-brown);
    padding: 10rem 0 2.4rem 0;
}

.truth .inner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 4rem;
    text-align: center;
}

.truth h2 {
    margin-bottom: 4rem;
    color: #ffffff;
}

.truth .title-with-lines .sub {
    display: block;
    font-size: 2rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.truth .inner > p {
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 6.4rem;
    font-weight: 500;
}


.truth .block{
    background-color: #ffffff;
    border-radius: 1.6rem;
    padding: 6.4rem;
    margin-bottom: 6.4rem;
}


/* Comparison Table */



.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-bottom: 1px solid var(--base-brown);
}

.comparison-table th,
.comparison-table td {
    padding: 3.2rem 2rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--base-brown);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    width: 26%;
}

.label-a5 {
    background-color: var(--base-brown);
    color: #fff !important;
    font-size: 2rem;
    width: 34%;
    position: relative;
}

.label-a4 {
    background-color: var(--base-gold);
    color: #fff !important;
    font-size: 2rem;
    width: 34%;
    border-left: 3px solid var(--base-gold);
    border-right: 3px solid var(--base-gold);
    position: relative;
}

.comparison-table tbody tr {
    border-top: 1px solid var(--base-brown);
}

.data-a5 {
    background-color: #e0dbd8;
    position: relative;
}

.data-a4 {
    background-color: #f2e6cc;
    border-left: 3px solid var(--base-gold);
    border-right: 3px solid var(--base-gold);
    font-weight: bold;
}

.comparison-table tbody tr:last-child .data-a4 {
    border-bottom: 3px solid var(--base-gold);
}

.label-a5:after,
.data-a5:after{
    content: "";
    position: absolute;
    width:1.2rem;
    height:100%;
    display: block;
    background-color: #ffffff;
    right:0;
    top:0
}

.label-a5:before{
    content:"";
    position: absolute;
    width:100%;
    height:1.2rem;
    background-color: #e0dbd8;
    left:0;
    bottom:0
}

.label-a4:before{
    content:"";
    position: absolute;
    width:100%;
    height:1.2rem;
    background-color:#f2e6cc;
    left:0;
    bottom:0
}

/* ==========================================================================
   Kodawari Footer
   ========================================================================== */
.kodawari-footer {
    background-color: var(--base-gold) !important;
    padding: 3.2rem 0 !important;
    text-align: center;
}

.kodawari-footer .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4rem;
}

.kodawari-footer .footer-logo {
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    margin-bottom: 0rem;
}

.kodawari-footer .footer-line {
    border: none;
    border-top: 1px solid #fff !important;
    max-width: 60rem;
    margin: 0 auto !important;
    opacity: 1 !important;
}

.kodawari-footer .footer-copy-text {
    margin-bottom: 3.2rem;
}

.kodawari-footer .footer-copy-text span {
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.15em;
    display: block;
}

.kodawari-footer .copyright {
    color: #fff;
    opacity: 0.9;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}






/* ==========================================================================
   Media Queries (SP)
   ========================================================================== */
@media screen and (max-width: 1000px) {
    .page-mv {
        height: 50rem;
    }
    .page-mv .text.boxstyle {
        padding: 4rem 6rem;
    }
    .page-mv h1 strong {
        font-size: 6rem;
    }
    .introduction {
        padding: 10rem 0;
    }
    .introduction h2.title-accent {
        font-size: 3.8rem;
    }

    .philosophy {
        padding: 10rem 0;
    }
    .philosophy .box {
        gap: 5rem;
    }
    .philosophy .box h3 strong {
        font-size: 3.2rem;
    }
}

@media screen and (max-width: 760px) {
    .page-mv {
        height: 60vh;
    }
    .page-mv .text.boxstyle {
        padding: 4rem 2rem;
        width: 90%;
    }
    .page-mv h1 strong {
        font-size: 10vw;
    }
    .page-mv h1 strong span {
        font-size: 1.1em;
    }
    .page-mv h1 .sub {
        font-size: 3.5vw;
        letter-spacing: 0.2em;
    }
    .introduction {
        padding: 8rem 0;
    }
    .introduction h2.title-accent {
        font-size: 6vw;
    }
    .introduction p {
        font-size: 4vw;
        text-align: justify;
    }

    .philosophy {
        padding: 8rem 0;
    }
    .philosophy::before,
    .philosophy::after {
        width: 1.2rem;
        background-size: 0.6rem 0.6rem;
    }
    .philosophy::before {
        left: 0.5rem;
    }
    .philosophy::after {
        right: 0.5rem;
    }
    .philosophy .inner {
        padding: 0 3rem;
    }
    .philosophy .block {
        gap: 8rem;
    }
    .philosophy .box {
        flex-direction: column !important;
        gap: 3.5rem;
    }
    .philosophy .box h3 {
        gap: 1.5rem;
        padding-bottom: 1.2rem;
        margin-bottom: 2.5rem;
    }
    .philosophy .box h3 img {
        width: 6.5rem;
    }
    .philosophy .box h3 strong {
        font-size: 2.6rem;
    }
    .philosophy .box p {
        font-size: 1.8rem;
    }
    .philosophy .box figure::after {
        top: 2rem;
        right: -2rem;
    }
    .philosophy .box:nth-child(even) figure::after {
        left: -2rem;
    }

    .kodawari-footer {
        padding: 6.4rem 0 !important;
    }
    .kodawari-footer .footer-logo {
        font-size: 2.8rem;
        letter-spacing: 0.2em;
    }
    .kodawari-footer .footer-copy-text span {
        font-size: 6vw;
        letter-spacing: 0.1em;
    }
    .kodawari-footer .footer-line {
        max-width: 80%;
        margin-bottom: 3.2rem !important;
    }
}