@charset "UTF-8";
/*-----------------------*/
/*      Initialize       */
/*-----------------------*/
/*CSSリセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html {
  font-size: 100%;
  line-height: 1em;
}

html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, code, em, img, small,
strong, sub, sup, tt, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, embed, figure, figcaption,
input, button, textarea, canvas, audio, video,
footer, header, hgroup, menu, nav, section {
  box-sizing: border-box;
}

/*-----------------------*/
/*       Variables       */
/*-----------------------*/
/*---- マップ画像アサイン ----*/
/*-----------------------*/
/*    Global settings    */
/*-----------------------*/
strong, h1, h2, h3, h4, h5, h6 {
  font-family: "RodinNTLGPro-B", sans-serif;
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 125%;
}

p {
  font-size: 94%;
  padding: 12px 0;
  line-height: 160%;
}

ul {
  list-style-type: disc;
  list-style-position: outside;
  padding: 6px 0 10px 24px;
}

li {
  font-size: 94%;
  padding: 0;
  line-height: 160%;
}

small.xsmall {
  font-size: 0.7vw;
  font-family: "RodinNTLGPro-DB", sans-serif;
}

small {
  font-size: 1.2vw;
  font-family: "RodinNTLGPro-DB", sans-serif;
}

.dispframe {
  position: relative;
  max-width: 864px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/*-----------------------*/
/*       Mainframe       */
/*-----------------------*/
html, body {
  height: 100%;
  overflow: hidden;
}

html {
  background-color: #000;
}

body {
  position: relative;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

/*-----------------------*/
/*       Map parts       */
/*-----------------------*/
#map, #map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  background-image: url(../images/00-bg-ocean.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imgbox, .ribbon-title, .msg-window, .island, .island-a0, .island-1, .island-2, .island-3, .island-4, .island-5, .island-6, .island-7, .island-8, .island-9, .island-10, .island-11, .island-12, .island-13, .island-14, .app-icon-s, .app-icon-sr, .app-icon-l, .app-icon-lr, .app-tips-m, .app-tips-w, .app-tips-t {
  display: block;
  position: absolute;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ribbon-title {
  top: 3vw;
  right: 0.75vw;
  width: 29.883vw;
  height: 7.032vw;
  background-image: url(../images/ribbon-title.png);
}

.msg-window {
  bottom: 4.25vw;
  right: 1.25vw;
  width: 52.474vw;
  height: 8.724vw;
  background-image: url(../images/msg-window.png);
  opacity: 1;
  transition: opacity 0.5s 50ms;
}
.msg-window.active {
  opacity: 0;
}

.island, .island-a0, .island-1, .island-2, .island-3, .island-4, .island-5, .island-6, .island-7, .island-8, .island-9, .island-10, .island-11, .island-12, .island-13, .island-14 {
  transition: background-image 0.6s;
}
.island a, .island-a0 a, .island-1 a, .island-2 a, .island-3 a, .island-4 a, .island-5 a, .island-6 a, .island-7 a, .island-8 a, .island-9 a, .island-10 a, .island-11 a, .island-12 a, .island-13 a, .island-14 a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.island-a0 {
  top: 6.64vw;
  left: 25.5vw;
  width: 4.25vw;
  height: 5.67vw;
  cursor: pointer;
  background-image: url(../images/a0-en-x.png);
}
.island-a0:hover {
  background-image: url(../images/a0-sel-x.png);
}
.island-a0:hover + .island-info-a0 {
  opacity: 1;
}

.island-1 {
  top: 10.91vw;
  left: 12.525vw;
  width: 7.25vw;
  height: 6.75vw;
  cursor: pointer;
  background-image: url(../images/01-en-home.png);
}
.island-1:hover {
  background-image: url(../images/01-sel-home.png);
}
.island-1:hover + .island-info-1 {
  opacity: 1;
}

.island-2 {
  top: 8.388vw;
  left: 3.380vw;
  width: 8.125vw;
  height: 4.969vw;
  cursor: pointer;
  background-image: url(../images/02-en-save.png);
}
.island-2:hover {
  background-image: url(../images/02-sel-save.png);
}
.island-2:hover + .island-info-2 {
  opacity: 1;
}

.island-3 {
  top: 6.84vw;
  left: 35.128vw;
  width: 12.656vw;
  height: 15.812vw;
  transform: rotate(-33deg);
  cursor: pointer;
  background-image: url(../images/03-en-north.png);
}
.island-3:hover {
  background-image: url(../images/03-sel-north.png);
}
.island-3:hover + .island-info-3 {
  opacity: 1;
}

.island-4 {
  top: 25.903vw;
  left: 30.149vw;
  width: 10.563vw;
  height: 8.344vw;
  cursor: pointer;
  background-image: url(../images/04-en-west.png);
}
.island-4:hover {
  background-image: url(../images/04-sel-west.png);
}
.island-4:hover + .island-info-4 {
  opacity: 1;
}

.island-5 {
  top: 10.218vw;
  left: 53.783vw;
  width: 8.782vw;
  height: 11.094vw;
  cursor: pointer;
  background-image: url(../images/05-en-east.png);
}
.island-5:hover {
  background-image: url(../images/05-sel-east.png);
}
.island-5:hover + .island-info-5 {
  opacity: 1;
}

.island-6 {
  top: 29.076vw;
  left: 13.582vw;
  width: 19.219vw;
  height: 22.062vw;
  transform: rotate(-42deg);
  cursor: pointer;
  background-image: url(../images/06-en-south.png);
}
.island-6:hover {
  background-image: url(../images/06-sel-south.png);
}
.island-6:hover + .island-info-6 {
  opacity: 1;
}

.island-7 {
  top: 32.676vw;
  left: 40.446vw;
  width: 7.282vw;
  height: 14.969vw;
  cursor: pointer;
  background-image: url(../images/07-en-central.png);
}
.island-7:hover {
  background-image: url(../images/07-sel-central.png);
}
.island-7:hover + .island-info-7 {
  opacity: 1;
}

.island-8 {
  top: 18.645vw;
  left: 45.012vw;
  width: 7.062vw;
  height: 13.812vw;
  transform: rotate(51deg);
  cursor: pointer;
  background-image: url(../images/08-en-toyohira.png);
}
.island-8:hover {
  background-image: url(../images/08-sel-toyohira.png);
}
.island-8:hover + .island-info-8 {
  opacity: 1;
}

.island-9 {
  top: 22.830vw;
  left: 59.215vw;
  width: 9.407vw;
  height: 8.156vw;
  cursor: pointer;
  background-image: url(../images/09-en-shiroishi.png);
}
.island-9:hover {
  background-image: url(../images/09-sel-shiroishi.png);
}
.island-9:hover + .island-info-9 {
  opacity: 1;
}

.island-10 {
  top: 24.615vw;
  left: 70.265vw;
  width: 9.75vw;
  height: 7.718vw;
  cursor: pointer;
  background-image: url(../images/10-en-atsubetsu.png);
}
.island-10:hover {
  background-image: url(../images/10-sel-atsubetsu.png);
}
.island-10:hover + .island-info-10 {
  opacity: 1;
}

.island-11 {
  top: 30.927vw;
  left: 48.782vw;
  width: 16.313vw;
  height: 7.25vw;
  cursor: pointer;
  background-image: url(../images/11-en-kiyota.png);
}
.island-11:hover {
  background-image: url(../images/11-sel-kiyota.png);
}
.island-11:hover + .island-info-11 {
  opacity: 1;
}

.island-12 {
  top: 16.148vw;
  left: 25.551vw;
  width: 9.656vw;
  height: 9.594vw;
  cursor: pointer;
  background-image: url(../images/12-en-teine.png);
}
.island-12:hover {
  background-image: url(../images/12-sel-teine.png);
}
.island-12:hover + .island-info-12 {
  opacity: 1;
}

/*
.island-12-dis {
	@extend .island;
	top: 16.148vw;
	left: 25.551vw;
	width: 9.656vw;
	height: 9.594vw;
	background-image: $island-img-d-12;
	&:hover {
		& + .island-info-12 {
			opacity: 1;
		}
	}
}
*/
.island-13 {
  top: 36.505vw;
  left: 83.567vw;
  width: 9.407vw;
  height: 8.844vw;
  cursor: pointer;
  background-image: url(../images/13-en-ebetsu.png);
}
.island-13:hover {
  background-image: url(../images/13-sel-ebetsu.png);
}
.island-13:hover + .island-info-13 {
  opacity: 1;
}

.island-14 {
  top: 9.028vw;
  left: 68.163vw;
  width: 23.281vw;
  height: 12.688vw;
  cursor: pointer;
  background-image: url(../images/14-en-ishikari.png);
}
.island-14:hover {
  background-image: url(../images/14-sel-ishikari.png);
}
.island-14:hover + .island-info-14 {
  opacity: 1;
}

.island-info, .island-info-1, .island-info-2, .island-info-3, .island-info-4, .island-info-5, .island-info-6, .island-info-7, .island-info-8, .island-info-9, .island-info-10, .island-info-11, .island-info-12, .island-info-13, .island-info-14, .island-info-a0 {
  position: absolute;
  bottom: 4.75vw;
  right: 2.25vw;
  width: 52.474vw;
  height: 8.724vw;
  opacity: 0;
  transition: opacity 0.3s;
}

.island-info-0 {
  position: absolute;
  bottom: 4.75vw;
  right: 2.25vw;
  width: 52.474vw;
  height: 8.724vw;
  opacity: 1;
  transition: opacity 0.5s 50ms;
}
.island-info-0.active {
  opacity: 0;
}

.island-name {
  position: absolute;
  top: 1.644vw;
  left: 3vw;
  width: 30vw;
  height: 2vw;
  color: #ff3;
  text-shadow: 0 0 0.24vw #ff3;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 1.25vw;
  transform: skew(-8deg, 0);
}

.island-description {
  position: absolute;
  top: 4.65vw;
  left: 11.25vw;
  width: 40vw;
  height: 2vw;
  color: #fff;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  transform: skew(-8deg, 0);
}

/*-----------------------*/
/*      App window       */
/*-----------------------*/
.app-window, .app-window-3, .app-window-4, .app-window-5, .app-window-6, .app-window-7, .app-window-8, .app-window-9, .app-window-10, .app-window-11, .app-window-12, .app-window-13, .app-window-14 {
  position: absolute;
  top: 50%;
  right: -100vw;
  width: 100%;
  height: 0;
  opacity: 1;
  transform: translateY(-50%);
  background: -moz-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, transparent);
  background: -webkit-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, transparent);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0));
  transition: opacity 0.3s, height 0.4s;
}
.app-window.active, .active.app-window-3, .active.app-window-4, .active.app-window-5, .active.app-window-6, .active.app-window-7, .active.app-window-8, .active.app-window-9, .active.app-window-10, .active.app-window-11, .active.app-window-12, .active.app-window-13, .active.app-window-14 {
  right: 0;
  opacity: 1;
  height: 100%;
}
.app-window.active .app-disp-area, .active.app-window-3 .app-disp-area, .active.app-window-4 .app-disp-area, .active.app-window-5 .app-disp-area, .active.app-window-6 .app-disp-area, .active.app-window-7 .app-disp-area, .active.app-window-8 .app-disp-area, .active.app-window-9 .app-disp-area, .active.app-window-10 .app-disp-area, .active.app-window-11 .app-disp-area, .active.app-window-12 .app-disp-area, .active.app-window-13 .app-disp-area, .active.app-window-14 .app-disp-area {
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}

