* {
    margin: 0;
    padding: 0;
    border: none;
}


@font-face {
    font-family: 'Hiragino Mincho ProN W3';
    src: url('../fonts/HiraginoMinchoProW3.woff2') format('woff2'),
         url('../fonts/HiraginoMinchoProW3.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Hiragino Mincho ProN W6';
    src: url('../fonts/HiraginoMinchoProW6.woff2') format('woff2'),
         url('../fonts/HiraginoMinchoProW6.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Hiragino Kaku Gothic ProN W3';
    src: url('../fonts/HiraginoKakuGothicProW3.woff2') format('woff2'),
         url('../fonts/HiraginoKakuGothicProW3.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hiragino Kaku Gothic ProN W6';
    src: url('../fonts/HiraginoKakuGothicProW6.woff2') format('woff2'),
         url('../fonts/HiraginoKakuGothicProW6.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Hide scrollbar in Firefox */
html {
  scrollbar-width: none; /* Firefox-only property */
}
#top {
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE and legacy Edge */
}

::-webkit-scrollbar {
  display: none;
}
/* animation*/ 
.fade-from-bottom {
    opacity: 0;
    transform: translateY(50px); /* Start from slightly below */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

.fade-from-bottom.visible {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
}
.slide-from-right {
    opacity: 0;
    /* transform: translateX(50px); */ /* Start from slightly outside */
    transition: opacity 2.5s ease, transform 2.5s ease!important; /* Smooth transition */
}

.slide-from-right.visible {
    opacity: 1;
    transform: translateX(0); /* Move to original position */
}
.slide-from-left {
    opacity: 0;
    transform: translateX(-50px); /* Start from slightly outside */
    transition: opacity 2.5s ease, transform 2.5s ease; /* Smooth transition */
}

.slide-from-left.visible {
    opacity: 1;
    transform: translateX(0); /* Move to original position */
}
.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease; /* Smooth transition */
}

.fade-in.visible {
    opacity: 1;
}
@keyframes fade-from-top {
    0% {
      opacity: 0;
      transform: translateY(-50px); /* Start position slightly above */
    }
    100% {
      opacity: 1;
      transform: translateY(0); /* Move to original position */
    }
  }
  
  .fade-from-top {
    opacity: 0;
    animation: fade-from-top 0.5s ease forwards; /* Use forwards to keep the final state */
  }
  @keyframes slideInFromRight {
    from {
      right: -100%; /* Start off the screen to the right */
      bottom: -100%; /* Start off the screen to the bottom */
      opacity: 0;
    }
    to {
      right: 0;
      bottom: 0;
      opacity: 1;
    }
  }
  
  @keyframes slideInFromLeft {
    from {
      left: -100%; /* Start off the screen to the left */
      bottom: -100%; /* Start off the screen to the bottom */
      opacity: 0;
    }
    to {
      left: 0;
      bottom: 0;
      opacity: 1;
    }
  }
  
  .newsbgimg1 img {
      width: 35vw;
      position: absolute;
      top: 0;
      right: 0;
      
  }
  
  .newsbgimg2 img {
      width: 35vw;
      position: absolute;
      bottom: 0;
      left: 0;
      
  }
  .newsbgimg1 img.start {
    animation: slideInFromRight 1s ease-out forwards;
}

.newsbgimg2 img.start {
    animation: slideInFromLeft 1s ease-out forwards;
}
@keyframes slide{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}


.thumbs{overflow: hidden;padding: 0;white-space: nowrap; position: relative; /* Add this line */}
.thumbs-slide{
    display: inline-flex; /* Use flex to align images inline without default spacing */
    width: 187vw; /* Adjust based on your actual calculation */
    animation: 55s slide infinite linear;
  }
  .thumbs-slide img{height: 21vw;margin: 0;}
  .watch-video-btn {
    position: absolute;
    top: -4px; /* Adjust as needed */
    right: 0px; /* Adjust as needed */
    z-index: 10; /* Ensure it's above the slider */
    cursor: pointer;
}
.watch-video-btn img {
    height: auto; /* Adjust based on your needs */
    width: auto; /* Adjust based on your needs, or use specific px or vw values */
}
/* animation end*/ 
.hamburger-menu-open{
    overflow: hidden;
  }
  .back-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 51px;
    height: 53px;
    border-radius: 50%;
    background-color: rgb(0 0 0 / 0%);
    z-index: 9999;
    opacity: 0;
  }
  
  .back-to-top-button:hover {
    opacity: 1;
  }
  .circle2 img{
    
width: 20vw;
    
/* height: 60px; */
    
/* height: 43px; */
}
p{
    font-family: 'Hiragino Kaku Gothic W6', sans-serif;
}
body{
    /* padding: 3% 0; */
}
main {
    /* legacy 15% side padding removed — broke full-bleed heroes on renewed pages */
}
footer{
    /* margin-right: 2%; */
    /* margin-left: 2%; */
    max-width: 100%;
    overflow-x: hidden;
}
header{
    /* legacy 2% side padding removed — base.css .siteHeader .headerInner handles padding */
}

a {
    text-decoration: none;
}
.wpcf7-spinner{
	display:none;
}
ul,
li {
    text-decoration: none;
    list-style: none;

}
#top{
    padding-right: 0%;
    padding-left: 0%;
}
img {
    max-width: 100%;
}
.abouttop{
    background-image: url(../img/top/pastel-color.png);
    height: 58vw;
}
.mincho3{
    font-family: 'Hiragino Mincho ProN W3', serif;
}
h1{font-size: 6vw;margin-top: 2vw;}
h2.mincho3{
    font-family: 'Hiragino Mincho ProN W3', serif;
    font-size: 2vw;
    font-weight: 300;
}
.leftcardtop{

}
.rightcardtop{

}
.cardtitle{font-size: 2.3vw;}
.mincho6{
    font-family: 'Hiragino Mincho ProN W6', serif;
    font-weight: 600;
}
.sansreg{font-weight: 500;margin-top: 1.5vw;margin-bottom: 1.5vw;font-size: 1.1vw;line-height: 1.8;}
.sans6{
    font-family: 'Hiragino Kaku Gothic ProN W6', sans-serif;
}
.sans3{
    font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}
.bluelinkbox{margin-top: 2vw;border: solid 3px #5BABD0;padding: 1.5vw 7vw;color: #5BABD0;}
.bluish{color: #5BABD0;}
.concept{
    background-image: url(../img/top/concept.png);
    height: 28vw;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.servprod{
    background-image: url(../img/top/services.png);
    background-size: cover;
    height: 51vw;
    background-repeat: no-repeat;
    margin-top: -3vw;
}
.concepttitles{border-bottom: solid white 3px;margin-bottom: 2vw;width: 30vw;}
.newstoppage{
    position: relative;
    height: 48vw;
    overflow: hidden;
}
.mediach{margin-top: -2.5vw;}
.otherworks{
    background-image: url(../img/top/otherWorks.png);
    margin-top: -3.2vw;
    background-size: cover;
    background-repeat: no-repeat;
    height: 55vw;
}
.newsbgimg2{
    
}
.newsbgimg1{
    
}

/* news img
.newsbgimg2 img{
    width: 35vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    margin-bottom: 0;
    padding-bottom: 0;
}
.newsbgimg1 img{
    width: 35vw;
    position: absolute;
    right: 0;
    z-index: 1;
}*/ 
#top > section.abouttop > div.onerow > div.rightcardtop > img{
    width: 50vw;
}
#top > section.abouttop > div.onerow > div.leftcardtop{
    margin-left: 4vw;
}
.bluish a{
    color: #5BABD0 ;
}
#top h3{
    font-size: 3vw;
    font-weight: 400;
    font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
    }
    #top > section.servprod > div > div.leftcardtop > div > h3{
        margin-top: 8vw;
    }
    #top > section.servprod > div > div.leftcardtop > div > img{
        width: 50vw;
    }
    .bluishbutton{width: 13vw;background-color: #1393C3;padding: 2vw 3vw;border-radius: 54px;}
    .bluishbutton a{
        color: white;
    }

    #top > section.servprod > div > div.rightcardtop{
        margin-right: 3vw;
        margin-top: 11vw;
    }
    #top > section.servprod > div > div.rightcardtop > div > p.sansreg{
        margin-top: 3vw;
        margin-right: 5vw;
    }
    #top > section.concept > div.onerow{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin-top: 0;
        padding-top: 7vw;
        align-content: center;
        flex-wrap: wrap;
    }   
    #top h4{
        font-size: 2vw;
    }
    #top > section.concept > div > div.leftcardtop > div > p{
            /* margin-left: 4vw; */
    }
    .aligned{
        display: flex;
        flex-direction: column;
        align-content: flex-start!important;
        align-items: flex-start!important;
        justify-content: space-evenly;
    }
