/*====================================
    General
====================================*/

#breadclumbs > div{
                  width: 96%;
                  margin: 0;
                  display: flex;
                  padding: .7rem;
}

#breadclumbs > div > *{
                       padding: 0.2rem 0.8rem;
                       font-size: 15.4px;
}

#breadclumbs > div > p.breadclumbcustomparagraph1{
    font-size: 12px;
    padding-top: 6px;
}

#sub_image h1{
              font-size: 1.9rem;
}

#sub_image h1.ownstyle{
                      font-size: 1.5rem;
}


.sub_page{
          width: 100%;
          margin: 0;
}

.sub_page > .contents{
                      /* background-image: url(../images/dotted_bg03.png);*/
                      background-position-x: center;
                      background-repeat: repeat-y;
                      width: 100%;
                      /*width: 590px;*/
                      margin: auto;
                      overflow: hidden;
}

.sub_page > .contents > .heading_area{
                                      position: relative;
                                      padding: 5px;
}

.sub_page > .contents > .heading_area{
                                      display: flex;
                                      position: relative;
                                      height: 5rem;
}

.sub_page > .contents > .heading_area > h2{
                                           top: 1.4rem;
                                           left: 2rem;
                                           font-size: 24px;
}

.sub_page > .contents > .heading_area > h2::after{
                                                  content: '';
                                                  display: block;
                                                  width: 5rem;
                                                  margin: auto;
                                                  border-bottom: 1px solid #000;
}

.sub_page > .contents > .heading_area > p{
                                          display: none;
                                          right: 4rem;
                                          font-size: 3rem;
}

 /* ============== css of achievement page ============== */

 #achievement > .contents > section:nth-of-type(1){
                                                   width: 80%;
                                                   padding: 1rem;
}

#achievement > .contents > ul{
                              width: 550px;
}

#achievement > .contents > ul > li{
                                   width: 16.1rem;
                                   min-height: 230px;
                                   background-color: #fff;
                                   margin-right: 0.5rem;
                                   margin-left: 0.5rem;
                                   margin-bottom: 1.2rem;
                                   align-items: stretch;
}

#achievement > .contents > ul > li > a{
                                       color: #00AF56;
                                       display: block;
                                       font-size: 1.5rem;
                                       width: 16.1rem;
                                       height: 230px;
                                       text-align: center;
                                       background-color: #cccccc;
                                       position: relative;
}

#achievement > .contents > ul > li > a > img{
                                             width: 16.1rem;
                                             height: 230px;
}

#achievement > .contents > ul > li:nth-of-type(3n){
                                                   margin-right: 0.5rem;
}
#achievement > .contents > ul > li > a > p{
                                            width: 100%;
                                            background-color: rgba(255, 255, 255, 0.9);
                                            position: absolute;
                                            bottom: 0;
                                            padding: 1rem 0rem;
                                            font-size: 15px;
}

/* ========== css of acheivement details page =========== */

#achievement_details > .contents > section:nth-of-type(2){
                                                          margin-left: 2rem;
                                                          margin-bottom: 4rem;
}

#achievement_details > .contents > section:nth-of-type(2) > p{
                                                              padding-right: 35px;
                                                              font-size: 1.0rem;
}

#achievement_details > .contents > ul{
                                      width: 500px;
                                      margin: auto;
                                      margin-bottom: 50px;
}

#achievement_details > .contents > ul > li{
                                           width: 27.6rem;
                                           padding: 1.2rem 1.3rem 1.5rem;
                                           min-height: 240px;
                                           text-align: center;
                                           margin-left: 0.5rem;
                                           margin-right: 0.5rem;
                                           margin-bottom: 1.2rem;
}

#achievement_details > .contents > ul > li > div:first-child{
                                                             height: 25%;
                                                             padding: 5px;
}


/* ============== css of system achievement page =============== */

.sub_page > .contents > .heading_area1{
                                      padding: 5px;
                                      height: 6rem;
}

.sub_page > .contents > .heading_area1 > h2{
                                           top: 1.4rem;
                                           left: 2rem;
                                           font-size: 24px;
}

