@charset "UTF-8";
img {
  vertical-align: top;
}

.content-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


header {
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 5px solid #4367bf;
}
header .content-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
header h1 {
  max-width: calc(100% -  40px);
}
header h1 .logo {
  width: 257px;
  height: 150px;
  max-height: 100%;
  overflow: hidden;
  background-image: url(../images/common/dic/logo.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;

  aspect-ratio: 943 / 110;
}
header .icon-search {
  background-image: url(../images/common/dic/icon_search.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
@media screen and (max-width: 600px) {
  header .icon-search {
    width: 80px;
    height: 80px;
  }
}
@media screen and (min-width: 601px) {
  header .icon-search {
    width: 80px;
    height: 80px;
  }
}
.switch_label, .check_label {
  display: flex;
  align-items: center;
}
.switch_label input[type="checkbox"], .check_label input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
}
.switch_label .switch, .check_label .check {
  position: relative;
}
.switch_label .base {
  width: 56px;
  height: 32px;
  border-radius: 15px;
  background-color: #dddddd;
}
.switch_label input:checked ~ .base {
  background-color: rgb(219, 234, 254);
  transition: .5s;
}
.switch_label .circle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: gray;
  transition: .5s;
}
.switch_label input:checked ~ .circle {
  transform: translateX(100%);
  background-color: blue;
}
.check_label .base {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #dddddd;
  transition: .5s;
}
.check_label .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  transition: .5s;
}
.check_label input:checked ~ .base {
  background-color: rgba(0,255,255,.3);
  /* transform: translateX(100%); */
}
.switch_label .title {
  margin-left: 4px;
}

main {
  padding-top: 30px;
  padding-bottom: 60px;
}
.cards.flex-container {
  flex-wrap: wrap;
}
.card {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 10px;
}
.card a {
  text-decoration: none;
}
.card img {
  width: 100%;
  height: auto;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;

  object-fit: contain;
  aspect-ratio: 4 / 3;
}
.card .name {
  font-weight: 700;
  text-align: center;
}

