*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
    max-width: 100%;
    overflow-x: hidden;
    
}
#wVideo, #blue1, #benefits, #blue2, #gallery, #staff, #jobs, #jobs1 {
    opacity: 0;
    
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
#benefits > h2{
    margin-bottom: -4vw;
}
#jobs > div.centered > p{
    text-align: center;
}
/*.roundhash{
    background-color: #EA7979;
    border-radius: 24px;
    padding: 0.5vw;
}*/
/* When the sections become visible */
.visible {
    opacity: 1!important;
    transform: translateX(0)!important;
}
a{
    text-decoration: none;
}
#jobs1{
    display: none;

}
#jobs{
    display: block;
}
.back-to-top-button {
    /* display: block; */
    position: fixed;
    bottom: 20px;
    right: 15px;
    width: 5vw;
    height: auto;
    border-radius: 50%;
    /* background-color: rgb(0 0 0 / 0%); */
    opacity: 0;
  }
  
  .back-to-top-button:hover {
    opacity: 1;
  }
.blueback{
    background-color: #177598;
}
.cian{
    background-color: rgba(0, 216, 255, 0.6);
    padding: 2vw 0;
    margin: 3vw 0;
}
#contact{
    background-color: #C9BAA5;
}
footer{
    background-color: #BEBEBE;
    padding: 2vw 0;
}
p {
    margin: 0; /* Removes default paragraph margins */
}
.centered{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}
.flex{
    display: flex;
    flex-direction: column;
}
.hiragino{
    font-family: "hiragino-kaku-gothic-pron", 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: 800;
    font-style: normal;
}
.hiraginothin{
    font-family: "hiragino-kaku-gothic-pron", 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.bold{font-weight: 800;}
.yugo{

    font-family: "yu-gothic-pr6n", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight:700;
font-style: normal;
}
.mincho{
    font-family: "yu-mincho-pr6n", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.flex{
    display: flex;
}

.kanri{
    background-color: rgb(102, 108, 108);
}
.kanri button{
    background-color: rgb(102, 108, 108);
}
h4{
    text-align: center;
    font-size: 4.5vw;
    margin: 4vw 0 2vw 0;
    border-bottom: 2px white solid;
    width: 20vw;
    display: block;
}
#jobs1 > div:nth-child(1) > p{
    margin-top: -3vw;
}
.kaigostaff{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    margin-bottom: 3vw;
}
.kanri{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    padding-bottom: 3vw;
}
.houmon{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    padding-bottom: 3vw;
}
#staff > div:nth-child(3){
    margin-top: -3vw;
    margin-bottom: 2vw;
}
.location img{/* height: 36vw; */width: 77vw;}
.location a img{
    width: 4vw;
    height: 4vw;
}
.onerowcards{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100vw;
}
.location{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.locations{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loctitle{
    font-size: 4vw;
    padding: 1vw 0;
}
a{
    cursor: pointer;
}
.location a{
    color: #177598;
    padding: 1vw 0 5vw 0;
    text-align: center;
    font-size: 3.5vw;
}
.button{
    background-color: #EA7979;
    border-radius: 24px;
    width: 76vw;
    text-align: center;
    margin: 2vw 0;
}
button{
    background-color: #EA7979;
    border: none;
    line-height: 4vw;
    padding: 2vw;
    
}
span{letter-spacing: -0.6vw;}
.scroll{
    
display: flex;
    
flex-direction: column;
    
flex-wrap: wrap;
    
align-items: center;
    
/* margin-bottom: 3vw; */
}
.scroll img{
    width: 6vw;
}
.black{
    color: black!important;
}
#wVideo > div > p{
    padding: 3vw 8vw 8vw 8vw;
}
#blue1 > div{
    padding: 3vw 8vw 8vw 8vw;
}
#contact > div.centered > p{
    padding: 3vw 8vw 8vw 8vw;
}
#blue2 > div.button{
    margin-bottom: 6vw;
}
#blue2 > div.hiraginothin{
    padding: 3vw 8vw 2vw 8vw;
    line-height: 2.5;
}
#blue1 .texttiny{
    margin-bottom: 3vw;
}
card p{
    padding: 3vw 0vw 0vw 1vw;
}
video{
    max-height: 100%;
    height: 56vw;
    margin-bottom: 8vw;
}
.collapsible {
    font-size: 3vw;
    padding: 1.5vw 4vw;
    font-weight: 800;
}
.collapsible {
    /* width: 90%; */
    background-color: #539CB7;
    color: white;
    border: 1px solid white;
    width: 90%;
    text-align: left;
    border-radius: 1px;
    /* margin: 0 3vw 0 3vw; */
    margin-bottom: 2vw;
    /* max-height: 200vw; */
    text-align: center;
    margin-top: 3vw;
}
.content {
    padding: 0 0;
    background-color: #177598;
    max-height: 0;
    overflow-y: hidden;
    overflow-x: visible;
    transition: max-height 0.5s ease-in-out;
    /* margin-bottom: 3vw; */
    text-align: left;
    /* padding-bottom: 0vw; */
}
#jobs{
    background-color: #539CB7;
}
#jobs1{
     background-color: #539CB7;
}
.cards{
    margin-top: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.desktop{
display: none;
}
#benefits{
    background-image: url('img/backgroundimg.png');/* Path to your image */
    background-size: cover; /* or contain, depending on what you need */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center center; /* Aligns the image nicely in the center */
    /* background-attachment: fixed; */ /* Optional: sets whether the background scrolls with the content */
    padding: 2vw 0;
    height: 60.5vw;
}
.table-container {
    width: 92%;
    max-width: 100vw; /* Adjust as needed */
    margin: 0 auto;
    margin-top: 3vw;
    background-color: #177598;
}
#gallery img{
width: 100%;
}
#staff img{
    width: 50%;
    margin: 3vw 0;
}
card{
    max-width: 90%;
    margin: 5vw 5vw;
    display: flex;
    padding: 2vw 5vw 5vw;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: solid grey 1px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    /* padding: 5px; */
    border-bottom: 1px solid white; /* Black border as seen in the screenshot */
    padding: 7vw 0;
    text-align: left;
    vertical-align: top;
    background-color: #177598;
}

