@charset "UTF-8";

body {
    font-family: "ab-hanamaki", sans-serif;
font-weight: 400;
font-style: normal;
}
a:hover {
    opacity: 0.7;
    transition: 0.3s;
    cursor: pointer;
}

/* header */

.header-wave {
    background-image: url(../image/header-img/header-wave.png);
    width: 100%;
    height: 172px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
}
.header-wave-box {
    position: relative;
}
.header-logo {
    position: absolute;
    top: 3.5vw;
    left: 14vw;
    z-index: 12;
}
.header-navi {
    /* アクセスとチケットのナビ全体 */
    color: #3a329d;
    display: flex;
    gap: 33px;
    position: absolute;
    top: 34px;
   right: 93px;
    z-index: 12;
}
.header-access {
    /* アクセスの箱 */
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    /* 画像を中央寄せ */
}
.header-ticket {
    /* チケットの箱 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    /* 画像を中央寄せ */
    padding-top: 3px;
    /* アクセスと合わせるためのpadding */
}
@media screen and (min-width:1500px) {
    /*　画面サイズが1500pxからはここを読み込む　*/
    .header-wave {
        height: 200px;
    }
    .header-logo {
        left: 10vw;
    }
    }
/* humberger-menu */
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	bottom:-120%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#84ccc9;
    /*動き*/
	transition: all 0.6s;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    bottom: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/*リストのレイアウト設定*/
#g-nav li{
	list-style: none;
    text-align: center; 
}
#g-nav li a{
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
    /* フォントをmarvinへ */
    font-family: "marvin", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 29px;
}
li.g-nav-about,
li.g-nav-friends {
    /* ABOUT,WAKKAのなかまたち */
    color: #fdf42d;
}
li.g-nav-pickup,
li.g-nav-sns {
    /* PICK UP,公式SNS */
    color: #f96868;
}
li.g-nav-areaguide,
li.g-nav-info {
    /* AREA GUIDE,INFORMATION */
    color: #1886fa;
}
.g-nav-span1,
.g-nav-span2 {
    /* のなかまたち,公式 */
    font-family: "ab-hanamaki", sans-serif;
font-weight: 400;
font-style: normal;
}
.drawr-manta {
    /* マンタ */
    position: absolute;
    top: 8%;
    right: 11%;
}
.drawr-manta img {
    max-width: 75%;
    height: auto;
}
.drawr-moorfish {
    /* ムーアフィッシュ */
    position: absolute;
    top: 10%;
    left: 28%;
}
.drawr-moorfish img {
   max-width: 74%;
   height: auto;
}
.drawr-starfish {
    /* ヒトデ */
    position: absolute;
    top: 28%;
    left: 18%;
}
.drawr-starfish img {
    max-width: 80%;
    height: auto;
}
.drawr-coral {
    /* サンゴ */
    position: absolute;
    bottom: 0%;
    left: 15%;
}
.drawr-coral img {
    max-width: 64%;
    height: auto;
}
.drawr-clownfish {
    /* ニモ */
    position: absolute;
    bottom: 10%;
    right: 15%;
}
.drawr-clownfish img {
    max-width: 65%;
    height: auto;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:absolute;
    z-index: 9999;/*ボタンを最前面に*/
	top:31px;
	right: 2px;
	cursor: pointer;
    width: 79px;
    height:50px;
}	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #222aaf;
  	width: 45%;
  }
.openbtn span:nth-of-type(1) {
	top:15px;
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 48%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 48%;
}

/* visual-top */

.top {
    /* TOPのイメージ */
    background-image: url(../image/top/center-img2.jpg);
    width: 100%;
    height: 728px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* 背景の記述 */
    display: flex;
    /* フレックスをかけ */
    flex-direction: column;
    /* カラムをかけ */
    justify-content: center;
    /* 縦の中で中央になり */
    align-items: center;
    /* 真ん中に来る */
position: relative;
}

/* about */