.whitebox{
    margin-top: 2vw;
    border: solid 3px white;
    padding: 1.5vw 7vw;
    }
.whitebox a{
       color: white;}
       
       #top > section.newstoppage > div.centered{
        position: relative;
        z-index: 999;
        justify-content: center;
        align-items: center;
        padding-top: 7vw;
       }    
       #top > section.newstoppage > div.centered > div{
        margin-top: 8vw;
		   margin-bottom: 4vw;
       }
       .topnews tr{display: flex;flex-direction: row!important;border-bottom: solid grey 1px !important;}
       .topnews th{width: fit-content!important;margin-right: 2vw;/* border-bottom: solid grey 1px!important; */font-weight: 300;color: grey;}
       .topnews td{

       }
#top table{
    margin-top: 3vw;
}
.otherworks img{
    width: 34vw !important;
    margin-top: 0!important;
    margin-bottom: 1vw;
}
#top > section.otherworks > div > div.rightcardtop > div > div:nth-child(1) > a > img{
	
    width: 30vw !important;
}
#top > section.otherworks > div > div.rightcardtop > div > div:nth-child(1){
	position: relative;
    top: -4vw;
    right: 12vw;
}
#top > section.otherworks > div > div.leftcardtop > div > h3{
	margin-top:-1vw;
}
#top > section.otherworks > div{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    padding-top: 14vw;
}
.offices{
    background-image: url(../img/top/places.png);
    height: 58vw;
    background-size: cover;
    background-attachment: fixed;
    /* margin: 3vw; */
}
body > footer > section.offices > div.centered > img{
    width: 37vw;
    padding-top: 7vw;
}
.cardtop{color: #717071;background-color: rgba(255, 255, 255, 0.7);width: 21vw;padding: 5vw 0;/* text-align: center; *//* margin-top: 4vw; */
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;}
.cardtop .textmid{
    margin-left: 2vw;
margin-top:3vw!important;
}
.rowof4{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: stretch;justify-content: space-around;margin-top: 8vw;}
.textalign{
    text-align: center;
}
.bigfont{
    font-size: 2vw;
    margin-bottom: 2vw;
}
.contacttop{
    background-color: #D3E9F3;
}
.whiteback{
    background-color: white;
    width: 50vw;
    height: 20vw;
    /* margin-top: 4vw!important; */
    padding-top: 4vw;
    margin-bottom: 6vw;
}
footer h3{
    font-size: 3vw;
    font-weight: 500;
    font-family: 'Hiragino Kaku Gothic ProN W6', sans-serif;
}
.contacttop h3{
    margin-top: 5vw;
}
#phoneicon{
    width: 6vw;
    margin-right: 2vw;
}
.phonenumber{font-size: 4vw;color: grey;}
.textboldfoot{color: grey;font-size: 1.5vw;padding-left: 4vw;line-height: 0.2;margin-top: -0.5vw;margin-bottom: 2vw;}
.emailfooter{
    width: 2vw;
    margin-left: -1vw;
    margin-right: 1vw;
    /* padding-top: 1vw; */
    height: 1.5vw;
}
.logoimgfooter{
    width: 6vw;
    height: 10vw;
}
.footernav{
    max-width: 70vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 5vw;
}
body > footer > div:nth-child(5) > div > nav:nth-child(3){
    margin-top: -3vw;
}
.second-two{
    margin-top: -6vw!important;
}
footer .second-row a{
    height: 1.3vw;
    padding-right: 1.5vw!important;
    border-right: solid 3px black!important;
}

.slider {
    overflow: hidden;
    width: 100%;
    height: 21vw;
    margin-top: -0.4vw;
  }
  
  
.mobile {
    display: flex;
}

.textreg,
.textmid {
    font-family: 'Hiragino Kaku Gothic W6', sans-serif;
    /* font-weight: 600; */
    font-size: 3vw;
    line-height: 2;
}

.textlight {
    font-family: 'Hiragino Kaku Gothic W3', sans-serif;
    font-weight: 300;
}

.bold {
    font-family: 'Hiragino Kaku Gothic W8', sans-serif;
    font-weight: 700;
}

.toptext {
    width: 39vw;
    margin-top: 2vw;
    margin-bottom: -1vw;
    text-align: justify;
    font-size: 3vw;
}
.flexfoot{
    display: flex;
    justify-content: space-around;
}
.mainbanner {
    margin-top: 0vw;
    margin-bottom: -0.3vw;
    /* margin-left: -15vw; */
    margin-top: 0vw;
}

.spaceunder {
    margin-bottom: 3vw;
}

.active {
    color: #2CA6E0 !important;
}

.logofooter {
    width: 18vw;
    margin-bottom: 2vw;
}

.logoname {
    width: 44vw;
    margin-bottom: 3vw;
}

/* ヘッダー全体のスタイル — legacy stale rule, neutralised so base.css owns the header */
header {
    /* margin-top: 5px removed — was creating a thin gap above the sticky header */
}

/* コンテナのスタイル */
.container {
    /* width: 80%; */
    max-width: 1200px;
}

/* ロゴ画像のスタイル */
.container img {
    width: 200px;
    height: auto;
}

/* ナビゲーションのスタイル */
nav {
    /* デフォルトでは非表示にする */
    display: none;
    position: fixed;
    /* 固定位置にする */
    top: 5%;
    left: 0;
    /* 左端から-100%ずらす */
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    transition: left 0.3s;

    /* 左位置の変化を0.3秒かけて行う */
    text-align: center;
    padding-top: 0vw;
}

/* ナビゲーションのリストのスタイル */
nav ul {
    display: flex;
    flex-direction: column;
    /* 縦方向に並べる */
    align-items: flex-start;
    /* 左寄せにする */
    list-style: none;
}

