/* Foundation */
:root {
    --color-primary: #008f97;
    --color-primary-dark: #007077;
    --color-secondary: #ce4435;
    --color-secondary-dark: #b33733;
    --color-background: #f5f5f5;
    --color-background-dark: #f0f0f0;
    --color-background-darkest: #e7e7e7;
    --color-background-blue: #edf3f4;
    --color-background-blue-dark: #d9e0e0;
    --color-border: #cfd3d3;
    --color-brown: #321e13;
    --color-black: #151515;
    --color-black-75: rgba(21, 21, 21, 0.75);
    --color-gray: #3c3c3c;
    --color-gray-light: #797979;
    --color-gray-lightest: #b3b3b3;
    --color-white: #ffffff;
    --color-white-75: rgba(255, 255, 255, 0.75);
    --color-red: #f00000;
    --color-line-brand: #06c755;
    --color-rating-star: #d8c600;
    --font-family-ja: "Hiragino Kaku Gothic ProN", sans-serif;
    --font-family-en: "Roboto", sans-serif;
    --font-family-manrope: "Manrope", sans-serif; /* Added Manrope */
}


/* Layout */
.l-container {
    width: 100%;
    max-width: 390px; /* Mobile width from Figma */
    margin-left: auto;
    margin-right: auto;
}

.l-inner {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100vw;
    overflow: hidden;
}


.l-content_area {
    padding-top: 40px;
    padding-bottom: 40px;
}

.l-content_section {
        margin-bottom: 32px;
}
.l-content_section:last-child {
        margin-bottom: 0;
}

/* Object/Component */

/* Hero Section */
.c-hero {
    position: relative;
    width: 100%;
    height: auto; /* Adjust based on content */
    overflow: hidden; /* Contains the marquee text */
}

.c-hero_image_wrapper {
        position: relative;
        width: 100%;
        padding-top: 66.66%; /* Aspect ratio 260/390 */
}

.c-hero_image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.c-hero_note {
    position: absolute;
    top: 9px;  /* -3246 - (-3255) */
    right: 9px; /* (6778 + 390) - (7055 + 102) */
    background-color: #da0f0f; /* Approx from RGB */
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    width: 102px; /* Fixed width */
    height: 50px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-hero_note_text {
    font-family: var(--font-family-ja);
    font-weight: 600;
    font-size: 0.625rem; /* 10px */
    line-height: 1.5; /* Auto -> 1.5 */
    letter-spacing: 0;
}

.c-hero_marquee {
    position: absolute;
    bottom: 10px; /* -3057 - (-3255 - 260) = 58px from top -> adjust based on image */
    left: 0;
    width: 100%;
    display: flex; /* Handle multiple text elements for marquee effect */
    align-items: center;
    white-space: nowrap; /* Prevent text wrapping */
        /* For actual marquee, you'd need animation */
    padding-left: 16px; /* Match content padding */
    padding-right: 16px; /* Match content padding */
    overflow: hidden; /* Clip overflowing text */
    max-width: 100vw;
    overflow: hidden;
}

.c-hero_marquee_text {
    font-family: var(--font-family-manrope);
    font-weight: 200; /* ExtraLight */
    font-size: 1.6rem; /* 40px */
    color: #d9e0e0; /* Approximate color from Figma */
    letter-spacing: 0.01em; /* 1% */
    line-height: 1.3; /* 130% */
    display: inline-block; /* Needed for spacing */
    padding-right: 20px; /* Spacing between repeated text */
}

.c-hero_decor_icon {
    width: 28px;
    height: 31px; /* Approximate */
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px; /* Spacing from text */
    margin-right: 20px; /* Spacing from text */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Add styles for the animation wrapper */
.c-hero_marquee_content {
    display: flex;
    width: max-content; /* Ensure content doesn't wrap and takes full width */
    will-change: transform; /* Optimize animation performance */
    animation: marquee 30s linear infinite; /* Apply the animation */
}

/* Define the marquee animation */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%); /* Move left by half the total width (since content is duplicated) */
    }
}

/* Content Section */
.c-section_header {
    margin-bottom: 32px; /* Spacing from figma */
}

.c-section_header_concept {
    font-family: var(--font-family-en);
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    color: var(--color-primary);
    letter-spacing: 0.01em; /* 1% */
    line-height: 1.6; /* 160% */
    margin-bottom: 8px; /* Spacing from figma */
}

.c-section_header_title {
    font-family: var(--font-family-ja);
    font-weight: 600;
    font-size: 1.625rem; /* 26px */
    letter-spacing: 0.02em; /* 2% */
    line-height: 1.5; /* 150% */
    color: var(--color-black);
}

