@charset "UTF-8";

.hiraya-header {
    margin-top: 0 !important;
    padding-top: 110px;
}

@media (max-width: 991.98px) {
    .hiraya-header {
        padding-top: 60px;
    }
}

.hiraya-header__inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hiraya-header__img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.hiraya-header__copy {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 25px;
}

@media (max-width: 767.98px) {
    .hiraya-header__img img {
        aspect-ratio: 375 / 200;
    }

    .hiraya-header__copy {
        font-size: 14px;
        top: 23%;
    }
}

.hiraya-intro {
    background-color: #f9f2eb;
    padding: 120px 0 0;
    text-align: center;
    overflow: hidden;
}

.hiraya-intro__inner {
    max-width: 800px;
    margin: 0 auto 60px;
}

.hiraya-intro__logo img {
    width: auto;
    height: 150px;
    margin-bottom: 20px;
}

.hiraya-intro h1 {
    margin-bottom: 0;
}

.hiraya-intro__title {
    font-size: 60px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.hiraya-intro__subtitle {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 18px;
    letter-spacing: 0.1em;
    margin-left: 18px;
}

.hiraya-intro__desc {
    line-height: 2;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.hiraya-intro__slider-wrapper {
    width: 100%;
    padding-bottom: 80px;
}

.hiraya-intro__slider img {
    height: 580px;
    width: auto;
    max-width: none;
}

@media (max-width: 767.98px) {
    .hiraya-intro {
        padding-top: 50px;
    }

    .hiraya-intro__title {
        font-size: 40px;
    }

    .hiraya-intro__logo img {
        height: 80px;
        margin-bottom: 5px;
    }

    .hiraya-intro__subtitle {
        font-size: 22px;
        margin-left: -5px;
        transform: translateX(12px);
        margin-bottom: 20px;
    }

    .hiraya-intro__desc {
        text-align: left;
        display: inline-block;
    }

    .hiraya-intro__slider img {
        height: 240px;
    }
}

.hiraya-features {
    padding: 100px 0;
    text-align: center;
}

.hiraya-features__title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    gap: 2px;
}

.hiraya-features__title img {
    height: 43px;
    width: auto;
    margin-right: 4px;
}

.hiraya-features__title-text {
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
}

.hiraya-features__title-no {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
}

.hiraya-features__content {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.hiraya-features__bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* Items logic remains specific to Hiraya if they exist, but user asked to align with RC features which seems to only have an image.
   Checking rcbox.css (lines 227-235), it has rc-features__img container.
   Hiraya has hiraya-features__content with bg and absolute items. 
   The user request "this part's css" likely implies the visual style of the container/title, 
   but Hiraya might still need the absolute positioning if the HTML structure depends on it.
   However, looking at the RC CSS, it's much simpler. 
   Let's adopt the title styles and spacing from RC, but keep the specific item positioning 
   logic if it's not being removed in the PHP. 
   Wait, the user said "make THIS PART's css match rc-features". 
   Let's check the RC structure again. 
   RC structure:
   .rc-features
     .container
       .rc-features__title ...
       .rc-features__img > img

   Hiraya structure (from page-hirayabox.php lines 82-94):
   .hiraya-features
     .container
       .hiraya-features__title ...
       .hiraya-features__content
         .hiraya-features__bg > img

   There are no other items in the HTML provided in step 4 for hiraya-features.
   Wait, let me check step 4 again.
   Lines 82-94:
   <div class="hiraya-features">
       <div class="container">
           <div class="hiraya-features__title">...</div>
           <div class="hiraya-features__content">
               <div class="hiraya-features__bg">
                   <img ...>
               </div>
           </div>
       </div>
   </div>
   
   It seems the HTML for items (absolute positioned ones) is NOT in the PHP file anymore? 
   Wait, looking at the CSS I replaced in step 4 (lines 159-214), there were .hiraya-features__item styles.
   But looking at the PHP file in step 4 (lines 82-94), I DO NOT see the items in the HTML.
   Ah, maybe the user removed them or I missed them?
   Let's look at lines 88-92 of page-hirayabox.php again.
   <div class="hiraya-features__content">
       <div class="hiraya-features__bg">
           <img ...>
       </div>
   </div>
   
   There are NO items like .hiraya-features__item in the PHP.
   So the CSS for items (lines 159-214) is dead code or for a different version?
   Existing CSS has:
   .hiraya-features__item { position: absolute; ... }
   .item-01 ...
   
   If they are not in the PHP, I can safely remove them and align fully with RC styles.
   The RC styles use .rc-features__img for the image container. 
   Hiraya uses .hiraya-features__content .hiraya-features__bg. 
   I will map rc-features__img styles to hiraya-features__content/bg.
*/

.hiraya-features__content {
    margin: 0 auto;
    max-width: 1000px;
}

/* 
RC CSS:
.rc-features__img {
    margin: 0 auto;
    max-width: 1000px;
}
.rc-features__img img {
    width: 100%;
    height: auto;
}
*/

@media (max-width: 767.98px) {
    .hiraya-features {
        padding: 60px 0;
    }

    .hiraya-features__title {
        margin-bottom: 30px;
        gap: 6px;
    }

    .hiraya-features__title img {
        height: 32px;
        margin-top: 3px;
    }

    .hiraya-features__title-text {
        font-size: 30px;
    }
}


.hiraya-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.hiraya-section-title h2 {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0;
}

.title-marker {
    display: inline-block;
    width: 15px;
    height: 25px;
    background-color: #90172e;
    border-radius: 0 5px 5px 0;
}

.hiraya-color__box,
.hiraya-plan__box,
.hiraya-design__box {
    background-color: #f9f2eb;
    border-radius: 0 0 0 80px;
    position: relative;
    margin: 0 auto;
    padding: 30px 35px;
}

.hiraya-color__box::after,
.hiraya-plan__box::after,
.hiraya-design__box::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: 8px;
}

.hiraya-color__script,
.hiraya-plan__script,
.hiraya-design__script {
    position: absolute;
    top: -30px;
    right: 30px;
}

.hiraya-color__script img,
.hiraya-plan__script img,
.hiraya-design__script img {
    width: 100%;
    height: auto;
}

.hiraya-color__text,
.hiraya-plan__text,
.hiraya-design__text {
    line-height: 1.8;
    margin-bottom: 0;
}

.hiraya-plan__text,
.hiraya-design__text {
    text-align: justify;
}

.hiraya-color__img img,
.hiraya-plan__img img,
.hiraya-design__img img {
    width: 100%;
    height: auto;
    display: block;
}


.hiraya-color__box::after {
    background-color: #90172e;
}

.hiraya-color__script {
    width: 150px;
}

.hiraya-color__row {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    position: relative;
}

.hiraya-color__row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #000 3px, transparent 3px);
    background-size: 1px 6px;
    background-repeat: repeat-y;
    transform: translateX(-50%);
}