/* ナビゲーションのリストアイテムのスタイル */
.header-menu-item {
    width: 40%;
    /* 幅を100%にする */
    margin-left: 30vw;
    /* 余白をなくす */
    padding: 8px;
    border-bottom: 1px solid #333333;
    /* 下に境界線を引く */
}

/* ナビゲーションのリンクのスタイル */
.header-menu-item a {
    text-decoration: none;
    color: #333333;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
}

/* バーガーメニューのスタイル */
.header-menu-burger {
    display: block;
    /* 表示にする */
    position: absolute;
    /* 固定位置にする */
    z-index: 9999;
    /* 最前面に表示する */
    cursor: pointer;
    /* カーソルをポインターにする */
    /* border: solid black 1px; */
}

/* バーガーメニュー内部のスタイル */
.hamburger,
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 28px;
    /* 幅を30pxにする */
    height: 3px;
    /* 高さを3pxにする */
    background-color: #333333;
    /* 背景色を黒にする */
    border-radius: 2px;
    /* 角を丸くする */
    /* border: solid 1px black; */
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    /* 空白文字を挿入する */
    position: absolute;
    /* 絶対位置にする */
    left: auto;
    /* 左位置を自動にする */
    right: auto;
    /* 右位置を自動にする */
}

.hamburger-inner::before {
    top: -8px;
    /* 上から8pxずらす */
}

.hamburger-inner::after {
    bottom: -8px;
    /* 下から8pxずらす */
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    transition-property: transform;
    /* 変形プロパティを適用する */
    transition-duration: 0.15s;
    /* 変形時間を0.15秒にする */
    transition-timing-function: ease;
    /* 変形速度をイージングにする */
}

/* バーガーメニューがクリックされたときのスタイル（クラス名はJavaScriptで付与 */
.is-active .hamburger-inner {
    transform: translate3d(0, 0px, 5px) rotate(48deg);
    /* 中央の線を右上に移動して45度回転させる */
}

.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    /* 上の線を左下に移動して-45度回転させる */
    opacity: 0;
    /* 不透明度を0にする */
}

.is-active .hamburger-inner::after {
    transform: translate3d(0, -8px, 0) rotate(-95deg);
    /* 下の線を中央に移動して-90度回転させる */
}

/* ナビゲーションが開いたときのスタイル（クラス名はJavaScriptで付与 */
.is-open {
    left: -5vw;
    /* 左位置を0にする */
    display: inline-block;
    z-index: 9999;
    margin-top: -24vw;
    padding-top: 16vw;
    padding-bottom: 16vw;
    width: 110%;
    max-height: max-content;
    animation-timing-function: ease-in-out;
    transition-delay: 2s;
    transition-duration: 3s;
    overflow: hidden;
}

.news th {
    width: 55vw;
    text-align: left;
    font-weight: 300;
    border-bottom: none !important;
}

.news td {
    width: 80vw;
    text-align: left;
    font-size: 3vw;
}

.news tr {
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
    flex-wrap: wrap;
}

a {
    color: rgb(48, 47, 47);
}

.news {
    /* padding: 0 -1vw; */
    margin-top: 2vw;
}

.newscontents {
    margin-top: 3vw;
    margin-bottom: 5vw;
}

.dot {
    max-width: 1vw;
max-height: 1vw;
    margin-right: 1vw;
}

.name {
    font-size: 5vw;
    font-weight: 700;
    margin-bottom: 3vw;
    margin-top: 0 !important;
    color: black!important;
}

.paragraph {
    margin-bottom: 4vw;
}

.sidetitile {
    margin-bottom: 3vw;
    font-weight: 600;
}

.right p {
    margin-bottom: 2vw;
}

.row img {
    max-width: 30vw;
    flex: 50%;
}

.pdf img {
    max-width: 18vw;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.centered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}

.pdf {
    margin-bottom: 4vw;
}

.row {
    margin-bottom: 9vw;
}

.blue {
    color: #2CA6E0;
}

.relative {
    position: relative;
}

.circle {
    background-color: #2CA6E0;
    color: white;
    border-radius: 50px;
    width: 5vw;
    height: 5vw;
}

.circlegrey {
    background-color: #717071;
    color: white;
    border-radius: 50px;
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    text-align: center;
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: 0vw; */
    flex-direction: row;
    flex-wrap: nowrap;
}


.circle.relative {

left: -2vw;

top: -4.5vw;
}

.bluebottom {
    border-bottom: #2CA6E0 1px solid;
    width: 46vw;
    margin-bottom: 0 !important;
    margin-top: 1vw;
    margin-left: -3vw;
}

.white {
    color: white;
}

.circle.large.white {
    margin-bottom: 0 !important;
    font-size: 2.5vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
    width: 4vw;
    height: 4vw;
}

.paragraph .blue.textreg {
    margin-bottom: 0;
    margin-left: 4vw;
}
#FAQ .active{
    color: white!important;
}
.borderbox {
    border: #2CA6E0 solid 2px;
    padding: 1vw 1vw;
}

.gridcontainer {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

.content2 .textmid{
    max-width: 49vw;
}
.content,
.content2 {
    padding: 0 15px;
    background-color: white;
    max-height: 0;
    overflow-y: hidden;
    overflow-x: visible;
    transition: max-height 0.2s ease-out;
}
.content2{
    margin-left: -0.8999999999999999vw;
    /* overflow: initial; */
}
.collapsible {
    background-color: #2CA6E0;
    color: white;
    width: 100%;
    text-align: left;
    border-radius: 30px;
    padding: 1vw 2vw;
    margin-bottom: 2vw;
    font-size: 1vw;
    /* max-height: 200vw; */
}
.collapsible2{
    background-color: white;
    text-align: left;
    height: 5vw;
}
.logo.mobile {
    width: 47vw;
    margin-top: 2vw;
    margin-bottom: 4vw;
    margin-left: 3vw;
}

.blackborder {
    border: solid black 1px;
    width: 36vw;
    height: 9vw;
}

.onerow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.big {
    font-size: 2.2vw;
    margin-top: 2vw;
}

footer .textbox.centered {
    margin-top: 3vw;

}

.textbigbold {
    font-size: 4vw;
    font-family: 'Hiragino Kaku Gothic W8', sans-serif;
    font-weight: 800;
}

footer .textbox.centered .textbold {
    font-size: 2vw;
    font-family: 'Hiragino Kaku Gothic W8', sans-serif;
    font-weight: 800;
}

footer .centered.squarebutton {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    border: solid 1px #2CA6E0;
    padding: 2vw 4vw;
    font-size: 2.5vw;
    width: 24vw;
    margin-top: 3vw;
}

.squarebutton img {
    width: 4.5vw;
    margin-right: 2vw;
}

.buttontext {
    padding: 0 !important;
}

#newstop {
    margin-top: 4vw;

}

#newstop tr {
    margin: 2vw 0;
    font-family: 'Hiragino Kaku Gothic W6', sans-serif;
    font-weight: 600;
    max-width: 82vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    border-top: 2px dotted #2CA6E0 !important;
    padding: 2vw 0;
    justify-content: center;
    align-content: center;
}
.different{
    background-color: #42210B;
    padding: 0.5vw;
}
#newstop th,
#newstop td {
    padding: 0;
    border: none;
    border-bottom: none !important;
}