th {
    width: 30%; /* Adjust the width as necessary */
    background-color: #177598; /* Light grey background for header cells */
}

td {
    width: 70%;
}
#top{
    background-image: url('img/mainbanner.png'); /* Path to your image */
    background-size: contain; /* or contain, depending on what you need */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    /* background-position: center center; */ /* Aligns the image nicely in the center */
    /* background-attachment: fixed; */ /* Optional: sets whether the background scrolls with the content */
    padding: 2vw 0;
    height: 60vw;
}
.tel a{

}
.tel{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 2vw;
    padding-right: 2vw;
    font-weight: 800;
}
.tel img{
    width: 4vw;
}
.textsmall{
    font-size: 3.5vw;
    }
    .texttiny{
        font-size: 3vw;
    }    
    h3{
    font-size: 5vw;
    text-align: center;
    margin-top: 3vw;
    }
    h2{
        font-size: 5vw;
        text-align: center;
    }
    .textbig{
        font-size: 5vw;
    }
    .linehigh{
        line-height: 5vw;
    }
    .textmid{
        font-size: 4vw;
    }
    iframe {
           
  overflow: hidden; /* Hides the scrollbar */
}
     #contact .tel{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        margin-top: -3vw;
        margin-bottom: 5vw;
        font-size: 4vw;
        font-weight: 800;
     }
      
      /* For Webkit browsers like Chrome and Safari */
      iframe::-webkit-scrollbar {
        display: none;
      }
   iframe#video{
    width: 64.5%;
    height: 36.3vw;
    margin-bottom: 5vw;
   }
   @media (max-width: 769px) {
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
    #top {
        height: 70vw;
        background-size: cover;
        background-position-x: center;
   }
   h4 {
    width: 29vw;
   }
  
}
/* CSS rules for screens larger than a tablet */
@media (min-width: 769px) {

    .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }
    #jobs\ mobile{
        display: none;
    }