.sub_page > .contents > .heading_area1 > h2::after{
                                                   width: 5rem;
}

.sub_page > .contents > .heading_area1 > p{
                                           display: none;
                                           right: 4rem;
                                           font-size: 3rem;
}

.image-box, .image-box1, .image-box2,
.image-box3, .image-box4, .image-box5,
.image-box6, .image-box7, .image-box8,
.image-box9, .image-box10{
                          height: 370px;
}

.custom-content1{
                 width: 80%;
}

.custom-content1 .bracketdiv:after {
                                    content: '';
                                    display: block;
                                    width: 0; /* Set width to 0 for a triangular shape */
                                    height: 0; /* Set height to 0 for a triangular shape */
                                    border-left: 35px solid transparent; /* Create left side of the triangle */
                                    border-right: 35px solid transparent; /* Create right side of the triangle */
                                    border-top: 25px solid #00AF56; /* Create the dropdown shape */
                                    margin: auto;
                                    margin-top: 15px;
                                    margin-bottom: 15px;
}

.custom-content2 h3{
                    font-size: 20px;
                    margin-bottom: 15px;
}

.custom-content2 p{
                   font-size: 15px;
                   margin-right: 5%;
                   width: 80%;
                   margin-left: 15%;
}

/* ============== css of business page ============== */

.business-container{
                    padding-left: 10px;
                    padding-right: 10px;
                    margin-bottom: 80px;
}

.business-header{
                 padding-left: 10px;
}

hr.business-line{
                 margin-left: 170px;
}

.business-container .image-description-box{
                                           display: block;
}

.business-container .image-description-box .image-icon{
                                                       padding-bottom: 15px;
                                                       text-align: left;
}

.business-container .image-description-box .image-icon .businessheaderdesign{
                                                                             padding-left: 0px;
}

.business-container .image-description-box .image-icon .businessheaderdesignn{
                                                                              padding-left: 0px;
}

.business-container .image-icon-description{
                                            padding-left: 1rem;
}

.business-container .business-image-container img{
                                                 width: 500px;
                                                 height: 350px;
}


/* ================ css of company profile page ===================== */

.company-headerfirst,
.company-headersecond{
                      padding-left: 10px;
}

hr.company-line {
                 margin-left: 25px;
}

hr.company-secondline{
                      margin-left: 27px;
}

.company_top,
.company_bottom{
                padding-left: 10px;
                padding-right: 10px;
}

.company_bottom{
                margin-bottom: 30px;
}

.image-box-container{
                      padding-left: 15px;
}

/* ================= css of greeting page ================== */

.greeting-header{
                 padding-left: 10px;
}

hr.greeting-line{
                 margin-left: 50px;
}

.history{
         padding-left: 10px;
         padding-right: 10px;
         margin-bottom: 80px;
}

/* ================== css of SDGs ======================= */

.SDGs-headerfirst,
.SDGs-headersecond,
.SDGs-headerthird{
                  padding-left: 10px;
                  font-size: 22px;
}

hr.SDGs-line{
             margin-left: 145px;
}

hr.SDGs-secondline{
                   margin-left: 120px;
}

.image-container {      
                  height: 300px;            
}

.image-container img {
                      max-width: 100%;              
                      max-height: 100%;            
                      height: auto;                             
}

.SDGs_top{
          padding-left: 10px;
          padding-right: 10px;
}

.SDGs-headersecond{
                   margin-top: 50px;
}

.second-container .image,
.third-container .image-second{
                               width: 200px;               
                               height: 80px;             
                               margin-right: 15px;  
                               margin-left: 10px;        
}

.second-container .image-description,
.third-container .image-description{
                                    margin-left: 15px;
}

.second-container .image-description p,
.third-container .image-description p{
                                      padding-right: 10px;
}

.second-container,
.third-container{
                  margin-top: 30px;
                  margin-bottom: 30px;
}

.fourth-container{
                  width: 100%;
                  text-align: center;
}

.fourth-container .image-third{
                               width: 70%;
                               margin: 0;
}

.fifth-container .image-fourth{
                               width:180px;
                               height: auto;
                               margin-left: 5px;
}