.app-window-L2p, .app-window-4-L2, .app-window-9-L2 {
  position: absolute;
  top: 50%;
  right: -100vw;
  width: 100%;
  height: 0;
  opacity: 0;
  transform: translateY(-50%);
  background-color: rgba(68, 68, 68, 0.6);
  transition: opacity 0.3s, height 0.4s;
}
.app-window-L2p.active, .active.app-window-4-L2, .active.app-window-9-L2 {
  right: 0;
  opacity: 1;
  height: 100%;
}
.app-window-L2p.active .doc-disp-area-p, .active.app-window-4-L2 .doc-disp-area-p, .active.app-window-9-L2 .doc-disp-area-p {
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}

.doc-disp-area-p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 63.64vh;
  height: 90vh;
  border-radius: 1.5vw;
  opacity: 0;
  transition: opacity 0.3s;
  background-image: url(../images/L2/mission.jpg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 2vw #fff;
}

.app-disp-area {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 50%;
  opacity: 0;
}
.app-disp-area .area-map {
  position: absolute;
  top: 50%;
  left: 15vw;
  transform: translateY(-50%);
  width: 25vw;
  height: 25vw;
  border-radius: 1.5vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 2vw #ffc;
}

.area-name {
  position: absolute;
  top: 1.15vw;
  left: 46vw;
  width: 46vw;
  height: 3.2vw;
  color: #ff3;
  border-bottom: solid 0.125vw #ff3;
  padding-left: 0.125vw;
  text-shadow: 0 0 0.4vw #ff3;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 2.4vw;
  transform: skew(-8deg, 0);
}