.hiraya-color__col {
    width: 48%;
}

.hiraya-color__sub {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hiraya-color__sub .marker {
    color: #90172e;
    font-size: 14px;
}

.hiraya-color__img {
    margin-bottom: 0;
}


.hiraya-plan__box::after {
    background-color: #1b2e5b;
}

.hiraya-plan__script {
    width: 235px;
}

.title-marker-blue {
    background-color: #1b2e5b;
}

.hiraya-plan__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    position: relative;
}

.hiraya-plan__col {
    width: 25%;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;
    border-right: none;
}

.hiraya-plan__col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #000 3px, transparent 3px);
    background-size: 1px 6px;
    background-repeat: repeat-y;
}

.hiraya-plan__img {
    margin-bottom: 20px;
}


.hiraya-design__box::after {
    background-color: #112821;
}

.hiraya-design__script {
    width: 153px;
}

.title-marker-green {
    background-color: #112821;
}

.hiraya-design__row {
    display: grid;
    grid-template-columns: 333fr 360fr 333fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    position: relative;
    gap: 0 0;
    margin: 0 -20px;
}

.hiraya-design__row::before,
.hiraya-design__row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #000 3px, transparent 3px);
    background-size: 1px 6px;
    background-repeat: repeat-y;
    z-index: 1;
}

