@charset "UTF-8";

:root {
    --font_f_noto_sans: "Noto Sans JP", sans-serif;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Serif JP", serif;
    color: #1b1b1b;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

.inner {
    max-width: min(100.00vw, 1000.0px);
    margin-left: auto;
    margin-right: auto;
}

.txt_br_sp {
    display: none;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 表示トリガー後 */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 750px) {
    .txt_br_pc {
        display: none;
    }

    .txt_br_sp {
        display: block;
    }
}

/* FV Section */
.fv {
    position: relative;
    width: 100%;
}

.fv_box {
    width: 100%;
    padding-top: min(3.00vw, 30.0px);
    padding-bottom: min(3.00vw, 30.0px);
    background-color: #fff;
    pointer-events: none;
}

.fv_content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.00vw, 20.0px);
    width: 100%;
}

.laurel_box {
    display: flex;
    align-items: center;
    gap: min(2.00vw, 20.0px);
}

.text_box {
    text-align: center;
    color: #b59858;
    /* Gold-ish color matching leaves/screenshot tone */
    font-family: "Noto Serif JP", serif;
}

.text_top {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: min(0.50vw, 5.0px);
}

.text_bottom {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Leaves */
.leaf_left,
.leaf_right {
    position: static;
    /* Remove absolute */
    transform: none;
    /* Remove transform */
    width: auto;
    height: min(8.00vw, 80.0px);
    /* Specific height to match text box roughly */
}

/* CTA Button */
.cta_btn {
    position: static;
    /* Remove absolute */
    transform: none;
    /* Remove transform */
    width: min(35.00vw, 350.0px);
    max-width: 100%;
    display: block;
    transition: opacity 0.3s;
    pointer-events: auto;
}

.cta_btn:hover {
    opacity: 0.7;
}

@media (max-width: 900px) {
    .fv_content {
        flex-direction: column;
        gap: min(2.00vw, 20.0px);
    }
}

@media (max-width: 750px) {
    .fv_box {
        position: absolute;
        bottom: min(1.33vw, 10.0px);
        padding-top: 0;
        padding-bottom: 0;
        background-color: unset;
    }

    .fv_content {
        flex-direction: column;
        gap: min(2.67vw, 20.0px);
    }

    .laurel_box {
        display: none;
    }

    .cta_btn {
        width: 94%;
    }
}

/* Feel Section */
.feel {
    background-color: #eaeaea;
    padding: min(6.20vw, 62.0px) 0 min(11.00vw, 110.0px);
}

.feel h2 {
    text-align: center;
    font-size: min(4.00vw, 40.0px);
    font-weight: 500;
    margin-bottom: min(5.00vw, 50.0px);
    letter-spacing: min(0.2vw, 2px);
}

.feel h2 .highlight {
    background-color: #1b1b1b;
    color: #fff;
    padding: 2px min(1.00vw, 10.0px);
    margin: 0 min(0.50vw, 5.0px);
}

.feel_content {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: min(4.00vw, 40.0px);
}

.feel_list {
    width: 65%;
    list-style: none;
}

.feel_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: min(2.00vw, 20.0px);
    font-family: "Noto Sans JP", sans-serif;
    font-size: min(2.20vw, 22.0px);
}

.feel_list li:last-child {
    margin-bottom: 0;
}

.check_icon {
    width: min(2.00vw, 20.0px);
    height: min(2.00vw, 20.0px);
    margin-right: min(1.50vw, 15.0px);
    flex-shrink: 0;
    position: relative;
    top: min(0.50vw, 5.0px);
    /* Visual adjustment */
}

.text_gold {
    color: #937435;
    font-weight: 600;
}

.feel_img {
    width: 31%;
}