.area-description {
  position: absolute;
  top: 4.4vw;
  right: 8.25vw;
  width: 40vw;
  height: 2vw;
  color: #fff;
  text-align: right;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  transform: skew(-8deg, 0);
}

.window-btn-area {
  position: absolute;
  bottom: 2.75vw;
  left: 46vw;
  width: 46vw;
  text-align: center;
}
.window-btn-area .window-btn {
  display: inline-block;
  margin: 0 auto;
  padding: 1vw 1.5vw;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 1.8vw;
  color: #984;
  background-color: #ff6;
  cursor: pointer;
  border-radius: 1.8vw;
  transition: color 0.3s, background-color0 0.3s, box-shadow 0.3s;
}
.window-btn-area .window-btn:hover {
  color: #cb7;
  background-color: #ffc;
  box-shadow: 0 0 1vw #ff3;
}

.app-window-3 .app-disp-area .area-map {
  background-image: url(../images/03-prv-north.jpg);
}

.app-window-4 .app-disp-area .area-map {
  background-image: url(../images/04-prv-west.jpg);
}

.app-window-5 .app-disp-area .area-map {
  background-image: url(../images/05-prv-east.jpg);
}

.app-window-6 .app-disp-area .area-map {
  background-image: url(../images/06-prv-south.jpg);
}

.app-window-7 .app-disp-area .area-map {
  background-image: url(../images/07-prv-central.jpg);
}

.app-window-8 .app-disp-area .area-map {
  background-image: url(../images/08-prv-toyohira.jpg);
}

.app-window-9 .app-disp-area .area-map {
  background-image: url(../images/09-prv-shiroishi.jpg);
}

.app-window-10 .app-disp-area .area-map {
  background-image: url(../images/10-prv-atsubetsu.jpg);
}

.app-window-11 .app-disp-area .area-map {
  background-image: url(../images/11-prv-kiyota.jpg);
}

.app-window-12 .app-disp-area .area-map {
  background-image: url(../images/12-prv-teine.jpg);
}

.app-window-13 .app-disp-area .area-map {
  background-image: url(../images/13-prv-ebetsu.jpg);
}

.app-window-14 .app-disp-area .area-map {
  background-image: url(../images/14-prv-ishikari.jpg);
}

/*-----------------------*/
/*       App guide       */
/*-----------------------*/
.app-icon-s, .app-icon-sr {
  width: 2vw;
  height: 2vw;
  border-radius: 0.2vw;
  box-shadow: 0 0 0.8vw #fff;
  transition: transform 0.3s;
  cursor: pointer;
}
.app-icon-s:hover, .app-icon-sr:hover {
  transform: scale(1.15);
}
.app-icon-s a, .app-icon-sr a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.app-icon-sr {
  border-radius: 50%;
}

.app-icon-l, .app-icon-lr {
  width: 5vw;
  height: 5vw;
  border-radius: 0.5vw;
  box-shadow: 0 0 0.8vw #fff;
}

.app-icon-lr {
  border-radius: 50%;
}

.icon-beater {
  animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: iconbeat1;
  -moz-animation-name: iconbeat1;
  -webkit-animation-name: iconbeat1;
  animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
.icon-beater:hover {
  animation-name: iconbeat0;
  -moz-animation-name: iconbeat0;
  -webkit-animation-name: iconbeat0;
}

@keyframes iconbeat1 {
  0% {
    transform: scale(1.15);
  }
  5% {
    transform: scale(1.15);
  }
  45% {
    transform: scale(1);
  }
  55% {
    transform: scale(1);
  }
  95% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.15);
  }
}
.app-guide {
  position: absolute;
  top: 12vw;
  left: 48vw;
  width: 42vw;
  height: 6vw;
  transition: opacity 0.3s;
}

.guide-id-0 {
  opacity: 0;
}
.guide-id-0.active {
  opacity: 1;
}

.guide-id-1 {
  opacity: 0;
}
.guide-id-1.active {
  opacity: 1;
}

.guide-id-2 {
  opacity: 0;
}
.guide-id-2.active {
  opacity: 1;
}

.guide-id-3 {
  opacity: 0;
}
.guide-id-3.active {
  opacity: 1;
}

.guide-id-4 {
  opacity: 0;
}
.guide-id-4.active {
  opacity: 1;
}

.guide-id-5 {
  opacity: 0;
}
.guide-id-5.active {
  opacity: 1;
}

.guide-id-6 {
  opacity: 0;
}
.guide-id-6.active {
  opacity: 1;
}

.guide-id-7 {
  opacity: 0;
}
.guide-id-7.active {
  opacity: 1;
}