h4 {
    text-align: center;
    font-size: 1.8vw;
    margin: 4vw 0 2vw 0;
    border-bottom: 2px white solid;
    width: 20vw;
    display: block;
}
.onerowcards {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100vw;
}
.kaigostaff{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    margin-bottom: 3vw;
}
.kanri{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    padding-bottom: 3vw;
}
.houmon{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* align-content: space-around; */
    flex-wrap: wrap;
    padding-bottom: 3vw;
}
#staff > div:nth-child(3){
    margin-top: -3vw;
    margin-bottom: 2vw;
}
.location img{height: 11vw;width: 20vw;}
.location a img{
    width: 2vw;
    height: 2vw;
}
.onerowcards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100vw;
}
.location{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.locations{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loctitle{
    font-size: 1.5vw;
    padding: 1vw 0;
}
a{
    cursor: pointer;
}
.location a{
    color: #177598;
    padding: 1vw 0 5vw 0;
    text-align: center;
    font-size: 1.2vw;
}
.textsmall{
font-size: 24px;
}
.texttiny{
    font-size: 18px;
}    
#benefits {
    background-image: url(img/backgroundimg.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* background-position: center center; */
    /* background-attachment: fixed; */
    padding: 2vw 0;
    height: 43.5vw;
}
h3{
    font-size: 45px;
    margin-bottom: 3vw;
}
h2{
    font-size: 60px;
}
.textbig{
    font-size: 45px;
}
.linehigh{
    line-height: 4.5vw;
}
.textmid{
    font-size: 35px;
}
.reverse{
    display: flex;
}

.tel {
    padding-top: 0;
}
#top {
   
    padding: 0.5vw 0;
    height: 60vw;
}
.cian {
    background-color: rgba(0, 216, 255, 0.6);
    padding: 2vw 0;
    margin-top: 16vw;
    margin-bottom: 5vw;
}
.button {
    background-color: #EA7979;
    border-radius: 51px;
    width: 58vw;
    text-align: center;
    margin: 2vw 0;
}
button {
    background-color: #EA7979;
    border: none;
    line-height: 2vw;
    padding: 1.5vw;
}
span {
    letter-spacing: -0.3vw;
}

video {
    max-height: 100%;
    height: auto;
    margin-bottom: 8vw;
    width: 70vw;
    margin-top: -3vw;
}

#benefits {
    background-image: url(img/backgroundimg.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center center; */
    /* background-attachment: fixed; */
    padding: 2vw 0;
    height: auto;
}

#benefits p{

margin-bottom: 5vw;
}
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#gallery img{
    width: 33.29vw;
}
card {
    max-width: 80%;
    /* margin: 5vw 5vw; */
    display: flex;
    justify-content: space-between;
    padding: 5vw 5vw 5vw;
    flex-direction: row;
    border: solid grey 1px;
    flex-wrap: wrap;
}

#staff img {
    width: 29vw;
    /* margin: 3vw 0; */
}
card img {
    order: 1; /* Puts the text on the left */
    max-width: 50%; /* Adjust the size as needed */
}
card{
    margin-top: 0vw;
}
card .hiraginothin {
    order: 2; /* Puts the image on the right */
    width: 50%; /* Adjust the size as needed */
}
card.reverse img{
    order: 2; /* Puts the image on the right */
    max-width: 50%; /* Adjust the size as needed */
}
card.reverse .hiraginothin{
    order: 1; /* Puts the text on the left */
    width: 50%; /* Adjust the size as needed */
}
.cards {
    margin-top: 0vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.collapsible {
    height: 7vw;
    /* width: 90%; */
    background-color: #539CB7;
    color: white;
    border: 1px solid white;
    width: 30vw;
    text-align: left;
    border-radius: 1px;
    margin: 0;
    margin-bottom: 2vw;
    /* max-height: 200vw; */
    text-align: center;
    margin-top: 2vw;
    font-size: 20px;
    padding: 1.5vw 1vw;
    font-weight: 800;
    overflow-y: hidden;
    margin-left: 1vw;
    margin-right: 1vw;
}
.content {
   
display: block;
   
overflow: hidden;
   
width: 100%;
   
transition: max-height 0.9s ease-in-out;
   
overflow: hidden;
   
max-height: 0;
}
.active {
    display: block; /* Show when active */
    background-color: #e78282;
}
.content.active{
    background-color: #177598!important;
}
th, td {
    /* padding: 5px; */
    border-bottom: 1px solid white;
    padding: 2vw 0;
    text-align: left;
    vertical-align: top;
    background-color: #177598;
}

td {
    width: 80%;
}
th{
    width: 20vw;
}
#contact > div.centered > p {
    padding: 0vw 8vw 1vw 8vw;
}
iframe{
    width: 50%;
    height: 93vw;
}
iframe .table th {
    padding: 20px 0 0.5vw;
    background: none;
    font-weight: bold;
    font-size: 20px!important;
}
iframe .table td {
    width: 100%;
    background-color: white;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #222;
    font-size: 20px!important;
}
select {
    width: 100%;
    padding: 7px!important;
    line-height: normal;
    background: #fff;
}
input[type=text], input[type=password], textarea {
    width: 100%;
    padding: 5px 0 5px 15px!important;
    background: white;
    border: 1px solid grey;
    -moz-box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.03);
    -webkit-box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.03);
    box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.03);
}
select:not(:-internal-list-box) {
    overflow: hidden;
 
}
select {
    font-size: 20px; /* Adjust the font size as needed */
    width: 100%;    /* Adjust the width as needed */
    /* Additional styles (e.g., border, padding) can be added here */
}

/* Style the options within the select dropdown */
select option {
    font-size: 20px; /* Adjust the font size as needed */
    overflow-y: hidden;
    /* Add itional styles for options can be added here */
}
#jobs{
display: none;
}
#jobs1{
    display: block  ;
}
}