.hiraya-design__row::before {
    left: 32.456%;
}

.hiraya-design__row::after {
    right: 32.456%;
}

.hiraya-design__col {
    display: contents;
}

.hiraya-design__col.col-center .hiraya-design__img {
    position: relative;
    z-index: 2;
}

.hiraya-design__col:not(:last-child)::after {
    display: none;
}

.hiraya-design__img {
    margin-bottom: 20px;
    align-self: end;
    padding: 0 20px;
}

.hiraya-design__text {
    align-self: start;
    padding: 0 20px;
}

@media (max-width: 991.98px) {

    .hiraya-color__box,
    .hiraya-plan__box,
    .hiraya-design__box {
        border-radius: 0 0 0 50px;
    }

    .hiraya-color__box {
        padding: 40px;
    }

    .hiraya-plan__box,
    .hiraya-design__box {
        padding: 40px 20px;
    }

    .hiraya-color__script,
    .hiraya-plan__script,
    .hiraya-design__script {
        top: -30px;
        right: 20px;
    }

    .hiraya-color__script {
        width: 100px;
    }

    .hiraya-plan__script {
        width: 150px;
    }

    .hiraya-color__row {
        gap: 30px;
    }

    .hiraya-design__col {
        padding: 0 10px;
    }
}

@media (max-width: 767.98px) {

    .hiraya-section-title h2 {
        font-size: 18px;
    }

    .title-marker {
        height: 25px;
        width: 10px;
    }

    .hiraya-color__box,
    .hiraya-plan__box,
    .hiraya-design__box {
        padding: 30px 20px;
        border-radius: 0 0 0 40px;
    }

    .hiraya-color__script,
    .hiraya-plan__script,
    .hiraya-design__script {
        position: static;
        margin: 0 0 10px auto;
        transform: translateY(-10px);
    }

    .hiraya-color__box::after,
    .hiraya-plan__box::after,
    .hiraya-design__box::after {
        width: 4px;
    }

    .hiraya-color__script {
        width: 100px;
    }

    .hiraya-plan__script {
        width: 150px;
    }

    .hiraya-design__script {
        width: 120px;
    }

    .hiraya-color__row {
        flex-direction: column;
        gap: 0;
    }

    .hiraya-color__row::after {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, #000 3px, transparent 3px);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        order: 2;
        margin: 20px 0;
        position: relative;
    }

    .hiraya-color__col {
        width: 100%;
    }

    .hiraya-color__col:nth-child(1) {
        order: 1;
    }

    .hiraya-color__col:nth-child(2) {
        order: 3;
    }

    .hiraya-plan__row {
        flex-direction: column;
        gap: 40px;
    }

    .hiraya-plan__col {
        width: 100%;
        border-right: none;
        position: relative;
    }

    .hiraya-plan__col:not(:last-child)::after {
        display: block;
        content: "";
        position: absolute;
        bottom: -20px;
        left: 0;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, #000 3px, transparent 3px);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        top: auto;
    }

    .hiraya-design__row {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
    }

    .hiraya-design__row::before,
    .hiraya-design__row::after {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, #000 3px, transparent 3px);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        margin: 20px 0;
    }

    .hiraya-design__row::before {
        order: 2;
        position: static;
        left: auto;
    }

    .hiraya-design__row::after {
        order: 4;
        position: static;
        right: auto;
    }

    .hiraya-design__col {
        display: block;
        width: 100%;
        padding: 0;
    }

    .hiraya-design__col:nth-child(1) {
        order: 1;
    }

    .hiraya-design__col:nth-child(2) {
        order: 3;
    }

    .hiraya-design__col:nth-child(3) {
        order: 5;
    }


    .hiraya-design__col.col-center .hiraya-design__img {
        width: 100%;
        margin-left: 0;
    }

    .hiraya-design__img,
    .hiraya-design__text {
        padding: 0;
    }
}