.guide-id-8 {
  opacity: 0;
}
.guide-id-8.active {
  opacity: 1;
}

.guide-id-9 {
  opacity: 0;
}
.guide-id-9.active {
  opacity: 1;
}

.guide-id-10 {
  opacity: 0;
}
.guide-id-10.active {
  opacity: 1;
}

.app-title {
  position: absolute;
  top: 0.4vw;
  left: 6.75vw;
  width: 33vw;
  color: #fbb;
  text-shadow: 0 0 0.4vw #f99;
  font-family: "RodinNTLGPro-B", sans-serif;
  font-size: 1.5vw;
  transform: skew(-8deg, 0);
}

.app-description {
  position: absolute;
  top: 2.25vw;
  left: 6.75vw;
  width: 36vw;
  color: #bbb;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  line-height: 1.8;
  transform: skew(-8deg, 0);
}

.icon-img3-1 {
  background-image: url(../images/icons/3-1-tinkercad.jpg);
}

.icon-pos3-1 {
  top: 11.25vw;
  left: 13.75vw;
}

/*
.icon-img3-2 {
	background-image: $icon-img-3-2;
}
.icon-pos3-2 {
	top: 19.75vw;
	left: 14.75vw;
}
*/
.icon-img3-3 {
  background-image: url(../images/icons/3-3-blender.png);
}

.icon-pos3-3 {
  top: 7.5vw;
  left: 2.4vw;
}

.icon-img3-4 {
  background-image: url(../images/icons/3-4-fusion360.png);
}

.icon-pos3-4 {
  top: 5.5vw;
  left: 11.8vw;
}

.icon-img4-0 {
  background-image: url(../images/icons/app-mission.png);
}

.icon-pos4-0 {
  top: 10.5vw;
  left: 17vw;
}

.icon-img4-1 {
  background-image: url(../images/icons/4-1-codestudio.jpg);
}

.icon-pos4-1 {
  top: 5.5vw;
  left: 3vw;
}

/*
.icon-img4-2 {
	background-image: $icon-img-4-2;
}
.icon-pos4-2 {
	top: 8vw;
	left: 4vw;
}
*/
.icon-img4-3 {
  background-image: url(../images/icons/4-3-argologic.jpg);
}

.icon-pos4-3 {
  top: 8.7vw;
  left: 7.3vw;
}

.icon-img4-4 {
  background-image: url(../images/icons/4-4-codemonkey.jpg);
}

.icon-pos4-4 {
  top: 10.2vw;
  left: 11.8vw;
}

.icon-img4-5 {
  background-image: url(../images/icons/4-5-progate.jpg);
}

.icon-pos4-5 {
  top: 12vw;
  left: 3.1vw;
}

/*
.icon-img4-6 {
	background-image: $icon-img-4-6;
}
.icon-pos4-6 {
	top: 16.6vw;
	left: 4.3vw;
}
*/
.icon-img4-7 {
  background-image: url(../images/icons/4-7-scratch.jpg);
}

.icon-pos4-7 {
  top: 10.7vw;
  left: 19.9vw;
}

/*
.icon-img4-8 {
	background-image: $icon-img-4-8;
}
.icon-pos4-8 {
	top: 15.1vw;
	left: 19.2vw;
}
*/
.icon-img4-9 {
  background-image: url(../images/icons/4-9-kidscodeclub.png);
}

.icon-pos4-9 {
  top: 12.9vw;
  left: 21.2vw;
}

.icon-img4-10 {
  background-image: url(../images/icons/4-10-paiza.png);
}

.icon-pos4-10 {
  top: 17.9vw;
  left: 12.2vw;
}

.icon-img5-1 {
  background-image: url(../images/icons/5-1-minecraft_tj.png);
}

.icon-pos5-1 {
  top: 14.4vw;
  left: 13.1vw;
}

.icon-img5-2 {
  background-image: url(../images/icons/5-2-youtube.png);
}

.icon-pos5-2 {
  top: 9.2vw;
  left: 9.2vw;
}

.icon-img6-1 {
  background-image: url(../images/icons/6-1-sushida.jpg);
}

/*.icon-pos6-1 {
	top: 12vw;
	left: 5.7vw;
}
*/
.icon-pos6-1 {
  top: 20vw;
  left: 7.8vw;
}

.icon-img6-2 {
  background-image: url(../images/icons/6-2-sarada.jpg);
}

.icon-pos6-2 {
  top: 20vw;
  left: 7.8vw;
}

.icon-img6-3 {
  background-image: url(../images/icons/6-3-pken-manavision.jpg);
}

.icon-pos6-3 {
  top: 11.4vw;
  left: 18.8vw;
}

.icon-img6-4 {
  background-image: url(../images/icons/6-4-etyping.jpg);
}

.icon-pos6-4 {
  top: 9.1vw;
  left: 9.7vw;
}

.icon-img6-5 {
  background-image: url(../images/icons/6-5-mytyping.jpg);
}

.icon-pos6-5 {
  top: 2.1vw;
  left: 10.9vw;
}

.icon-img6-6 {
  background-image: url(../images/icons/6-6-playgram.webp);
}

.icon-pos6-6 {
  top: 12vw;
  left: 5.7vw;
}

.icon-img6-7 {
  background-image: url(../images/icons/6-7-typingtube.jpg);
}

.icon-pos6-7 {
  top: 10.2vw;
  left: 13.9vw;
}

.icon-img6-8 {
  background-image: url(../images/icons/6-8-cocoamomo.png);
}

.icon-pos6-8 {
  top: 16.9vw;
  left: 9.4vw;
}

.icon-img6-9 {
  background-image: url(../images/icons/6-9-typingerz.png);
}

.icon-pos6-9 {
  top: 16.3vw;
  left: 15.1vw;
}

.icon-img7-1 {
  background-image: url(../images/icons/7-1-word.jpg);
}

.icon-pos7-1 {
  top: 9.8vw;
  left: 11.5vw;
}

