@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}


a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style-type: none;
}

@font-face {
    font-family: Zen_Kaku_Gothic_New;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

@font-face {
    font-family: static;
    src: url(../font/static/Grandstander-Bold.ttf);    
}

body {
    font-family: Zen_Kaku_Gothic_New;
    color: #333;
    font-size: 1.2vw;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    z-index: 100;
}

h1 {
    width: 15%;
    margin-top: 1%;
    margin-left: 5%;
}

h1 a img {
    display: block;
    width: 100%;
}

nav {
    width: 40%;
    margin-left: auto;
    margin-right: 5%;
}

nav .pcmenu {
    display: flex;
    background-color: #fff;
    border-bottom-left-radius: 2.5vw;
    padding: 1% 2%;
}

nav .pcmenu li {
    width: 25%;
    border-left: 3px dashed #A0CDE7;
    /* 時間あったら疑似要素にかける */
}

nav .pcmenu li:first-child {
    border-left: none;
}

nav .pcmenu li a {
    display: block;
    text-align: center;
    line-height: 2;
    font-size: 1.2vw;
}

nav .pcmenu li a img {
    display: block;
    width: 2.5vw;
    margin-left: auto;
    margin-right: auto;
}

/*ナビメニューのスタイルを指定*/
nav .NavMenu {
	position: fixed; /*表示位置を固定*/
	z-index: 100; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	right: 0; /*表示位置を指定*/
    margin-left: auto;
	width: 45%;
    height: 100%;
    overflow-y: auto;
	transform: translateX(100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: 0.6s; /*アニメーションの時間を指定*/
    background-color: #fff;
}

nav .NavMenu::-webkit-scrollbar {
    display: none;
}

nav .NavMenu-flex {
    display: flex;
    width: 65%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

nav .NavMenu-flex:first-of-type {
    display: block;
    margin-bottom: 5%;
}

nav .NavMenu .NavMenu-flex li {
    font-size: 1.4vw;
}

nav .NavMenu .NavMenu-flex li a {
    color: #608ca6;
}

nav .NavMenu .NavMenu-flex li ul a {
    display: block;
}

nav .NavMenu .NavMenu-flex li ul li{
    width: 100%;
    margin-left: 5%;
	font-size: 1.2vw;
}

nav .NavMenu .NavMenu-flex li ul li a {
	display: block; /*クリックできる領域を広げる*/
	color: #333;
    text-decoration: none;
    line-height: 2;
}

.NavMenu-title {
    margin-bottom: 5%;
}

nav .NavMenu-flex:last-of-type {
    margin-bottom: 10%;
}

nav .NavMenu-flex:last-of-type .NavMenu-title {
    width: 48%;
}

.NavMenu-title::before {
    content: "\f005";
    font: var(--fa-font-solid);
    font-size: 1.2vw;
    color: #A0CDE7;
}


/*トグルボタンが押されたときに付与するクラス*/
nav .NavMenu.active{
	transform: translateX(0%);/*上から出したい場合は、transform: translateYを使う。*/
}


/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;/* bodyに対しての絶対位置指定 */
    right: 0;
	top: 0;
	width: 3vw;
	height: 4vw;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 100;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 8vw;
    height: 8vw;
    background-image: url(../images/top-right.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.Toggle span {
	display: block;
	position: absolute;
    top: 0;
	right: 1.5vw;
	width: 3vw;
	height: 3px;
    background-color: #fff;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 1.5vw;
}

.Toggle span:nth-child(2) {
	top: 2.5vw;
}

.Toggle span:nth-child(3) {
	top: 3.5vw;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 2vw;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2) {
    background-color: transparent;
}
.Toggle.active span:nth-child(3) {
    top: 2vw;
    transform: rotate(45deg);
}




/* ↓中谷さんが作ってくれた分↓ */

/* メインビジュアル */
.top-mv {
    position: relative;
    width: 100%;
    height: 100vh; /* レスポンシブ(画面いっぱい表示) */
    overflow: hidden;
}

.deco-layre > img {
    z-index: 10;
}

.deco-layre > img:nth-of-type(1) { /* mv-top.png */
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
}
.deco-layre > img:nth-of-type(2) { /* mv-right.png */
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
}
.deco-layre > img:nth-of-type(3) { /* mv-left.png */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
}

/* //////////レスポンス要確認ここから////////// */
.deco-layre > img:nth-of-type(4) { /* mv-kumo_yellow.png */
    position: absolute;
    bottom: 20%;
    right: 5%;
    width: 31%;
}
.deco-layre > img:nth-of-type(5) { /* mv-kumo_blue.png */
    position: absolute;
    bottom: 17%;
    right: 7%;
    width: 30%;
}
.deco-layre > img:nth-of-type(6) { /* mv-hitode.png */
    position: absolute;
    bottom: 53%;
    right: 8%;
    width: 8%;
    rotate: -45deg;
}

.deco-layre > img:nth-of-type(7) {
    position: absolute;
    bottom: .2%;
    right: .2%;
    width: 14%;
}
/* //////////ここまでレスポンス要確認////////// */

.top-mv > video {
    /* レスポンシブ(画面いっぱい表示) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;

    z-index: 1;
}

/* 波動画 平井 */
.wave-top {
    width: 100%;
    height: 10vw;
    background-image: url(../images/top-wave.png);
    background-size: 100% 100%;
    background-color: #5298c5;
}
.wave-move {
    position:relative;
    margin-top: -15vw;
    z-index: 10;
}

.waves {
    position:absolute;
    width: 100%;
    height:15vh;
    margin-bottom:-10vw; 
    min-height:15vw;
    max-height:15vw;
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
    transform: translate3d(-90px,0,0);
    }
     100% { 
      transform: translate3d(85px,0,0);
    }
  }

@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
 .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}


/* スティッキー 平井*/
.wrapper {
    height: 200vw;
}

.top-img {
    width: 100%;
}

.main-wrap .sticky {
    position: sticky;
    top: 79%;
    left: 91%;
    width: 9%;
    z-index: 1;    
}


.main-wrap .sticky .sticky-box1 img {
    width: 100%;
    transform: translateY(20%);
    transition: 1s;
}

.main-wrap .sticky .sticky-box1 img:hover {
    transform: translateY(-20%);
    transition: 0.8s;
}

.main-wrap .sticky2 {
    position: sticky;
    top: 99%;
    width: 100%;
    height: 1vw;
    background-color: #608ca6;
    z-index: 1;
}

.main-wrap .sticky3 {
    position: sticky;
    top: 97%;
    left: 88%;
    width: 10%;
    z-index: 1;
}

.main-wrap .sticky3 img {
    width: 100%;
}
/* スティッキー終わり */

/* ピックアップ */
.pickup {
    width: 90%;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
}

.pickup h2 {
    font-size: 6vw;
    color: #608ca6;
    font-family: static;
    text-align: center;
}

.pickup p {
    font-size: 1.5vw;
    color: #608ca6;
    font-family: Zen_Kaku_Gothic_New;
    font-weight: 400;
    text-align: center;
}

.pickup-banner {
    display: flex;
    gap: 3%;
    margin-top: 2%;
    margin-bottom: 5%;
}

.pickup-banner .banner {
    width: 30%;
}

.pickup-banner .banner:hover {
    opacity: 0.5;
    transition: 0.5s;
}

.pickup-banner .banner img {
    width: 100%;
}

/* イベント */
/* スライドイン */
.box {
    aspect-ratio: 16 / 9;
    /* opacity: 0; visibility: hidden;で要素を非表示にする。
    display: noneでも非表示にできるが、transitionが効かなくなる */
    opacity: 0;
    visibility: hidden;
    transition: all 3s;
    transform: translateY(150px);
}
.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

main .map-parent {
    width: 90%;
    height: 70vw;
    margin-top: 8vw;/*  */
    margin-left: auto;
    margin-right: auto;
}

main .map-parent h2 {
    font-size: 6vw;
    color: #608ca6;
    font-family: static;
    text-align: center;
}

main .map-parent p {
        font-size: 1.5vw;
        color: #608ca6;
        font-family: Zen_Kaku_Gothic_New;
        font-weight: 400;
        text-align: center;
}

main .map-parent .map-child {
    position: relative;
    width: 100%;
    height: 55vw;
    
}

main .map-parent .map-child .map-ist {
    position: absolute;
    width: 90%;
    top: 5%;
    left: 5%;
}

@keyframes yura1 {
    0% {
        transform: scale(1,1);
    }

    20% {
        transform: scale(1.01,1.01);
    }
    40% {
        transform: scale(1,1);
        
    }
    80% {
        transform: scale(1.01,1.01);
    }
    100% {
        transform: scale(1,1);
    }
}

/* イベント画像イラスト */

main .map-parent .map-child .map-ist img {
    width: 100%;
    animation: yura1 5s infinite;
}

main .map-parent .map-child .map-penguin {
    position: absolute;
    top: 15%;
    left: 30%;
    width: 10%;
}

main .map-parent .map-child .map-shark {
    position: absolute;
    top: 60%;
    left: 13%;
    width: 24%;
}

main .map-parent .map-child .map-dolphin {
    position: absolute;
    top: 10%;
    left: 54%;
    width: 24%;
}

main .map-parent .map-child .map-seal {
    position: absolute;
    top: 58%;
    left: 65%;
    width: 12%;
}

main .map-parent .map-child .map-penguin img {
    width: 100%;
    animation: yura2 4s infinite;
}

main .map-parent .map-child .map-shark img {
    width: 100%;
    animation: yura3 5s infinite;
}

main .map-parent .map-child .map-dolphin img {
    width: 100%;
    animation: yura2 5s infinite;
}

main .map-parent .map-child .map-seal img {
    width: 100%;
    animation: yura3 6s infinite;
}

@keyframes yura2 {
    0% {
        transform: scale(1.01,1.01);
    }

    20% {
        transform: scale(1,1);
    }
    40% {
        transform: scale(1.2,1.2);
        
    }
    80% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(1.01,1.01);
    }
}

@keyframes yura3 {
    0% {
        transform: scale(1.01,1.01);
    }
    30% {
        transform: scale(1.2,1.2);
        
    }
    70% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(1.01,1.01);
    }
}


/* ポップアップ */


main .map-parent .map-child .popup-background {
    position: fixed;
    z-index : 100;
    top : 0;
    left : 0;
    height : 100vh;
    width : 100vw;
    background-color: gray;
    opacity : 0.5
}

main .map-parent .map-child .popup {
    --width : 22vw;
    --height : 26vw;
    z-index : 101;
    position: fixed;
    top : calc(50vh - calc(var(--height) / 2));
    left : calc(50vw - calc(var(--width) / 2));
    height : var(--height);
    width : var(--width);
    overflow : hidden;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px gray;
}

main .map-parent .map-child .popup > .close-button {
    --size : 20px;
    position:absolute;
    top : calc(var(--size)/4);
    left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
    height : var(--size);
    width : var(--size);
  
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color : gray;
    font-size: var(--size);
    border-radius: calc(var(--size)/5);
}

main .map-parent .map-child .popup > .close-button:hover {
    background-color: #a0ede7;
    color : white;
}

main .map-parent .map-child .popup > .content {
    padding: 2vw;
    text-align: center;
}
  
main .map-parent .map-child .popup > .content .popup-img1 {
    width: 16vw;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}
  
main .map-parent .map-child .popup > .content .popup-img1 img {
    width: 100%;
    height: 10vw;
}
  
main .map-parent .map-child main .popup > .content p {
    padding-bottom: 1%;
    font-size: 1vw;
    color: #333;
}
  
  @keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 #a0ede7;
    }
    70% {
        box-shadow: 0 0 0 1.2vw rgb(160 231 222 / 0%);
    }
    100% {
        box-shadow: 0 0 0 0 rgb(160 231 222 / 0%);
    }
}
  