.c-media_block {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text left */
    margin-bottom: 32px;
    position: relative; /* For absolute positioning of images if needed */
    min-height: 260px; /* Height from Frame 632946 */
}

.c-media_block_text {
        font-family: var(--font-family-ja);
        font-weight: 300;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.02em; /* 2% */
        line-height: 2; /* 200% */
        color: var(--color-black);
        margin-bottom: 16px; /* Default spacing */
        margin-left: 63px; /* 6841 - 6778 */
        width: calc(100% - 63px - 16px); /* Adjust width based on position */
        margin-top: 32px; /* 2783 - 2815 */
}

.c-media_block_image_1 {
    position: absolute;
    top: 0; /* -2815 relative to -2815 */
    right: 0; /* 7023 + 147 = 7170; container end 6778+390 = 7168 -> approx right:0 */
    width: 147px;
    height: 195px;
}
.c-media_block_image_2 {
    position: absolute;
    bottom: 0; /* -2687 + 132 = -2555 ; container end -2815 + 260 = -2555 */
    left: 0; /* 6778 relative to 6778 */
    width: 191px;
    height: 132px;
}

.c-text_block {
    font-family: var(--font-family-ja);
    font-weight: 300;
    font-size: 1rem; /* 16px */
    letter-spacing: 0.02em; /* 2% */
    line-height: 2; /* 200% */
    color: var(--color-black);
    margin-left: 48px; /* 6840 - 6778 */
    width: calc(100% - 48px - 16px); /* Approximate */
}

.c-text_block--emphasis {
    font-family: var(--font-family-ja);
    font-weight: 600; /* W6 */
    font-size: 1rem; /* 16px */
    letter-spacing: 0.02em; /* 2% */
    line-height: 2; /* 200% */
    color: var(--color-primary);
    margin-top: 24px; /* spacing */
    margin-bottom: 24px; /* spacing */
}

.c-image_single {
    display: block;
    margin-left: 48px; /* 6840 - 6778 */
    margin-top: 24px; /* Approximate spacing */
    margin-bottom: 24px; /* Approximate spacing */
    width: 310px;
    height: 149px;
}

.c-text_group {
    margin-left: 48px; /* 6840 - 6778 */
    width: calc(100% - 48px - 16px); /* Approximate */
}
.c-text_group p {
    font-family: var(--font-family-ja);
    font-weight: 300;
    font-size: 1rem; /* 16px */
    letter-spacing: 0.02em; /* 2% */
    line-height: 2; /* 200% */
    color: var(--color-black);
    margin-bottom: 16px; /* Spacing from figma */
}
.c-text_group p:last-child {
    margin-bottom: 0;
}

.c-image_pair {
    display: flex;
    justify-content: flex-start; /* Align left */
    align-items: flex-start; /* Align top */
    margin-top: 24px; /* Approximate */
    margin-bottom: 24px; /* Approximate */
    padding-left: 17px; /* 6795 - 6778 */
    gap: 19px; /* 6996 - (6795 + 220) = -19 ?? -> check spacing. Looks like overlap or adjacent. Let's use a small gap. */
}

.c-image_pair_item_1 {
        width: 220px;
        height: 143px;
        flex-shrink: 0;
}

.c-image_pair_item_2 {
        width: 156px;
        height: 113px;
        flex-shrink: 0;
        margin-top: 46px; /* 1982 - 1936 */
}

.c-logo {
    display: block;
    width: 267px;
    /* height: 39px; */
}

/* Button Group */
.c-button_group {
    background-color: var(--color-background-dark);
    padding: 32px 16px;
}

.c-button_row {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* Spacing from figma */
    margin-bottom: 8px; /* Spacing from figma */
}

.c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-lightest); /* Approx from figma */
    border-radius: 4px;
    padding: 11px 15px; /* (46 - 22)/2 = 12 top/bottom, 16 left/right adjusted slightly */
    font-family: var(--font-family-ja);
    font-weight: 600;
    font-size: 0.875rem; /* 14px */
    line-height: 1.6; /* 160% */
    letter-spacing: 0.02em; /* 2% */
    color: var(--color-black);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    width: 100%; /* Default full width */
}

.c-button--half {
        flex: 1 1 calc(50% - 4px); /* Take half width considering gap */
        width: auto; /* Override default */
}

.c-button .material-icons {
    font-size: 1.25em; /* Adjust icon size */
    margin-left: 12px; /* Spacing from figma */
    vertical-align: middle;
}