.fifth-container .image-description{
                                    padding-left: 20px;  
                                    padding-right: 15px;
}

.fifth-container .image-description h2{
                                       font-size: 16px;
}

.fifth-container .image-description h3, p{
                                          font-size: 14px;
}

/* ==================== css of history ======================= */

.history-header{
               font-size: 25px;
               padding-left: 10px;
}

hr.history-line{
                margin-left: 18.5px;
}

hr.news-line{
             margin-left: 34.5px;
}


.history-container{
                   padding-left: 10px;
                   padding-right: 10px;
                   margin-bottom: 80px;
}

.history-container .upper-paragraph{
                                    margin-bottom: 25px;
                                    font-size: 20px;
}

.history-container .table td.historytdwidth{
                                            width: 96px;
}


.history-container .table .paradesign{
                                      padding-left: 35px;
                                      padding-bottom: 5px;
}

/* ================= css of access page ====================== */

.access-header{
               font-size: 25px;
               padding-left: 10px;
}

hr.access-line{
               margin-left: 32px;
}

.access-container{
                  padding-left: 10px;
                  padding-right: 10px;
                  margin-bottom: 80px;
}

.access-container .first-access-div,
.access-container .second-access-div{
                                     margin-bottom: 25px;
}

.access-container .third-access-div{
                                    width: 90%;
                                    margin: auto;
}

/*============== css of Questionaire =====================*/

.questionaire-header{
                   padding-left: 10px;
}

hr.questionaire-line{
                     margin-left: 70px;
}

.questionaire-container{
                       padding-left: 10px;
                       margin-bottom: 80px;
}

.questionaire-container .tabs {
                              list-style-type: none; /* Remove default list styling */
                              padding: 0;
                              display: flex;
                              flex-wrap: wrap;
                              margin-bottom: 30px;
                              margin-left: 1px;
                              justify-content: center;
}

.questionaire-container .tabs li {
                                  margin-right: 5px; /* Space between tabs */
                                  margin-bottom: 35px;
                                  padding: 5px;
}

/* ===================== css of recruit page ================= */

.recruit-header{
                font-size: 24px;
                padding-left: 15px;
}

hr.recruiter-line{
                  margin-left: 183px;
}

.recruit-container{
                   padding-left: 15px;
                   padding-right: 15px;
                   margin-bottom: 80px;
}

#seisaku_director h2,
#chosa_assistant h2,
#system-engineer h2{
                     padding-left: 15px;
                     font-size: 20px;
}

#seisaku_director,
#chosa_assistant{
                  margin-top: 50px;

}

/* ====== css of privacy01 html page ======= */

.privacy01-headerfirst{
                       padding-left: 15px;
}

hr.privacy-line{
                margin-left: 120px;
}


.privacy01-content{
                   padding-left: 15px;
                   padding-right: 15px;
}

.privacy01-content .button-container{
                                     margin-top: 20px;
                                     margin-bottom: 80px;
}

/* ========= css of privacy02 html page ============== */

.privacy02-header{
                  font-size: 24px;
                  padding-left: 15px;
}

hr.privacy02-line{
                  margin-left: 78px;
}

.privacy02-content{
                   padding-left: 15px;
                   padding-right: 15px;
                   margin-bottom: 80px;
}

.privacy02-content h3{
                      text-align: center;
                      font-size: 22px;
                      padding-top: 25px;
                      padding-bottom: 25px;
}

/* ============== css of privacy03 html page =============== */

.privacy03-header{
                  font-size: 24px;
                  padding-left: 15px;
}

hr.privacy03-line{
                  margin-left: 116px;
}

.privacy03-content{
                   padding-left: 15px;
                   padding-right: 15px;
                   margin-bottom: 80px;
}

.privacy03-content .privacy03-table{
                                    width: 90%;
                                    margin: auto;
                                    margin-top: 40px;
                                    margin-bottom: 30px;
}

.privacy03-content .privacy03-table td p.widthdesign{
                                                     width: 120px;
}

.privacy03-content .privacy03-table td.tddesign{
                                                height: 80px;
}

/* ========== css style of marutto page ================== */