main .map-parent .map-child .popup > .content .map-btn1 {
    width: 5vw;
    height: 5vw;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.5vw;
    background-color: #a0ede7;
    z-index: 1;
}
  
main .map-parent .map-child .popup > .content .map-btn1:hover {
    animation: ripple 2s infinite;
}
  
main .map-parent .map-child .popup > .content .map-btn1 a {
    width: 5vw;
    height: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 2.5vw;
    font-size: 0.7vw;
    color: #fff;
    transition: 1s;
}
  
main .map-parent .map-child .popup > .content .map-btn1 a:hover {
    color: #eefbf9;
    transition: 1s;
}
  
  
main .map-parent .map-child .popup-flag {
    display: none;
}

main .map-parent .map-child .popup-flag:not(:checked) + .popup-background {
    display:none;
}

main .map-parent .map-child .popup-flag:not(:checked) + * + .popup {
    display:none;
}

  /*button-containerペンギン*/
main .map-parent .map-child .button-container {
    position: absolute;
    top: 22%;
    left: 20%;
}
main .map-parent .map-child .button-container > * {
    margin : 15px;
}
  
main .map-parent .map-child .button-sample1 {
    width: 5vw;
    height: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    background-color: #a0ede7;
    color: #fff;
    z-index: 1;
    transition: 0.2s;
}
  