.about-wave {
    /* aboutの波 */
    background-image: url(../image/about/about-topwave2.png);
    width: 100%;
    height: 110px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 9%;
}
.section-about {
    background-color: #84ccc9;
    padding-bottom: 20px;
    position: relative;
}
.about-caption {
    text-align: center;
    color: #fff;
    line-height: 1.5em;
    letter-spacing: 0.02em;
rotate: -5deg;
/* position:absolute;
top: -45%;
left:50%;
transform: translateX(-50%);
z-index: 5; */
/* padding: 100px; */
}
.q-penguin {
    position:absolute;
    top: -45%;
    left:50%;
    transform: translateX(-50%);
}
.about-s {
    color: #fff;
    font-family: "ab-hanamaki", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
letter-spacing: 0.2em;
line-height: 1.9em;
width: 468px;
height: 217px;
margin: 0 auto;
margin-top: 154px;
}
.about-span1 {
    color: #267e94;
}
@media screen and (min-width:1500px) {
    /*　画面サイズが1500pxからはここを読み込む　*/
    /* about波の調整 */
    .top {
        height: 832px;
    }
    .about-wave {
        height: 150px;
        bottom: 5%;
    }
    }

/* pickup */

.section-pickup {
    background-color: #f5fccd;
    padding-bottom: 110px;
}
.pickup-caption {
    /* ピックアップの見出しをまとめる箱 */
    text-align: center;
    padding-top: 50px;
}
.pickup-caption h3 {
    font-size: 25px;
    color: #00a1da;
}
.pickup-caption h2 {
    color: #48d4ce;
    font-family: "marvin", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 72px;
    letter-spacing: 0.05em;
}
.pickup-span1 {
    font-size: 76px;
    color: #f8a835;
}
.pickup-span2 {
    color: #f8a835;
}
/* pickup-slider */
.pickup-slider {
    /*横幅63%で左右に余白を持たせて中央寄せ*/
    width:63%;
    margin:0 auto;
    padding-top: 61px;
}
.pickup-slider img {
    width:32vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
    border-radius: 27px;
}
.pickup-slider .slick-slide {
	transform: scale(0.8);
    /*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}
.pickup-slider .slick-slide.slick-center{
	transform: scale(1);
    /*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.slick-prev:before,
.slick-next:before {
    font-size: 48px;
    color: #f8a835;
}
.slick-prev {
    left: -88px;
}
.slick-next {
    right: -70px;
}

/* areaguide */

.section-areaguide {
    background-color: #ffc3b5;
}
.areaguide-caption {
    /* ピックアップの見出しをまとめる箱 */
    text-align: center;
    padding-top: 80px;
}
.areaguide-caption h3 {
    font-size: 36px;
    color: #77b96a;
}
.areaguide-caption h2 {
    color: #66a1ea;
    font-family: "marvin", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 72px;
    letter-spacing: 0.05em;
}
.areaguide-span1 {
    color: #f96868;
    font-size: 76px;
}
.areaguide-span2 {
    color: #51d08a;
}
.area-box {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 50px 0 130px;
}
.area-box img {
    max-width: 100%;
    height: auto;
    /* レスポンシブに対応 */
}
.area1 {
    display: flex;
    justify-content: center;
    gap: 76px;
}
.area1-more {
    margin-top: 64px;
}
.area2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 138px;
}
.area2-seaotter {
    margin-top: 60px;
}
.area3 {
    display: flex;
    justify-content: center;
    gap: 113px;
}
.area3-eel {
    margin-top: 12px;
}
@media screen and (max-width:943px) {
    /*　画面サイズが943pxまではここを読み込む　*/
    .area-box {
        padding: 50px 40px 130px;
    }
    }
    @media screen and (max-width:811px) {
        /*　画面サイズが811pxまではここを読み込む　*/
        .area-box {
            gap: 55px;
            /* カラムにしたときのエリア全体のギャップ */
        }
        .area1 {
            flex-direction: column;
            align-items: center;
            gap: 0px;
        }
        .area2 {
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }
        .area3 {
            flex-direction: column;
            align-items: center;
            gap: 61px;
        }
        }
    

/* friends */