.c-button:hover {
        background-color: var(--color-gray-lightest);
        color: var(--color-white);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .l-container {
        max-width: 960px; /* Example PC width */
    }

    .l-inner {
        padding-left: 32px;
        padding-right: 32px;

    }

    .c-hero_marquee_text {
        font-size: 3rem; /* Increase font size slightly on PC */
    }

    .c-section_header_title {
        font-size: 2rem; /* 32px */
    }

    .c-media_block {
            flex-direction: row;
            align-items: center;
            margin-bottom: 40px;
            min-height: auto; /* Reset min-height */
            position: static; /* Reset positioning context */
    }

        .c-media_block_text {
            margin-left: 0;
            width: auto;
            margin-top: 0;
            margin-bottom: 0;
            order: 1; /* Text first */
            flex-basis: 50%; /* Example width */
            padding-right: 20px;
        }

        .c-media_block_images {
            order: 2;
            flex-basis: 50%; /* Example width */
            position: relative; /* Context for image positioning */
            min-height: 260px; /* Maintain relative height */
        }

        .c-media_block_image_1 {
            position: absolute; /* Keep absolute for overlap */
            top: 0;
            right: 0;
        }
        .c-media_block_image_2 {
            position: absolute; /* Keep absolute for overlap */
            bottom: 0;
            left: 0;
        }

    .c-text_block,
    .c-image_single,
    .c-text_group {
        margin-left: auto;
        margin-right: auto;
        width: 80%; /* Center content more */
        max-width: 600px; /* Limit width */
    }

    .c-image_pair {
        justify-content: center; /* Center on PC */
        padding-left: 0;
        gap: 30px;
    }
        .c-image_pair_item_2 {
            margin-top: 0; /* Align top on PC */
        }

    .c-button_group {
        padding: 40px 32px;
    }

        .c-button_row {
            justify-content: center; /* Center buttons on PC */
            margin-bottom: 16px;
        }

    .c-button {
        width: auto; /* Auto width for buttons */
        min-width: 200px; /* Ensure minimum size */
    }

        .c-button--half {
            flex: 0 1 auto; /* Don't force 50% width */
        }

        .c-button--full {
            display: inline-block; /* Allow centering */
            margin-left: auto;
            margin-right: auto;
            width: auto;
            min-width: 300px;
        }
}


.l-features {
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 100vw;
    overflow: hidden;
}

.l-rules {
     padding-bottom: 40px;
}

@media (min-width: 768px) { /* CSS変数置換: --breakpoint-md */
     .l-container {
        max-width: 960px; /* Desktop max width */
        padding-left: 20px;
        padding-right: 20px;
     }
    .l-features {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .l-rules {
        padding-bottom: 60px;
    }
}

/* Component */
.c-heading_xxlg {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* CSS変数置換 */
    font-size: 24px; /* 2.4rem * 10 = 24px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #151515; /* CSS変数置換: --color-black */
    text-align: left;
    margin-bottom: 20px;
    /* Mobile height 76px, Adjust padding based on line-height */
    /* 2.4rem * 1.6 -> 24px * 1.6 = 38.4px */
    padding-top: calc((76px - (24px * 1.6)) / 2); /* Approx 18.8px */
    padding-bottom: calc((76px - (24px * 1.6)) / 2); /* Approx 18.8px */
}
.c-heading_xxlg.text-center {
    text-align: center;
}
 @media (min-width: 768px) { /* CSS変数置換: --breakpoint-md */
    .c-heading_xxlg {
         font-size: 30px; /* 3.0rem * 10 = 30px */
         text-align: center; /* Center align for Desktop */
         margin-bottom: 40px;
         padding-top: 0; /* Reset padding for Desktop */
         padding-bottom: 0;
    }

 }

.c-feature_list {
    display: grid;
    padding-left: 1em;
    padding-right: 1em;
    gap: 40px; /* Spacing between items on Mobile */
}
@media (min-width: 768px) { /* CSS変数置換: --breakpoint-md */
    .c-feature_list {
        gap: 60px; /* Increase spacing for Desktop */
    }
}


.c-feature_item {
    position: relative;
}

/* --- Mobile specific styles --- */
.c-feature_item__content {
    /* Mobile: Header and Image arrangement handled inside this block */
}

.c-feature_item__header {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 8px;
    gap: 8px;
}

.c-feature_item__num_wrap {
    padding-top: 4px; /* Align number visually */
    flex-shrink: 0;
}

.c-feature_item__num {
    font-family: "Roboto", sans-serif; /* CSS変数置換 */
    font-size: 32px; /* 3.2rem * 10 = 32px */
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #3c3c3c; /* CSS変数置換: --color-gray */
    margin-right: 8px; /* Space between number and border */
}

.c-feature_item__heading_border {
    width: 31px;
    height: 1px;
    background-color: #cfd3d3; /* CSS変数置換: --color-border */
    margin-bottom: 6px; /* Spacing based on Figma */
}

.c-feature_item__heading_sub {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* CSS変数置換 */
    font-size: 16px; /* 1.6rem * 10 = 16px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #3c3c3c; /* CSS変数置換: --color-gray */
    margin-bottom: 4px; /* Space between sub and main heading */
}

.c-feature_item__heading_main {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* CSS変数置換 */
    font-size: 22px; /* 2.2rem * 10 = 22px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #008f97; /* CSS変数置換: --color-primary */
}

.c-feature_item__image_main {
    display: block;
    margin-left: auto; /* Align right on Mobile */
    margin-bottom: 12px;
    border-radius: 4px;
    overflow: hidden;
    width: 211px; /* Mobile size */
    height: 141px; /* Mobile size */
}

.c-feature_item__body {
    margin-top: 8px; /* Space after initial text on Mobile */
}

.c-feature_item__text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* CSS変数置換 */
    font-size: 14px; /* 1.4rem * 10 = 14px */
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: #151515; /* CSS変数置換: --color-black */
    margin-bottom: 16px;
}
.c-feature_item__text:last-child {
     margin-bottom: 0;
 }