.marutto-header{
                font-size: 24px;
                padding-left: 15px;
}

hr.marutto-line{
                margin-left: 113px;
}

.marutto-container{
                   padding-left: 15px;
                   padding-right: 15px;
                   margin-bottom: 80px;
}

.marutto-image-item {
                     text-align: center;
                     width: calc(50% - 10px); /* 3 images in a row */
                     margin-bottom: 40px; /* Space between rows */
}

.marutto-image-item img{
                        width: 90%; /* Make image take full width of the container */
                        height: auto; /* Set a fixed height */
                        object-fit: cover; /* Maintain aspect ratio and cover the space */
}

/* ============ css of price page ================ */

.price-header{
              font-size: 24px;
              color: #000;
              padding-left: 15px;
}

hr.price-line{
              width: 2.4rem;
              margin-left: 34px;
}

.price-container{
                 padding-left: 15px;
                 padding-right: 15px;
                 margin-bottom: 80px;
}

.price-container .table2{
                         width: 50%;
                         margin-right: 20px;
}

.price-container .table3{
                         width: 90%;
}

.price-container .table4{
                         width: 90%; 
                         margin-bottom: 30px;
}

.price-container .table5{
                         width: 80%;
}

.price-container .table55{
                          width: 95%;
}

/* ================= css of contact page =================== */

.contact-headerfirst{
                     font-size: 25px;
                     padding-left: 10px;
}

hr.contact-line{
                margin-left: 51px;
}

.contact-content{
                 padding-left: 10px;
                 padding-right: 10px;
                 padding-bottom: 80px;
}

.contact-content .contact-secondcontent .first-table{
                                                     width: 90%;
                                                     margin: auto;
                                                     margin-top: 20px;
                                                     margin-bottom: 20px;
}

.contact-content .contact-secondcontent .first-table td textarea{
                                                                 width: 100%;           /* Full width of the parent */
                                                                 max-width: 600px;     /* Prevent it from being too wide */
                                                                 height: 150px;        /* Default height */
                                                                 min-height: 100px;    /* Minimum height */
                                                                 resize: vertical;     /* Allow vertical resizing */
                                                                 padding: 10px;        /* Add some padding */
                                                                 box-sizing: border-box; 
}

.contact-content .contact-secondcontent .second-table{
                                                      width: 90%;
                                                      margin: auto;
}

/* ===================== css of footer section ========================== */

/* =================== css of footer top section ====================== */


#footer > #footer_top{
                      flex-wrap: wrap;
                      width: 98%;
                      margin: auto;
                      padding: 0;
                      padding-top: 20px;
                      justify-content: center; 
                      margin-bottom: 30px;
}

#footer > #footer_top > ul {
                            flex: 1 1 24%; 
                            margin-right: 0.2rem;
                            text-align: center;
                            margin-bottom: 10px;

}

#footer > #footer_top > ul > li > a{
                                    font-size: 12px;
}

#footer > #footer_top > a.twitter-timeline > element.style{
                                                           width: 600px!important;
}

#footer > #footer_bottom{
                         margin: auto;
                         width: 96%;
}

#footer > #footer_bottom > .footer-bottom-container{
                                                    display: flex;
                                                    flex-direction: column;
                                                    justify-content: center;
                                                    align-items: center;

}

#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-first{
                                                                                     width: 90%;
                                                                                     margin: auto;
                                                                                     justify-content: center;
                                                                                     margin-bottom: 15px;
}

#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-second{
                                                                                      width: 88%;
                                                                                      margin: auto;
                                                                                      justify-content: center;
}

#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-first > .logo-div > img{
                                                                                                       height: 2.7rem;
                                                                                                       width: 6rem;
                                                                                                       margin-right: 1rem;
}

#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-second > .logo-div > img{
                                                                                                        height: 3rem;
                                                                                                        margin-right: 1rem;
}


#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-first > .footer-bottom-paragraph > p,
#footer > #footer_bottom > .footer-bottom-container > .footer-bottom-container-second > .footer-bottom-paragraph > p{
                                                                                                                     font-size: 14px;
}