#newstop th {
    padding-top: 4vw;
}

.daihyo img {
    width: 51vw;
}

.alignleft {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.imgtitle {
    margin-bottom: 0 !important;
}

.position {
    height: 108vw;
    background-image: url(../img/top/withwater1.png);
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 4vw;
    font-size: 3vw;
}

.position p {
    position: relative;
    top: -3vw;
    padding: 2vw;
    text-align: justify;
}

.position2 p {
    top: -40vw;
    padding: 2vw;
    position: relative;
    text-align: justify;
    left: 0;
}

.position3 p {
    position: relative;
    top: 0;
    left: 0;
    padding: 2vw;
}

.position2 {
    height: 32vw;
    background-image: url(../img/top/Asset24.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
}

.position3 {
    background-image: url(../img/top/Asset25.png);
    height: 79vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
}
.figure{
    width: 14vw;
    translate: 59vw -3vw;
}
.figure2{
    width: 14vw;
    /* display: flex; */
    translate: 50vw 1vw;
}
.center{
    text-align: center;
    line-height: 1vw;
}
.imageback {
    z-index: 1;
    position: relative;
    margin-top: 4vw;
}
a {
	color: #18272F;
  position: relative;
  text-decoration: none;
}

/* Legacy global a::before / a:hover::before underline removed.
   It was painting a 2px blue line under every link/button on hover, which:
     (1) doubled up with the nav's own ::after underline (2 lines on nav hover)
     (2) added unwanted underlines to buttons, CTAs, footer links, breadcrumbs, etc.
   The nav's intended single underline lives on .siteHeader .navItem::after in base.css. */
#policy {
    margin-bottom: 3vw;
  }
/* メディアクエリで768px以上の画面幅のときのスタイル */
@media only screen and (min-width: 768px) {
body > footer > div.addresses > div:nth-child(6){
		margin-left:2vw;
	}
	.bluelinefooter{
		    width: 70vw;
    border-bottom: 1px solid #2CA6E0;
    margin-bottom: 1vw;
    margin-top: 1vw;
	}
/* Style for the modal background */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Style for the modal content */
.modal-content {
	width: 80vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

/* The Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

/* The Overlay */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* When the modal is displayed */
.modal.show {
  display: block;
  opacity: 1;
}

/* When the modal content (video) is displayed */
.modal-content.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
    header{
        height: 10vw;
    }
    #withwater .blue{
        font-weight: 800;
    }
    .sidetitile {
        margin-bottom: 1.5vw;
        font-weight: 600;
    }
    #policy {
        margin-bottom: 5vw;
      }
	#guide .bluebutton.longbutton {
		margin-left: -2vw;
			
	}
.textthanks{
    font-size: 1.5vw;
    font-weight: 600;
    margin-bottom: 1vw;
}
.textthankssm{
    font-size: 1.3vw;
}
.blueboxphone{background-color: #2CA6E0;width: 51vw;padding: 0.5vw 0;font-size: 2vw;color: white;margin-top: 2vw;margin-bottom: 5vw;}
.blueboxphone .textbold{
    
font-size: 1.2vw;
    
margin-left: 1vw;
}
.texthuge{
    font-size: 2vw;
    font-weight: 600;
    color: white;
}
    .standout{
        font-size: 1.1vw!important;
        font-weight: 600!important;
        margin-bottom: 0vw!important;
    }
    #supercool .margintop{
        margin-top: 0vw!important;
    }
    #supercool .margintop img{
       width: 30vw;
    }
    #supercool p.blue{
        font-size: 1.2vw;
        font-weight: 800;
        padding: 0;
        margin-top: 2vw;
    }
    #supercool .biggerimg{
        margin-top: 6vw!important;
    }
    #supercool .biggerimg.negmargintop {
        margin-top: -3vw!important;
    }
    #soil{
        margin-bottom: 6vw;
        margin-top: -3vw;
    }
    .wayup{
        margin-top: -5vw;
width: 71vw;
    }
    #about{
        margin-top: 0vw;
    }
    #osmosis{
        
margin-top: 4vw;
    }
    .arrowside{
        width: 1.5vw;
        margin-right: 0.5vw;
        margin-bottom: 0!important;
        margin-top: 0!important;
        margin-left: 0.7vw;
    }
    .textmid.margin-left.desktop{
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-left: 3vw;
        width: 46vw;
        margin-bottom: 0!important;
        align-items: center;
    }
    #services .move1{

margin-right: 8vw;

}
    #services .move2{
        
margin-right: 1vw;
    }
    #services .move3{

margin-right: 1vw;

}
        #services .move4{