@media (max-width: 750px) {
    .feel {
        padding: min(10.27vw, 77.0px) 0 min(17.73vw, 133.0px);
    }

    .feel h2 {
        font-size: min(6.40vw, 48.0px);
        line-height: min(10.88vw, 81.6px);
        margin-bottom: min(9.33vw, 70.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .feel h2 .highlight {
        display: inline-block;
        /* Avoid wrap break weirdness */
    }

    .feel_content {
        flex-direction: column;
        /* Stack vertically */
    }

    .feel_img {
        width: 100%;
        order: 1;
        padding-left: min(8.00vw, 60.0px);
        padding-right: min(8.00vw, 60.0px);
        margin-bottom: min(7.47vw, 56.0px);
    }

    .feel_list {
        width: 100%;
        order: 2;
        padding-left: min(6.67vw, 50.0px);
        padding-right: min(2.67vw, 20.0px);
    }

    .feel_list li {
        font-size: min(4.00vw, 30.0px);
    }

    .check_icon {
        width: min(3.73vw, 28.0px);
        height: min(3.73vw, 28.0px);
    }
}

/* Why Section */
.why {
    background-color: #fefaf0;
    padding: min(8.00vw, 80.0px) 0;
}

.why_title_area {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: min(5.00vw, 50.0px);
    position: relative;
    gap: min(2.00vw, 20.0px);
}

.why_title_area::after {
    position: absolute;
    bottom: max(-8.00vw, -80.0px);
    left: 50%;
    z-index: 2;
    content: "";
    display: block;
    width: min(0.40vw, 4.0px);
    height: min(8.00vw, 80.0px);
    background-image: linear-gradient(to bottom, #1b1b1b 50%, transparent 50%);
    background-size: 100% min(0.90vw, 9.0px);
    background-repeat: repeat-y;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.circle_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(11.80vw, 118.0px);
    height: auto;
}

.why_title_area h2 {
    font-size: min(4.00vw, 40.0px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: min(0.2vw, 2px);
}

.why_img_area {
    position: relative;
    margin-bottom: min(6.00vw, 60.0px);
    width: min(91.10vw, 911.0px);
    margin-left: auto;
    margin-right: auto;
}

.img_caption {
    background-color: #1b1b1b;
    color: #fff;
    text-align: center;
    padding: min(2.00vw, 20.0px) 0px;
    margin: max(-5.00vw, -50.0px) auto 0;
    position: relative;
    width: min(78.50vw, 785.0px);
    z-index: 1;
    border: 1px solid #fff;
}

.img_caption p {
    font-size: min(2.40vw, 24.0px);
}

.text_gold_db {
    color: #f8efb7;
    font-size: min(3.50vw, 35.0px);
}

.why_text_area {
    font-family: var(--font_f_noto_sans);
    font-size: min(2.20vw, 22.0px);
    line-height: min(4.08vw, 40.8px);
}

.why_text1 {
    margin-bottom: min(6.90vw, 69.0px);
}

.why_text2 {
    text-align: center;
    margin-bottom: min(2.00vw, 20.0px);
}

.why_text3 {
    text-align: center;
    margin-top: min(2.00vw, 20.0px);
}


.text_orange {
    color: #ff8138;
    font-weight: 700;
}

.keywords_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(1.50vw, 15.0px);
    margin: min(4.00vw, 40.0px) 0;
}

.keyword {
    border: 1px solid #1b1b1b;
    padding: min(1.50vw, 15.0px) min(3.00vw, 30.0px);
    font-size: min(4.20vw, 42.0px);
    font-family: "Noto Serif JP", serif;
    background-color: #fefaf0;
}

.cross {
    font-size: 2rem;
    font-weight: 300;
}

@media (min-width: min(75.10vw, 751.0px)) {
    .pc_only {
        display: block;
    }
}

@media (max-width: 750px) {
    .pc_only {
        display: none;
    }

    .why {
        padding: min(8.00vw, 60.0px) 0;
    }

    .why_title_area {
        display: block;
        margin-bottom: min(13.07vw, 98.0px);
    }

    .circle_title {
        margin: auto;
    }

    .why_title_area h2 {
        font-size: min(6.40vw, 48.0px);
        margin-top: min(4.40vw, 33.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .why_title_area::after {
        bottom: max(-17.33vw, -130.0px);
    }

    .why_img_area {
        width: 100%;
    }

    .img_caption {
        width: min(92.93vw, 697.0px);
        margin-top: max(-8.00vw, -60.0px);
        padding: min(4.13vw, 31.0px) 0;
    }

    .img_caption p {
        font-size: min(4.00vw, 30.0px);
    }

    .text_gold_db {
        font-size: min(5.73vw, 43.0px);
    }

    .why_text_area {
        line-height: min(7.2vw, 54px);
    }

    .why_text1,
    .why_text2,
    .why_text3 {
        font-size: min(4.00vw, 30.0px);
    }

    .why_text1 {
        padding-left: min(8.00vw, 60.0px);
        padding-right: min(8.00vw, 60.0px);
        margin-bottom: min(7.60vw, 57.0px);
    }

    .why_text2 {
        margin-bottom: min(5.33vw, 40.0px);
        text-align: center;
    }

    .keywords_box {
        gap: min(0.67vw, 5.0px);
        margin: min(5.33vw, 40.0px) 0;
    }

    .keyword {
        font-size: min(5.60vw, 42.0px);
        padding: min(1.33vw, 10.0px) min(2.00vw, 15.0px);
    }

    .cross {
        font-size: min(5.60vw, 42.0px);
    }
}

/* About Section */
.about {
    background-color: #fff;
    padding: min(8.00vw, 80.0px) 0;
}

.about .section_title {
    text-align: center;
    color: #937435;
    font-size: min(5.00vw, 50.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 500;
    padding-top: min(10.00vw, 100.0px);
    margin-bottom: min(8.00vw, 80.0px);
}

/* Intro */
.about_intro {
    margin-bottom: min(20.60vw, 206.0px);
}

.intro_content {
    position: relative;
}

.intro_img {
    width: min(47.00vw, 470.0px);
    height: auto;
}

.intro_text {
    background: linear-gradient(180deg, #d8af5b, #8d6d2d);
    color: #fff;
    padding: min(5.80vw, 58.0px) min(4.00vw, 40.0px) min(4.70vw, 47.0px);
    position: absolute;
    top: 50%;
    right: 0;
    width: min(64.40vw, 644.0px);
}

.intro_lead {
    font-family: var(--font_f_noto_sans);
    font-size: min(2.20vw, 22.0px);
    line-height: min(4.08vw, 40.8px);
}

.intro_lead span {
    color: #f8efb7;
}

/* 4 OS Types */
.about_os_types {
    margin-bottom: min(7.00vw, 70.0px);
}

.about_os_types .section_title {
    font-size: min(4.00vw, 40.0px);
    line-height: min(5.00vw, 50.0px);
    margin-bottom: min(10.00vw, 100.0px);
}

.gold_num {
    font-size: min(8.00vw, 80.0px);
}

.os_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(2.00vw, 20.0px);
    max-width: min(100.00vw, 1000.0px);
    margin: 0 auto;
}

.os_card {
    position: relative;
    border: 1px solid #1b1b1b;
    text-align: center;
    padding: min(5.00vw, 50.0px) min(1.80vw, 18.0px) min(2.60vw, 26.0px);
    background-color: #fff;
}

.os_card::before {
    position: absolute;
    top: -2px;
    right: 0;
    content: '';
    width: 50%;
    height: 3px;
    background-color: #fff;
    z-index: 1;
}

.os_card::after {
    position: absolute;
    top: 0px;
    right: -2px;
    content: '';
    width: 3px;
    height: min(10.00vw, 100.0px);
    background-color: #fff;
    z-index: 1;
}

.os_header {
    position: absolute;
    top: max(-3.00vw, -30.0px);
    left: 50%;
    z-index: 2;
    width: min(19.70vw, 197.0px);
    background-color: #1b1b1b;
    color: #f8efb7;
    padding: min(1.20vw, 12.0px) 0;
    font-size: min(2.70vw, 27.0px);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.os_img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: min(2.10vw, 21.0px);
}

.os_img img {
    -o-object-fit: cover;
    object-fit: cover;
}

.os_desc {
    font-family: var(--font_f_noto_sans);
    font-size: min(2.00vw, 20.0px);
    line-height: min(3.10vw, 31.0px);
}

/* Diagram */
.about_diagram {
    text-align: center;
}

.venn_diagram {
    position: relative;
    width: min(60.80vw, 608.0px);
    height: auto;
    margin: 0 auto min(3.00vw, 30.0px);
}


.diagram_text {
    font-size: min(2.40vw, 24.0px);
    line-height: min(4.08vw, 40.8px);
    margin-bottom: min(5.00vw, 50.0px);
    font-weight: 600;
}

.cta_btn2 {
    display: block;
    width: min(40.00vw, 400.0px);
    height: auto;
    margin: auto;
}

/* Method Section */
.method {
    background-color: #fefaf0;
    padding: min(8.00vw, 80.0px) 0;
    text-align: center;
}

.method_header {
    margin-bottom: min(4.00vw, 40.0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(0.50vw, 5.0px);
}

.method_sub {
    font-size: min(4.00vw, 40.0px);
    font-weight: 500;
    line-height: 1.5;
}

.header_line {
    width: min(44.20vw, 442.0px);
    height: 1px;
    background-color: #1b1b1b;
}

.method_title {
    font-size: min(4.00vw, 40.0px);
    font-weight: 500;
    color: #b49d66;
}

.method_desc {
    font-size: min(2.20vw, 22.0px);
    line-height: min(4.08vw, 40.8px);
    margin-bottom: min(4.00vw, 40.0px);
}

.method_grid {
    display: flex;
    justify-content: center;
    gap: min(2.00vw, 20.0px);
    max-width: min(100.00vw, 1000.0px);
    margin: 0px auto min(2.00vw, 20.0px);
}

.method_item {
    width: 20%;
}

.method_note {
    font-size: min(1.20vw, 12.0px);
    text-align: right;
    width: 86%;
    margin: 0 auto min(3.00vw, 30.0px);
}

.method_caption {
    font-size: min(2.20vw, 22.0px);
    font-weight: 500;
}

/* Shared styles reused: .gold_sub, .header_line */

@media (max-width: 750px) {
    .method {
        padding: min(8.00vw, 60.0px) 0;
    }

    .method_sub {
        font-size: min(6.40vw, 48.0px);
    }

    .header_line {
        width: min(64.00vw, 480.0px);
    }

    .method_title {
        font-size: min(6.40vw, 48.0px);
    }

    .method_desc {
        width: min(81.60vw, 612.0px);
        margin: 0 auto min(10.93vw, 82.0px);
        font-size: min(4.00vw, 30.0px);
        line-height: min(7.20vw, 54.0px);
        text-align: left;
    }

    .method_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: min(6.67vw, 50.0px);
    }

    .method_item {
        width: min(28.53vw, 214.0px);
    }

    .method_item:nth-child(odd) {
        margin-left: auto;
    }

    .method_note {
        font-size: min(2.13vw, 16.0px);
        width: min(62.67vw, 470.0px);
    }

    .method_caption {
        font-size: min(4.00vw, 30.0px);
        line-height: min(7.20vw, 54.0px);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .os_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 750px) {
    .about {
        padding: min(11.07vw, 83.0px) 0;
    }

    .about .section_title {
        letter-spacing: min(0.27vw, 2px);
        padding-top: 0;
    }

    .about_intro {
        margin-bottom: min(57.87vw, 434.0px);
    }

    .intro_content {
        padding-left: min(4.00vw, 30.0px);
        padding-right: min(4.00vw, 30.0px);
    }

    .intro_img {
        width: min(79.60vw, 597.0px);
        z-index: 1;
        position: relative;
    }

    .intro_text {
        top: 90%;
        right: min(4.00vw, 30.0px);
        width: min(80.00vw, 600.0px);
        padding: min(6.13vw, 46.0px) min(5.33vw, 40.0px);
        z-index: 2;
    }

    .intro_lead {
        font-size: min(4.00vw, 30.0px);
        line-height: min(6vw, 45px);
    }

    .about_os_types .section_title {
        font-size: min(6.40vw, 48.0px);
        line-height: min(9.33vw, 70.0px);
        margin-bottom: min(13.34vw, 100px);
    }

    .os_grid {
        gap: min(13.33vw, 100.0px) min(5.34vw, 40px);
    }

    .os_card {
        width: min(35.33vw, 265.0px);
    }

    .os_card:nth-child(odd) {
        margin-left: auto;
    }

    .os_header {
        width: min(29.47vw, 221px);
        font-size: min(4.00vw, 30.0px);
    }

    .os_desc {
        font-size: min(2.93vw, 22.0px);
    }

    .venn_diagram {
        width: 95%;
        margin-bottom: min(2.67vw, 20.0px);
    }

    .diagram_text {
        font-size: min(5.07vw, 38.0px);
        line-height: min(9.12vw, 68.4px);
    }

    .cta_btn2 {
        width: min(92.00vw, 690.0px);
    }
}

/* Future Section */
.future {
    padding: min(8.00vw, 80.0px) 0 min(16.70vw, 167.0px);
    background-color: #fefaf0;
    text-align: center;
}

.future_title {
    width: min(56.00vw, 560.0px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(7.00vw, 70.0px);
}

.cv_card {
    background-color: #fff;
    max-width: min(79.10vw, 791.0px);
    margin: 0 auto min(6.00vw, 60.0px);
    box-shadow: min(1.00vw, 10.0px) min(0.40vw, 4.0px) min(2.90vw, 29.0px) rgba(0, 0, 0, 0.2);
}

.cv_card:last-child {
    margin-bottom: 0;
}

.cv_header {
    background-image: url(../dfe_images/bg2.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: min(2.00vw, 20.0px) 0;
    position: relative;
    overflow: hidden;
}

.cv_title {
    color: #c5ac79;
    /* Gold text */
    font-size: min(3.60vw, 36.0px);
    font-weight: 500;
    position: relative;
    /* Z-index above the shine */
    z-index: 1;
}

.cv_body {
    padding: min(4.00vw, 40.0px) min(6.00vw, 60.0px);
    text-align: left;
}

.future_list {
    list-style: disc;
    /* Image shows bullets */
    margin-left: min(3.30vw, 33.0px);
    margin-bottom: min(10.00vw, 100.0px);
}

.future_list li {
    font-size: min(2.40vw, 24.0px);
    line-height: 1.8;
    margin-bottom: min(1.00vw, 10.0px);
}

.cv_desc {
    text-align: center;
    font-size: min(2.70vw, 27.0px);
    line-height: min(4.10vw, 41.0px);
    margin-bottom: min(4.00vw, 40.0px);
}

.future_cta {
    text-align: center;
}

.cta_btn3 {
    position: static;
    transform: none;
    width: min(36.00vw, 360.0px);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    display: block;
    transition: opacity 0.3s;
    pointer-events: auto;
}

@media (max-width: 750px) {
    .future {
        padding: min(10.67vw, 80.0px) min(8.00vw, 60.0px) min(12.00vw, 90.0px);
    }

    .future_title {
        width: min(74.67vw, 560.0px);
    }

    .cv_card {
        max-width: unset;
        margin-bottom: min(8.00vw, 60.0px);
    }

    .cv_header {
        padding: min(2.00vw, 15.0px) 0;
    }

    .cv_title {
        font-size: min(4.67vw, 35.0px);
    }

    .cv_body {
        padding: min(4.00vw, 30.0px) min(4vw, 30px);
    }

    .future_list {
        margin-bottom: min(6.67vw, 50.0px);
    }

    .future_list li {
        font-size: min(3.20vw, 24.0px);
    }

    .cv_desc {
        font-size: min(3.20vw, 24.0px);
        margin-bottom: min(2.67vw, 20.0px);
    }

    .future_cta img {
        width: 100%;
    }

    .cta_btn3 {
        width: min(61.73vw, 463.0px);
    }
}


/* About DFE Section */
.about_dfe {
    padding: min(5.00vw, 50.0px) 0 min(8.20vw, 82.0px);
    background-color: #fff;
    text-align: center;
}

/* Certified Area */
.certified_area {
    margin-bottom: min(10.00vw, 100.0px);
}

.certified_header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.00vw, 20.0px);
    margin-bottom: min(5.00vw, 50.0px);
}

.cert_title {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 500;
}

.cert_dec_left,
.cert_dec_right {
    width: min(4.00vw, 40.0px);
}

.cert_sub {
    font-size: min(2.20vw, 22.0px);
    margin-bottom: min(4.00vw, 40.0px);
}

.cert_img_box {
    max-width: min(80.00vw, 800.0px);
    margin: max(-18.00vw, -180.0px) auto 0;
}

.cert_img_box img {
    width: 100%;
    vertical-align: bottom;
}

/* Not Suitable Area */
.ns_title {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 400;
    margin-bottom: min(4.00vw, 40.0px);
}

.ns_box {
    max-width: min(80.00vw, 800.0px);
    width: 100%;
    margin: 0 auto min(4.00vw, 40.0px);
}

.ns_footer {
    font-size: min(2.20vw, 22.0px);
}

@media (max-width: 750px) {
    .about_dfe {
        padding: min(8.00vw, 60.0px) 0;
    }

    .certified_area {
        margin-bottom: min(8.00vw, 60.0px);
    }

    .cert_title {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .cert_sub {
        font-size: min(4.00vw, 30.0px);
        margin-bottom: min(5.34vw, 40px);
    }

    .cert_dec_left,
    .cert_dec_right {
        width: min(3.33vw, 25.0px);
    }

    .ns_title {
        font-size: min(5.33vw, 40.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .ns_box {
        padding: min(4.00vw, 30.0px) min(2.67vw, 20.0px);
        width: min(84.13vw, 631.0px);
        margin-left: auto;
        margin-right: auto;
    }

    .ns_list li {
        font-size: 0.95rem;
    }

    .ns_footer {
        font-size: min(4.00vw, 30.0px);
    }

    .cert_img_box {
        max-width: unset;
    }
}


/* Loadmap Section */
.loadmap {
    background-color: #fefaf0;
    padding: min(8.00vw, 80.0px) 0;
}

.loadmap_header {
    text-align: center;
    margin-bottom: min(5.00vw, 50.0px);
}

.loadmap_sub {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    color: #937435;
}

.loadmap_title {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 500;
}

.roadmap_grid {
    display: flex;
    justify-content: center;
    gap: min(2.00vw, 20.0px);
    margin-bottom: min(3.00vw, 30.0px);
}

.roadmap_item {
    width: 22%;
}

.roadmap_year {
    color: #fff;
    font-size: min(2.90vw, 29.0px);
    text-align: center;
    padding: min(1.50vw, 15.0px) 0;
    margin-bottom: min(1.00vw, 10.0px);
}

.roadmap_year span {
    font-size: min(3.90vw, 39.0px);
}

.year1 {
    background-color: #d3b984;
}

.year2 {
    background-color: #d8af5b;
}

.year3 {
    background-color: #937435;
}

.roadmap_content {
    position: relative;
    height: min(26.40vw, 264.0px);
    border: 1px solid #1b1b1b;
    padding: min(1.00vw, 10.0px) 0px;
    text-align: center;
}

.roadmap_content::before {
    position: absolute;
    top: -2px;
    right: 0;
    content: '';
    width: 80%;
    height: 3px;
    background-color: #fefaf0;
    z-index: 1;
}

.roadmap_content::after {
    position: absolute;
    top: 0px;
    right: -2px;
    content: '';
    width: 3px;
    height: 40%;
    background-color: #fefaf0;
    z-index: 1;
}

.rm_upper {
    font-size: min(2.20vw, 22.0px);
    color: #b59858;
    line-height: 1.6;
    margin-bottom: min(2.00vw, 20.0px);
    font-family: serif;
    font-weight: 500;
}

.rm_line {
    width: 80%;
    margin: 0 auto min(2.00vw, 20.0px);
    border-top: 1px solid #707070;
}

.rm_lower {
    font-size: min(2.00vw, 20.0px);
    line-height: 1.6;
}

.roadmap_connector {
    text-align: center;
    font-size: min(1.60vw, 16.0px);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: min(1.20vw, 12.0px);
    margin-bottom: max(-3.00vw, -30.0px);
}

.roadmap_goal {
    width: min(68.20vw, 682.0px);
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(270deg, #d8af5b, #8d6d2d);
    padding: min(3.30vw, 33.0px) 0 min(2.50vw, 25.0px);
    text-align: center;
    color: #fff;
    font-size: min(2.40vw, 24.0px);
    line-height: min(4.10vw, 41.0px);
    margin-bottom: min(6.00vw, 60.0px);
}

.roadmap_cta {
    text-align: center;
}

@media (max-width: 750px) {
    .loadmap {
        padding: min(10.67vw, 80.0px) min(4.00vw, 30.0px);
    }

    .loadmap_header {
        margin-bottom: min(13.33vw, 100.0px);
    }

    .loadmap_sub {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .loadmap_title {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .roadmap_grid {
        gap: min(2.80vw, 21.0px);
    }

    .roadmap_item {
        width: 100%;
    }

    .roadmap_connector {
        font-size: min(2.67vw, 20.0px);
        margin-bottom: max(-2.67vw, -20.0px);
    }

    .roadmap_goal {
        width: 100%;
        font-size: min(4.00vw, 30.0px);
        padding: min(4.00vw, 30.0px) min(2.67vw, 20.0px);
        line-height: min(6.00vw, 45.0px);
        margin-bottom: 0px;
    }

    .roadmap_cta {
        display: none;
    }
}


/* Limited Section */
.limited {
    padding: min(8.00vw, 80.0px) 0;
    background-color: #fff;
    text-align: center;
}

.limited_title {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 400;
    margin-bottom: min(9.40vw, 94.0px);
}

.gold_text {
    color: #937435;
}

.limited_desc {
    font-size: min(2.40vw, 24.0px);
    margin-bottom: min(6.00vw, 60.0px);
}

.limited_list {
    max-width: min(90.00vw, 900.0px);
    margin: 0 auto;
    text-align: left;
}

.limited_item {
    display: flex;
    justify-content: space-between;
    padding: min(4.00vw, 40.0px) 0;
    border-bottom: 1px solid #ccc;
}

.limited_content {
    width: 51%;
}

.limited_img {
    width: 38%;
}

.limited_img img {
    width: 100%;
    height: auto;
    /* No shadow or border radius shown in image? */
}

.lim_item_title {
    font-size: min(3.20vw, 32.0px);
    color: #937435;
    margin-bottom: min(4.70vw, 47.0px);
    font-weight: 600;
}

.lim_item_text {
    font-size: min(2.60vw, 26.0px);
    font-weight: 600;
}

.limited_footer_text {
    margin-top: min(6.00vw, 60.0px);
    font-size: min(2.20vw, 22.0px);
    line-height: min(4.00vw, 40.0px);
}

.lim_item_text_space_sp {
    display: none;
}

@media (max-width: 750px) {
    .limited {
        padding: min(12.00vw, 90.0px) 0 min(8.53vw, 64.0px);
    }

    .limited_title {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
        margin-bottom: min(8.00vw, 60.0px);
    }

    .limited_desc {
        font-size: min(4.00vw, 30.0px);
        line-height: min(6.00vw, 45.0px);
    }

    .limited_list {
        width: min(90.00vw, 675.0px);
        margin: auto;
    }

    .limited_item {
        padding: min(4.00vw, 30.0px) 0;
        gap: min(2.67vw, 20.0px);
    }

    .limited_content {
        width: min(52.27vw, 392.0px);
    }

    .limited_img {
        width: min(34.93vw, 262.0px);
    }

    .lim_item_title {
        font-size: min(4.53vw, 34.0px);
        line-height: min(8.16vw, 61.2px);
    }

    .limited_footer_text {
        font-size: min(4.00vw, 30.0px);
        line-height: min(6vw, 45px);
        text-align: center;
    }

    .lim_item_text {
        font-size: min(4vw, 30px);
    }

    .lim_item_text_space_sp {
        display: inline;
    }

    .lim_item_text_space_pc {
        display: none;
    }
}


/* Merit Section */
.merit {
    background-image: url(../dfe_images/bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: min(8.00vw, 80.0px) 0;
    color: #fff;
}

.merit_header {
    text-align: center;
    margin-bottom: min(8.00vw, 80.0px);
}

.merit_sub {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    color: #d3b984;
}

.merit_title {
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    margin-bottom: min(5.00vw, 50.0px);
    font-weight: 400;
}

.merit_desc {
    font-size: min(2.40vw, 24.0px);
    line-height: min(3.70vw, 37.0px);
    text-align: left;
}


.merit_item {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: min(13.00vw, 130.0px);
}

.merit_content {
    width: 44%;
    position: relative;
    z-index: 2;
    padding-top: min(10.00vw, 100.0px);
}

.merit_img {
    display: flex;
    align-items: start;
    width: 47%;
    position: relative;
    z-index: 1;
}

.merit_img img {
    width: 100%;
    height: auto;
    /* Allow auto height to maintain aspect ratio */
    -o-object-fit: cover;
    object-fit: cover;
}

/* Number and Title Area */
.merit_title_area {
    display: flex;
    align-items: flex-end;
    /* Align bottom */
    margin-bottom: min(2.00vw, 20.0px);
    position: relative;
}

/* Even Items Title Alignment */
.item_even .merit_title_area {
    flex-direction: row;
    /* Keep row, but maybe adjust text align? */
    /* Wait, for even items (Content Right), we usually want the number on the left of the text still? 
       Or reversed? The design usually keeps Number Left, Text Right. 
       Let's stick to standard flow inside the content box.
    */
}

.merit_num_box {
    position: relative;
    margin-right: min(2.00vw, 20.0px);
}

.item_even .merit_num_box {
    margin-left: min(2.00vw, 20.0px);
    margin-right: 0px;
}

.merit_num_box::after {
    position: absolute;
    top: min(20.50vw, 205.0px);
    left: 50%;
    content: '';
    width: 1px;
    height: min(30.00vw, 300.0px);
    background-color: #d3b984;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.m_num {
    font-size: min(6.00vw, 60.0px);
    /* Increased size */
    color: #d3b984;
    line-height: 0.8;
    border-bottom: 1px solid #d3b984;
}

.m_v_text {
    display: flex;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: min(2.80vw, 28.0px);
    color: #d3b984;
    margin: min(3.00vw, 30.0px) auto 0;
}

.merit_content h3 {
    font-size: min(3.20vw, 32.0px);
    font-weight: 500;
    line-height: 1.4;
    font-family: serif;
    padding-bottom: min(0.50vw, 5.0px);
}

/* White Box containing list */
.merit_box {
    background-color: #fff;
    color: #1b1b1b;
    padding: min(5.50vw, 55.0px) min(8.00vw, 80.0px);
    box-shadow: 0 min(0.50vw, 5.0px) min(1.50vw, 15.0px) rgba(0, 0, 0, 0.1);
    width: 95%;
    bottom: max(-5.00vw, -50.0px);
    position: absolute;
}

.item_even .merit_box {
    right: 0;
    display: flex;
    justify-content: end;
}

.merit_box ul {
    width: min(43.50vw, 435.0px);
    list-style: none;
}

.merit_box ul li {
    font-size: min(2.20vw, 22.0px);
    /* Fixed px size */
    line-height: 1.6;
    margin-bottom: min(1.50vw, 15.0px);
    padding-left: 1em;
    text-indent: -1em;
}

.merit_box ul li::before {
    content: "・";
    font-weight: bold;
}

.merit_box ul li:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 750px) {
    .merit {
        padding: min(12.00vw, 90.0px) 0;
    }

    .merit_header {
        margin-bottom: min(8.00vw, 60.0px);
    }

    .merit_sub {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
    }

    .merit_title {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
        margin-bottom: min(8.00vw, 60.0px);
    }

    .merit_desc {
        width: 100%;
        font-size: min(4.00vw, 30.0px);
        line-height: min(7.20vw, 54.0px);
        text-align: center;
    }

    .merit_list {
        padding-left: min(8.00vw, 60.0px);
    }

    .merit_item {
        width: min(88.00vw, 660.0px);
        margin-bottom: min(26.67vw, 200.0px);
        align-items: flex-start;
        gap: 0;
    }

    .merit_num_box::after {
        top: min(20.00vw, 150.0px);
        height: min(36.00vw, 270.0px);
    }

    /* Stack Order: Image Top, Content Bottom */
    .merit_img {
        width: 48%;
    }

    .merit_img img {
        width: min(33.73vw, 253.0px);
    }

    .merit_content {
        width: 50%;
        padding-top: min(4.00vw, 30.0px);
    }

    .merit_title_area {
        margin-bottom: min(2.67vw, 20.0px);
    }

    .merit_box ul {
        width: min(38.93vw, 292.0px);
    }

    .merit_content h3 {
        font-size: min(4.00vw, 30.0px);
        line-height: min(7.20vw, 54.0px);
    }

    .m_num {
        font-size: min(5.20vw, 39.0px);
    }

    .m_v_text {
        font-size: min(2.40vw, 18.0px);
    }

    .merit_box {
        width: 95%;
        margin-left: 0;
        margin-right: 0;
        padding: min(2.93vw, 22.0px) min(4.00vw, 30.0px);
        bottom: max(-20.00vw, -150.0px);
    }

    .item_even .merit_box {
        margin-left: 0;
    }

    .merit_box ul li {
        font-size: min(2.67vw, 20.0px);
        line-height: 1.5;
    }
}


/* Difference Section */
.difference {
    background-color: #fefaf0;
    padding: min(8.00vw, 80.0px) 0;
}

.difference_title {
    text-align: center;
    font-size: min(4.00vw, 40.0px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 500;
    margin-bottom: min(6.00vw, 60.0px);
}

.difference_grid {
    display: flex;
    justify-content: center;
    gap: min(4.00vw, 40.0px);
    margin-bottom: min(6.00vw, 60.0px);
}

.diff_card {
    width: 42%;
}

.diff_header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(7.50vw, 75.0px);
    padding: min(1.80vw, 18.0px) 0;
    text-align: center;
    font-size: min(4.00vw, 40.0px);
    color: #fff;
    margin-bottom: min(1.70vw, 17.0px);
}

.diff_card.other .diff_header {
    background-color: #8d8d8d;
}

.diff_card.dfe .diff_header {
    font-size: min(3.30vw, 33.0px);
    background: url(../dfe_images/diff_bg.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.diff_body {
    height: min(58.00vw, 580.0px);
    padding: min(4.00vw, 40.0px) min(3.00vw, 30.0px) min(4.00vw, 40.0px);
    position: relative;
    border: 1px solid #1b1b1b;
}

.diff_body::before {
    position: absolute;
    top: -2px;
    right: 0;
    content: '';
    width: 90%;
    height: 3px;
    background-color: #fefaf0;
    z-index: 1;
}

.diff_body::after {
    position: absolute;
    top: 0px;
    right: -2px;
    content: '';
    width: 3px;
    height: min(15.00vw, 150.0px);
    background-color: #fefaf0;
    z-index: 1;
}

.diff_list {
    list-style: none;
    margin-bottom: min(3.00vw, 30.0px);
}

.diff_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: min(3.00vw, 30.0px);
    font-size: min(2.40vw, 24.0px);
    line-height: min(4.50vw, 45.0px);
    font-weight: 500;
}

.diff_icon {
    width: min(3.30vw, 33.0px);
    height: min(3.30vw, 33.0px);
    margin-top: min(1.00vw, 10.0px);
    margin-right: min(2.20vw, 22.0px);
    flex-shrink: 0;
}

.diff_img {
    text-align: center;
}

.diff_img img {
    margin: 0 auto;
    width: 80%;
    /* adjust based on image natural size vs card */
}

.diff_img2 img {
    margin: 0 auto;
    width: 100%;
    /* adjust based on image natural size vs card */
}


.diff_cta_area {
    text-align: center;
}

.mt60 {
    margin-top: min(6.00vw, 60.0px);
}

@media (max-width: 750px) {
    .difference {
        padding: min(12.00vw, 90.0px) 0;
    }

    .difference_title {
        font-size: min(6.40vw, 48.0px);
        letter-spacing: min(0.27vw, 2px);
        margin-bottom: min(10.67vw, 80.0px);
    }

    .difference_grid {
        flex-direction: column;
        gap: min(6.67vw, 50.0px);
        margin-bottom: min(10.67vw, 80.0px);
    }

    .diff_card {
        width: min(65.33vw, 490.0px);
        margin: auto;
    }

    .diff_header {
        font-size: min(6.13vw, 46.0px);
        margin-bottom: min(2.67vw, 20.0px);
    }

    .diff_card.dfe .diff_header {
        font-size: min(5.07vw, 38.0px);
    }

    .diff_body {
        height: min(80vw, 600px);
        padding: min(4.00vw, 30.0px) min(2.67vw, 20.0px) 0;
    }

    .diff_body::before {
        width: 80%;
    }

    .diff_body::after {
        height: 40%;
    }

    .diff_list li {
        font-size: min(4.53vw, 34.0px);
        line-height: min(6.67vw, 50px);
    }

    .diff_icon {
        width: min(5.07vw, 38.0px);
        height: min(5.07vw, 38.0px);
        margin-top: min(0.93vw, 7.0px);
        margin-right: min(3.47vw, 26.0px);
    }

    .diff_img img {
        width: 70%;
    }
}


/* Achievements Section */
.achievements {
    background: rgba(115, 115, 115, 0.2);
    padding: min(8.00vw, 80.0px) 0;
}

.achievements .inner {
    padding: min(6.00vw, 60.0px);
    background-color: #fff;
}

.achievements_title_area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.00vw, 20.0px);
    margin-bottom: min(5.00vw, 50.0px);
}

.achievements_title_area h2 {
    font-size: min(8.20vw, 82.0px);
    font-family: serif;
    color: #b59858;
    font-weight: 500;
    letter-spacing: min(1vw, 10px);
}

.leaf_deco {
    width: min(3.00vw, 30.0px);
    height: auto;
}

.achievements_intro {
    max-width: min(100.00vw, 1000.0px);
    margin: 0 auto min(6.00vw, 60.0px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: min(4.00vw, 40.0px);
}

.intro_text_area {
    width: 53%;
}

.kddi_box {
    background: linear-gradient(180deg, #d8af5b, #8d6d2d);
    color: #fff;
    padding: min(3.50vw, 35.0px) min(2.00vw, 20.0px);
    font-size: min(3.80vw, 38.0px);
    font-family: "Noto Serif JP", serif;
    margin-bottom: min(3.00vw, 30.0px);
    text-align: center;
}

.intro_desc {
    font-size: min(2.00vw, 20.0px);
    line-height: min(3.70vw, 37.0px);
    margin-bottom: 0;
    text-align: center;
}

.intro_img_box {
    width: 37%;
}

.intro_img_box img {
    box-shadow: 0 min(0.50vw, 5.0px) min(1.50vw, 15.0px) rgba(0, 0, 0, 0.1);
    margin-bottom: min(1.00vw, 10.0px);
}


.img_caption2 {
    font-size: min(1.80vw, 18.0px);
    text-align: center;
}


.voice_item {
    display: flex;
    margin-bottom: min(8.40vw, 84.0px);
}

.voice_item:last-child {
    margin-bottom: 0;
}

.voice_num {
    background-color: #d4c084;
    color: #fff;
    width: min(10.00vw, 100.0px);
    height: min(10.00vw, 100.0px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.v_label {
    font-size: min(2.00vw, 20.0px);
    line-height: 1;
}

.v_count {
    font-size: min(6.10vw, 61.0px);
    line-height: 1;
}

.voice_content {
    flex-grow: 1;
}

.voice_title {
    display: flex;
    align-items: center;
    width: auto;
    height: min(10.00vw, 100.0px);
    background-color: #1b1b1b;
    color: #fff;
    padding: min(1.00vw, 10.0px) min(2.80vw, 28.0px);
    font-size: min(3.20vw, 32.0px);
    font-weight: 400;
    margin-bottom: min(2.00vw, 20.0px);
}

.voice_text {
    font-size: min(2.40vw, 24.0px);
}

@media (max-width: 750px) {
    .achievements {
        padding: min(9.33vw, 70.0px) min(4.00vw, 30.0px);
    }

    .achievements .inner {
        padding: min(6.67vw, 50.0px) min(4.00vw, 30.0px);
    }

    .achievements_title_area {
        margin-bottom: min(2.67vw, 20.0px);
    }

    .achievements_title_area h2 {
        font-size: min(9.33vw, 70.0px);
        letter-spacing: min(1.34vw, 10px);
    }

    .achievements_intro {
        flex-direction: column;
        gap: min(6.80vw, 51.0px);
    }

    .intro_text_area {
        width: 100%;
        padding-top: 0;
    }

    .kddi_box {
        background: linear-gradient(270deg, #d8af5b, #8d6d2d);
        font-size: min(4.80vw, 36.0px);
        padding: min(5.33vw, 40.0px) 0;
        margin-bottom: min(5.60vw, 42.0px);
    }

    .intro_desc {
        font-size: min(4.00vw, 30.0px);
        text-align: center;
        line-height: min(6vw, 45px);
    }

    .intro_img_box {
        width: min(47.07vw, 353.0px);
        margin-left: auto;
        margin-right: auto;
    }


    .img_caption2 {
        font-size: min(2.67vw, 20.0px);
    }

    .voice_item {
        margin-bottom: min(6.93vw, 52.0px);
    }

    .voice_num {
        width: min(9.33vw, 70.0px);
        height: min(9.33vw, 70.0px);
    }

    .v_label {
        font-size: min(1.87vw, 14.0px);
    }

    .v_count {
        font-size: min(5.73vw, 43.0px);
    }

    .voice_title {
        height: min(9.33vw, 70.0px);
        font-size: min(4.00vw, 30.0px);
        line-height: min(6.00vw, 45.0px);
        padding: min(2.67vw, 20.0px);
        margin-bottom: min(1.73vw, 13.0px);
    }

    .voice_item:nth-child(4) .voice_num,
    .voice_item:nth-child(5) .voice_num,
    .voice_item:nth-child(6) .voice_num,
    .voice_item:nth-child(7) .voice_num {
        height: min(14.67vw, 110.0px);
    }

    .voice_item:nth-child(4) .voice_title,
    .voice_item:nth-child(5) .voice_title,
    .voice_item:nth-child(6) .voice_title,
    .voice_item:nth-child(7) .voice_title {
        height: min(14.67vw, 110.0px);
    }

    .voice_text {
        font-size: min(2.93vw, 22.0px);
    }
}

footer {
    padding-top: min(5vw, 50px);
    padding-bottom: min(5vw, 50px);
    background-color: #1b1b1b;
}

.footer_link_box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: min(1vw, 10px);
}

.footer_link {
    font-family: var(--font_f_noto_sans);
    font-size: min(2vw, 20px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 300;
    line-height: 1;
    color: #fff;
    padding: 0 min(1.5vw, 15px);
    text-decoration: none;
}

.footer_link:nth-child(n+2) {
    border-left: min(0.1vw, 1px) solid #fff;
}

footer small {
    display: block;
    width: 100%;
    font-family: var(--font_f_noto_sans);
    font-size: min(1.8vw, 18px);
    letter-spacing: min(0.2vw, 2px);
    font-weight: 300;
    color: #fff;
    text-align: center;
}

@media (max-width: 750px) {
    footer {
        padding-top: min(6.67vw, 50px);
        padding-bottom: min(6.67vw, 50px);
    }

    .footer_link_box {
        margin-bottom: min(2.67vw, 20px);
    }

    .footer_link {
        font-size: min(2.67vw, 20px);
        letter-spacing: min(0.27vw, 2px);
        padding: 0 min(2vw, 15px);
    }

    .footer_link:nth-child(n+2) {
        border-left: min(0.14vw, 1px) solid #fff;
    }

    footer small {
        font-size: min(2.4vw, 18px);
        letter-spacing: min(0.27vw, 2px);
    }

}