body {
    margin: 0;
    font-family: "Segoe UI", "Noto Sans JP", sans-serif;
    padding: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
}

/* Container to stack items */
.container {
    text-align: center;
}

/* Main Heading */
.title {
    font-size: 60px;
    font-weight: 700px;
    color: #4a8ecb;

    -webkit-text-stroke: 2px black;

    text-shadow: 
        -2px -2px 0 black,
         2px -2px 0 black,
        -2px  2px 0 black,
         2px  2px 0 black;

    margin-bottom: 30px;
}

/* Subtitle Box */
.subtitle-box {
    display: inline-block;
    background-color: #cfe3f5; /* light blue */
    border: 2px solid black;
    border-radius: 16px;
    padding: 10px 20px 6px 20px;
}

/* Subtitle Text */
.subtitle-box p {
    margin: 0;
    padding: 2px 0;
    font-size: 18px;
    color: black;
    font-weight: 500;
    line-height: 0.5 !important;
}


.image-section {
    margin-top: 30px;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 450px;
}

/* Second image = screw auger (move left) */
.image-section img:last-child {
    position: absolute;
    bottom: 0;
    right: 110px;          /* was 30px → increase to push it left */
    width: 65%;
}

/* First image = conveyor machine (move right) */
.image-section img:first-child {
    position: absolute;
    top: 0;
    left: 40px;           /* was 0px → add value to push it right */
    width: 100%;
    z-index: 2;
}


.feature-box {
    display: inline-block;
    background-color: #cfe3f5;
    border: 2px solid black;
    border-radius: 8px;
    padding: 10px 20px 6px 20px;
}

.feature-box p {
    margin: 0;
    font-size: 18px;
    line-height: 0.5 !important;
    color: black;
    font-weight: 500;
}



.info-bar {
    width: 100%;
    background-color: #cfe3f5;
    color: black;
    font-size: 20px;
    font-weight: 500;
    padding: 12px 20px;
    margin-top: 30px;
    text-align: left;
    border-radius:12px;
}

/* Section layout */
.detail-section {
    display: flex;
    justify-content: space-between;  /* left edge to right edge */
    align-items: center;            /* equal height */
    gap: 30px;
    margin-top: 40px;
    width: 100%;
   
}

/* Left machine box */
.machine-box {
    position: relative;
    border-radius: 20px;
    flex: 1;                         /* equal width */
    display: flex;
    align-items: center;
    justify-content: center;
}

.machine-box img {
    width: 100%;
    display: block;
    object-fit: contain;
}

/* Right text box */
.text-box {
    width:75%;
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #cccccc;
    padding: 25px 30px;
    flex: 1;                         /* equal width */
    text-align: left;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;         /* vertically center text */
    box-sizing: border-box;
}

.text-box .title {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
}

.text-box p {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin: 0;
}


/* Full width image */
.full-image img {
    width: 100%;
    margin-top: 20px;
}

/* Description box */
.desc-box {
    width: 100%;
    background-color: white;
    border: 2px solid black;
    padding: 10px;
    border-radius: 12px;
    margin-top: 10px;
    text-align: left;
}

.desc-box p {
    margin: 0;
    font-size: 18px;
    color: black;
    line-height: 1.7;
}