.section-friends {
    background-color: #bff0ee;
    padding-bottom: 10px;
}
.friends-caption {
    /* ピックアップの見出しをまとめる箱 */
    text-align: center;
    padding-top: 50px;
}
.friends-caption h3 {
    font-size: 36px;
    color: #5fb4e3;
}
.friends-caption h2 {
    color: #0076f8;
    font-family: "marvin", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 70px;
    letter-spacing: 0.05em;
}
.f-span1 {
    font-size: 76px;
    color: #00d9f0;
}
.f-span2 {
    font-size: 74px;
    color: #f0a144;
}
.f-span3 {
    font-family: "marvin-shadow", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 57px;
}
.friends-box {
    display: flex;
justify-content: center;
gap: 52px;
padding: 70px 0 55px;
}
.friends-box img {
    max-width: 100%;
    height: auto;
    /* レスポンシブに対応 */
    border-radius: 40px;
}
.f-beluga,
.f-stingray,
.f-nautilus {
    padding-bottom: 21px;
}
.friends-box h4 {
    color: #011aa4;
    font-size: 28px;
}
/* moreボタン */
.more-button {
    background-color: #f0a144;
    max-width: 223px;
    height: 44px;
    border-radius: 50px;
    margin: 0 auto;
    position: relative;
}
.m-caption {
    display: flex;
    justify-content: center;
    /* 縦の中で中央に */
    gap: 16px;
    padding-top: 5%;
}
.m-caption h4 {
    color: #fefefe;
    font-size: 21px;
}
.more-attention {
    position: absolute;
    top: -29px;
    right: -37px;
}

/* sns */

.section-sns {
    background-color: #365486;
    padding-bottom: 80px;
}
.sns-caption {
    /* ピックアップの見出しをまとめる箱 */
    text-align: center;
    padding-top: 111px;
}
.sns-caption h3 {
    font-size: 30px;
    color: #9cd7fc;
}
.sns-caption h2 {
    color: #9cd7fc;
    font-family: "marvin-shadow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    letter-spacing: 0.05em;
}
.sns-span1 {
    color: #fae391;
    font-size: 76px;
}
.sns-span2 {
    color: #fae391;
}
.sns-row {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding-top: 63px;
}
.sns-row img {
    border-radius: 20px;
    max-width: 100%;
    height: auto;
}
.sns-first {
    display: flex;
    gap: 24px;
}
.sns-second {
    display: flex;
    gap: 24px;
}
@media screen and (max-width:1057px) {
    /*　画面サイズが1057pxまではここを読み込む　*/
    .sns-row {
padding: 63px 30px 0;
    }
    }
    @media screen and (max-width:811px) {
        /*　画面サイズが1057pxまではここを読み込む　*/
        .sns-row {
   flex-direction: column;
   /* カラムをかけて */
   align-items: center;
   /* 中央に持ってくる */
   padding: 63px 40px 0;
   /* padding追加 */
   gap: 28px;
   /* gapを追加 */
        }
        .sns-first {
            gap: 28px;
        }
        .sns-second {
            gap: 28px;
        }
        }