.hiraya-variation {
    padding: 130px 0 100px;
    background-color: #f9f2eb;
    margin-top: 160px;
}

.hiraya-variation__header {
    text-align: center;
    margin-bottom: 60px;
}

.hiraya-variation__header h2 {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.hiraya-variation__sub {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
    display: block;
    color: #000;
}

.hiraya-variation__sub .num {
    font-size: 60px;
}

.hiraya-variation__sub .unit {
    font-size: 40px;
}

@media (max-width: 767.98px) {
    .hiraya-variation__sub .num {
        font-size: 40px;
    }

    .hiraya-variation__sub .unit {
        font-size: 26px;
    }
}

.hiraya-variation__standard,
.hiraya-variation__colorful,
.hiraya-variation__japandi {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 5px solid;
}

.hiraya-variation__colorful,
.hiraya-variation__japandi {
    margin-top: 70px;
}

.standard-title,
.colorful-title,
.japandi-title {
    font-size: 40px;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 17px;
}

.standard-title .ja,
.colorful-title .ja,
.japandi-title .ja {
    font-size: 14px;
    color: #000;
    font-weight: normal;
    position: relative;
    letter-spacing: initial;
}

.standard-title .ja::before,
.colorful-title .ja::before,
.japandi-title .ja::before {
    content: "—";
    margin-right: 7px;
    color: #000;
}

.hiraya-variation__standard {
    border-color: #1b2e5b;
}

.standard-title {
    color: #1b2e5b;
}

.hiraya-variation__colorful {
    border-color: #c1681b;
}

.colorful-title {
    color: #c1681b;
}

.hiraya-variation__japandi {
    border-color: #6e7047;
}

.japandi-title {
    color: #6e7047;
}

.hiraya-variation__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    row-gap: 110px;
    background: #fff;
    padding: 80px 40px;
}

.hiraya-variation__item {
    width: 25%;
    padding: 0 20px;
    box-sizing: border-box;
}

.hiraya-variation__img {
    padding-bottom: 25px;
    background: url("../../img/page/hirayabox/sample-bg.svg") 50% 130%/contain no-repeat;
}

.hiraya-variation__img img {
    width: 100%;
    height: auto;
    display: block;
}

.hiraya-variation__colors {
    padding-left: 10px;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.color-row:last-child {
    margin-bottom: 0;
}

.color-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.color-icon img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.color-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.hiraya-variation__script {
    text-align: right;
    margin-top: -70px;
    position: relative;
    z-index: 1;
    padding-right: 20px;
}

.hiraya-variation__script img {
    width: 303px;
    max-width: 100%;
    height: auto;
}

.hiraya-variation__script--colorful img {
    width: 280px;
}

.hiraya-variation__script--japandi img {
    width: 276px;
}

.hiraya-plan {
    padding: 120px 0 120px;
    text-align: center;
}

.hiraya-plan__header {
    margin-bottom: 45px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}

.lineup__logo.hiraya-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 2px solid #fff;
    color: #fff;
    position: absolute;
    top: 0;
    left: 50px;
    padding: 25px 0 25px 15px;
    text-align: left;
}