/* 3 image row - full width equal spacing */
.image-row,
.image-row-4 {
    display: flex;
    justify-content: space-between;
    align-items: center;            /* same height for all */
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.image-row img {
    flex: 1;
    min-width:0;
    height:200px;
    object-fit: contain;               /* cover fills evenly */
    border-radius: 15px;
}


.image-row-4 img {
    flex: 1;
    min-width: 0;
    height:200px;
    object-fit: contain;
    border-radius: 15px;
}

.img-arrow {
    flex: 0 0 50px !important;      /* arrow fixed narrow width */
    height:50px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    align-self: center;
}
.image-row .text-box,
.image-row-4 .text-box {
    flex: 1;
    min-width: 0;
    height:200px;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    background: #fff;
    box-sizing: border-box;
}
.image-row .text-box img,
.image-row-4 .text-box img {
    flex: none;
    width: auto;
    height: 55px;
    margin-bottom: 8px;
    border-radius: 0;
}
.image-row .img-small{
    height:170px !important;
    align-self: center;
}

.image-row .img-large{
    height:170px !important;
    align-self: center;
}
.image-row .text-box{
    height:170px !important;
    align-self: center;
}

.image-row-4 .img-std{
    height:170px !important;
    align-self: center;
}

.image-row-4 img:nth-child(3){
    height:170px !important;
    align-self: center;
}

.image-row-4.img-large{
    height:170px !important;
    align-self: center;
}
.image-row-4 .text-box{
    height: 170px !important;
}
/* 2 image row - full width equal spacing */
.image-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;            /* same height */
    gap: 15px;
    margin-top: 20px;
    width: 100%;
}

.image-row-2 img {
    flex: 1;
    width: 0;
    object-fit: contain;
    border-radius: 15px;
}

/* Option section - full width, equally spaced */
/* Option section layout */
.option-section {
    display: flex;
    justify-content:space-evenly;
    gap: 5px;
    margin-top: 20px;
    flex-wrap: nowrap;
}

/* Each card */
.option-card {
    background-color: #cfe3f5;
    border-radius: 20px;
    padding: 15px;
    width: calc(33.333% - 10px);
    flex-shrink: 1;
    text-align: center;
}

/* Image */
.option-card img {
    width: 100%;
    height: 250px;
    object-fit: contain;
}

/* Caption box */
.option-text {
    margin-top: 10px;
    background-color: #e0e0e0;
    border-radius: 10px;
    padding: 8px;
    font-size:14px;
    line-height: 1.5;
}


/* Video section */
.video-section {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.video-section iframe {
    width: 100%;
    height: 450px;
}

/* Contact box */
.contact-box {
    background-color: #2f80c0;  /* strong blue */
    color: white;
    padding: 25px;
    margin-top: 30px;
    text-align: center;
    border-radius: 16px;
}

.contact-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
}

.contact-phone {
    margin-top: 15px;
    font-weight: bold;
}

/* OGUSU Section */
.ogusu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;      /* start from left to control spacing */
  align-items: flex-start;          /* align top edges */
  gap: 60px;                        /* more space between image and info */
  padding: 30px;
  margin-top: 30px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Main company image */