.icon-img7-2 {
  background-image: url(../images/icons/7-2-excel.jpg);
}

.icon-pos7-2 {
  top: 12.25vw;
  left: 12.1vw;
}

.icon-img7-3 {
  background-image: url(../images/icons/7-3-powerpoint.jpg);
}

.icon-pos7-3 {
  top: 14.7vw;
  left: 12.3vw;
}

.icon-img8-1 {
  background-image: url(../images/icons/8-1-hohei.png);
}

.icon-pos8-1 {
  top: 13.4vw;
  left: 16vw;
}

.icon-img8-2 {
  background-image: url(../images/icons/8-2-skillup.png);
}

.icon-pos8-2 {
  top: 5.8vw;
  left: 12.3vw;
}

.icon-img9-0 {
  background-image: url(../images/icons/app-mission.png);
}

.icon-pos9-0 {
  top: 11vw;
  left: 15.5vw;
}

.icon-img9-1 {
  background-image: url(../images/icons/9-1-dessertshooting.png);
}

.icon-pos9-1 {
  top: 13vw;
  left: 13.5vw;
}

.icon-img9-2 {
  background-image: url(../images/icons/9-2-towerofhanoi.png);
}

.icon-pos9-2 {
  top: 9vw;
  left: 10vw;
}

.icon-img9-3 {
  background-image: url(../images/icons/9-3-dessertshooting2.png);
}

.icon-pos9-3 {
  top: 18vw;
  left: 14.8vw;
}

.icon-img9-4 {
  background-image: url(../images/icons/9-4-dessertshooting3.png);
}

.icon-pos9-4 {
  top: 8vw;
  left: 6.2vw;
}

.icon-img9-5 {
  background-image: url(../images/icons/9-5-scratchbaloon.webp);
}

.icon-pos9-5 {
  top: 6.5vw;
  left: 18vw;
}

.icon-img9-5 {
  background-image: url(../images/icons/9-5-scratchbaloon.webp);
}

.icon-pos9-6 {
  top: 12.1vw;
  left: 7.2vw;
}

.icon-img9-6 {
  background-image: url(../images/icons/9-6-dessertrpg.webp);
}

.icon-img10-1 {
  background-image: url(../images/icons/10-1-garageband.png);
}

.icon-pos10-1 {
  top: 15vw;
  left: 7vw;
}

.icon-img10-2 {
  background-image: url(../images/icons/10-2-chromemusiclab.png);
}

.icon-pos10-2 {
  top: 15vw;
  left: 12vw;
}

.icon-img10-3 {
  background-image: url(../images/icons/10-3-chordana.jpg);
}

.icon-pos10-3 {
  top: 9.5vw;
  left: 5.8vw;
}

.icon-img11-1 {
  background-image: url(../images/icons/11-1-duolingo.png);
}

.icon-pos11-1 {
  top: 13vw;
  left: 2.4vw;
}

.icon-img11-2 {
  background-image: url(../images/icons/11-2-cloudt.jpg);
}

.icon-pos11-2 {
  top: 8.7vw;
  left: 20.5vw;
}

.icon-img11-3 {
  background-image: url(../images/icons/11-3-playgram.webp);
}

.icon-pos11-3 {
  top: 9.1vw;
  left: 7.2vw;
}

.icon-img12-1 {
  background-image: url(../images/icons/12-1-nktm-ranking.webp);
}

.icon-pos12-1 {
  top: 7.7vw;
  left: 12.4vw;
}

.icon-img12-2 {
  background-image: url(../images/icons/12-2-nktm-news.webp);
}

.icon-pos12-2 {
  top: 16.3vw;
  left: 8.8vw;
}

.icon-img12-3 {
  background-image: url(../images/icons/12-3-nktm-office.webp);
}

.icon-pos12-3 {
  top: 10.4vw;
  left: 16.4vw;
}

.icon-img13-1 {
  background-image: url(../images/icons/13-1-premiere.jpg);
}

.icon-pos13-1 {
  top: 7.7vw;
  left: 17vw;
}

.icon-img13-2 {
  background-image: url(../images/icons/13-2-aftereffects.jpg);
}

.icon-pos13-2 {
  top: 10.1vw;
  left: 18.8vw;
}

/* Adobe Rush 廃止
.icon-img13-3 {
	background-image: $icon-img-13-3;
}
.icon-pos13-3 {
	top: 5.6vw;
	left: 6.8vw;
}
*/
.icon-img13-4 {
  background-image: url(../images/icons/13-4-imovie.jpg);
}

.icon-pos13-4 {
  top: 10.7vw;
  left: 11vw;
}

.icon-img13-5 {
  background-image: url(../images/icons/13-5-dirpy.webp);
}

.icon-pos13-5 {
  top: 17.9vw;
  left: 9.7vw;
}

.icon-img13-6 {
  background-image: url(../images/icons/13-6-filmora.png);
}

.icon-pos13-6 {
  top: 4.8vw;
  left: 6.1vw;
}

.icon-img13-7 {
  background-image: url(../images/icons/13-7-pdirector.png);
}

.icon-pos13-7 {
  top: 5.2vw;
  left: 9.4vw;
}

.icon-img13-8 {
  background-image: url(../images/icons/13-8-freesounds.webp);
}

.icon-pos13-8 {
  top: 14.9vw;
  left: 7.8vw;
}

/*
.icon-img13-9 {
	background-image: $icon-img-13-9;
}
.icon-pos13-9 {
	top: 9vw;
	left: 5vw;
}

.icon-img13-10 {
	background-image: $icon-img-13-10;
}
.icon-pos13-10 {
	top: 15.5vw;
	left: 12.8vw;
}
*/
.icon-img14-1 {
  background-image: url(../images/icons/14-1-photoshop.jpg);
}

.icon-pos14-1 {
  top: 8.4vw;
  left: 9.8vw;
}

.icon-img14-2 {
  background-image: url(../images/icons/14-2-illustrator.jpg);
}