.hiraya-logo-text .product {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.hiraya-logo-text .name {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
    letter-spacing: 0.05em;
}

@media (max-width: 767.98px) {
    .hiraya-logo-text .product {
        font-size: 8px;
    }

    .hiraya-logo-text .name {
        font-size: 10px;
    }

    .lineup__logo.hiraya-logo-text {
        border-left: 1px solid #8e8e8e;
        left: 20px;
        padding: 10px 0 5px 10px;
    }
}

.hiraya-plan__header h2 {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.hiraya-plan__title {
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0 0 35px;
    color: #000;
    display: block;
}

.hiraya-plan__title .unit {
    font-size: 40px;
    margin-left: 6px;
    font-weight: bold;
}

@media (max-width: 767.98px) {
    .hiraya-plan__title {
        font-size: 40px;
    }

    .hiraya-plan__title .unit {
        font-size: 26px;
    }
}

.hiraya-plan__desc {
    line-height: 2;
    letter-spacing: 0.05em;
    color: #000;
}

.hiraya-plan__slider {
    margin: 30px calc(50% - 50vw) 0;
    padding: 0 40px;
}

.hiraya-plan .slick-list {
    overflow: visible;
}

.hiraya-plan__item {
    padding: 0 20px;
    box-sizing: border-box;
}

.hiraya-plan__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.hiraya-plan__arrows {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.hiraya-plan__arrow {
    width: 36px;
    height: 36px;
    border: none;
    background: #000 no-repeat center;
    background-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.hiraya-plan__arrow--prev::before {
    content: "";
}

.hiraya-plan__arrow--next::before {
    content: "";
}

.hiraya-plan__arrow--prev {
    background-image: url("../../img/arrow-1.svg");
}

.hiraya-plan__arrow--next {
    background-image: url("../../img/arrow-2.svg");
}

@media (max-width: 991.98px) {
    .hiraya-variation__item {
        width: 50%;
    }
}

@media (max-width: 767.98px) {
    .hiraya-variation {
        padding: 60px 0 80px;
        margin-top: 80px;
    }

    .hiraya-variation__header h2 {
        font-size: 24px;
    }

    .hiraya-variation__sub {
        font-size: 36px;
    }

    .standard-title,
    .colorful-title,
    .japandi-title {
        font-size: 28px;
    }

    .hiraya-variation__script {
        margin-top: -20px;
    }

    .hiraya-variation__grid {
        row-gap: 30px;
        padding: 40px 0px;
    }

    .hiraya-variation__item {
        padding: 0 15px
    }

    .hiraya-variation__script img {
        width: 200px;
    }

    .hiraya-variation__script--colorful img {
        width: 190px;
    }

    .hiraya-variation__script--japandi img {
        width: 190px;
    }

    .hiraya-plan {
        padding: 60px 0 60px;
    }

    .hiraya-plan__header h2 {
        font-size: 24px;
    }

    .hiraya-plan__title {
        font-size: 36px;
    }

    .hiraya-plan__title .unit {
        font-size: 22px;
    }

    .hiraya-plan__desc {
        text-align: left;
    }

    .hiraya-plan__item {
        padding: 0 10px;
    }

    .hiraya-plan__arrow {
        width: 30px;
        height: 30px;
    }

    .hiraya-plan__header {
        max-width: 100%;
        padding: 0 20px;
    }
}

.color-circle {
    display: inline-block;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 0.5px solid #ccc;
    box-sizing: border-box;
    flex-shrink: 0;
}

.color-icon {
    display: none;
}

.color-row {
    align-items: center;
}

@media (max-width: 767.98px) {
    .color-row {
        gap: 10px;
        margin-bottom: 8px;
    }

    .color-circle {
        width: 20px;
        height: 20px;
    }

    .color-name {
        font-size: 12px;
        letter-spacing: 0;
    }

    .hiraya-variation__colors {
        padding-left: 0;
    }

    .hiraya-variation__img {
        padding-bottom: 13px;
    }
}

.hiraya-message {
    padding: 90px 0 100px;
    background-color: #f9f2eb;
    text-align: center;
}

.hiraya-message__sub {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.hiraya-message__main {
    font-size: 60px;
    font-weight: bold;
    color: #90172e;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 767.98px) {
    .hiraya-message {
        padding: 60px 0;
    }

    .hiraya-message__sub {
        font-size: 20px;
    }

    .hiraya-message__main {
        font-size: 30px;
    }
}