/* ====================== css of header section ======================== */


header > nav{
             position: relative; 
             width: 100%;
             padding: 10px 0px;
}

header > nav > a > .imagesize{
                              width: 120px;
                              padding-left: 12px;
}


header > nav > .menu-toggle {
                             display: flex; /* Show hamburger icon on mobile */
                             position: absolute;
                             right: 30px;
                             top: 15px;
}

header > nav > .nav-list{
                         display: none; /* Hide nav-list by default */
                         flex-direction: column; /* Stack items vertically */
                         position: absolute; /* Position dropdown below the navbar */
                         right: 0;
                         top: 100%;
                         align-items: center;
                         background-color: #fff;
                         width: 100%; /* Full width */
                         height: 100vh;
                         transform: translateY(-20px); /* Start slightly above */
                         opacity: 0; /* Start invisible */
                         transition: transform 0.8s ease, opacity 0.8s ease; /* Smooth transition */
                         z-index: 1; /* Ensure it overlays other content */
}


header > nav > .nav-list > li{
                              margin-left: 0;
                              padding: 1rem 0;
}

header > nav > .nav-list > li.header_btn:last-child{
                                                    margin-left: 0;
}

header > nav > .nav-list.active {
                                 display: flex; /* Show when active */
                                 transform: translateY(0); /* Move into view */
                                 opacity: 1; /* Make visible */
}

header{
       padding: 0;
}


header > nav.active {
                     background-color: #fff; /* Adjust the color as needed */
                     position: relative; /* Keep it fixed */
                     top: 0; /* Align to the top */
                     left: 0; /* Align to the left */
                     width: 100%; /* Full width */
                     z-index: 1; /* Ensure it overlays other content */
}

.close-icon {
             font-size: 1.5rem; /* Adjust size as needed */
             color: #000; /* Change color as needed */
             margin-left: 1rem; /* Spacing */
             cursor: pointer; /* Pointer on hover */
}

/* ========= Top section ========== */
/* ========= Top Strength Section ================ */

#top_strengths > .strength-container-box > .strength-container > h3{
                                                                    top: -36px;
                                                                    font-size: 2.8rem;
}

#top_strengths > .strength-container-box > .strength-container{
                                                               width: 70%;
}

#top_strengths > .strength-container-box > .strength-container > p{
                                                                   font-size: 16px;
}

#top_strengths > .strength-container-box > .strength-container > p > span.strengthspandesign{
                                                                                             font-size: 22px;
}

/*
#top_strengths > .top_down{
                           width: 100%;
                           align-items: center;
}

#top_strengths > .top_down > p{
                               top: -43px;
                               left: 1.6rem;
                               font-size: 3.3rem;
}

#top_strengths > .top_down > img{
                                 width: 90%;
                                 height: auto;
                                 margin-left: 5%;
                                 position: relative;
                                 top: 35px;
}

#top_strengths > div:last-of-type{
                                  height: auto;
                                  padding-bottom: 40px;
                                  width: 100%;
                                  margin: auto;
                                  background: linear-gradient(#00AF56 85%, rgba(255, 255, 255, 0) 15%);
}

#top_strengths > div:last-of-type > div{
                                        width: 90%;
                                        align-items: center;
                                        margin: auto;
                                        padding: 50px 0px;
                                        color: #ffffff;
}

#top_strengths > div:last-of-type > div > p{
                                            width: 100%;
                                            text-align: left;
                                            font-size: 14px;
}
*/


/* ================ Top Service Section ================== */

#top_service{
             width: 590px;
}

#top_service > #top_service_child01 > div:first-of-type > img,
#top_service > #top_service_child02 > div:last-of-type > img{
                                                             width: 30rem;
}

#top_service > #top_service_child01 > div:first-of-type > div,
#top_service > #top_service_child02 > div:last-of-type > div{
                                                             width: 11rem;
                                                             height: 2.5rem;
                                                             text-align: center;
                                                             font-size: 1.2rem;
                                                             bottom: 1rem;
}

#top_service > #top_service_child01 > div:first-of-type > div{
                                                             left: 22rem;

}