/* ▼▼▼ 暫定設定 ▼▼▼ */
.cards.flex-container {
  justify-content: center;

  gap: 30px;
}
.card {
  width: calc((100% - 30px) / 2);
  max-width: 460px;
  max-width: 250px;
  /* height: 100%; */
  margin: 0;
  border-radius: 50px;
  border-radius: 30px;
  box-shadow: -5px -5px 10px 0 rgba(255, 255, 255, .50), 5px 5px 10px 0 rgba(170, 170, 204, .25), 10px 10px 20px 0 rgba(170, 170, 204, .50), -10px -10px 20px 0 #ffffff;
  background-color: #74d9ec;
  background-color: var(--BG-f0f0f3, #f0f0f3);
}
.card .card-inner {
  align-items: center;
  padding: 10px;

  gap: 20px;
}
.card figure {
  /* margin-left: 30px; */
}
.card img {
  width: auto;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  /* max-width: 100px; */
  /* height: 100%; */
  padding: 0;
  border: 0;
  border-radius: 25px 25px 0 0;
  background-color: #ffffff;
}
.card .entry {
  margin-top: 10px;
}
.card .name {
  text-align: center;
}
/* ▲▲▲ 暫定設定 ▲▲▲ */

div.pagenation {
  /* margin-top: 60px; */
}
ul.pagenation {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
ul.pagenation a, ul.pagenation span.current {
  padding: .2em .5em;
  border: 2px solid #4367bf;
  border-radius: 5px;
  display: inline-block;
}
ul.pagenation span.current {
  background-color: #4367bf;
  color: #ffffff;
}
div.pagenation .next {
  width: calc(100% - 60px);
  margin-left: auto;
  margin-right: auto;
}
div.pagenation .next a {
  display: block;
  text-align: center;
  margin-top: 30px;
  background: #eee;
  padding: 1em;
  border-radius: 5px;
  box-shadow: -5px -5px 10px 0 rgba(255, 255, 255, .50), 5px 5px 10px 0 rgba(170, 170, 204, .25), 10px 10px 20px 0 rgba(170, 170, 204, .50), -10px -10px 20px 0 #ffffff;
}
/* .input.checked-container ul {
  display: flex;
  flex-wrap: wrap;}
  margin-top: 0;
  padding-left: 0;
}
.input.checked-container li {
  list-style-type: none;
  padding: .2em .7em;
  border-radius: 50px;
  background-color: #e7e7e7;
  color: #cccccc;
}
.input.checked-container li:not(:first-of-type) {
  margin-left: 10px;
}
.input.checked-container li.selected {
  background-color: #155cff;
  color: #ffffff;
}
.input .btn_drop {
  display: block;
  width: fit-content;
  margin: 10px auto;
  padding: .2em .5em;
  border: 1px solid;
  border-radius: 5px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
} */
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
  form .grid-container, .dataview .grid-container {
    grid-template-columns: 1fr;
  }
  form .grid-container .label, .dataview .grid-container .label {
    font-weight: 700;
  }
  form .grid-container .input, .dataview .grid-container .input {
    padding-left: 15px;
  }
}

/* 詳細表示 */
.dataview {
  /* padding-right: 15px;
  padding-left: 15px; */
}
.dataview .baseinfo {
  display: flex;
  flex-wrap: wrap;

  column-gap: 30px;
}

.dataview .baseinfo .name_ja, .dataview .baseinfo .name_en, .dataview .baseinfo .name_ac {
  display: flex;

  gap: 20px;
}
.dataview .baseinfo .name_ja {
  font-size: 40px;
}


.dataview .baseinfo .name_ac .data {
  font-style: italic;
}
.dataview .photos_wrap .slider {
  display: none;
}
.dataview .photos_wrap .photos.slider.slick-initialized {
  display: block;
}
.dataview .photos_wrap .slick-track {
  display: flex;
  align-items: center;
}
.dataview .photos_wrap .photos .slick-slide {
  border: 1px solid #cccccc;
}
.dataview .photos_wrap .photos .preview {
  box-shadow: #ededed 0 0 30px 5px;
}
.dataview .photos_wrap .thumbnail.slider.slick-initialized {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  gap: 5px;
}
.dataview .photos_wrap .thumbnail .slick-track {
  transform: unset !important;
  width: initial !important;
}
.dataview .photos_wrap .thumbnail .slick-slide {
  width: 100px !important;
  overflow: hidden;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.dataview .photos_wrap .thumbnail .slick-slide:not(:first-of-type) {
  margin-left: 10px;
}
.slick-prev,
.slick-next {
  z-index: 10;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 30px;
  transition: all .3s;
}
.slick-prev {
  left: 0;
  background-image: url(../images/common/dic/icon_arrow-prev.png);
}
.slick-next {
  right: 0;
  background-image: url(../images/common/dic/icon_arrow-next.png);
}
.slick-prev::before,
.slick-next::before {
  display: none;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  opacity: .8;
}
.dataview .document-appearance {
  max-width: 800px;
  margin: 30px auto;
  line-height: 1.7;
}
@media screen and (max-width: 600px) {
  .dataview .document-appearance {
    font-size: 16px;
  }
}
@media screen and (min-width: 601px) {
  .dataview .document-appearance {
    font-size: 20px;
  }
}
.dataview .detailinfo.grid-container {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.dataview .detailinfo legend {
  width: fit-content;
  padding: .2em 1em;
  border-radius: 30px;
  background-color: #74d9ec;
  color: #ffffff;
}
.dataview .detailinfo .block {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 5px;
  border-bottom: 5px solid #1dcee2;

  column-gap: 30px;
  row-gap: 10px;
}
.dataview .detailinfo .block-detail {
  height: fit-content;

  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dataview .detailinfo .feature, .dataview .detailinfo .block-size {
  grid-column: 1 / 3;
}

.dataview .detailinfo .block-food,
.dataview .detailinfo .block-behavioral {
  display: block;
}
.dataview .detailinfo .block-food .flex-container,
.dataview .detailinfo .block-behavioral .flex-container {
  gap: 10px;
}
.dataview .detailinfo .block-food figure, .dataview .detailinfo .block-behavioral figure {
  width: fit-content;
  text-align: center;
}
.dataview .detailinfo .block-food img, .dataview .detailinfo .block-behavioral img {
  display: inline-block;
  width: 50px;
  border-radius: 50%;
  background-color: #1dcee2;

  aspect-ratio: 1/1;
}
.dataview .detailinfo .block-food figcaption, .dataview .detailinfo .block-behavioral figcaption {
  font-size: 12px;
}
.dataview .detailinfo .block-redlist {
  grid-column: 1 / 3;
}
.dataview .detailinfo .block-redlist .data {
  width: 100%;
}
.dataview .detailinfo .block-redlist .graph {
  border: 1px solid;
}
.dataview .detailinfo .block-redlist .graph-inner {
  position: relative;
  width: 100%;
  height: 13px;
  background: linear-gradient(to right, #174098 0%, #5d93ce 17%, #74d9ec 33%, #74d9ec 33%, #a0e16f 48%, #f48f1a 62%, #e82e39 100%);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-ex {
  clip-path: inset(0 0% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-ew {
  clip-path: inset(0 10% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-cr {
  clip-path: inset(0 20% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-en {
  clip-path: inset(0 30% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-vu {
  clip-path: inset(0 40% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-nt {
  clip-path: inset(0 60% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-lc {
  clip-path: inset(0 80% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-dd {
  clip-path: inset(0 90% 0 0);
}
.dataview .detailinfo .block-redlist .graph-inner.rank-ne {
  clip-path: inset(0 100% 0 0);
}
.dataview .detailinfo .block-redlist .redlist-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.dataview .detailinfo .block-habitat {
  margin-top: 40px;
}
.dataview .detailinfo .block-habitat figcaption {
  text-align: center;
}
.dataview .detailinfo .block-search {
  width: 80%;
  margin: 30px auto;
  margin-top: 30px;
  padding: 30px;
  border-radius: 10px;
  background-color: #74d9ec;
}
.dataview .detailinfo .block-search .label {
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 700;
}
.dataview .detailinfo .block-search select {
  width: 100%;
}
.dataview .documents {
  margin-top: 60px;
}
.dataview .documents > div:not(:first-of-type) {
  margin-top: 30px;
}
.dataview .documents .label {
  font-weight: 700;
  font-size: 24px;
}
.dataview .documents .input {
  font-size: 20px;
  line-height: 1.7;
}
@media screen and (max-width: 600px) {
  .dataview .detailinfo.grid-container {
    grid-template-columns: 1fr;
  }
  .dataview .baseinfo .name_ja {
    font-size: clamp(20px, -13.328px + 8.89vw, 40px);
  }
  .dataview .documents .label {
    font-size: 18px;
  }
  .dataview .documents .input {
    font-size: 16px;
  }
}

/*============================================================*/
/* 検索フォーム */
/*============================================================*/
form.grid-container {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media screen and (max-width: 900px) {
  form.grid-container {
    grid-template-columns: 1fr;
  }
}

form .fieldset legend {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px dashed;
  color: #4367bf;
  font-weight: 700;
  font-size: 2.4rem;
}
@media screen and (min-width:601px) {
  form .fieldset .grid-container {
    grid-template-columns: 120px 1fr;
  }
}
form .fieldset .grid-container:not(:first-of-type) {
  margin-top: 20px;
}
form .fieldset .grid-container-sub {
  grid-template-columns: 8.5em 1fr;
}
form .label {
  font-weight: 700;
  font-size: 2rem;
}
form .label-sub {
  font-size: 1.4rem;
}
form .input input[type=text], form .input select {
  width: 100%;
  padding: 5px 10px;
  font-size: 1.6rem;
}
form .check_label {
  display: inline-block;
  font-size: 10px;
  text-align: center;
}
form .check_label input {
  position: absolute;
  width: 0;
  height: 0;
}
form .check_label .check .base, form .check_label .check .icon {
  border-radius: 4px;
}
form .check_label .radio .base, form .check_label .radio .icon {
  border-radius: 50%;
}
form .check_label .base {
  margin: 0 auto;
}
form .check_label .icon {
  position: relative;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
form .check_label.beak_switch_on .icon {
  background-image: url(../images/common/dic/icon_beak_on_square.png);
}
form .check_label.beak_switch_off .icon {
  background-image: url(../images/common/dic/icon_beak_off_square.png);
}
form .check_label.dorsalfin_switch_on .icon {
  background-image: url(../images/common/dic/icon_dorsalfin_on_square.png);
}
form .check_label.dorsalfin_switch_off .icon {
  background-image: url(../images/common/dic/icon_dorsalfin_off_square.png);
}
form .check_label.food_switch_fish .check .icon {
  background-image: url(../images/common/dic/icon_fish_square.png);
}
form .check_label.food_switch_fish .radio .icon {
  background-image: url(../images/common/dic/icon_fish.png);
}
form .check_label.food_switch_shrimp .check .icon {
  background-image: url(../images/common/dic/icon_shrimp_square.png);
}
form .check_label.food_switch_shrimp .radio .icon {
  background-image: url(../images/common/dic/icon_shrimp.png);
}
form .check_label.food_switch_squid .check .icon {
  background-image: url(../images/common/dic/icon_squid_square.png);
}
form .check_label.food_switch_squid .radio .icon {
  background-image: url(../images/common/dic/icon_squid.png);
}
form .check_label.food_switch_plankton .check .icon {
  background-image: url(../images/common/dic/icon_plankton_square.png);
}
form .check_label.food_switch_plankton .radio .icon {
  background-image: url(../images/common/dic/icon_plankton.png);
}
form .check_label.food_switch_animals .check .icon {
  background-image: url(../images/common/dic/icon_animals_square.png);
}
form .check_label.food_switch_animals .radio .icon {
  background-image: url(../images/common/dic/icon_animals.png);
}
form .check_label.behavioral_switch_jump .check .icon {
  background-image: url(../images/common/dic/icon_jump_square.png);
}
form .check_label.behavioral_switch_jump .radio .icon {
  background-image: url(../images/common/dic/icon_jump.png);
}
form .check_label.behavioral_switch_deepdive .check .icon {
  background-image: url(../images/common/dic/icon_deepdive_square.png);
}
form .check_label.behavioral_switch_deepdive .radio .icon {
  background-image: url(../images/common/dic/icon_deepdive.png);
}
form .check_label.behavioral_switch_singsong .check .icon {
  background-image: url(../images/common/dic/icon_singsong_square.png);
}
form .check_label.behavioral_switch_singsong .radio .icon {
  background-image: url(../images/common/dic/icon_singsong.png);
}
form .check_label.behavioral_switch_seabed_dig .check .icon {
  background-image: url(../images/common/dic/icon_seabed_dig_square.png);
}
form .check_label.behavioral_switch_seabed_dig .radio .icon {
  background-image: url(../images/common/dic/icon_seabed_dig.png);
}
form .check_label.behavioral_switch_around_jpn .check .icon {
  background-image: url(../images/common/dic/icon_around_jpn_square.png);
}
form .check_label.behavioral_switch_around_jpn .radio .icon {
  background-image: url(../images/common/dic/icon_around_jpn.png);
}
form .check_label.behavioral_switch_world .check .icon {
  background-image: url(../images/common/dic/icon_world_square.png);
}
form .check_label.behavioral_switch_world .radio .icon {
  background-image: url(../images/common/dic/icon_world.png);
}
form .sel-type,
form .chk-type {
  margin-top: 5px;
  margin-bottom: 10px;
}
form .sel-type input[type=radio],
form .chk-type input[type=checkbox] {
  position: absolute;
  width: 0;
  height: 0;
}
form .sel-type input[type=radio] + label,
form .chk-type input[type=checkbox] + label {
  display: inline-block;
  padding: .2em 1em;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-radius: 50px;
  font-size: 14px;
  white-space: nowrap;
  transition: .25s all ease;
}
form .chk-type input[type=checkbox] + label {
  border-color: #cccccc;
}
form .sel-type input[type=radio]:checked + label,
form .chk-type input[type=checkbox]:checked + label {
  border-color: #05c8ff;
}

form .noUi-target {
  margin-top: 10px;
  margin-right: 16px;
  margin-bottom: 5px;
  margin-left: 16px;
}
form .noUi-connect {
  background: #05c8ff;
}
form .size_labels, form .redlist_labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
form #redlist_rank_range .noUi-connects {
  background: linear-gradient(to right, #174098 0%, #5d93ce 17%, #74d9ec 33%, #74d9ec 33%, #a0e16f 48%, #f48f1a 62%, #e82e39 100%);
}

form .map-container {
  position: relative;
  max-width: 400px;
}
form .map-container label {
  position: absolute;
  width: fit-content;
}
form .map-container label span.label {
  font-weight: 400;
  font-size: 12px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  border-radius: 50px;
  padding: .0em 1em;
  line-height: 1;
}
form .map-container label input {
  position: absolute;
  width: 0;
  height: 0;
}
form .map-container label input:checked + span {
  color: #0075ff;
  font-weight: 700;
  border-color: #fff;
}
form .map-container label.area-NOP {
  /*北太平洋*/
  top: 31%;
  left: 54%;
}
form .map-container label.area-SOP {
  /*南太平洋*/
  top: 64%;
  left: 63%;
}
form .map-container label.area-INO {
  /*インド洋*/
  top: 58%;
  left: 27%;
}
form .map-container label.area-NAO {
  /*北大西洋*/
  top: 41%;
  right: 4%;
}
form .map-container label.area-NAO2 {
  /*北大西洋*/
  top: 34%;
  left: 1%;
}
form .map-container label.area-SAO {
  /*南大西洋*/
  top: 77%;
  right: 2%;
}
form .map-container label.area-SAO2 {
  /*南大西洋*/
  top: 79%;
  left: 2%;
}
form .map-container label.area-ARC {
  /*北極海*/
  top: 4%;
  left: 54%;
}
form .map-container label.area-ANA {
  /*南極海*/
  top: 83%;
  left: 41%;
}
form .map-container label.area-RIV {
  /*河川*/
  top: 33%;
  left: 34%;
}
form .map-container label.area-ARJ {
  /*日本近海*/
  top: 41%;
  left: 46%;
}
@media screen and (max-width: 600px) {
  form .label {
    margin-bottom: 10px;
    font-size: 18px;
  }
}
@media screen and (min-width: 901px) {
  form .btn_area {
    grid-column: 1 / 3;
  }
}
form .btn_submit {
  display: block;
  margin: 0 auto;
  padding: .3em 1em;
  border-radius: 5px;
  background: #4b65f0;
  color: #ffffff;
  line-height: 1.7;
}