.ogusu-image img {
  width: 300px;                      /* slightly bigger */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Contact info container */
.ogusu-info {
  position: relative;               /* needed for logo positioning */
  flex: 1;                          /* take remaining space */
  font-size: 1.2rem;
  text-align: left;
  color: #000000;
  padding: 25px 30px;               /* more spacing inside box */
  margin-left: 20px;                /* extra space from image */
  border-radius: 10px;
  background-color: #f8fdff;        /* subtle blueish background */
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

/* Links */
.ogusu-info a {
  color: #0078d7;
  text-decoration: none;
}

.ogusu-info a:hover {
  text-decoration: underline;
}

/* Small logo in the top-right corner */
.ogusu-logo-corner {
  position: absolute;               /* float over the top-right corner */
  top: 20px;
  right: 20px;
  width: 150px;                      /* logo width */
  height: auto;
  border: none;                      /* removed black border */
  border-radius: 6px;               /* slight rounding */
  background-color: #ffffff;        /* optional white bg */
  padding: 3px;                     /* optional spacing inside logo */
}


/* ═══════════════════════════════════════
   TABLET - 986px
═══════════════════════════════════════ */
@media (max-width: 986px) {

    .container {
        padding: 0 15px;
        box-sizing: border-box;
    }

    .subtitle-box {
        padding: 10px 18px;
    }

    .subtitle-box p {
        font-size: 15px;
        line-height: 1.4;
    }

    .feature-box {
        padding: 10px 18px;
    }

    .feature-box p {
        font-size: 15px;
    }

    .image-section {
        height: 320px;
    }

    .info-bar {
        font-size: 17px;
        padding: 10px 15px;
    }

    .option-card img {
        height: 180px;
    }

    .video-section iframe {
        height: 350px;
    }

    .image-row .img-small,
    .image-row .img-large,
    .image-row .text-box {
        height: 150px !important;
    }

    .image-row-4 .img-std,
    .image-row-4 img:nth-child(3),
    .image-row-4 .img-large,
    .image-row-4 .text-box {
        height: 150px !important;
    }

    .img-arrow {
        flex: 0 0 35px !important;
        height: 35px !important;
    }
}


/* ═══════════════════════════════════════
   LARGE MOBILE - 640px
═══════════════════════════════════════ */
@media (max-width: 640px) {

    .container {
        padding: 0 12px;
        box-sizing: border-box;
        width: 100%;
    }


    /* ── Subtitle box ── */
    .subtitle-box {
        padding: 8px 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .subtitle-box p {
        font-size: 13px;
        line-height: 1.2;
        margin: 3px 0;
    }

    /* ── Image section - fix overlapping images ── */
    .image-section {
        position: relative;
        height: 240px;
        max-width: 100%;
    }

    .image-section img:first-child {
        left: 70px;
        width: 80%;
        top: 0;
    }

    .image-section img:last-child {
        right: 70px;
        width: 50%;
        bottom: 0;
    }

    /* ── Feature box ── */
    .feature-box {
        padding: 8px 14px;
    }

    .feature-box p {
        font-size: 13px;
        margin: 3px 0;
    }

    /* ── Info bar ── */
    .info-bar {
        font-size: 14px;
        padding: 8px 12px;
        line-height: 1.8;
        margin-top: 20px;
    }

    /* ── Detail section: stack vertically ── */
    .detail-section {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    .machine-box {
        width: 100%;
        flex: none;
    }

    .machine-box img {
        width: 100%;
        height: 220px;
        object-fit: contain;
    }

    /* text-box below image, same width */
    .text-box {
        width: 100% !important;
        flex: none;
        padding: 15px;
        box-sizing: border-box;
        margin-left: 0;
    }

    .text-box p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* ── Full image ── */
    .full-image img {
        width: 100%;
        height: 220px;
        object-fit: contain;
    }

    /* ── Desc box ── */
    .desc-box {
        padding: 8px 10px;
        box-sizing: border-box;
        width: 100%;
    }

    .desc-box p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* ── Image row 3 - keep in row, equal height ── */
    .image-row {
        gap: 6px;
        margin-top: 10px;
    }

    .image-row .img-small,
    .image-row .img-large {
        height: 110px !important;
        flex: 1;
    }

    .image-row .text-box {
        height: 110px !important;
        flex: 1;
        font-size: 11px;
        padding: 5px !important;
    }

    .image-row .text-box img {
        height: 35px;
        margin-bottom: 4px;
    }

    /* ── Image row 4 - keep in row, equal height ── */
    .image-row-4 {
        gap: 5px;
        margin-top: 10px;
    }

    .image-row-4 .img-std,
    .image-row-4 img:nth-child(3),
    .image-row-4 .img-large {
        height: 110px !important;
        flex: 1;
    }

    .img-arrow {
        flex: 0 0 25px !important;
        height: 25px !important;
    }

    .image-row-4 .text-box {
        height: 110px !important;
        flex: 1;
        font-size: 11px;
        padding: 5px !important;
    }

    /* ── Image row 2 - increase height ── */
    .image-row-2 {
        gap: 8px;
        margin-top: 12px;
    }

    .image-row-2 img {
        height: 180px;
        object-fit: contain;
    }

    /* ── Option section - column layout ── */
    .option-section {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .option-card {
        width: 100%;
        box-sizing: border-box;
    }

    .option-card img {
        height: 180px;
    }

    .option-text {
        font-size: 13px;
    }

    /* ── Video ── */
    .video-section iframe {
        height: 250px;
    }

    /* ── Contact box ── */
    .contact-box {
        padding: 15px 12px;
    }

    .contact-title {
        font-size: 18px;
    }

    /* ── OGUSU section ── */
    .ogusu-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px;
    }

    .ogusu-image img {
        width: 100%;
        max-width: 260px;
    }

    .ogusu-info {
        margin-left: 0;
        width: 100%;
        padding: 12px 14px;
        font-size: 0.95rem;
        box-sizing: border-box;
    }

    .ogusu-logo-corner {
        width: 100px;
        top: 10px;
        right: 10px;
    }
}


/* ═══════════════════════════════════════
   SMALL MOBILE - 480px
═══════════════════════════════════════ */
@media (max-width: 480px) {

    .container {
        padding: 0 8px;
    }

   
    /* ── Subtitle box ── */
    .subtitle-box {
        padding: 6px 10px !important;
    }

    .subtitle-box p {
        font-size: 13px;
        line-height: 0.3 !important;
    }

    /* ── Image section ── */
    .image-section {
        height: 190px;
    }

    .image-section img:first-child {
        width: 78%;
        left: 70px;
    }

    .image-section img:last-child {
        width: 48%;
        right: 70px;
    }

    /* ── Feature box ── */
    .feature-box {
        padding: 6px 10px !important;
    }

    .feature-box p {
        font-size: 12px;
        line-height: 0.3 !important;
    }

    /* ── Info bar ── */
    .info-bar {
        font-size: 13px;
        padding: 7px 10px;
        line-height: 1.7;
    }

    /* ── Machine image ── */
    .machine-box img {
        height: 180px;
        width:100%  !important;
    }

    /* ── Text box ── */
    .text-box p {
        font-size: 13px;
    }

    /* ── Full image ── */
    .full-image img {
        height: 170px;
        margin-top: 5px;
        margin-top: 10px;
    }

    /* ── Desc box ── */
    .desc-box p {
        font-size: 13px;
        line-height: 1.5;
    }
    .image-row {
        gap:5px;
        align-items: center;
    }
    /* ── Image rows ── */
    .image-row .img-small,
    .image-row img,
    .image-row .img-large
     {
        height: 100px !important;
        flex:1;
        object-fit: contain;
        align-self: center;
    }

    .image-row .text-box {
        height: 100px !important;
        flex:1;
        font-size:10px !important;
        padding: 4px !important;
    }

    .image-row .text-box img {
        height: 30px !important;
        flex:none !important;
        object-fit: contain;
        
    }
    .image-row-4{
        display: flex;
        align-items: center;
        gap: 5px;
        height: 100px;
        overflow: hidden;
    }
    .image-row-4 img
    {
        height: 100px !important;
        width: 0 !important;
        flex:1 !important;
        max-height: 100px !important;
        object-fit: contain !important;
        align-self: center !important;
        overflow: hidden !important;
    }

    .image-row-4 .img-arrow
    {
        flex: 0 0 22px !important;
        width:22px !important;
        height: 22px !important;
        object-fit: contain !important;
        max-height: 22px !important;
        overflow: visible !important;
    }

    /* ── Image row 2 ── */
    .image-row-2 img {
        height: 150px;
    }

    /* ── Option cards ── */
    .option-card img {
        height: 150px;
    }

    .option-text {
        font-size: 13px;
        padding: 6px;
    }

    /* ── Video ── */
    .video-section iframe {
        height: 200px;
    }

    /* ── Contact ── */
    .contact-title {
        font-size: 15px;
    }

    .contact-box p {
        font-size: 13px;
    }

      /* OGUSU Section */
  .ogusu-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 5px;
    padding: 10px;
  }
  .ogusu-image{
    flex: 0 0 90px;
  }
  .ogusu-image img {
    width: 90px;
    height:auto;
  }

  .ogusu-info {
    font-size: 1rem;
    padding: 10px;
    margin-left: 0;
    position: relative;
  }

  .ogusu-logo-corner{
    width: 70px;
    top: 8px;
    right: 8px;
    position: absolute;
  }
}