margin-right: 2vw;

}
    .position {
        height: 40vw;
        background-image: url(../img/top/withwater1.png);
        background-position-y: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 0vw;
    }

    .position p {
        position: relative;
        top: 0vw;
        left: 1vw;
        font-size: 1vw;
        padding: 0.5vw;
    }

    .position2 p {
        top: 0vw;
        position: relative;
        left: 1vw;
        padding: 0.5vw;
    }

    .position3 p {
        position: relative;
        top: -1vw;
        left: 1vw;
        padding: 0.5vw;
    }

    .position2 {
        height: 36vw;
        background-image: url(../img/top/Asset24.png);
        background-size: contain;
    }

    .position3 {
        background-image: url(../img/top/Asset25.png);
        height: 53vw;
        background-size: cover;
        background-position-x: center;
        background-repeat: no-repeat;
margin-left: 1vw;
    margin-right: -1vw;
    }

    .imageback {
        z-index: 1;
        position: relative;
        margin-top: 4vw;
    }

    #newstop tr {
        margin: 0vw 0;
        font-family: 'Hiragino Kaku Gothic W6', sans-serif;
        font-weight: 600;
        max-width: 70vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* border-bottom: 2px dotted #2CA6E0!important; */
        border-top: 2px dotted #2CA6E0 !important;
        padding: 1.5vw 0;
        align-items: center;
    }

    #newstop th {
        padding-top: 0;
    }

    .big {
        font-size: 1.2vw;
        margin-top: -1vw;
        color: #717071;
    }

    .onerow {
        display: flex;
        margin-bottom: 2vw;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    /* バーガーメニューを非表示にする */
    .header-menu-burger {
        display: none;
    }

    /* ナビゲーションを表示する */
    nav {
        display: flex;
        position: static;
        /* 固定位置を解除する */
        left: auto;
        /* 左位置を自動にする */
        width: auto;
        /* 幅を自動にする */
        height: 5vw;
        /* 高さを自動にする */
        background-color: transparent;
        /* 背景色を透明にする */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }

    /* ナビゲーションのリストのスタイル */
    nav ul {
        flex-direction: row;
        /* 横方向に並べる */
        align-items: center;
        /* 中央寄せにする */
    }

    /* 最初の行のナビゲーションのスタイル */
    .first-line-nav {
        /* width: 100%; */
        margin-top: 20px;
        flex-wrap: wrap;
        /* justify-content: space-between; */
    }

    /* 最初の行のナビゲーションのリストアイテムのスタイル */
    .first-line-nav .header-menu-item {
        border: 1px solid #333333;
    }

    .second-line-nav .header-menu-item {
        width: calc((100% - (10 * (10px + 10px))) / 10);
    }

    /* 最初の行のナビゲーションのリストアイテムの幅 */
    .first-line-nav .header-menu-item:nth-child(1) {
        width: calc(100% - (4 * (10px + 10px + 1px)));
    }

    .first-line-nav .header-menu-item:nth-child(n+2) {
        width: calc((100% - (4 * (10px + 10px + 1px))) / 3);
    }

    /* 第二行のナビゲーションのスタイル */
    .second-line-nav {
        margin-bottom: 20px;
        width: 100%;
    }

    /* 第二行のナビゲーションのリストアイテムの幅 */

    .desktop {
        display: flex;
        flex-wrap: wrap;
    }

    .mobile {
        display: none !important;
    }

    .news th {
        width: 23vw;
        text-align: left;
        font-weight: 300;
        border-bottom: 2px dotted #2CA6E0 !important;
        padding-bottom: 1.75vw;
    }

    .news td {
        max-width: 60vw;
        text-align: left;
        font-size: 1.1vw;
    }

    .news tr {
        display: flex;
        flex-direction: column;
    }

    .header {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        max-width: 97vw;
        margin-left: -1vw;
        margin-top: 3vw;
    }

    .logo {
        width: 21vw;
        height: 100px;
        margin-right: 0vw;
        margin-top: 0;
        margin-left: 3vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        height: 5vw;
    }

    .nav-item {
        width: 10vw;
        padding: 8px;
        font-weight: 600;
        border: 2px solid #2CA6E0;
        color: #2CA6E0;
        text-align: center;
        margin-right: 3vw;
        height: 1.3vw;
        font-size: 1vw;
        font-family: "hiragino-kaku-gothic-pron", sans-serif;
    }

    .nav-item:active {
        color: #2a2a2a;
    }

    .nav-item.second-row {
        color: #717071;
        border: none;
        margin: 0 0px;
        margin-right: 2vw;
        padding: 0vw;
        text-align: center;
        font-size: 1vw;
        width: max-content;
        font-weight: 600;
    }

    .second-row {
        display: flex;
        flex-direction: row;
        /* max-width: 1200px; */
        /* width: 69vw; */
        flex-wrap: nowrap;
        margin-left: 1vw;
        align-items: flex-start;
        justify-content: flex-end;
        padding-top: 0;
    }
	footer .second-row{
		 max-width: 100vw;
		 /* height: -6vw; */
		 display: flex;
		 flex-direction: row;
		 flex-wrap: wrap;
		 height: 1vw;
		 margin-top: -5vw;
	}
    .first-row {/* width: 98vw; */display: flex;/* max-width: 1200px; */justify-content: space-between;flex-direction: row;align-items: flex-start;flex-wrap: nowrap;}

    hr {
        width: 100vw;
        height: 0;
    }

    .links {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        margin-right: -1vw;
        font-size: 0.7vw;
        margin-top: 1vw;
        align-items: center;
        font-weight: 800;
    }

    .logofooter {
            width: 7vw;
    margin-bottom: 0vw;
    }

    .logoname {
        width: 40vw;
        margin-bottom: 3vw;
    }

    .textreg,
    .textmid {
        font-family: "hiragino-kaku-gothic-pron", sans-serif;
        font-weight: 500;
        font-size: 1vw;
    }

    .paragraph {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 6vw;
        width: 76vw;
    }

    .paragraph .left {
        flex: 17vw;
        display: flex;
        flex-wrap: wrap;
              flex-direction: row;
        margin-top: -3vw;
    }

    .paragraph .right {
        flex: 65vw;
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;
        max-width: 55vw;
        align-items: flex-start;
        margin-top: -3vw;
    }
	body > footer > div.onerow > div.textbox.centered > p.textbigbold{
		font-size: 2.3vw;
    font-weight: 600;
	}
	body > footer > div.onerow > div.textbox.centered > p.textbold{
		font-weight: 600;
	}
    .gridcontainer {
           width: 73.5vw;
        max-height: 89vw;
        display: grid;
        grid-template-columns: 45% 45%;
        grid-template-rows: 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15%;
        gap: 5% 5%;
        grid-auto-flow: row;
        /* grid-auto-rows: auto; */
        /* grid-auto-columns: auto; */
        /* min-height: 225px; */
        /* min-width: 225px; */
        grid-template-areas:
            "span2 nospan"
            "span2 nospan2"
            "nospan3 nospan4"
            "nospan7 nospan5"
            "nospan8 nospan6"
            "span3 nospan9"
            "span3 nospan10"
            "span3 nospan11"
            "nospan12 nospan13"
            "nospan14 span21"
            "nospan15 span21"
            "nospan16 span22"
            "nospan17 span22"
            "nospan18 nospan19";
    }

    .span2 {
        grid-area: span2;
    }

    .nospan {
        grid-area: nospan;
    }

    .nospan3 {
        grid-area: nospan3;
    }

    .nospan2 {
        grid-area: nospan2;
    }

    .nospan4 {
        grid-area: nospan4;
    }

    .nospan5 {
        grid-area: nospan5;
    }

    .nospan6 {
        grid-area: nospan6;
    }

    .nospan7 {
        grid-area: nospan7;
    }

    .nospan8 {
        grid-area: nospan8;
    }

    .span3 {
        grid-area: span3;
    }

    .nospan9 {
        grid-area: nospan9;
    }

    .nospan10 {
        grid-area: nospan10;
    }

    .nospan11 {
        grid-area: nospan11;
    }

    .nospan12 {
        grid-area: nospan12;
    }

    .nospan13 {
        grid-area: nospan13;
    }

    .span21 {
        grid-area: span21;
    }

    .span22 {
        grid-area: span22;
    }

    .nospan14 {
        grid-area: nospan14;
    }

    .nospan15 {
        grid-area: nospan15;
    }

    .nospan16 {
        grid-area: nospan16;
    }

    .nospan17 {
        grid-area: nospan17;
    }

    .nospan18 {
        grid-area: nospan18;
    }

    .nospan19 {
        grid-area: nospan19;
    }

    .margintopimg {

        margin-top: 3vw;
    }

    .gridtext {
        height: 250vw;
    }

    .logofooter {
        /* width: 59vw; */
        /* margin-bottom: 2vw; */
        /* border-right: 1px solid blue; */
    }

    .addresses {
        display: flex;
        width: 71vw;
        margin-left: 0vw;
        /* margin: 0; */
        /* padding: 0; */
        flex-direction: row;
        align-content: space-around;
        justify-content: space-around;
        align-items: flex-start;
        margin-bottom: 3vw;
    }

    .addresses .textbox {
        display: flex;
        width: 36vw;
        font-size: 0.8vw;
        text-align: justify;
        padding: 1vw;
        border-left: 1px solid #5AAACF;
        flex: auto;
        flex-wrap: wrap;
        height: 9vw;
    align-items: flex-start;
    align-content: flex-start;
    }
	body > footer > div.addresses > div.textbox.wider > p{
		margin-top: 2vw;
	}


    .addresses .textbox img {
     width: 15vw;
    margin-bottom: 0.8vw;
        margin-top: -1vw;

    }

    .logoimg {
        width: 38vw;
        height: 10vw;
    }

    .addresses .textbox .textmid {
        width: fit-content;
line-height: 1.7;
    }

    footer .centered {display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;/* margin-right: 4vw; */}

    footer .onerow {
        margin-top: -1vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    footer .centered.squarebutton {

display: flex;

flex-direction: row;

align-content: center;

align-items: center;

border: solid 1px #2CA6E0;

padding: 0.75vw 1.5vw;

font-size: 1.2vw;

width: 12vw;

}

    .squarebutton img {
        width: 1.5vw;
        margin-right: 1vw;
    }

    .buttontext {
        padding: 0 !important;
        margin-left: 1vw;
        text-align: center;
    }

    .textbigbold {
        font-size: 1.75vw;
        font-weight: 800;
        color: #696767;
    }

    .textbold {
        font-weight: 800;
    }

    footer .textbold {
        font-size: 1vw !important;
        color: #696767;
        margin-left: 1vw;
    }

    #top .onerow {
        margin-top: 3vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    #top .onerow .textbox {

        padding-right: 2vw;
    }

    #top .onerow img {
        width: 100vw;
        margin-top: 2.5vw;
    }

    .three div {

/* margin-top: -2vw; */

}

    .spacearound {
        padding: 0 2vw;
    }

    .textbig {
        font-size: 1.3vw;
    }

    .marginleft {
        margin-left: 2vw;
    }

    .pdf img {
        margin-top: 5vw;
        width: 8vw;
    }

    #about .flexbox.row img {
        width: 15vw;
        height: 10vw;
    }

    #about .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .paragraph {
        margin-bottom: -3vw;
    }

    .daihyo img {
        width: 23vw;
    }