main .map-parent .map-child .button-sample1:hover {
    animation: ripple 2s infinite;
  }
  
main .map-parent .map-child .button-sample1 a {
    width: 5vw;
    height: 5vw;  
    text-decoration: none;
    border-radius: 2.5vw;
    font-size: 1vw;
    color: #fff;
}

/* ボタン2 サメ*/
 main .map-parent .map-child .button-container2 {
    position: absolute;
    top: 80%;
    left: 20%;
}

main .map-parent .map-child .button-container2 > * {
    margin : 15px;
}
  
main .map-parent .map-child .button-sample1 {
    width: 5vw;
    height: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    background-color: #a0ede7;
    color: #fff;
    z-index: 1;
    transition: 0.2s;
}
  
main .map-parent .map-child .button-sample1:hover {
    animation: ripple 2s infinite;
}
  
main .map-parent .map-child .button-sample1 a {
    width: 5vw;
    height: 5vw;  
    text-decoration: none;
    border-radius: 2.5vw;
    font-size: 1vw;
    color: #fff;
}
  
/* ボタン3イルカ */
 main .map-parent .map-child .button-container3 {
    position: absolute;
    top: 18%;
    left: 76%;
}

main .map-parent .map-child .button-container3 > * {
    margin : 15px;
}
  
main .map-parent .map-child .button-sample1 {
    width: 5vw;
    height: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    background-color: #a0ede7;
    color: #fff;
    z-index: 1;
    transition: 0.2s;
}