.c-feature_item__body_layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .c-feature_item__body,
    .c-feature_item__body_layout {
      flex-direction: column !important;
    }
    .c-feature_item:nth-child(even) .c-feature_item__body {
      flex-direction: column !important;
    }
    .c-feature_item__body_layout {
      gap: 16px !important;
    }
}

.c-feature_item__body_image {
    width: 175px; /* Mobile size */
    height: 117px; /* Mobile size */
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.c-feature_item__body_text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* CSS変数置換 */
    font-size: 14px; /* 1.4rem * 10 = 14px */
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: #151515; /* CSS変数置換: --color-black */
    flex: 1;
}

/* --- Desktop specific styles --- */
@media (min-width: 768px) { /* CSS変数置換: --breakpoint-md */
    .c-feature_item__content {
         display: grid;
         grid-template-columns: 1fr auto; /* Default: Header left, Image right */
         gap: 40px; /* Space between header/image columns */
         align-items: flex-start; /* Align columns to top */
         margin-bottom: 24px; /* Space between content and body */
    }

    /* Even items: Image left, Header right */
    .c-feature_item:nth-child(even) .c-feature_item__content {
         grid-template-columns: auto 1fr; /* Image left, Header right */
    }

    .c-feature_item__header {
        margin-bottom: 0; /* Reset margin, handled by grid gap */
        gap: 16px; /* Adjust gap for Desktop */
    }
    /* Even items: Reorder header content to the right column */
     .c-feature_item:nth-child(even) .c-feature_item__header {
          grid-column: 2 / 3; /* Place in the second column */
          grid-row: 1 / 2;    /* Place in the first row */
     }

    .c-feature_item__num_wrap {
         padding-top: 6px; /* Adjust vertical alignment */
    }

    .c-feature_item__image_main {
        margin-left: 0;
        margin-bottom: 0;
        width: 100%;
        height: auto;
        max-width: 550px;
    }
     .c-feature_item:nth-child(even) .c-feature_item__image_main {
          grid-column: 1 / 2;
          grid-row: 1 / 2;
          margin-right: auto;
     }

    .c-feature_item__body {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        margin-top: 0;
    }
     .c-feature_item:nth-child(even) .c-feature_item__body {
          flex-direction: row-reverse;
     }

    .c-feature_item__body_layout {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 0;
        margin-bottom: 0;
    }

    .c-feature_item__body_image {
        width: 240px;
        height: 160px;
        flex-shrink: 0;
    }

    .c-feature_item__body > .c-feature_item__text:first-of-type {
         margin-bottom: 0;
    }
    .c-feature_item__body > .c-feature_item__text:last-of-type {
         margin-bottom: 0;
    }

    .c-feature_item__heading_sub {
        font-size: 18px;
    }
    .c-feature_item__heading_main {
        font-size: 26px;
    }
     .c-feature_item__text,
     .c-feature_item__body_text {
         font-size: 16px;
         line-height: 1.8;
     }
}


/* Rules Section */
 .l-rules_inner {
     max-width: 358px;
     margin-left: auto;
     margin-right: auto;
 }
@media (min-width: 768px) {
     .l-rules_inner {   
         max-width: 720px;
     }
}