#about .slogan{
    margin-bottom: 0vw;
    font-weight: 600;
}
    footer {
        width: 100vw;
    }

    footer .textmid {
        font-size: 0.9vw;
    }

    .wider {
        width: 75vw !important;
    }

    .copyright {
width: 71vw;
margin-top: 4vw !important;

margin-bottom: 2vw;

}
#withwater{
    margin-top: 5vw;
    margin-bottom: 4vw;
}

    .position {}

    .position2 {}

    .position3 {top: 0vw;
    position: relative;
    left: -1vw;}

.buttonsrow{
    display: flex;
    margin-left: 6vw;
    margin-bottom: 2vw;
}
#guide .buttonsrow {
    display: flex;
    margin-left: 0vw;
    margin-bottom: 2vw;
margin-top: 3vw;
    }
    #guide .longpassage{
        margin-left: -6vw;
        /* max-width: 69vw; */
        /* width: 50vw; */
    }
.buttonsrow .bluebutton{width: 10vw;background-color: #2CA6E0;border-radius: 23px;margin-right: 3vw;text-align: center;padding: 0.5vw 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;margin-bottom: 4vw;}
.bluebutton img{
    height: 1vw;
    margin-left: 1vw;
}

.bluebutton.longbutton{
    margin-top: 2vw;
    width: 21vw;
    background-color: #2CA6E0;
    border-radius: 23px;
    margin-right: 3vw;
    padding: 0.8vw 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 4vw;
    margin-left: 4vw;
    }
#guide{
    margin: 4vw 0;
}
#FAQ{
    margin-top: 4vw;
    margin-bottom: 4vw;
}
.nopadding{
    padding: 0!important;
    font-size: 1.2vw;
    font-weight: 800;
}

#guide .circle.relative{
    left: -2vw;
    top: -2.2vw;
}
#guide .paragraph{
    margin-top: 2vw!important;
}
#guide .card .textreg{
    margin-left: 4vw;
    margin-bottom: 0;
    width: 45vw;
}
#guide .up{
    margin-top: -3vw;
}
#FAQ .circle.large.white{
    
margin-left: -0.75vw;
}
#FAQ .circlegrey{
    
margin-left: -0.75vw;
    }
    #FAQ .blue{
        font-weight: 800;
    }
   #FAQ .content2 .onerow{display: flex;flex-direction: row;align-items: flex-start;}
   #terms .blue{
    font-size: 1.2vw;
    font-weight: 800;
    margin-left: 4px;
   }
	#terms .blue.textmid{
		font-size:1.1vw;
		font-weight:600;
	}
   #terms .onerow{
    margin-bottom: 0.5vw;
   }

   #construction .textbigger{
    font-size: 1.2vw;

   }
   #construction .blue{
    font-size: 1.2vw;
    font-weight: 600;
    padding: 1.2vw;
    margin-left: 0vw;
   }
   #construction .giant.blue{

padding: 0.5vw;

margin-right: 0.5vw;

}
   #construction .nocircle .blue{
    font-size: 2.3vw;
    margin-left: 0;
   }
   #construction .textbox.flexbox{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
   }
   #construction .leftside{
    margin-right: -8vw;
    width: 25vw;
   }
   #construction .producttitle .circle {

width: 3vw;

height: 3vw;
}
#example2 .buttonsrow .bluebutton {
    width: 10vw;
    margin-top: 3vw;
    background-color: #2CA6E0;
    border-radius: 23px;
    margin-right: 3vw;
    text-align: center;
    padding: 0.5vw 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0vw;
}
#example1 .buttonsrow .bluebutton {
    width: 15vw;
    margin-left: 1vw;
    margin-top: 3vw;
    background-color: #2CA6E0;
    border-radius: 23px;
    margin-right: 3vw;
    text-align: center;
    padding: 0.5vw 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0vw;
}
video{
    width: 100vw;
    margin-top: 2.5vw;
}
	#refresh > section.fourth > div.twocols > div.col3.col4 > div.onerow2 > div.two > p{
		margin-bottom:0.5vw;
	}
}


@media only screen and (max-width: 767px) {
/* Style for the modal background */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Style for the modal content */
.modal-content {
	width: 80vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

/* The Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

/* The Overlay */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* When the modal is displayed */
.modal.show {
  display: block;
  opacity: 1;
}

/* When the modal content (video) is displayed */
.modal-content.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* fixes */ 
#top .mainbanner {
    margin-bottom: -1vw;
}
#top .onerow{margin-top: 4vw;}

.aligned{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start!important;
    align-items: center!important;
}

.slider {
    overflow: hidden;
    width: 100%;
    height: 21vw;
    margin-top: -1.4vw;
}
body > footer > div.mobile.footermob > div > p{
    color: grey;
    font-size: 2vw;
    font-weight: 500;
}

.footermob{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}
.footermob img{
    margin-top: 2vw;
    width: 9vw;
    height: 15vw;
}

.otherworks img{
    width: 29vw !important;
    margin-top: 0!important;
    margin-bottom: 1vw;
}
#top > section.otherworks > div > div.rightcardtop > div > div:nth-child(1) > a > img{
	
    width: 26vw !important;
}
	#top > section.otherworks > div > div.rightcardtop > div > div:nth-child(1){
		position: relative;
    top: -4vw;
    right: 12vw;
	}