main .map-parent .map-child .button-sample1:hover {
    animation: ripple 2s infinite;
  }
  
main .map-parent .map-child .button-sample1 a {
    width: 5vw;
    height: 5vw;  
    text-decoration: none;
    border-radius: 2.5vw;
    font-size: 1vw;
    color: #fff;
}
  
/* ボタン4アザラシ */
 main .map-parent .map-child .button-container4 {
    position: absolute;
    top: 76%;
    left: 78%;
}
main .map-parent .map-child .button-container4 > * {
    margin : 15px;
}
  
main .map-parent .map-child .button-sample1 {
    width: 5vw;
    height: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    background-color: #a0ede7;
    color: #fff;
    z-index: 1;
    transition: 0.2s;
}
  
main .map-parent .map-child .button-sample1:hover {
    animation: ripple 2s infinite;
  }
  
main .map-parent .map-child .button-sample1 a {
    width: 5vw;
    height: 5vw;  
    text-decoration: none;
    border-radius: 2.5vw;
    font-size: 1vw;
    color: #fff;
}
  

/* お知らせ */
.top-news {
    width: 90%;
    margin-bottom: 7%;
    margin-left: auto;
    margin-right: auto;
}
.top-news-flex {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
.top-news > .top-news-flex > h2 {
    width: 15%;
    color: #608ca6;
    cursor: default;
}
.top-news > .top-news-flex > h2 .fa-circle-exclamation {
    margin-right: 0.8em;
    color: #608ca6;
}
.top-news > .top-news-flex > h2 + ul {
    width: 80%;
}
.top-news > .top-news-flex > h2 + ul li {
    line-height: 2.6;
    border-bottom: 0.2vw dotted #ccc;
}
.top-news > .top-news-flex > h2 + ul li a {
    display: flex;
}
.top-news > .top-news-flex > h2 + ul li a:hover .news-title {
    color: #608ca6;
    text-decoration: underline;
}
.top-news > .top-news-flex > h2 + ul li a time {
    display: block;
    width: 22%;
    text-align: center;
}
.top-news > .top-news-flex > h2 + ul li a .news-category {
    width: 10%;
    padding: 0 1em;
    border-radius: 3vw;
    border: 0.2vw solid #608ca6;
    text-align: center;
    font-weight: bold;
    transform: scale(0.7);
    color: #fff;
    background-color: #608ca6;
}
.top-news > .top-news-flex > h2 + ul li a:hover .news-category {
    color: #608ca6;
    background-color: #fff;
}
.top-news > .top-news-flex > h2 + ul li a .news-title {
    display: block;
    width: 68%;
}
.top-news > a {
    display: block;
    width: 9%;
    margin-left: 88%;
    text-align: center;
    font-weight: bold;
    color: #608ca6;
}
.top-news > a:hover {
    text-decoration: underline;
    color: #a0cde7;
    transition: 0.5s;
}
.top-news > a:hover i {
    transform: translateX(20%);
    color: #a0cde7;
    transition: 0.5s;
}
.top-news > a i {
    margin-left: 0.5em;
}

/* スライド写真 */
.top-photo-slide {
    position: relative;
    width: 100%;
    height: auto;
}

@keyframes infinity-scroll {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
}
.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}
.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
    animation: infinity-scroll 120s infinite linear 0.5s both;
}
.scroll-infinity__item > img {
    display: block;
    width: 100%;

    border: 0.4vw solid #a0cde7;
    border-radius: 3vw;
}
.scroll-infinity__item:nth-of-type(1) { /* 少年 */
    width: 40vw;
    margin: 2vw 2vw 2vw 0;
}
.scroll-infinity__item:nth-of-type(2) { /* カップル */
    width: 15vw;
    margin: 20vw 0 2vw 2vw;
}
.scroll-infinity__item:nth-of-type(3) { /* ゼニガタアザラシ */
    width: 20vw;
    margin: 4vw 2vw 2vw -5vw;
}
.scroll-infinity__item:nth-of-type(4) { /* イルカショー */
    width: 25vw;
    margin: 10vw 2vw 2vw 2vw;
}
.scroll-infinity__item:nth-of-type(5) { /* ちっちゃい子 */
    width: 15vw;
    margin: 2vw 0 2vw 0;
}
.scroll-infinity__item:nth-of-type(6) { /* ワモンアザラシ */
    width: 18vw;
    margin: 15vw 2vw 2vw 2vw;
}
.scroll-infinity__item:nth-of-type(7) { /* 触られるイルカ */
    width: 20vw;
    margin: 8vw 2vw 2vw 2vw;
}
.scroll-infinity__item:nth-of-type(8) { /* ペンギン */
    width: 15vw;
    margin: 1vw 0 2vw 2vw;
}
.scroll-infinity__item:nth-of-type(9) { /* 散歩ペンギン */
    width: 20vw;
    margin: 14vw 4vw 2vw -12vw;
}