/* info */
.section-info {
    background: #f6f4eb;
    padding-bottom: 100px;
}
.info-caption {
    /* ピックアップの見出しをまとめる箱 */
    text-align: center;
    padding-top: 70px;
}
.info-caption h3 {
    font-size: 36px;
    color: #79f098;
}
.info-caption h2 {
    color: #f686a3;
    font-family: "marvin", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 72px;
    letter-spacing: 0.05em;
}
.i-span {
    font-size: 76px;
    color: #79f098;
}
.info-box {
    display: flex;
    justify-content: center;
    margin-top: 86px;
    gap: 108px;
}
.info-left {
    color: #333;
    margin-top: 35px;
}
.info-L-top {
    display: flex;
    flex-direction: column;
    gap: 35px;   
}
.time {
    display: flex;
    gap: 40px;
}
.time h4 {
    /* ご利用時間 */
    font-size: 23px;
}
.time-contents {
    font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
display: flex;
align-items: center;
}
.time-contents li:first-child {
    /* 9:00～17:00 */
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.time-contents li:nth-child(2) {
    /* (最終入館16:30) */
    font-size: 15px;
    margin-left: 15px;
    letter-spacing: 0.1em;
}
.closingday h4,
.admission-fee h4 {
    /* 休館日 */
    /* 入館料 */
    font-size: 23px;
    letter-spacing: 24px;
}
.closingday {
    display: flex;
}
.closing-contents {
    font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 16px;
letter-spacing: 0.07em;
margin-left: 14px;
}
.admission-fee {
    display: flex;
}
.byage-fee {
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 300;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-left: 14px;
    letter-spacing: 0.08em;
}
.byage-1 {
    /* 大人(高校生以上)1,000円 */
    display: flex;
    gap: 28px;
}
.byage-2 {
    /* こども(小中学生)900円 */
    display: flex;
    gap: 44px;
}
.byage-3 {
    /* 3歳未満無料 */
    display: flex;
    gap: 130px;
}
.byage-line {
    width: 224px;
    border: solid 1px #ccc;
}
.byage-4 {
    /* ※65歳以上の方は、無料で入館いただけます。 */
    font-size: 12px;
}
.info-L-under {
    display: flex;
    font-size: 14px;
    gap: 27px;
    margin-top: 67px;
}
.info-L-under li:first-child {
    background-color: #79f098;
    width: 202px;
    height: 44px;
    border-radius: 50px;
}
.info-L-under li:nth-child(2) {
    background-color: #f686a3;
    width: 202px;
    height: 44px;
    border-radius: 50px;
}
.coming-car {
    display: flex;
    gap: 15px;
    justify-content: center;
    /* 縦の中で中央になり */
    align-items: center;
    /* 真ん中に来る */
}
.coming-train {
    display: flex;
    gap: 12px;
    justify-content: center;
    /* 縦の中で中央になり */
    align-items: center;
    /* 真ん中に来る */
}
iframe {
    border-radius: 70px;
}

/* footer */

footer {
    background-color: #84ccc9;
    color: #e3fafc;
    padding: 70px 0 79px;
    position: relative;
}
.footer-box {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 160px;
    margin-right: 100px;
}
.footer-navi {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-navi span {
    padding-right: 18px;
}
.footer-navi h4 {
    padding-left: 18px;
}
.footer-logo {
    padding: 11px 0 26px;
}
.f-logo-under {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.f-address {
    display: flex;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
    gap: 19px;
}
.f-tell {
    display: flex;
}
.f-tell h4 {
padding-left: 12px;
}
.f-tell p {
    padding-left: 44px;
}
.f-seaweed {
position: absolute;
bottom: 0px;
right: 10%;
}

/* wave */

/* pickupの上 */
.pickup-wave {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.pickup-wave svg {
    background: #84ccc9;
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: 300px;
}
.pickup-wave .shape-fill {
    fill: #F5FCCD;
}
/* pickupの波-responsive */
@media screen and (max-width:1200px) {
    /*　画面サイズが1200pxまではここを読み込む　*/
    .pickup-wave svg {
        height: 209px;
    }
    }
@media screen and (max-width:790px) {
    /*　画面サイズが790pxまではここを読み込む　*/
    .pickup-wave svg {
        height: 142px;
    }
    }
    @media screen and (max-width:560px) {
        /*　画面サイズが560pxまではここを読み込む　*/
        .pickup-wave svg {
            height: 113px;
        }
        }
        @media screen and (max-width:390px) {
            /*　画面サイズが390pxまではここを読み込む　*/
            .pickup-wave svg {
                height: 82px;
            }
            }
            @media screen and (max-width:321px) {
                /*　画面サイズが321pxまではここを読み込む　*/
                .pickup-wave svg {
                    height: 67px;
                }
                }
    

/* areaguideの波 */
.area-wave {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.area-wave svg {
    background: #f5fccd;
    position: relative;
    display: block;
    width: calc(108% + 1.3px);
    height: 228px;
    transform: rotateY(180deg);
}
.area-wave .shape-fill {
    fill: #FFC3B5;
}
/* areaguideの波-responsive */
@media screen and (max-width:1500px) {
    /*　画面サイズが1500pxからはここを読み込む　*/
.area-wave svg {
    height: 200px;
}
    }
    @media screen and (max-width:1307px) {
        /*　画面サイズが1307pxからはここを読み込む　*/
    .area-wave svg {
        height: 175px;
    }
        }
        @media screen and (max-width:1160px) {
            /*　画面サイズが1307pxからはここを読み込む　*/
        .area-wave svg {
            height: 158px;
        }
            }
            @media screen and (max-width:867px) {
                /*　画面サイズが1307pxからはここを読み込む　*/
            .area-wave svg {
                height: 126px;
            }
                }
                @media screen and (max-width:658px) {
                    /*　画面サイズが1307pxからはここを読み込む　*/
                .area-wave svg {
                    height: 90px;
                }
                    }
                    @media screen and (max-width:395px) {
                        /*　画面サイズが1307pxからはここを読み込む　*/
                    .area-wave svg {
                        height: 71px;
                    }
                        }
                        @media screen and (max-width:321px) {
                            /*　画面サイズが1307pxからはここを読み込む　*/
                        .area-wave svg {
                            height: 55px;
                        }
                            }
    

/* friendsの波  */
.friends-wave {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.friends-wave svg {
    background: #ffc3b5;
    position: relative;
    display: block;
    width: calc(121% + 1.3px);
    height: 178px;
    transform: rotateY(180deg);
}
.friends-wave .shape-fill {
    fill: #BFF0EE;
}
/* friendsの波-responsive */
@media screen and (max-width:1105px) {
    /*　画面サイズが1105pxまではここを読み込む　*/
    .friends-wave svg {
        height: 139px;
    }
    }
    @media screen and (max-width:910px) {
        /*　画面サイズが1105pxまではここを読み込む　*/
        .friends-wave svg {
            height: 107px;
        }
        }
        @media screen and (max-width:600px) {
            /*　画面サイズが1105pxまではここを読み込む　*/
            .friends-wave svg {
                height: 101px;
            }
            }
            @media screen and (max-width:496px) {
                /*　画面サイズが1105pxまではここを読み込む　*/
                .friends-wave svg {
                    height: 84px;
                }
                }
                @media screen and (max-width:366px) {
                    /*　画面サイズが1105pxまではここを読み込む　*/
                    .friends-wave svg {
                        height: 68px;
                    }
                    }
                    @media screen and (max-width:320px) {
                        /*　画面サイズが1105pxまではここを読み込む　*/
                        .friends-wave svg {
                            height: 62px;
                        }
                        }
    

/* snsの波 */
.sns-wave {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.sns-wave svg {
    background: #bff0ee;
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 178px;
    transform: rotateY(180deg);
}
.sns-wave .shape-fill {
    fill: #365486;
}
@media screen and (max-width:1292px) {
    /*　画面サイズが1292pxからはここを読み込む　*/
    .sns-wave svg {
        height: 154px;
    }
    }
    @media screen and (max-width:1012px) {
        .sns-wave svg {
            height: 125px;
        }
        }
        @media screen and (max-width:792px) {
            .sns-wave svg {
                height: 116px;
            }
            }
            @media screen and (max-width:670px) {
                .sns-wave svg {
                    height: 103px;
                }
                }
                @media screen and (max-width:550px) {
                    .sns-wave svg {
                        height: 96px;
                    }
                    }
                    @media screen and (max-width:477px) {
                        .sns-wave svg {
                            height: 78px;
                        }
                        }
                        @media screen and (max-width:396px) {
                            .sns-wave svg {
                                height: 63px;
                            }
                            }
                            @media screen and (max-width:320px) {
                                .sns-wave svg {
                                    height: 55px;
                                }
                                }
    

/* infoの波 */
.info-wave {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.info-wave svg {
    background: #365486;
    position: relative;
    display: block;
    width: calc(147% + 1.3px);
    height: 248px;
}
.info-wave .shape-fill {
    fill: #F6F4EB;
}

/* footerの上 */
.shapedividers_com-4521{
    background: #f6f4eb;
    overflow:hidden;
    position:relative;
    height: 153px;
    }
    .shapedividers_com-4521::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 152px;
    background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%2384ccc9"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%2384ccc9"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%2384ccc9"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-4521::before{
    background-size: 100% calc(2vw + 152px);
    }
    }