.icon-pos14-2 {
  top: 13.5vw;
  left: 8.6vw;
}

.icon-img14-3 {
  background-image: url(../images/icons/14-3-dotpictmaker.png);
}

.icon-pos14-3 {
  top: 10.4vw;
  left: 5.6vw;
}

.icon-img14-4 {
  background-image: url(../images/icons/14-4-canva.png);
}

.icon-pos14-4 {
  top: 12.8vw;
  left: 16.1vw;
}

.icon-img14-5 {
  background-image: url(../images/icons/14-5-freeimages.webp);
}

.icon-pos14-5 {
  top: 9.8vw;
  left: 20.4vw;
}

/*
.icon-img14-6 {
	background-image: $icon-img-14-6;
}
.icon-pos14-6 {
	top: 15.8vw;
	left: 2.6vw;
}

.icon-img14-7 {
	background-image: $icon-img-14-7;
}
.icon-pos14-7 {
	top: 16.5vw;
	left: 21.3vw;
}
*/
.icon-img14-8 {
  background-image: url(../images/icons/14-8-clipstudio.png);
}

.icon-pos14-8 {
  top: 13.1vw;
  left: 12.3vw;
}

.icon-img14-9 {
  background-image: url(../images/icons/14-9-medibang.png);
}

.icon-pos14-9 {
  top: 8.8vw;
  left: 13.9vw;
}

/*-----------------------*/
/*        App tips       */
/*-----------------------*/
.app-tips-m, .app-tips-w, .app-tips-t {
  top: 8vw;
  left: 46vw;
  width: 45.9375vw;
  height: 12.63vw;
  padding-left: 4.12vw;
  color: #fff;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.2vw;
  line-height: 1.8;
  border-radius: 0.5vw;
  box-shadow: 0 0 1vw #ffc;
}
.app-tips-m p, .app-tips-w p, .app-tips-t p {
  transform: skew(-8deg, 0);
}

.app-tips-m {
  padding-top: 3.6vw;
  background-image: url(../images/dock6.jpg);
}

.app-tips-w {
  padding-top: 2.8vw;
  background-image: url(../images/taskbar5.jpg);
}

.app-tips-t {
  padding-top: 3.6vw;
  background-image: url(../images/tab-apps.jpg);
}

.app-tips-3-3,
.app-tips-3-4,
.app-tips-7-1,
.app-tips-7-2,
.app-tips-7-3,
.app-tips-10-1,
.app-tips-10-3,
.app-tips-13-1,
.app-tips-13-2,
.app-tips-13-3,
.app-tips-13-4,
.app-tips-13-6,
.app-tips-13-7,
.app-tips-14-1,
.app-tips-14-2,
.app-tips-14-8,
.app-tips-14-9 {
  left: 100vw;
  opacity: 1;
}
.app-tips-3-3 .app-tips-m, .app-tips-3-3 .app-tips-w, .app-tips-3-3 .app-tips-t,
.app-tips-3-4 .app-tips-m,
.app-tips-3-4 .app-tips-w,
.app-tips-3-4 .app-tips-t,
.app-tips-7-1 .app-tips-m,
.app-tips-7-1 .app-tips-w,
.app-tips-7-1 .app-tips-t,
.app-tips-7-2 .app-tips-m,
.app-tips-7-2 .app-tips-w,
.app-tips-7-2 .app-tips-t,
.app-tips-7-3 .app-tips-m,
.app-tips-7-3 .app-tips-w,
.app-tips-7-3 .app-tips-t,
.app-tips-10-1 .app-tips-m,
.app-tips-10-1 .app-tips-w,
.app-tips-10-1 .app-tips-t,
.app-tips-10-3 .app-tips-m,
.app-tips-10-3 .app-tips-w,
.app-tips-10-3 .app-tips-t,
.app-tips-13-1 .app-tips-m,
.app-tips-13-1 .app-tips-w,
.app-tips-13-1 .app-tips-t,
.app-tips-13-2 .app-tips-m,
.app-tips-13-2 .app-tips-w,
.app-tips-13-2 .app-tips-t,
.app-tips-13-3 .app-tips-m,
.app-tips-13-3 .app-tips-w,
.app-tips-13-3 .app-tips-t,
.app-tips-13-4 .app-tips-m,
.app-tips-13-4 .app-tips-w,
.app-tips-13-4 .app-tips-t,
.app-tips-13-6 .app-tips-m,
.app-tips-13-6 .app-tips-w,
.app-tips-13-6 .app-tips-t,
.app-tips-13-7 .app-tips-m,
.app-tips-13-7 .app-tips-w,
.app-tips-13-7 .app-tips-t,
.app-tips-14-1 .app-tips-m,
.app-tips-14-1 .app-tips-w,
.app-tips-14-1 .app-tips-t,
.app-tips-14-2 .app-tips-m,
.app-tips-14-2 .app-tips-w,
.app-tips-14-2 .app-tips-t,
.app-tips-14-8 .app-tips-m,
.app-tips-14-8 .app-tips-w,
.app-tips-14-8 .app-tips-t,
.app-tips-14-9 .app-tips-m,
.app-tips-14-9 .app-tips-w,
.app-tips-14-9 .app-tips-t {
  opacity: 0;
  transition: opacity, 0.4s;
}
.app-tips-3-3.active,
.app-tips-3-4.active,
.app-tips-7-1.active,
.app-tips-7-2.active,
.app-tips-7-3.active,
.app-tips-10-1.active,
.app-tips-10-3.active,
.app-tips-13-1.active,
.app-tips-13-2.active,
.app-tips-13-3.active,
.app-tips-13-4.active,
.app-tips-13-6.active,
.app-tips-13-7.active,
.app-tips-14-1.active,
.app-tips-14-2.active,
.app-tips-14-8.active,
.app-tips-14-9.active {
  left: 0;
}
.app-tips-3-3.active .app-tips-m, .app-tips-3-3.active .app-tips-w, .app-tips-3-3.active .app-tips-t,
.app-tips-3-4.active .app-tips-m,
.app-tips-3-4.active .app-tips-w,
.app-tips-3-4.active .app-tips-t,
.app-tips-7-1.active .app-tips-m,
.app-tips-7-1.active .app-tips-w,
.app-tips-7-1.active .app-tips-t,
.app-tips-7-2.active .app-tips-m,
.app-tips-7-2.active .app-tips-w,
.app-tips-7-2.active .app-tips-t,
.app-tips-7-3.active .app-tips-m,
.app-tips-7-3.active .app-tips-w,
.app-tips-7-3.active .app-tips-t,
.app-tips-10-1.active .app-tips-m,
.app-tips-10-1.active .app-tips-w,
.app-tips-10-1.active .app-tips-t,
.app-tips-10-3.active .app-tips-m,
.app-tips-10-3.active .app-tips-w,
.app-tips-10-3.active .app-tips-t,
.app-tips-13-1.active .app-tips-m,
.app-tips-13-1.active .app-tips-w,
.app-tips-13-1.active .app-tips-t,
.app-tips-13-2.active .app-tips-m,
.app-tips-13-2.active .app-tips-w,
.app-tips-13-2.active .app-tips-t,
.app-tips-13-3.active .app-tips-m,
.app-tips-13-3.active .app-tips-w,
.app-tips-13-3.active .app-tips-t,
.app-tips-13-4.active .app-tips-m,
.app-tips-13-4.active .app-tips-w,
.app-tips-13-4.active .app-tips-t,
.app-tips-13-6.active .app-tips-m,
.app-tips-13-6.active .app-tips-w,
.app-tips-13-6.active .app-tips-t,
.app-tips-13-7.active .app-tips-m,
.app-tips-13-7.active .app-tips-w,
.app-tips-13-7.active .app-tips-t,
.app-tips-14-1.active .app-tips-m,
.app-tips-14-1.active .app-tips-w,
.app-tips-14-1.active .app-tips-t,
.app-tips-14-2.active .app-tips-m,
.app-tips-14-2.active .app-tips-w,
.app-tips-14-2.active .app-tips-t,
.app-tips-14-8.active .app-tips-m,
.app-tips-14-8.active .app-tips-w,
.app-tips-14-8.active .app-tips-t,
.app-tips-14-9.active .app-tips-m,
.app-tips-14-9.active .app-tips-w,
.app-tips-14-9.active .app-tips-t {
  opacity: 1;
}

