/* style.css */
/* UTF-8対策 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');

* {
  margin:0;
  padding:0;
  font-family:'Meiryo UI','Hiragino Kaku Gothic Pro',Osaka,'MS UI Gothic',sans-serif;
}

html {
  height:100%;
  margin:0;
  padding:0;
  text-align:center;
  background:#333;
}

body {
  position:relative;
  width:1200px;
  min-height:calc(100% - 80px);
  margin:0 auto;
  padding:0;
  background:#fff;
  filter:drop-shadow(0 0 10px #cc6);
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
body::after {
  content:'';
  clear:both;
  display:block;
  width:100%;
}

h1 {
}
h2 {
}
h3 {
}

a {
  color:#36f;
  text-decoration:none;
}
a:hover {
  color:#0cf;
}

table {
  margin:0 auto;
  border-spacing:0;
  border-collapse:collapse;
}
table th {
  padding:10px 20px;
  background:#eee;
  border:solid 1px #666;
}
table td {
  padding:10px 20px;
  background:#fff;
  border:solid 1px #666;
}

input[type=password] {
  font-family:Verdana;
}
input::placeholder {
  font-size:0.9em;
  color:#666;
}



header {
  position:sticky;
  z-index:999;
  top:0;
  width:1200px;
  margin:0;
  padding:10px 0;
  background:#fcf966;
  border-bottom:solid 1px #dd9;
}
header h2 {
}
header h2 span {
  position:relative;
  display:block;
  width:800px;
  height:272px;
  margin:0 auto 0 auto;
  font-size:1em;
  background:url(../zukan/img/bg-x.png) no-repeat center center;
  background-size:10%;
  overflow:hidden;
  transition:all 0.3s;
}
header h2 span a {
  position:absolute;
  top:0;
  width:42%;
  height:100%;
  text-indent:-999em;
  overflow:hidden;
  transition:all 0.1s;
}
header h2 span a:nth-of-type(1) {
  left:0;
  background:url(../zukan/img/logo-zukan.png) no-repeat left center;
  background-size:100%;
  filter:drop-shadow(0 0 5px #fff);
}
header h2 span a:nth-of-type(2) {
  right:0;
  background:url(../zukan/img/logo-island.png) no-repeat right center;
  background-size:100%;
  filter:drop-shadow(0 0 5px #fff);
}
header h2 span a:hover {
  transform:scale(1.05,1.05);
  filter:drop-shadow(0 0 10px #cff);
}
header p.pv {
  position:absolute;
  left:20px;
  top:30px;
  padding:0;
  text-align:center;
  white-space:nowrap;
  font-size:0.8em;
  background:#fff;
  border:solid 2px #fff;
  border-radius:0 0 0 10px;
  box-shadow:0 0 5px #666;
}
header p.pv::before {
  content:'';
  position:absolute;
  z-index:9;
  top:-15px;
  width:20px;
  height:20px;
  background:url(../zukan/img/icon-pin.png) no-repeat center center;
  background-size:100% 100%;
  filter:drop-shadow(0 0 2px #fff);
}
header p.pv::after {
  content:'';
  position:absolute;
  z-index:10;
  left:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  background:#fff;
  border-radius:0 0 0 10px;
  box-shadow:1px -1px 2px #999;
}
header p.pv span {
  display:block;
  margin:0 5px;
  padding:5px;
}
header p.pv span.name {
  margin:0;
  padding:5px 10px;
  letter-spacing:2px;
  color:#fff;
  background:#369;
}
header p.pv span.total {
  border-bottom:dashed 1px #666;
}
header p.pv span.month {
  border-bottom:dashed 1px #666;
}
header p.pv span.today {
}



nav {
  position:fixed;
  left:0;
  width:200px;
  min-height:calc(100% - 142px);
  margin:0;
  padding:20px 0;
  background:#38c;
  border-right:solid 1px #cde;
}
nav ul {
  position:sticky;
  z-index:999;
  top:120px;
  margin:0 0 40px 0;
  padding:0 20px;
  list-style-type:none;
  line-height:3;
}
nav ul li {
  margin:0 0 20px 0;
}
nav ul li a {
  display:block;
  font-weight:bold;
  font-size:1.2em;
  color:#999;
  background:#ddd;
  border:solid 1px #ccc;
  border-radius:10px;
  cursor:default;
}
nav ul li a:hover {
  color:#999;
}
nav ul li a[href] {
  color:#456;
  background:linear-gradient(to left,#eee,#fff,#fff,#eee);
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff;
  filter:drop-shadow(0 0 2px #999);
  cursor:pointer;
  transition:all 0.2s;
}
nav ul li a[href]:hover {
  color:#090;
  background:#efe;
  background:linear-gradient(to left,#eff,#efe,#efe,#eff);
  filter:drop-shadow(0 0 6px #cff);
  transform:scale(1.1,1.1);
}
nav ul li a[href]::before {
  content:'';
  display:inline-block;
  width:1.2em;
  height:1.2em;
  margin:-0.2em 3px 0 0;
  vertical-align:middle;
  background:url(../zukan/img/icon-roupe.png) no-repeat left top;
  background-size:1.2em 1.2em;
}
nav ul li:first-child a[href]::before {
  content:'new';
  display:inline-block;
  width:2.6em;
  height:2.6em;
  margin:-0.3em 3px 0 0;
  line-height:2.6em;
  vertical-align:middle;
  font-weight:bold;
  font-size:0.5em;
  color:#ff0;
  background:#f00;
  border-radius:1.3em;
  transform:rotate(-20deg);
  text-shadow:none;
  filter:drop-shadow(0 0 3px #fff);
}
nav ul li a.focus {
  font-weight:bold;
  color:#090;
  background:#efe;
}
nav form {
  position:sticky;
  z-index:998;
  top:460px;
  padding:0 20px;
}
nav form input[type=text] {
  display:block;
  width:calc(100% - 18px);
  padding:4px 8px;
  font-size:1em;
  background:#fff;
  border:solid 1px #999;
  border-radius:5px;
}
nav form input[type=submit] {
  position:absolute;
  top:2px;
  right:22px;
  display:inline-block;
  width:2em;
  height:2em;
  color:transparent;
  background:transparent url(../zukan/img/icon-roupe.png) no-repeat left top;
  background-size:2em 2em;
  border:none;
  cursor:pointer;
}
nav form input[type=submit]:hover {
  transform:scale(1.2,1.2);
}



article {
  width:960px;
  min-height:100vh;
  margin:0 0 0 200px;
  padding:20px 20px 100px 20px;
}

article div.article {
}
article div.article section {
}
article h3.bar {
  margin-bottom:30px;
  padding:10px 0;
  color:#393;
  background:#dfd;
  border-bottom:solid 5px #beb;
  border-radius:8px;
}
article h3.bar a {
  color:#393;
}
article h3.bar a:hover {
  color:#3c3;
}



footer {
  z-index:999;
  margin:0;
  padding:0;
}
footer a {
  position:fixed;
  z-index:9999;
  display:inline-block;
  right:20px;
  bottom:20px;
  width:100px;
  height:100px;
  margin:0;
  padding:0;
  text-indent:-999em;
  background:url(../zukan/img/icon-arrow-up.png) no-repeat center center;
  background-size:100% 100%;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 0 5px #fff,0 0 7px #fff,0 0 9px #fff;
}
footer a:hover {
  right:15px;
  bottom:15px;
}



h3.search {
  margin:0 0 20px 0;
  padding:0 0 0 12em;
  line-height:1.6;
  text-indent:-12em;
  text-align:left;
  font-size:1.2em;
}
h3.search::before {
  content:'';
  display:inline-block;
  width:1.2em;
  height:1.2em;
  margin:-0.4em 3px 0 0;
  vertical-align:middle;
  background:url(../zukan/img/icon-roupe.png) no-repeat left top;
  background-size:1.2em 1.2em;
}
h3.search * {
  text-indent:0;
}
h3.search strong {
  font-size:1.2em;
  color:#c00;
}
h3.search a {
  color:#024;
}
h3.search big {
  display:inline-block;
  margin:-0.1em 0.3em 0 0;
  padding:0 0.5em;
  line-height:1.5;
  vertical-align:middle;
  font-size:1.2em;
  color:#fff;
  background:#c00;
  border-radius:10px;
}

p.note {
  display:inline-block;
  width:auto;
  margin:0 auto 20px auto;
  text-align:left;
  line-height:1.5;
}
p.note span.blue {
  color:#06f;
}
p.note span.red {
  color:#c03;
}



div.data {
}
div.data ul.rank {
  position:relative;
  width:960px;
  height:960px;
  margin:1em 0 2em 0;
  text-align:left;
  line-height:1;
  list-style-type:none;
  border-radius:30px;
}
div.data ul.rank:before {
  content:'';
  position:absolute;
  z-index:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.4) url(./img/bg-rank.jpg) no-repeat left bottom;
  background-size:960px 960px;
  background-blend-mode:lighten;
  border-radius:30px;
}
div.data ul.rank:after {
  content:'人気の生物ランキング✨';
  position:absolute;
  z-index:0;
  top:-0.5em;
  left:50%;
  white-space:nowrap;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:bold;
  font-size:1.6em;
  color:#246;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff);
  transform:translate(-50%);
}
div.data ul.rank li {
  position:absolute;
  z-index:0;
  display:inline-block;
}
div.data ul.rank li:hover {
  z-index:1;
}
div.data ul.rank li a {
  display:inline-block;
  border-radius:50px;
  overflow:hidden;
  transition:all 0.5s;
  filter:drop-shadow(0 0 3px #fff);
  transform:scale(0.9,0.9);
  animation:wave 2s ease-in-out 0s infinite normal forwards;
}
@keyframes wave {
  0% { transform:scale(0.9,0.9); }
  50% { transform:scale(1.0,1.0);filter:drop-shadow(0 0 6px #fff); }
  100% { transform:scale(0.9,0.9); }
}
div.data ul.rank li a:hover {
  transition:all 0.5s;
  animation:wave2 0.5s ease-in-out 0s infinite normal forwards;
}
@keyframes wave2 {
  0% { transform:scale(1.1,1.1); }
  50% { transform:scale(1.2,1.2);filter:drop-shadow(0 0 10px #0ff) brightness(1.2); }
  100% { transform:scale(1.1,1.1); }
}
div.data ul.rank li a img {
  width:100px;
  height:100px;
  vertical-align:middle;
  object-fit:cover;
}
div.data ul.rank code {
  position:absolute;
  z-index:1;
  width:3em;
  height:3em;
  line-height:3em;
  text-align:center;
  font-weight:bold;
  font-size:1em;
  color:#000;
  background:rgba(255,255,255,0.6);
  border-radius:1.5em;
  outline:dotted 5px #fff;
  filter:drop-shadow(0 0 2px #666) brightness(1.2);
  text-shadow:0 0 2px #fff;
  pointer-events:none;
  /*animation:wave3 2s ease-in-out 0s infinite;*/
  animation:wave3 2s ease-in-out 0s infinite normal forwards;
}
@keyframes wave3 {
  0%,40% { transform:skew(0deg,0deg); }
  5% { transform:skew(4deg,4deg); }
  10% { transform:skew(-3deg,-3deg); }
  15% { transform:skew(2.4deg,2.4deg); }
  20% { transform:skew(-1.6deg,-1.6deg); }
  25% { transform:skew(0.8deg,0.8deg); }
  30% { transform:skew(-0.4deg,-0.4deg); }
  35% { transform:skew(0.2deg,0.2deg); }
}
div.data ul.rank code:nth-of-type(1) {
  width:2.4em;
  height:2.4em;
  line-height:2.4em;
  font-size:1.2em;
  color:#e33;
  background:#ffd;
  background:rgba(255,255,221,0.6);
  border:dotted 8px #e66;
  border-radius:1.7em;
  outline:dotted 6px #eb0;
  filter:drop-shadow(0 0 2px #666) brightness(1.2);
}
div.data ul.rank code:nth-of-type(1)::before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  top:-8px;
  left:-8px;
  border:dotted 8px #eb0;
  border-radius:1.7em;
  transform:rotate(15deg);
}
div.data ul.rank code:nth-of-type(2) {
  width:2.4em;
  height:2.4em;
  line-height:2.4em;
  font-size:1.2em;
  color:#090;
  background:rgba(240,255,240,0.6);
  border:dotted 8px #3c3;
  border-radius:1.7em;
  outline:dotted 6px #9f6;
  filter:drop-shadow(0 0 2px #666) brightness(1.2);
}
div.data ul.rank code:nth-of-type(2)::before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  top:-8px;
  left:-8px;
  border:dotted 8px #9f6;
  border-radius:1.7em;
  transform:rotate(15deg);
}
div.data ul.rank code:nth-of-type(3) {
  width:2.4em;
  height:2.4em;
  line-height:2.4em;
  font-size:1.2em;
  color:#069;
  background:rgba(233,255,255,0.6);
  border:dotted 8px #58c;
  border-radius:1.7em;
  outline:dotted 6px #9df;
  filter:drop-shadow(0 0 2px #666) brightness(1.2);
}
div.data ul.rank code:nth-of-type(3)::before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  top:-8px;
  left:-8px;
  border:dotted 8px #9df;
  border-radius:1.7em;
  transform:rotate(15deg);
}
div.data p.nodata {
  margin:0 100px 30px 100px;
  padding:40px;
  background:#ffe;
  border:solid 1px #ccc;
  border-radius:10px;
  filter:drop-shadow(0 0 3px #ccc);
}
div.data div.search {
  margin:0 0 20px 0;
  padding:0 0 30px 0;
  line-height:1.5;
  font-size:1.5em;
}
div.data div.search p {
  margin:0 0 20px 0;
}
div.data p.rare {
  position:relative;
  top:-2px;
  display:inline-block;
  margin:10px 0 40px 0;
  padding:0.2em 0.4em;
  line-height:1;
  font-size:1.5em;
  background:#fff;
  border:solid 1px #999;
  border-radius:5px;
  filter:drop-shadow(0 0 3px #999);
}
div.data div.search form p.rare {
  margin:0 50px 0 0!important;
  font-size:1em;
}
div.data p.rare a {
  display:inline-block;
  margin:-0.3em 0 0 -10px;
  vertical-align:middle;
  font-size:1.5em;
  color:#ccc;
}
div.data p.rare a:hover {
  color:#ff0;
  text-shadow:0 0 3px #f60,0 0 3px #f60,0 0 3px #f60;
  transform:scale(1.2,1.2);
}
div.data p.rare a.focus {
  color:#ff0;
  text-shadow:0 0 3px #f60,0 0 3px #f60,0 0 3px #f60;
}
div.data p.rare a:first-child {
  display:inline-block;
  margin:0;
  vertical-align:baseline;
  font-size:1em;
  color:#333;
}
div.data p.rare a:first-child:hover {
  color:#c00;
  text-shadow:none;
  transform:scale(1.1,1.1);
}
div.data div.search form {
}
div.data div.search form input[type=text] {
  display:inline-block;
  width:12em;
  padding:4px 8px;
  font-size:1em;
  background:#fff;
  border:solid 1px #999;
  border-radius:5px;
  filter:drop-shadow(0 0 3px #999);
}
div.data div.search form input[type=submit] {
  position:absolute;
  display:inline-block;
  width:1.5em;
  height:1.5em;
  margin:0.1em 0 0 -1.6em;
  font-size:1em;
  color:transparent;
  background:transparent url(../zukan/img/icon-roupe.png) no-repeat left top;
  background-size:1.5em 1.5em;
  border:none;
  cursor:pointer;
}
div.data div.search form input[type=submit]:hover {
  transform:scale(1.2,1.2);
}
div.data h3.name {
  display:block;
  margin:0 0px 30px 0;
  padding:8px 0 10px 15px;
  line-height:1.2;
  text-align:left;
  font-weight:normal;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  background:#f0f3f6;
  border-left:solid 20px #023;
  filter:drop-shadow(4px 4px 3px #999);
}
div.data h3.name a {
  display:block;
  color:#024;
  font-family:'Noto Serif JP',serif,'Times New Roman';
}
div.data h3.name strong {
  display:block;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:normal;
  font-size:1.4em;
}
div.data h3.name em {
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:1.1em;
}
div.data h3.banner {
  padding:10px 0 30px 0;
}
div.data h3.banner a {
  display:inline-block;
  transition:all 0.2s;
}
div.data h3.banner a:hover {
  transform:scale(1.1,1.1);
}
div.data h3.banner a img {
  vertical-align:middle;
}
div.data p.tree {
  display:block;
  margin:0 0 20px 0;
  padding:10px 10px 10px 20px;
  text-align:left;
  white-space:nowrap;
  font-size:1em;
  color:#333;
  background:#eee;
  border-radius:10px;
  overflow:hidden;
}
div.data p.tree a {
  display:inline-block;
  margin:5px 0;
  vertical-align:middle;
  line-height:1.2;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:0.9em;
  color:#333;
}
div.data p.tree a:hover {
  color:#06f;
}
div.data p.tree strong,
div.data p.tree em {
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:normal;
  font-size:1.1em;
}
div.data p.tree a strong,
div.data p.tree a em {
  display:block;
}
div.data p.banner img {
  height:180px;
}
div.data p.note {
  display:block;
  margin:0 0 40px 0!important;
  padding:20px 0;
  text-align:center;
  line-height:1.5;
  color:#000;
  background:#fff9f9;
  border-radius:10px;
  text-shadow:0 0 3px #fff;
  filter:drop-shadow(0 0 3px #999);
}
div.data ul.data {
  margin:0 0 20px 0;
  text-align:left;
  list-style-type:none;

  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  grid-auto-rows:auto;
}
div.data ul.data li {
}
div.data ul.data li a {
  position:relative;
  display:inline-block;
  width:calc(100% - 20px);
  height:calc(100% - 10px);
  padding:0 10px 10px 10px;
  vertical-align:middle;
  text-align:left;
  white-space:nowrap;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  color:#000;
  background:#fff;
  border-radius:10px;
  text-shadow:0 0 3px #fff;
  overflow:hidden;
  filter:drop-shadow(0 0 3px #999);
  transition:all 0.2s;
}
div.data ul.data li a:hover {
  z-index:1;
  transform:scale(1.1,1.1);
  filter:drop-shadow(0 0 5px #6ff);
}
div.data ul.data li a:hover img {
  filter:brightness(1.2);
}
div.data ul.data li a img {
  display:block;
  width:calc(100% + 20px);
  height:200px;
  object-fit:cover;
  object-position:0 50%;
  margin:0 0 5px -10px;
  vertical-align:middle;
}
div.data ul.data li a span {
  display:block;
  line-height:1.2;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:0.9em;
}
div.data ul.data li a em {
  line-height:1.2;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:1em;
}
div.data ul.data li a small {
  display:block;
  margin:5px 0 0 0;
  font-style:italic;
  color:#999;
}
div.data ul.data li a code {
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:1;
  display:inline-block;
  width:calc(5em - 15px);
  height:1em;
  margin:-2px 0 0 auto;
  line-height:1em;
  letter-spacing:-3px;
  font-size:1.2em;
  vertical-align:middle;
  color:#ff0;
  text-shadow:0 0 3px #f60,0 0 3px #f60,0 0 3px #f60;
}
div.data ul.data li a code::before {
  content:'★★★★★';
  position:absolute;
  z-index:-1;
  color:#ccc;
  text-shadow:none;
}
div.data p#loading {
  display:none;
  position:relative;
  height:120px;
  margin:0;
  line-height:110px;
  text-align:center;
  background:#9fa0a0;
  overflow:hidden;
  border-radius:10px;
}
div.data p#loading:after {
  content:'';
  display:inline-block;
  width:100px;
  height:100px;
  vertical-align:middle;
  background:url(../zukan/img/loading.png) no-repeat center center;
  background-size:200%;
  transform-origin:center;
  animation:loading 2s linear 0s infinite normal forwards;
}
@keyframes loading {
  0% { transform:rotate(360deg); }
  25% { transform:rotate(270deg); }
  50% { transform:rotate(180deg); }
  75% { transform:rotate(90deg); }
  100% { transform:rotate(0deg); }
}
div.data p#end {
  display:none;
  margin:20px 0 0 0;
  height:3em;
  line-height:3em;
  text-align:center;
  color:#fff;
  background:#9fa0a0;
  border-radius:10px;
}



div.id {
  position:relative;
}
div.id p#tree {
  display:block;
  margin:0 0 20px 0;
  padding:10px 10px 10px 20px;
  text-align:left;
  white-space:nowrap;
  color:#333;
  background:#eee;
  border-radius:10px;
  overflow:hidden;
}
div.id p#tree a {
  display:inline-block;
  margin:5px 0;
  vertical-align:middle;
  line-height:1.2;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:0.9em;
  color:#333;
  transition:all 0.2s;
}
div.id p#tree a:hover {
  color:#06f;
  transform:scale(1.1,1.1);
}
div.id p#tree strong,
div.id p#tree em {
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:normal;
  font-size:1.1em;
}
div.id p#tree a strong,
div.id p#tree a em {
  display:block;
}
div.id h3 {
  display:block;
  margin:0 0px 30px 0;
  padding:8px 0 10px 15px;
  line-height:1.2;
  text-align:left;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  background:#f0f3f6;
  border-left:solid 20px #023;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  filter:drop-shadow(4px 4px 3px #999);
}
div.id h3:after {
  content:'';
  clear:both;
  display:block;
  width:100%;
  height:0;
}
div.id h3 strong {
  display:block;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:normal;
  font-size:1.6em;
}
div.id h3 em {
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:1.1em;
}
div.id h3 span {
  display:block;
  margin:5px 0 0 0;
  font-weight:normal;
  color:#666;
}
div.id div.files {
  clear:both;
  position:relative;
  margin:0 -20px 20px -20px;
  padding:20px 0;
  white-space:nowrap;
  text-align:center;
  overflow:hidden;
  filter:drop-shadow(0 0 8px #abc);
}
div.id div.files::after {
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  bottom:0;
  display:block;
  width:100%;
  height:40px;
  background:radial-gradient(rgba(100,120,140,0.3) 40px,rgba(100,120,140,0) 70%);
}
div.id div.files img {
  position:relative;
  z-index:1;
  height:180px;
  border-left:solid 1px rgba(255,255,255,0.7);
  cursor:pointer;
  clip-path:polygon(0% 0%,100% 5%,100% 95%,0% 100%);
  transition:all 0.3s;
}
div.id div.files img:hover {
  z-index:2;
  margin:0 20px!important;
  border-left:solid 1px transparent;
  clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)!important;
  transform:scale(1.2,1.2);
  filter:brightness(1.2);
}
div.id div.files img.r3 {
  clip-path:polygon(0% 0%,100% 12%,100% 88%,0% 100%);
}
div.id div.files img.r2 {
  clip-path:polygon(0% 0%,100% 8%,100% 92%,0% 100%);
}
div.id div.files img.r1 {
  clip-path:polygon(0% 0%,100% 4%,100% 96%,0% 100%);
}
div.id div.files img.w320:hover {
  width:320px!important;
}
div.id div.files img.w270:hover {
  width:270px!important;
}
div.id div.files img.w240:hover {
  width:240px!important;
}
div.id div.files img.w180:hover {
  width:180px!important;
}
div.id div.files img.w160:hover {
  width:160px!important;
}
div.id div.files img.w120:hover {
  width:120px!important;
}
div.id div.files img.w90:hover {
  width:90px!important;
}
div.id div.swiper-container {
  position:absolute;
  top:-9999px;
}
div.id div.value {
  float:left;
  width:440px;
  margin:0 -20px 20px 0;
}
div.id p span {
  position:relative;
  padding-left:1em;
}
div.id p.find span::before,
div.id p.spec span::before,
div.id p.env::before,
div.id p.jam::before,
div.id p.boat::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:0.4em;
  height:1.5em;
  background:#000;
  border-right:solid 0.3em #999;
}
div.id p.find {
  margin:0 0 0 20px;
  line-height:1.5;
  text-align:left;
}
div.id p.find span {
  display:block;
  margin:0 0 10px 0;
}
div.id p.spec {
  margin:0 0 0 20px;
  line-height:1.5;
  text-align:left;
}
div.id p.spec span {
  display:block;
  margin:0 0 10px 0;
}
div.id p.spec span code {
  position:relative;
  z-index:1;
  display:inline-block;
  width:5em;
  height:1em;
  margin:-0.2em 0 0 0;
  line-height:1;
  font-size:1.5em;
  vertical-align:middle;
  color:#ff0;
  text-shadow:0 0 3px #f60,0 0 3px #f60,0 0 3px #f60;
}
div.id p.spec span code::before {
  content:'★★★★★';
  position:absolute;
  z-index:-1;
  color:#ccc;
  text-shadow:none;
}
div.id p.env {
  position:relative;
  margin:0 0 0 20px;
  padding:0 0 0 calc(3em + 1em);
  text-indent:-3em;
  line-height:1.5;
  text-align:left;
}
div.id p.env a {
  display:inline-block;
  margin:-0.2em 0.5em 0.8em 0;
  padding:0.3em 0.4em;
  line-height:1;
  text-indent:0;
  white-space:nowrap;
  color:#234;
  background:#eff;
  border-radius:0.5em;
  filter:drop-shadow(0 0 0.1em #999);
  transition:all 0.2s;
}
div.id p.env a:hover {
  color:#fff;
  background:#38e;
  transform:scale(1.2,1.2);
  filter:drop-shadow(0 0 3px #9ff);
}
div.id p.jam,
div.id p.boat {
  position:relative;
  margin:0.5em 0 1.5em 20px;
  padding:0 0 0 calc(3em + 1em);
  text-indent:-3em;
  line-height:1.5;
  text-align:left;
}
div.id p.jam strong {
  position:absolute;
  display:inline-block;
  margin:-0.5em 0 -1.5em 0;
  padding:0.2em 1em;
  text-indent:0;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(0deg,#f60 0%,#fc3 50%,#f60 100%);
  border:double 5px #fff;
  border-radius:1.5em;
  text-shadow:0 0 4px #c00,0 0 3px #900,0 0 2px #600;
}
div.id p.boat strong {
  position:absolute;
  display:inline-block;
  margin:-0.5em 0 -1.5em 0;
  padding:0.2em 1em;
  text-indent:0;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(0deg,#06f 0%,#3cf 50%,#06f 100%);
  border:double 5px #fff;
  border-radius:1.5em;
  text-shadow:0 0 4px #06c,0 0 3px #039,0 0 2px #006;
}
div.id p.jam a strong,
div.id p.boat a strong {
  transition:all 0.2s;
}
div.id p.jam a:hover strong,
div.id p.boat a:hover strong {
  transform:scale(1.1,1.1);
}
div.id p.author {
  margin:0 0 20px 20px;
  text-align:left;
}
div.id p.author span {
  display:inline-block;
  padding-left:0;
  border:none;
}
div.id p.author span:nth-of-type(1) {
  margin:0 20px 0 0;
  vertical-align:top;
  text-align:center;
}
div.id p.author span:nth-of-type(2) {
  position:relative;
  width:240px;
  min-height:120px;
  margin:5px 0 0 0;
  padding:6px 12px;
  line-height:1.5;
  vertical-align:top;
  text-align:left;
  background:#fff;
  border:solid 1px #999;
  border-radius:10px;
  filter:drop-shadow(0 0 3px #ccc);
}
div.id p.author span:nth-of-type(2)::after {
  content:'';
  position:absolute;
  left:-6px;
  top:70px;
  width:10px;
  height:10px;
  background:#fff;
  border-top:solid 1px #999;
  border-left:solid 1px #999;
  transform:rotate(-45deg);
}
div.id p.author span img {
  display:block;
  width:80px;
  height:80px;
  margin:10px auto;
  border-radius:40px;
  overflow:hidden;
}
div.id p.author span small {
  margin:0 0 0 5px;
}
div.id p.type {
  float:left;
  margin:0;
  line-height:1.5;
  text-align:center;
}
div.id p.type span {
  display:inline-block;
  min-height:2em;
  margin:0 20px;
  padding:0.4em 0.4em;
  line-height:2em;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:bold;
  font-size:1.1em;
  border:none;
  border-radius:0.2em;
  text-shadow:0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff;
}
div.id p.type span.official {
  color:#650;
  background:linear-gradient(0deg,#ffc 0%,#dc0 45%,#ffc 50%,#dc0 80%);
  border-left:solid 0.3em #fe9;
  border-top:solid 0.3em #fe9;
  border-right:solid 0.3em #980;
  border-bottom:solid 0.3em #980;
}
div.id p.type span.official::before {
  content:'';
  display:inline-block;
  width:2em;
  height:2em;
  margin:0 0.5em 0 0;
  vertical-align:middle;
  background:url(../zukan/img/icon-logo.png) no-repeat left center;
  background-size:2em 2em;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff);
}
div.id p.type span.general {
  color:#666;
  background:linear-gradient(0deg,#eee 0%,#aaa 45%,#eee 50%,#bbb 80%);
  border-left:solid 0.3em #ccc;
  border-top:solid 0.3em #ccc;
  border-right:solid 0.3em #888;
  border-bottom:solid 0.3em #888;
}
div.id p.type span.general::before {
  content:'';
  display:inline-block;
  width:2em;
  height:2em;
  margin:0 0.5em 0 0;
  vertical-align:middle;
  background:url(../zukan/img/icon-user.png) no-repeat left center;
  background-size:2em 2em;
  opacity:0.8;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff);
}
div.id p.category {
  text-align:left;
  margin:0 0 20px 0;
}
div.id p.category a {
  display:inline-block;
  margin:0 0 10px 20px;
  border-radius:13px;
  overflow:hidden;
  filter:drop-shadow(0 0 3px #999);
  transition:all 0.2s;
}
div.id p.category a:first-child {
  margin:0;
}
div.id p.category a:hover {
  transform:scale(1.2,1.2);
}
div.id p.category a img {
  height:4em;
  vertical-align:middle;
}
div.id p.map {
  float:right;
  position:relative;
  margin:0 0 50px 0;
}
div.id p.map span:nth-of-type(1) {
  position:absolute;
  z-index:1;
  left:1em;
  top:1em;
  padding:0.5em 1em;
  color:#fff;
  background:#3be;
  border:none;
  border-radius:1.2em 0 0 1.2em;
  text-shadow:0 0 3px #036;
  filter:drop-shadow(0 0 3px #999);
}
div.id p.map span:nth-of-type(2) {
  position:absolute;
  z-index:1;
  left:7em;
  top:1em;
  padding:0.5em 1em 0.5em 0.8em;
  color:#000;
  background:#fff;
  border:none;
  border-radius:0 1.2em 1.2em 0;
  filter:drop-shadow(0 0 3px #999);
}
div.id p.map img {
  width:520px;
  height:520px;
  vertical-align:middle;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  filter:drop-shadow(0 0 5px #999);
}
div.id div#react {
  clear:both;
  margin:-2em 0 0 0;
  padding:1.5em 0;
  border-bottom:solid 1px #ccc;
}
div.id div#react span {
  position:relative;
  display:inline-block;
  margin:0 0.5em;
  padding:0.5em 1em 0.5em 2.2em;
  border-radius:1em;
  cursor:pointer;
  text-shadow:0 0 0.2em #fff,0 0 0.2em #fff;
}
div.id div#react span:hover {
  transform:scale(1.1,1.1);
}
div.id div#react span.know::before {
  content:'';
  position:absolute;
  left:0.3em;
  top:0.2em;
  font-size:1.5em;
  width:1em;
  height:1em;
  background:url(../zukan/img/icon-react-know.png) no-repeat center center;
  background-size:100% 100%;
}
div.id div#react span.look::before {
  content:'🔍';
  position:absolute;
  left:0.3em;
  top:0.1em;
  font-size:1.5em;
}
div.id div#react span.like::before {
  content:'❤';
  position:absolute;
  left:0.4em;
  top:0.1em;
  font-size:1.5em;
  vertical-align:middle;
  color:#f09;
}
div.id div#react span[state=on] {
  color:#000;
  background:#ccc;
  border-left:solid 0.2em #999;
  border-top:solid 0.2em #999;
  border-right:solid 0.2em #ddd;
  border-bottom:solid 0.2em #ddd;
}
div.id div#react span[state=off] {
  color:#000;
  background:#cfc;
  border-left:solid 0.2em #dfd;
  border-top:solid 0.2em #dfd;
  border-right:solid 0.2em #9c9;
  border-bottom:solid 0.2em #9c9;
}
div.id div.memo {
  /*clear:both;*/
  margin:0 0 1.5em 0;
  padding:1em 0;
  line-height:1.5;
  text-align:left;
  font-size:1.2em;
  /*border-top:solid 1px #ccc;*/
  border-bottom:solid 1px #ccc;
}
div.id div.memo p.media {
  display:inline-block;
  margin:20px 20px 20px 0;
  font-size:0.9em;
  color:#666;
}
div.id div.memo p.media video {
  display:block;
  width:calc(100% + 20px);
  height:auto;
  margin:0 0 5px 0;
}
div.id div.memo p.media img {
  display:block;
  width:calc(100% + 20px);
  height:auto;
  margin:0 0 5px 0;
}
div.id div.memo i,
div.id div.memo em {
  margin:0 3px 0 0;
  font-family:'Noto Serif JP',serif,'Times New Roman';
}



div.tree {
}
div.tree p.note {
  margin-bottom:0;
}
div.tree ul {
  margin:0 0 0 20px;
  list-style-type:none;
}
div.tree ul li {
  position:relative;
  padding:0.2em 0 0.2em 0.7em;
  border-left:solid 1px #999;
}
div.tree ul li:last-child {
  border-left:none;
}
div.tree ul li a {
  font-family:'Noto Serif JP',serif,'Times New Roman';
}
div.tree ul li li::before {
  content:'';
  position:absolute;
  left:-1px;
  width:0.5em;
  height:0.6em;
  border-left:solid 1px #999;
  border-bottom:solid 1px #999;
}
div.tree ul li li:last-child::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0.5em;
  height:0.8em;
  border-left:solid 1px #999;
  border-bottom:solid 1px #999;
}
div.tree ul li li li li li li span {
  font-weight:bold;
  font-family:'Noto Serif JP',serif,'Times New Roman';
}
div.tree>ul {
  position:relative;
  margin:0 0 20px 0;
  padding:10px 20px;
  text-align:left;
  line-height:1.2;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-size:1em;
  color:#000;
  background:#f9f9f9;
  border:solid 1px #999;
  border-radius:10px;
  filter:drop-shadow(0 0 3px #999);
  overflow:hidden;
}
div.tree>ul>li {
  padding:0;
  border-left:none;
}
div.tree>ul strong,
div.tree>ul em {
  font-family:'Noto Serif JP',serif,'Times New Roman';
  font-weight:normal;
}
div.tree>ul::before {
  content:'━';
  position:absolute;
  right:10px;
  top:10px;
  font-weight:bold;
  cursor:pointer;
}
div.tree>ul.fold {
  font-size:0.9em;
  background:#f9f0f0;
}
div.tree>ul.fold::before { /* ▼ */
  content:'❯';
  position:absolute;
  right:11px;
  top:8px;
  font-size:1.5em;
  font-weight:normal;
  cursor:pointer;
  transform:rotate(90deg);
}



div.group {
}
div.group ul {
  /*margin:0 -20px 0 0;*/
  text-align:left;
  line-height:1;
  list-style-type:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  grid-auto-rows:auto;
}
div.group ul li {
  position:relative;
  /*width:31%;*/
  display:inline-block;
  /*margin:0 18px 20px 0;*/
  vertical-align:middle;
}
div.group ul li a {
  display:inline-block;
  vertical-align:middle;
  border-radius:22px;
  overflow:hidden;
  transition:all 0.2s;
}
div.group ul li a:hover {
  filter:drop-shadow(0 0 5px #6ff);
  transform:scale(1.1,1.1);
}
div.group ul li a img {
  width:100%;
  height:auto;
  vertical-align:middle;
}



div.point {
}
div.point ul {
  position:relative;
  width:960px;
  height:720px;
  margin:0;
  text-align:left;
  line-height:1;
  list-style-type:none;
  background:url(./img/point.jpg) no-repeat 0 -50px;
  background-size:960px 960px;
  border-radius:10px;
  filter:drop-shadow(0 0 3px #999);
}
div.point ul li {
  position:absolute;
  display:inline-block;
  margin:0;
}
div.point ul li.near {
  left:360px;
  top:460px;
}
div.point ul li.over {
  left:20px;
  top:660px;
}
div.point ul li.tide {
  left:670px;
  top:600px;
}
div.point ul li.under {
  left:520px;
  top:660px;
}
div.point ul li.pool {
  left:630px;
  top:420px;
}
div.point ul li.rock {
  left:720px;
  top:520px;
}
div.point ul li.sand {
  left:510px;
  top:400px;
}
div.point ul li.flat {
  left:120px;
  top:360px;
}
div.point ul li.brackish {
  left:390px;
  top:380px;
}
div.point ul li.fresh {
  left:460px;
  top:250px;
}
div.point ul li.jam {
  left:630px;
  top:240px;
}
div.point ul li.boat {
  left:160px;
  top:540px;
}
div.point ul li.jam a {
  width:180px;
  height:120px;
  text-indent:-999em;
  background:url(./img/icon-jam.png) no-repeat center center;
  overflow:hidden;
  opacity:1;
}
div.point ul li.boat a {
  width:250px;
  height:160px;
  text-indent:-999em;
  background:url(./img/icon-boat.png) no-repeat center center;
  overflow:hidden;
  opacity:1;
  animation:boat 1s ease-in infinite;
}
div.point ul li.jam a::before {
  bottom:100%!important;
  width:80%;
  text-indent:0;
}
div.point ul li.boat a::before {
  bottom:100%!important;
  width:80%;
  text-indent:0;
}
div.point ul li.jam a::after {
}
div.point ul li.jam a:hover::before {
}
div.point ul li.jam a:hover {
  overflow:visible;
}
div.point ul li.boat a:hover {
  overflow:visible;
}
div.point ul li.jam a:hover::after {
  bottom:97%!important;
}
div.point ul li.boat a:hover::after {
  bottom:97%!important;
}
div.point ul li.jam:hover a {
  z-index:1;
  background:url(./img/icon-jam.png) no-repeat center center;
}
div.point ul li.boat:hover a {
  z-index:1;
  background:url(./img/icon-boat.png) no-repeat center center;
}
div.point ul li a {
  position:relative;
  display:inline-block;
  padding:0.5em 0.8em;
  font-size:1.2em;
  font-family:'Noto Serif JP',serif,'Times New Roman';
  color:#000;
  background:#fff;
  border-radius:10px;
  opacity:0.7;
  filter:drop-shadow(0 0 5px #666);
  transition:all 0.1s;
  animation:poyo 2s ease-out infinite;
}
div.point ul li a::before {
  content:attr(note);
  position:absolute;
  bottom:180%;
  left:50%;
  visibility:hidden;
  width:120%;
  padding:0.5em 1em;
  line-height:1.2;
  font-size:0.7em;
  color:#000;
  background:#fff;
  border-radius:0.6em;
  opacity:0;
  transform:translateX(-50%);
  transition:opacity 0.3s;
}
div.point ul li a::after {
  visibility:hidden;
  opacity:0;
}
div.point ul li a:hover::before {
  visibility:visible;
  opacity:1;
  animation:fadein 0.2s ease 0s 1 normal forwards;
}
div.point ul li a:hover::after {
  content:'';
  z-index:-1;
  visibility:visible;
  opacity:1;
  position:absolute;
  left:calc(50% - 7px);
  bottom:170%;
  width:15px;
  height:15px;
  background:#fff;
  transform:translateX(-50%);
  transform:rotate(-135deg);
  animation:fadein2 0.2s ease 0s 1 normal forwards;
}
div.point ul li:hover a {
  z-index:1;
  color:#fff;
  background:#38e;
  opacity:1;
  filter:drop-shadow(0 0 5px #9ff);
  transform:scale(1.2,1.2);
  animation:bound 0.5s ease-in-out 0s infinite normal forwards;
}
@keyframes bound {
  0% { top:0; }
  35% { top:2px; }
  50% { top:5px; }
  65% { top:2px; }
  100% { top:0; }
}
@keyframes fadein {
  0% { opacity:0; bottom:180%; }
  50% { opacity:1; bottom:160%; }
  100% { opacity:1; bottom:140%; }
}
@keyframes fadein2 {
  0% { opacity:0; bottom:170%; }
  50% { opacity:1; bottom:150%; }
  100% { opacity:1; bottom:130%; }
}
@keyframes poyo {
  0%,40%,60%,80% { transform:scale(1.0); }
  50%,70%,90% { transform:scale(0.95); }
}
@keyframes boat {
  0% { transform:rotate(0.3deg) translate(0,0); }
  10% { transform:rotate(0.7deg) translate(-1px,-1px); }
  20% { transform:rotate(1deg) translate(-2px,-2px); }
  30% { transform:rotate(0.7deg) translate(-3px,-2px); }
  40% { transform:rotate(0deg) translate(-4px,-2px); }
  50% { transform:rotate(-0.3deg) translate(-4px,-1px); }
  60% { transform:rotate(-1deg) translate(-4px,0); }
  70% { transform:rotate(-0.7deg) translate(-3px,1px); }
  80% { transform:rotate(-0.3deg) translate(-2px,2px); }
  87% { transform:rotate(0deg) translate(-1px,1px); }
}


section {
}
section.error {
}
section.error h3 {
  margin:0 0 30px 0;
  line-height:2;
  font-size:1.2em;
  color:#fff;
  background:#c00;
}
section.error p {
  margin:0 0 30px 0;
}
section.error p input {
}
section.error p input {
  padding:5px 15px;
  font-size:1.2em;
  color:#fff;
  background:#c66;
  border:solid 1px #900;
  border-radius:20px;
  cursor:pointer;
}
section.error p input:hover {
  background:#933;
  filter:drop-shadow(0 0 10px #fff);
}



/********** Smartphone **********/
@media screen and (max-width:1220px) {
  html {
    background:#fff;
  }
  body {
    margin:0;
    font-size:2.5em;
    filter:none;
  }
  body.wide {
  }
  body.wide header,
  body.wide nav,
  body.wide footer {
    display:none;
  }
  body.wide article {
    padding:20px 20px 100px 20px;
  }
  header {
    z-index:1000;
    width:100%;
  }
  header h1 a {
    width:400px;
    height:108px;
  }
  header h2 {
  }
  header h2 span {
    min-width:360px;
    min-height:122px;
  }
  header h2 span:hover {
  }
  header p.pv {
    top:40px;
    font-size:0.5em;
  }
  header p.pv::before {
    content:'';
    position:absolute;
    z-index:9;
    top:-25px;
    width:30px;
    height:30px;
    background:url(../zukan/img/icon-pin.png) no-repeat center center;
    background-size:100% 100%;
    filter:drop-shadow(0 0 2px #fff);
  }
  nav {
    z-index:2;
    width:0;
    min-height:calc(100% - 60px);
    padding:0;
    filter:none;
  }
  nav ul {
    z-index:999;
    top:100px;
    width:1200px;
    margin:0 auto;
    padding:30px 0 0 0;
    background:#38c;
    filter:drop-shadow(0 0 3px #999);
  }
  nav ul li {
    display:inline-block;
    width:30%;
    margin:0 1% 30px 1%;
    line-height:2.4;
  }
  nav ul li:first-child {
    display:none;
  }
  nav form {
    display:none;
  }
  article {
    position:relative;
    width:calc(100% - 40px)!important;
    margin:0;
    padding:220px 20px 200px 20px;
  }
  footer {
  }

  div.data ul.rank {
    /*display:none;*/
    margin:0.5em 0 240px 0;
    transform:scale(1.2,1.2);
    transform-origin:top left;
  }
  div.data ul.rank:after {
    font-size:1em;
  }
  div.data ul.rank code {
    width:2.6em;
    height:2.6em;
    line-height:2.6em;
    font-size:0.5em;
  }
  div.data ul.rank code:nth-of-type(1) {
    width:2.2em;
    height:2.2em;
    line-height:2.2em;
    font-size:0.59em;
  }
  div.data ul.rank code:nth-of-type(2) {
    width:2.3em;
    height:2.3em;
    line-height:2.3em;
    font-size:0.56em;
  }
  div.data ul.rank code:nth-of-type(3) {
    width:2.4em;
    height:2.4em;
    line-height:2.4em;
    font-size:0.53em;
  }
  div.data p.tree {
    margin:0 0 60px 0;
    padding:0 10px 0 20px;
    white-space:normal;
    font-size:1em;
  }
  div.data p.tree a {
    margin:20px 0 20px 0;
    font-size:1.1em;
  }
  div.data p.tree em {
    font-size:1.1em;
  }
  div.data div.search {
    margin:0 0 40px 0;
    padding:10px 0;
  }
  div.data div.search form p.rare {
    margin:0 0 30px 0!important;
  }
  div.data div.search form input[type=text] {
    width:13.4em;
  }
  div.data h3.banner {
    padding:30px 0 60px 0;
  }
  div.data h3.banner img {
    height:240px;
  }
  div.data p.banner img {
    height:240px;
  }
  div.data p.nodata {
    margin:60px 100px 60px 100px;
    padding:80px;
    border-radius:20px;
    filter:drop-shadow(0 0 6px #ccc);
  }
  div.data p.note {
    display:block;
    padding:20px;
    font-size:0.9em;
  }
  div.data ul.data {
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:10px;
  }
  div.data ul.data li {
    margin:0 14px 22px 0;
  }
  div.data ul.data li a {
    font-size:0.9em;
  }
  div.data ul.data li a img {
    height:400px;
  }
  div.data ul.data li a small {
    font-size:0.8em;
  }
  div.data ul.data li a code {
    font-size:1em;
  }
  div.data p#loading {
    height:180px;
    line-height:170px;
    margin:-10px 0 0 0;
  }
  div.data p#loading:after {
    content:'';
    display:inline-block;
    width:100px;
    height:100px;
    vertical-align:middle;
    background:url(../zukan/img/loading.png) no-repeat center center;
    background-size:400%;
    transform-origin:center;
    animation:loading 2s linear 0s infinite normal forwards;
  }
  div.data p#end {
    margin:-10px 0 0 0;
  }

  div.id p#tree {
    margin:0 0 60px 0;
    padding:0 10px 0 20px;
    white-space:normal;
    font-size:1em;
  }
  div.id p#tree a {
    margin:20px 0 20px 0;
    font-size:1.1em;
  }
  div.id p#tree em {
    font-size:1.1em;
  }
  div.id h3 {
    margin:0 0 60px 0;
    padding:8px 0 10px 15px;
    line-height:1.2;
    font-size:1.2em;
  }
  div.id h3 strong {
    font-size:1.4em;
  }
  div.id h3 em {
    font-size:1em;
  }
  div.id div.files {
    display:none;
  }
  /* swiper { */
  @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
  /* swiper } */
  div.id div.swiper-container {
    display:block;
    position:relative;
    top:0;
    width:calc(100% + 40px);
    height:900px;
    margin:0 -20px 80px -20px;
    text-align:left;
    overflow:hidden;
    background:#000;
  }
  div.id div.swiper-slide {
    position:relative;
    text-align:center;
    line-height:1;
  }
  div.id div.swiper-slide img,
  div.id div.swiper-slide video {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  div.id div.swiper-button-next,
  div.id div.swiper-button-prev {
    filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff);
  }
  div.id div.swiper-pagination {
    bottom:20px;
    height:2em;
    padding:0;
  }
  .swiper-pagination-bullet {
    position:relative;
    width:2em;
    height:2em;
    margin:0 10px!important;
    line-height:2;
    font-size:1em;
    color:#fff;
    background:#666;
    outline:none;
    opacity:0.8;
    box-shadow:0 0 10px #fff,0 0 10px #fff;
  }
  .swiper-pagination-bullet-active {
    color:#000;
    background-color:#fff;
    outline:none;
    box-shadow:none;
    box-shadow:0 0 10px #333,0 0 10px #333;
  }
  div.id div.value {
    float:none;
    width:auto;
    margin:0;
    padding-bottom:1em;
    font-size:1.4em;
    border:none;
  }
  div.id p.find,
  div.id p.spec,
  div.id p.env {
    width:auto;
    margin:0 0 0 20px;
    line-height:1.5;
  }
  div.id p.env {
    margin:0 0 0 20px;
  }
  div.id p.jam {
    margin:0.2em 0 1em 20px;
  }
  div.id p.jam strong {
    margin-top:-0.2em;
  }
  div.id p.boat {
    margin:0 0 1.5em 20px;
  }
  div.id p.boat strong {
    margin-top:-0.2em;
  }
  div.id p.author {
    width:auto;
    margin:0 0 20px 20px;
  }
  div.id p.author span:nth-of-type(1) {
    margin:0 40px 30px 0;
  }
  div.id p.author span:nth-of-type(2) {
    width:auto;
    max-width:680px;
    min-height:400px;
    margin:20px 0 40px 0;
    padding:15px 25px;
    border-radius:30px;
  }
  div.id p.author span:nth-of-type(2)::after {
    content:'';
    position:absolute;
    left:-16px;
    top:210px;
    width:30px;
    height:30px;
    background:#fff;
    border-top:solid 1px #999;
    border-left:solid 1px #999;
    transform:rotate(-45deg);
  }
  div.id p.author span img {
    width:300px;
    height:300px;
    margin:10px auto;
    border-radius:150px;
  }
  div.id p.author span small {
    margin:0 0 0 10px;
  }
  div.id p.type {
    margin-bottom:60px;
  }
  div.id p.type span {
    margin:0 0.8em 0 20px;
  }
  div.id p.category a {
    margin:0 0 0 30px;
    border-radius:36px;
  }
  div.id p.category a:first-child {
    margin:0;
  }
  div.id p.category a img {
    height:220px;
  }
  div.id p.map {
    float:none;
    margin:0 0 60px 0;
  }
  div.id p.map img {
    width:100%;
    height:auto;
  }
  div.id div.memo {
    font-size:1.2em;
  }
  div.id div.memo p.media {
    display:inline-block;
    margin:20px 20px 20px 0;
    font-size:0.9em;
  }

  div.group ul {
    margin:40px 0 0 0;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:20px;
  }
  div.group ul li {
    /*width:45%;*/
    margin:0 0 10px 0;
  }
  div.group ul li a {
    border-radius:40px;
  }
  div.group ul li a img {
  }

  div.tree ul li {
    line-height:1.5;
    font-size:0.9em;
    border-left:solid 2px #666;
  }
  div.tree ul li li {
    padding:0.4em 0 0.4em 0.8em;
    font-size:1em;
  }
  div.tree ul li li::before {
    content:'';
    position:absolute;
    left:-2px;
    width:0.5em;
    height:0.8em;
    border-left:solid 2px #666;
    border-bottom:solid 2px #666;
  }
  div.tree ul li li:last-child::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:0.5em;
    height:1em;
    border-left:solid 2px #666;
    border-bottom:solid 2px #666;
  }
  div.tree ul li li li li li li span {
    display:block;
    line-height:1;
  }

  div.point ul {
    height:960px;
    margin:0 0 200px 0;
    font-size:0.6em;
    background-position:0 0;
    transform:scale(1.2,1.2);
    transform-origin:top left;
  }
  div.point ul li {
    position:absolute;
    display:inline-block;
    margin:0;
  }
  div.point ul li.near {
    left:340px;
    top:540px;
  }
  div.point ul li.over {
    left:40px;
    top:860px;
  }
  div.point ul li.tide {
    left:650px;
    top:660px;
  }
  div.point ul li.under {
    left:520px;
    top:860px;
  }
  div.point ul li.pool {
    left:630px;
    top:460px;
  }
  div.point ul li.rock {
    left:720px;
    top:560px;
  }
  div.point ul li.sand {
    left:510px;
    top:440px;
  }
  div.point ul li.flat {
    left:120px;
    top:400px;
  }
  div.point ul li.brackish {
    left:390px;
    top:420px;
  }
  div.point ul li.fresh {
    left:460px;
    top:290px;
  }
  div.point ul li.jam {
    left:630px;
    top:290px;
  }
  div.point ul li.boat {
    left:180px;
    top:660px;
  }
}