#top_service > #top_service_child02 > div:last-of-type > div{
                                                             right: 22rem;
}


#top_service > #top_service_child01 > div:first-of-type > div > a,
#top_service > #top_service_child02 > div:last-of-type > div > a{
                                                                 padding: 0.8rem 0;
                                                     
}

#top_service > #top_service_child02 > div:last-of-type > div > a{
                                                                 padding: 0.2rem 0;
}

#top_service > #top_service_child01 > div:last-of-type > p,
#top_service > #top_service_child02 > div:first-of-type > p{
                                                            font-size: 2.6rem;
}

/* =============== Top work section =================== */

#top_works > div:first-of-type{
                               height: 6rem;
}

#top_works > div:first-of-type > h2{
                                    top: 1.4rem;
                                    left: 6rem;
}

#top_works > div:first-of-type > p{
                                   right: 6rem;
                                   font-size: 3.5rem;
}

#top_works > ul{
                width: 560px;
}

#top_works > ul > li{
                     width: 16.5rem;
                     min-height: 230px;
                     background-color: #fff;
                     margin-right: 0.5rem;
                     margin-left: 0.5rem;
                     margin-bottom: 1.2rem;
                     align-items: stretch;
}

#top_works > ul > li > a{
                        color: #00AF56;
                        display: block;
                        font-size: 1.5rem;
                        width: 16.5rem;
                        height: 230px;
                        text-align: center;
                        background-color: #cccccc;
                        position: relative;
}

#top_works > ul > li > a > img{
                               width: 16.5rem;
                               height: 230px;
}

#top_works > ul > li:nth-of-type(3n){
                                     margin-right: 0.5rem;
}

#top_works > ul > li > a > p{
                             width: 100%;
                             background-color: rgba(255, 255, 255, 0.9);
                             position: absolute;
                             bottom: 0;
                             padding: 1rem 0;
                             font-size: 15px;
}

/* ============ Top News Section ============ */

#top_news > div > ul{
                     max-width: 90%;
                     margin: auto;
}

/* ================= css of secretariat page ========================= */


.sub_page > .contents > .heading_area2{
                                       padding: 5px;
                                       height: 6rem;
}

.sub_page > .contents > .heading_area2 > h2{
                                            left: 4rem;
                                            font-size: 24px;
}

.sub_page > .contents > .heading_area2 > p{
                                           display: none;
                                           top: 0.8rem;
                                           right: 5rem;
                                           font-size: 2.8rem;
}

/* ====================== css of achievement page ======================== */

.sub_page > .contents > .heading_area3{
                                       padding: 5px;
                                       height: 5rem;
}

.sub_page > .contents > .heading_area3 > h2{
                                           top: 1.4rem;
                                           left: 2rem;
                                           font-size: 22px;
}

.sub_page > .contents > .heading_area3 > p{
                                           display: none;
                                           right: 4rem;
                                           font-size: 3rem;
}

.sub_page > .contents > .heading_area4{
                                       padding: 5px;
                                       height: 5rem;
}

.sub_page > .contents > .heading_area4 > h2{
                                            top: 1.4rem;
                                            left: 2rem;
                                            font-size: 19px;
}

.sub_page > .contents > .heading_area4 > p{
                                           display: none;
                                           right: 4rem;
                                           font-size: 3rem;
}

/* =========== Design of stress check ============ */

.stress-button-design-cover{
                            background-color: #fff;
                            border: 5px solid #00AF56; 
                            padding: 30px 10px;
                            margin: auto;
                            margin-bottom: 60px;
                            width: 60%;
}

.stress-button-design{
                      text-align: center;
}

.stress-button-design .bigpara{
                               font-family: Arial, Helvetica, sans-serif;
                               font-size: 18px;
                               color: #FF9800;
}

.stress-button-design .smallpara{
                                 padding-top: 12px;
                                 padding-bottom: 12px;
                                 font-size: 14px;
}

.stress-button > a > button{
                            background-color: #00AF56;
                            border: none;
                            color: #fff;
                            padding: 15px 15px;
                            font-size: 20px;
                            border-radius: 50px;
                            cursor: pointer;
}