.c-rules_card {
    background-color: #edf3f4;
    border-radius: 4px;
    padding: 24px;
}
@media (min-width: 768px) {
    .c-rules_card {
         padding: 40px;
    }
}

.c-rules_card__heading {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #151515;
    text-align: center;
    margin-bottom: 14px;
}
@media (min-width: 768px) {
    .c-rules_card__heading {
         font-size: 24px;
         margin-bottom: 24px;
    }
}

.c-rules_list {
    display: grid;
    gap: 0; /* No gap, border handles separation */
}

.c-rules_list__item {
    display: flex;
    align-items: center;
    padding: 14px 10px; /* Mobile padding */
    border-top: 1px solid #cfd3d3; /* CSS変数置換: --color-border */
    gap: 16px; /* Mobile space between icon and text */
}
.c-rules_list__item:first-child {
    border-top: none;
}
/* Special padding for last item on Mobile from Figma */
.c-rules_list__item:last-child {
     padding-bottom: 0;
}
@media (min-width: 768px) { /* CSS変数置換: --breakpoint-md */
    .c-rules_list__item {
        padding: 20px 15px; /* Increased padding for Desktop */
        gap: 24px; /* Increased space for Desktop */
    }
     .c-rules_list__item:last-child {
          padding-bottom: 20px;
     }
}


.c-rules_list__icon img {
    width: 54px;
    height: 54px;
    display: block;
}

.c-rules_list__text_wrap {
    flex: 1;
}

.c-rules_list__title_wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 0px;
}
@media (min-width: 768px) {
    .c-rules_list__title_wrap {
         gap: 8px;
         margin-bottom: 4px;
    }
}

.c-rules_list__num {
    font-family: "Roboto", sans-serif; /* CSS変数置換 */
    font-size: 18px; /* 1.8rem * 10 = 18px */
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
    color: #008f97; /* CSS変数置換: --color-primary */
     flex-shrink: 0;
}

.c-rules_list__en_title {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #008f97;
}

.c-rules_list__ja_title {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 2.0;
    color: #3c3c3c;
}
 @media (min-width: 768px) {
     .c-rules_list__ja_title {
         line-height: 1.6;
         font-size: 18px;
     }
 }
 .c-feature_list {
  max-width: 948px;
  margin-left: auto;
  margin-right: auto;
 }
        


 @media(max-width: 768px) {
    .c-feature_item {
        margin-top: 70px;
    }
    .c-feature_item__header {
        background: #FFF;
        border-radius: 8px;
        display: inline-flex;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 16px;
        margin-bottom: 10px;
    }
    .c-feature_item__header  + img {
        position: absolute;
        top: -90px;
        z-index: -1;
        right: 0;
        /* margin-top: -190px; */
    }
    .c-text_block {
        margin-left: auto;
        margin-right: auto;
    }
    .l-rules_inner {
       max-width: 92vw;  
    }
    .c-image_pair {
        padding-left: 0;
    }
    .c-media_block_text {
        margin-left: 32px;
    }
    .c-image_single {
        margin-left: 32px;
    }
    .l-content_section {
        margin-left: 0px;
    }
    .c-text_group {
        margin-left: auto;
        margin-right: auto;
    }
    .c-text_group p {
        text-align: center;
    }
    .c-image_single {
        margin-left: auto;
        margin-right: auto;
    }
    .c-text_block.l-content_section {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
 }

 @media(min-width: 768px) {
    .c-text_block {
        margin-top: 80px;
        margin-bottom: 40px;
    }
    .c-text_block, .c-image_single, .c-text_group {
        width: 100%;
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }
    .c-text_group p,
    .c-text_block,
    .c-media_block_text {
        font-size: 1.2em;
    }
    .c-media_block_image_1 {
        width: calc(147px * 1.8);
        height: calc(195px * 1.8);
    }
    .c-media_block_image_2 {
        width: calc(191px * 1.8);
        height: calc(132px * 1.8);
    }
    .l-content_area {
        max-width: 1140px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .c-image_single {
        height: auto;
    }
    .c-image_pair_item_1 {
        width: calc(220px * 2.6);
        height: calc(143px * 2.3);
    }
    .c-image_pair_item_2 {
        width: calc(156px * 2.9);
        height: calc(113px * 2.9);
    }
    .c-text_block  .text-emmm {
        font-size: 1.8em;
    }
  
    .c-text_block.text-xl {
        font-size: 2.5em;
    }
    .c-feature_item {
        border-top: 1px solid #cfd3d3;
        padding-bottom: 3em;
        padding-top: 3em;
    }
 }