/* fixes end */ 
    .toptext {
        width: 82vw;
        margin: 6vw 0;
    }
    video{
        width: 100vw;
    }
    .desktop {
        display: none!important;
    }
    body {
        /* padding-right: 10%; */
        /* padding-left: 10%; */
        max-width: 100%;
        padding: 0;
        overflow-x: hidden;
    }
    .arrowside{
        width: 4vw;
        margin-right: 2vw;
        margin-bottom: 1vw!important;
        margin-top: 1vw!important;
    }
    .textbold.bigger.margin-left{
        margin-left: 2vw;
    }
    #services .onerow{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-left: 2vw;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
    }
    .copyright{
        text-align: center;
    }
    .dot {
        max-width: 4vw;
        /* margin-bottom: 3vw; */
        margin-right: 2vw;
    }
    #about .left{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 2vw;
    }
    #about .flexbox.row{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    #about .row img{
        height: 26vw;
        }
        #terms .borderbox{
            margin-bottom: 4vw;
            padding: 4vw;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }
	#terms .blue{
		font-weight:600;
	}
#terms .onerow{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#terms .dot{
    margin-right: 2vw;
}
#FAQ .circle.large.white {
    margin-bottom: 0 !important;
    font-size: 3vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
    width: 6vw;
    height: 6vw;
	margin-top: -0.5vw;}
	
#chevron .blue.alignright{
    padding: 0;
}
table{
    font-family: 'Hiragino Kaku Gothic W6', sans-serif;
}
.blue.alignright{
    padding: 0;
    margin-top: 2vw;
}
.margintopimg{
    margin-top: 3vw;
}
nav {position: absolute;overflow-y: hidden;height: 200%;/* animation-timing-function: ease-in-out; *//* animation-delay: 2s; *//* transition-delay: 2s; */}
.collapsible {font-size: 3vw;padding: 1.5vw 4vw;font-weight: 800;}

button.collapsible {}
#FAQ{
    margin: 5vw 0;
}
.content, .content2{
    margin-bottom: 3vw;
    text-align: left;
}
#FAQ .onerow{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* margin-bottom: 7vw; */
}
	#FAQ > div:nth-child(5) > button:nth-child(5){
		    height: 21vw;
	}
	#FAQ > div:nth-child(5) > button:nth-child(11) {
		height:18vw;
	}
.invisible{
    display: none!important;
}
.osmosis:last-of-type{
    margin-top: 12vw;
}
#pipe .osmosis:last-of-type{
    margin-top: 8vw;
}
#interlock .osmosis:last-of-type{
    margin-top: 3vw;
}
#perminterlock .osmosis:last-of-type{
    margin-top: 3vw;
}
#linerange .osmosis:last-of-type{
    margin-top: 3vw;
}
#hyper .osmosis:last-of-type{
    margin-top: 3vw;
}
#granistone .osmosis:last-of-type{
    margin-top: 3vw;
}
#guideblock .osmosis:last-of-type{
    margin-top: 3vw;
}
#supercool .osmosis:last-of-type{
    margin-top: 3vw;
}
#earthcloo .osmosis:last-of-type{
    margin-top: 3vw;
}
#flatplate .osmosis:last-of-type{
    margin-top: 3vw;
}
#rainwater .osmosis:last-of-type{
    margin-top: 3vw;
}
#linerange .blue{
    
padding-left: 0;
    
font-size: 3.5vw;
    
font-weight: 800;
}
.centered.marginsboth{text-align: left;display: flex;align-items: flex-start;}
.centered.marginsboth .textmid{
font-weight: 800;
margin: 2vw 2vw;
}
footer .textmid{
    font-weight: 600;
}
footer .textbox.centered {
    width: 77vw;
    height: 32vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
.textbigbold {
    font-size: 6vw;

}
	

.standout{
    font-size: 3.5vw;
    font-weight: 600;
    margin-bottom: 0vw!important;
}
footer .textbox.centered .textbold {
    font-size: 3.5vw;
    margin-left: 1.5vw;
}
footer .centered.squarebutton {
   
padding: 3vw 4vw;
   
font-size: 4vw;
   
width: 50vw;
   
margin-top: 3vw;
}

.squarebutton img {
    width: 6.5vw;
    margin-left: 4vw;
    margin-right: 7vw;
}
.producttitle {
    border-bottom: 2px solid #2CA6E0;
    font-size: 3.5vw!important;
    font-weight: 600;
}
.product img {
    margin-bottom: 2vw;
    /* margin-top: 2vw; */
    width: 76vw!important;
    /* align-self: center; */
    /* display: grid; */
}
.imgtitle {
    line-height: 4vw!important;
}

.big {
    font-size: 3.7vw;
    margin-top: 2vw;
    color: grey;
}

.textbig{
    font-size: 3.5vw;
}
.textbold{
    font-weight: 800;
}
#guideblock .textbold{
text-align: left;
    margin-left: -41vw;
}
.sidetitile {
  font-size: 3.5vw;
}
#services a{
    font-size: 3vw;
    font-weight: 800;
}
#services .bigger{
font-size: 4vw;
}
.blueback {
    background-color: #2CA6E0;
    padding: 0.8vw 0;
    border-radius: 30px;
}
#withwater .blue{
    font-weight: 800;
    font-size: 4vw;
    /* text-align: center; */
}
.relative {
    /* display: flex; */
    position: relative;
    top: -15vw!important;
    /* z-index: 999; */
    left: 5vw!important;
}

.imgcont.negmargintop img {
    width: 31vw;
}
.imgcont.negmargintop {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -12vw!important;
}
.threeinarow img{
    width: 32vw;
}
	#refresh > div.threeinarow > div.onerow.mobile > img:nth-child(1){
		    width: 39vw;
		margin-right: 1vw;
	}
#refresh > div.threeinarow > div.onerow.mobile > img:nth-child(2){
		      width: 39vw;
		margin-left: 1vw;
	}

	#exterior > div.threeinarow > div.onerow.mobile > img:nth-child(1){
		    width: 39vw;
		margin-right: 1vw;
	}
#exterior > div.threeinarow > div.onerow.mobile > img:nth-child(2){
		      width: 39vw;
		margin-left: 1vw;
	}
#osmosis .imgcont{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.smallimg img{
    width: 38vw;
}
.longated {
    /* transform: scaleY(1.2); */
    transform: scaleX(0.8);
}

.collapsible2 {
    background-color: white;
    text-align: left;
    height: 8vw;
}
.content, .content2 {
    padding: 0 0;
    background-color: white;
    max-height: 0;
    overflow-y: hidden;
    overflow-x: visible;
    transition: max-height 0.2s ease-out;
}
.content2 {
    margin-top: 2vw;
    padding-left: 1vw;
    background-color: white;
    max-height: 0;
    overflow-y: hidden;
    overflow-x: visible;
    transition: max-height 0.2s ease-out;
}
.content2 .textmid {
    max-width: 71vw;
    margin-left: 1vw;
    flex: 75;
}
#FAQ .circlegrey {
    font-size: 3vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
    width: 6vw;
    height: 6vw;
    /* margin-top: -0.5vw; */
    flex: 6%;
}
	#FAQ > div:nth-child(3) > div:nth-child(18){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(3) > div:nth-child(22){
			margin-top: 6vw;
	}
	#FAQ > div:nth-child(5) > div:nth-child(4){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(5) > div:nth-child(6){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(5) > div:nth-child(8){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(5) > button:nth-child(11){
	height: 24vw;
	}
	#FAQ > div:nth-child(11) > div:nth-child(8){
			margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(22){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(20){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(18){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(16){
		margin-top: 6vw;
	}

	#FAQ > div:nth-child(7) > div:nth-child(14){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(10){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(8){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > div:nth-child(6){
		margin-top: 6vw;
	}
#FAQ > div:nth-child(7) > div:nth-child(4){
		margin-top: 6vw;
	}
#FAQ > div:nth-child(7) > div:nth-child(2){
		margin-top: 6vw;
	}
	#FAQ > div:nth-child(7) > button:nth-child(1){
		margin-top:2vw;
	}