/* フッター */

main .footer-wave {
    position: relative;
    width: 100%;
}


main .footer-wave img {
    position: absolute;
    top: -1vw;
    width: 100%;
    z-index: 10;
}

footer {
    width: 100%;
    height: 40vw;
    z-index: 100;
    background-color: #fff;
}

footer .footer-container {
    display: flex;
    width: 100%;
    margin-top: 22%;
    padding-bottom: 3%;
    border-bottom: 3px dotted #eefbf9;
}

footer .footer-container .footer-top {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

footer .footer-container .footer-top .footer-rogo {
    width: 30%;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
}

footer .footer-container .footer-top .footer-rogo img {
    width: 100%;
    vertical-align: bottom;
}

 

footer .footer-container .footer-top address {
    width: 90%;
   /*  font-style: normal; */
    margin-left: auto;
    margin-right: auto;
}

footer .footer-container .footer-top address p {
    font-size: 1vw;
    text-align: center;
    line-height: 1.6;
}

footer .footer-container .footer-top address p span {
    padding: 3%;
}


footer .footer-container .footer-section {
    width: calc(100% / 3);
    border-left: 3px dotted #eefbf9;
    
}

footer .footer-container .footer-section:nth-last-of-type(1) {
    margin-right: 2%;
}


footer .footer-container .footer-section h4 {
    margin-bottom: 7%;
    font-size: 1.4vw;
    font-family: static;
    margin-left: 11%;
    background-image: linear-gradient(25deg, #608ca6, #a0ede7, #608ca6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


footer .footer-container .footer-section h5 {
    margin-left: 10%;
    font-size: 1.2vw;
}

footer .footer-container .footer-section h5 a {
    text-decoration: none;
    color: #333;
}


footer .footer-container .footer-section h5 span {
    padding: 3%;
    font-size: 1.6vw;
}

footer .footer-container .footer-section p {
    margin-left: 15%;
    text-indent: 1em;
    font-size: 0.9vw;
    line-height: 2.5;

}

footer .footer-container .footer-section p a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    color: #333;
}


footer .footer-sns p {
    margin-top: 2%;
    text-align: center;
    font-size: 1vw;
}


footer .footer-sns .icon {
    width: 32%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}

footer .footer-sns .icon .fa-brands {
    margin-left: 8%;
    display: inline-block;
    text-align: center;
    font-size: 3vw;
}

footer .footer-sns .icon .fa-instagram {
    background-image: linear-gradient(25deg, #4C64D3, #CF2E92, #F26939, #FFDD83);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer .footer-company {
    width: 100%;
    padding-top: 3%;
    border-top: 3px dotted #eefbf9;
}

footer .footer-company .company-flexbox {
    display: flex;
    width: 60.2%;
    margin-left: auto;
    margin-right: auto;
}

footer .footer-company .company-flexbox p {
    width: 15.6;
    padding-left: 2%;
    padding-right: 2%;
    line-height: 2.5;
    border-right: 3px dotted#eefbf9;
    font-size: 1vw;
}

footer .footer-company .company-flexbox p:nth-last-of-type(1) {
    border-right: 0;
}

footer .footer-company .company-flexbox p a {
    text-decoration: none;
    color: #333;
}

footer .footer-company + p {
    margin-top: 5%;
    padding: 2%;
    text-align: center;
    color: #ffffff;
    background-color: #608ca6;
    font-size: .8vw;
}