.app-circle-m, .app-circle-3-3-m, .app-circle-3-4-m, .app-circle-7-1-m, .app-circle-7-2-m, .app-circle-7-3-m, .app-circle-10-1-m, .app-circle-13-1-m, .app-circle-13-2-m, .app-circle-13-4-m, .app-circle-13-6-m, .app-circle-13-7-m, .app-circle-14-1-m, .app-circle-14-2-m, .app-circle-14-8-m, .app-circle-14-9-m, .app-circle-w, .app-circle-3-3-w, .app-circle-7-1-w, .app-circle-7-2-w, .app-circle-7-3-w, .app-circle-13-1-w, .app-circle-13-2-w, .app-circle-13-6-w, .app-circle-13-7-w, .app-circle-14-1-w, .app-circle-14-2-w, .app-circle-14-8-w, .app-circle-14-9-w, .app-circle-t, .app-circle-10-3-t {
  position: absolute;
  border-radius: 50%;
  border: solid 0.3vw #ff0;
}

.app-circle-m, .app-circle-3-3-m, .app-circle-3-4-m, .app-circle-7-1-m, .app-circle-7-2-m, .app-circle-7-3-m, .app-circle-10-1-m, .app-circle-13-1-m, .app-circle-13-2-m, .app-circle-13-4-m, .app-circle-13-6-m, .app-circle-13-7-m, .app-circle-14-1-m, .app-circle-14-2-m, .app-circle-14-8-m, .app-circle-14-9-m {
  top: 8.9vw;
  width: 4vw;
  height: 4vw;
}

.app-circle-w, .app-circle-3-3-w, .app-circle-7-1-w, .app-circle-7-2-w, .app-circle-7-3-w, .app-circle-13-1-w, .app-circle-13-2-w, .app-circle-13-6-w, .app-circle-13-7-w, .app-circle-14-1-w, .app-circle-14-2-w, .app-circle-14-8-w, .app-circle-14-9-w {
  top: 9.3vw;
  width: 4vw;
  height: 4vw;
}

.app-circle-t, .app-circle-10-3-t {
  top: 7.9vw;
  width: 5vw;
  height: 5vw;
}

/*
.app-circle-3-2-m {
	@extend .app-circle-m;
	left: 16.9vw;
}
*/
.app-circle-3-3-m {
  left: 8.8vw;
}

.app-circle-3-4-m {
  left: 14.1vw;
}

.app-circle-7-1-m {
  left: 0.7vw;
}

.app-circle-7-2-m {
  left: 3.4vw;
}

.app-circle-7-3-m {
  left: 6.1vw;
}

.app-circle-10-1-m {
  left: 11.5vw;
}

.app-circle-10-3-t {
  left: 17.3vw;
}

.app-circle-13-1-m {
  left: 24.9vw;
}

.app-circle-13-2-m {
  left: 27.7vw;
}

.app-circle-13-4-m {
  left: 30.3vw;
}

.app-circle-13-6-m {
  left: 33vw;
}

.app-circle-13-7-m {
  left: 35.7vw;
}

.app-circle-14-1-m {
  left: 19.6vw;
}

.app-circle-14-2-m {
  left: 22.3vw;
}

.app-circle-14-8-m {
  left: 38.4vw;
}

.app-circle-14-9-m {
  left: 41.1vw;
}

/*
.app-circle-3-2-w {
	@extend .app-circle-w;
	left: 15.1vw;
}
*/
.app-circle-3-3-w {
  left: 11.8vw;
}

.app-circle-7-1-w {
  left: 1.8vw;
}