#FAQ .blue{
    
font-weight: 800;
    
margin-top: -0.75vw;
    
margin-left: 2vw;
    
flex: 75;
}
#about .sidetitile {
    margin-bottom: 0vw;
    font-weight: 800;
}   

/* from top */ 
body{
   
}
main {
   
}
footer{
    
}
header{
    
}


#top{
  
}
img {
   
}
.abouttop{
    height: 91vw;
}

h1{font-size: 7vw;margin-top: 2vw;}
h2.mincho3{
    font-size: 3.2vw;
    font-weight: 300;
}
.leftcardtop{

}
#top > section.abouttop > div.onerow > div.rightcardtop{position: relative;width: 100vw;height: 37vw;}
.cardtitle{font-size: 3.7vw;}

.sansreg{font-weight: 500;margin-top: 1.5vw;margin-bottom: 1.5vw;margin-left: 18vw;font-size: 3vw;line-height: 1.8;}


.concept{
   height: 56vw;
   background-position: right bottom;
   background-attachment: fixed;
}
.servprod{
   height: 102vw;
   margin-top: -4vw;
   background-size: contain;
}
.concepttitles{border-bottom: solid white 3px;margin-bottom: 2vw;width: 30vw;}
.newstoppage{
    position: relative;
    height: 66vw;
    overflow: hidden;
}
.mediach{margin-top: 0vw;}
.otherworks{
    background-image: url(../img/top/otherWorks.png);
    margin-top: -5vw;
    background-size: cover;
    background-repeat: no-repeat;
    height: 53vw;
}
.newsbgimg2{
    
}
.newsbgimg1{
    
}

/* news img
.newsbgimg2 img{
    width: 35vw;
    position: absolute;

}
.newsbgimg1 img{
    width: 35vw;
    position: absolute;
    right: 0;
    z-index: 1;
}*/ 
#top > section.abouttop > div.onerow > div.rightcardtop > img{
    width: 59vw;
    position: absolute;
    right: 0;
    bottom: 0;
}
#top > section.abouttop > div.onerow > div.leftcardtop{
    margin-left: -30vw;
    /* width: 100vw; */
}
.bluish a{
    color: #5BABD0;
    font-size: 2.8vw;
}
#top h3{
    font-size: 5vw;
    font-weight: 400;
    font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
    }
    #top > section.servprod > div > div.leftcardtop > div > h3{
        margin-top: 10.1vw;
        margin-bottom: 4vw;
    }
    #top > section.servprod > div > div.leftcardtop > div > img{
        width: 50vw;
    }
    .bluishbutton{width: 52vw;background-color: #1393C3;padding: 3vw 6vw;border-radius: 54px;font-size: 2.8vw;text-align: center;margin-top: 4vw;}
    .bluishbutton a{
        color: white;
    }

    #top > section.servprod > div > div.rightcardtop{
        margin-right: 3vw;
        margin-top: 8vw;
    }
    #top > section.servprod > div > div.rightcardtop > div > p.sansreg{
        margin-top: 3vw;
        margin-left: 4vw;
    }
    #top > section.concept > div.onerow{
 
        margin-top: 0;
        padding-top: 7vw;
        align-content: center;
        flex-wrap: wrap;
    }   
    #top h4{
        font-size: 3vw;
    }
    #top > section.concept > div > div.leftcardtop > div > p{
            margin-left: 4vw;
            margin-right: 4vw;
            font-size: 3vw;
            margin-top: 3vw;
    }
   
.whitebox{
    margin-top: 4vw;
    border: solid 3px white;
    padding: 1.5vw 7vw;
    }
.whitebox a{
       color: white;
       font-size: 2.8vw;
       }
       
       #top > section.newstoppage > div.centered{
        position: relative;
        z-index: 999;
        justify-content: center;
        align-items: center;
        padding-top: 7vw;
       }    
       #top > section.newstoppage > div.centered > div{
        margin-top: 8vw;
       }
       .topnews tr{display: flex;flex-direction: row!important;border-bottom: solid grey 1px !important;padding-bottom: 0.5vw;}
       .topnews th{width: 30vw !important;margin-right: 2vw;/* border-bottom: solid grey 1px!important; */font-weight: 300;color: grey;font-size: 2.5vw;}
       .topnews td{font-size: 2.7vw;}
#top table{
    margin-top: 8vw;
    width: 77vw;
text-align: left;
    
}
.otherworks img{
    width: 38vw !important;
    margin-top: 0!important;
    margin-bottom: 1vw;
}
#top > section.otherworks > div{
   
    padding-top: 14vw;
}
.offices{
    background-image: url(../img/top/places.png);
    height: 132vw;
    background-size: cover;
    /* margin: 3vw; */
    background-repeat: repeat-x;
}
body > footer > section.offices > div.centered > img{
    width: 62vw;
    padding-top: 7vw;
}
.cardtop{color: #717071;background-color: rgba(255, 255, 255, 0.7);width: 43vw;padding: 4vw 1vw;/* text-align: center; *//* margin-top: 4vw; */margin-bottom: 4vw;}
.cardtop .textmid{
    margin-left: 2vw;
}
.rowof4{display: flex;flex-direction: row;align-items: stretch;justify-content: space-evenly;margin-top: 8vw;flex-wrap: wrap;padding: 1vw;}
.textalign{
    text-align: center;
}
.bigfont{
    font-size: 4vw;
    margin-bottom: 2vw;
}
.contacttop{
    background-color: #D3E9F3;
    height: 58vw;
}
.whiteback{
    background-color: white;
    width: 50vw;
    height: 20vw;
    /* margin-top: 4vw!important; */
    padding-top: 4vw;
    margin-bottom: 6vw;
}
footer h3{
    font-size: 3vw;
    
}
.contacttop h3{
    margin-top: 5vw;
    font-size: 5vw;
}
#phoneicon{
    width: 6vw;
    margin-right: 2vw;
}
.phonenumber{font-size: 5vw;color: grey;}
.textboldfoot{color: grey;font-size: 2.8vw;padding-left: 4vw;line-height: 2.2;margin-top: -0.5vw;margin-bottom: -1vw;}
.emailfooter{
    width: 3vw;
    height: 2vw;
    margin-left: -1vw;
    margin-right: 1vw;
}
.flexfoot{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: baseline;
}
.logoimgfooter{
    width: 6vw;
    height: 10vw;
}
.footernav{
    max-width: 70vw;
    
    padding-top: 5vw;
}
body > footer > div:nth-child(5) > div > nav:nth-child(3){
    margin-top: -3vw;
}
.second-two{
    margin-top: -6vw!important;
}
footer .second-row a{
    height: 1.3vw;
    padding-right: 1.5vw!important;
    border-right: solid 3px black!important;
}




}
.imgtitle{line-height: 1.4vw;}