.app-circle-7-2-w {
  left: 5.1vw;
}

.app-circle-7-3-w {
  left: 8.5vw;
}

.app-circle-13-1-w {
  left: 25vw;
}

.app-circle-13-2-w {
  left: 28.3vw;
}

.app-circle-13-6-w {
  left: 31.6vw;
}

.app-circle-13-7-w {
  left: 34.9vw;
}

.app-circle-14-1-w {
  left: 18.4vw;
}

.app-circle-14-2-w {
  left: 21.7vw;
}

.app-circle-14-8-w {
  left: 38.2vw;
}

.app-circle-14-9-w {
  left: 41.6vw;
}

/*-----------------------*/
/*        options        */
/*-----------------------*/
.sign-in-code {
  position: absolute;
  top: 10.55vw;
  left: 4.75vw;
  padding: 0.4vw;
  color: #444;
  background-color: rgba(255, 255, 255, 0.6);
  border: solid 0.1vw #fff;
  border-radius: 0.5vw;
  box-shadow: 0 0 0.6vw #fff;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 0.775vw;
  line-height: 1.4;
}

/*-----------------------*/
/*        altered        */
/*-----------------------*/
.align-center {
  text-align: center;
}

#map2 {
  background-image: url(../images/margedmap.webp);
}

#settings {
  width: 40vw;
  height: 30vw;
  margin-top: 13.5vw;
  margin-left: auto;
  margin-right: auto;
}
#settings h3 {
  margin-top: 0.15vw;
  width: 100%;
  height: 3.2vw;
  color: #ff3;
  border-bottom: solid 0.125vw #ff3;
  padding-left: 0.125vw;
  text-shadow: 0 0 0.4vw #ff3;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 2.4vw;
  text-align: center;
}
#settings h4 {
  width: 100%;
  margin-top: 1.6vw;
  color: #fbb;
  text-shadow: 0 0 0.4vw #f99;
  font-family: "RodinNTLGPro-B", sans-serif;
  font-size: 1.5vw;
  text-align: center;
}
#settings p {
  width: 100%;
  padding: 0.15vw 0.3vw;
  color: #fff;
  text-align: right;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  text-align: center;
}
#settings p.msg {
  padding: 1.8vw 0 0.8vw;
}
#settings form {
  padding-top: 2vw;
}
#settings input[type="radio"] {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  transform: scale(0.01);
  opacity: 0;
}
#settings label {
  display: block;
  margin: 0 auto;
  width: 80%;
  padding: 0.6vw 1vw;
  font-size: 1.15vw;
  border: solid 0.1vw #fff;
  color: #fff;
  text-align: center;
  border-radius: 1.5vw;
  transition: background-color 0.3s;
  background-color: transparent;
  cursor: pointer;
  font-family: "RodinNTLGPro-DB", sans-serif;
}
#settings input[type="radio"]:checked + label {
  background-color: rgba(255, 255, 255, 0.4);
}
#settings .window-btn {
  -webkit-appearance: none;
  display: inline-block;
  margin: 0 auto;
  padding: 1vw 1.5vw;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 1.5vw;
  color: #984;
  background-color: #ff6;
  cursor: pointer;
  margin: 1vw 0.8vw 0;
  border: none;
  border-radius: 1.8vw;
  transition: color 0.3s, background-color0 0.3s, box-shadow 0.3s;
}
#settings .window-btn:hover {
  color: #cb7;
  background-color: #ffc;
  box-shadow: 0 0 1vw #ff3;
}

/*-----------------------*/
/*   animation objects   */
/*-----------------------*/
/*---- object icon variables ----*/
.portal {
  position: absolute;
  top: 14.3vw;
  left: 2.3vw;
  width: 6.25vw;
  height: 6.25vw;
  perspective: 150px;
  transform-style: preserve-3d;
  transform: scale(1.8);
}
.portal .layer1, .portal .layer2, .portal .layer3, .portal .layer4, .portal .layer5, .portal .layer6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 5vw;
  height: 5vw;
  transform: rotateX(19deg) rotateZ(-1.6deg) scaleY(0.7);
}
.portal .layer6.active .img6 {
  opacity: 0.8;
}
.portal .img1, .portal .img2, .portal .img3, .portal .img4, .portal .img5, .portal .img6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5vw;
  height: 5vw;
  background-size: contain;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.portal .img1 {
  background-image: url(../images/objects/portal-L1.webp);
  animation-name: portal-L1;
  animation-duration: 29s;
}
.portal .img2 {
  background-image: url(../images/objects/portal-L2.webp);
  animation-name: portal-L2;
  animation-duration: 37s;
}
.portal .img3 {
  background-image: url(../images/objects/portal-L3.webp);
  animation-name: portal-L3;
  animation-duration: 73s;
}
.portal .img4 {
  background-image: url(../images/objects/portal-L4.webp);
  animation-name: portal-L4;
  animation-duration: 31s;
}
.portal .img5 {
  background-image: url(../images/objects/portal-L5.webp);
  animation-name: portal-L5;
  animation-duration: 4s;
}
.portal .img6 {
  background-image: url(../images/objects/portal-L6.webp);
  animation-name: portal-L6;
  animation-duration: 100s;
  transition: opacity 0.3s;
  opacity: 0;
}
@keyframes portal-L1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes portal-L2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes portal-L3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes portal-L4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes portal-L5 {
  0% {
    transform: rotate(0deg);
    opacity: 0.7;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0.7;
  }
}
@keyframes portal-L6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.island-info-p {
  position: absolute;
  bottom: 4.75vw;
  right: 2.25vw;
  width: 52.474vw;
  height: 8.724vw;
  opacity: 0;
  transition: opacity 0.3s;
}
.island-info-p.active {
  opacity: 1;
}

a.trigger-p {
  display: block;
  position: absolute;
  top: 16.2vw;
  left: 4.65vw;
  width: 8.8vw;
  height: 6.2vw;
  border-radius: 50%;
  cursor: pointer;
}