html {
  overflow-x: hidden;
}
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  min-height: 100vh;
}

main {
  display: flex;
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
  min-height: 70vh; /* ヘッダーの高さを考慮 */
  top: 160px;
  position: relative;
}

.p-top__dec {
  background: url(../../assets/img/encyclopedia/header.png) no-repeat;
  background-size: cover;
  height: calc(140/1400*100vw);
  top: 66px;
  position: absolute;
  width: 100%;
}
.p-bottom__dec {
  background: url(../../assets/img/encyclopedia/footer.png) no-repeat;
  background-size: 100%;
  height: calc(262 / 1400 * 100vw);
}

@media screen and (max-width: 768px) {
  main {
    min-height: auto;
    top: 100px;
  }
  .p-top__dec {
    background: url(../../assets/img/encyclopedia/header_SP.png) no-repeat;
    min-height: auto;
    background-size: contain;
    height: calc(100 / 375 * 100vw);
    top: 72px;
  }
  .p-top {
    margin: 60px 0 0;
  }
  .p-bottom__dec {
    background: url(../../assets/img/encyclopedia/encyclopedia_bg_sp.png) no-repeat;
    /* height: 100vh; */
    background-size: cover;
    /* background-position: center; */
    height: calc(142 / 375 * 100vw);
  }
}
/* @media screen and (min-width:1500px) {
  main {
    min-height: 80vh;
  }
} */
/* ---- top ------- */
.p-top__inner {
}
.p-top__inner::before {
  content: "";
  background: url(../../assets/img/encyclopedia/top/top_dec.png) no-repeat;
  background-size: cover;
  width: 100%;
  height: 130px;
  display: block;
}
.p-top__inner::after {
  content: "";
  background: url(../../assets/img/encyclopedia/top/bottom_dec.png) no-repeat;
  background-size: cover;
  width: 100%;
  height: 130px;
  display: block;
}
.p-top__inner h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.8;
}
.p-top__contents {
  max-width: 1121px;
  margin: 20px auto 22px;
}
.p-top__contents ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 60px;
  align-items: end;
}

@media screen and (max-width: 768px) {
  .p-top__contents {
    padding: 0 10px;
  }
  .p-top__inner h3 {
    font-size: 15px;
    line-height: 1.8;
    margin: 24px auto 25px;
  }
  .p-top__contents {
    margin: 0 auto 44px;
  }
  .p-top__contents ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 11px;
  }
  .p-top__inner::before {
    content: "";
    background: url(../../assets/img/encyclopedia/header_SP.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(60 / 375 * 100vw);
    display: block;
  }
  .p-top__inner::after {
    content: "";
    background: url(../../assets/img/encyclopedia/footer_SP.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(60 / 375 * 100vw);
    display: block;
  }
}

/* ---------common--------- */
.sakana_content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sakana_inner {
}
.sakana_ttl {
  display: flex;
  justify-content: center;
  padding: 0px 0 52px;
  align-items: center;
  gap: 18px;
}
.explanationArea {
  position: relative;
}
.explanation01,
.explanation02,
.explanation03,
.explanation04,
.explanation05 {
  position: absolute;
}
.sakana_main_block {
  position: relative;
}

.sub {
  position: absolute;
}
.data {
  position: absolute;
  width: calc(183 / 1400 * 100vw);
  max-width: 183px;
}
.secret {
  position: absolute;
}
.secret::before {
  content: "";
  background: url(../../assets/img/encyclopedia/arrow.png) no-repeat;
  width: 17px;
  height: 30px;
  background-size: contain;
  display: block;
  position: absolute;
  top: 11px;
  left: -19px;
}
.secret_txt {
  margin-bottom: 5px;
}
.secret_btn {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.secret_btn a {
  width: 181px;
}
.secret_btn--look {
  width: 55px;
}
.btn .btn_top {
  width: 285px;
}
.btn .btn_next {
  width: 196px;
}

@media screen and (max-width: 768px) {
  .sakana_ttl {
    display: block;
    padding: calc(30 / 375 * 100%) 5.2% 0;
  }
  .sakana_ttl h1 {
    margin: 0 auto;
  }
  .sakana_content {
    display: block;
    /* max-width: 375px; */
    margin: 0 auto;
  }
  .lead {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    margin: 16px 0 32px;
    width: auto !important;
    line-height: 1.8;
  }
  .sakana_main_block {
    padding: 0 5.2%;
  }
  .sub {
    position: static;
    margin: 0 auto;
  }
  .data {
    position: static;
    width: 300px !important;
    margin: 32px auto 24px;
    max-width: unset;
  }
  .secret {
    position: relative;
    width: 285px !important;
    margin: 0 auto;
    left: 20px !important;
    bottom: auto !important;
  }
  .secret::before {
    top: 10px;
    left: -33px !important;
    width: 19px;
    height: 38px;
  }
  .secret_txt {
    margin-bottom: 6px;
  }
  .secret_btn {
    align-items: flex-start;
  }
  .secret_btn a {
    width: 195px !important;
  }
  .secret_btn--look {
    width: 64px !important;
  }
  .secret p {
    font-size: 12px;
  }
  .btn {
    margin: 20px 0 80px;
    position: static;
    flex-direction: column-reverse;
  }
  .btn .btn_top {
    width: 306px;
    display: block;
    margin: 0 auto 20px;
  }
  .btn .btn_next {
    display: block;
    width: 244px;
    margin: 0 auto;
  }
}
/* ---------tai---------- */
#tai .sakana_ttl h1 {
  width: 192px;
}
#tai .sakana_ttl p {
  width: 571px;
}

#tai .sub {
  width: 114px;
  left: -139px;
  top: 11px;
}
#tai .sakana_main {
  width: 764px;
  /* width: calc(764/1400*100vw);
  max-width: 764px; */
  margin: 0 auto;
}

#tai .explanation01 {
  width: 179px;
  top: 15px;
  left: -5px;
}
#tai .explanation02 {
  width: 249px;
  top: 0px;
  right: 202px;
}
#tai .explanation03 {
  width: 187px;
  right: -140px;
  top: 104px;
}
#tai .explanation04 {
  width: 173px;
  bottom: 28px;
  left: -135px;
}

#tai .data {
  right: -168px;
  bottom: -54px;
}

#tai .secret {
  right: -160px;
  top: 0px;
}
#tai .secret_txt {
  width: 161px;
  /* 50px増えた */
}

@media screen and (max-width: 768px) {
  #tai .sakana_ttl h1 {
    width: 127px;
  }
  #tai .sakana_ttl .lead {
    width: 340px;
  }
  #tai .sub {
    width: 91px;
  }
  #tai .btn {
    margin: 20px 0 80px;
  }
  #tai .sakana_main {
    width: auto;
    margin: calc(70 / 375 * 100vw) auto calc(100 / 375 * 100vw);
  }
  #tai .explanation01 {
    width: calc(135 / 375 * 100%);
    top: calc(-39 / 375 * 100vw);
    left: calc(4 / 375 * 100vw);
  }
  #tai .explanation02 {
    width: calc(175 / 375 * 100%);
    top: calc(-20 / 375 * 100vw);
    right: calc(21 / 375 * 100vw);
  }
  #tai .explanation03 {
    bottom: -72px;
    top: auto;
    right: 3%;
    width: calc(96 / 375 * 100%);
  }
  #tai .explanation04 {
    width: calc(134 / 375 * 100%);
    top: calc(247 / 375 * 100%);
    left: 1px;
  }
  #tai .secret {
    right: auto;
  }
  #tai .secret_txt {
    width: 173px;
  }
}

/* ----------
maguro
-----------*/

#maguro .sakana_ttl h1 {
  width: 214px;
}
#maguro .lead {
  width: 426px;
}

#maguro .sub {
  width: 162px;
  left: -79px;
  top: -9px;
}
#maguro .sakana_main {
  width: 824px;
  left: -34px;
  top: 12.6px;
  position: relative;
}

#maguro .explanation01 {
  width: 156px;
  top: 45px;
  left: -69px;
}
#maguro .explanation02 {
  width: 142px;
  top: 46px;
  right: 130px;
}
#maguro .explanation03 {
  width: 182px;
  right: 106px;
  bottom: 40px;
}
#maguro .explanation04 {
  width: 178px;
  bottom: -9px;
  left: 311px;
}

#maguro .data {
  right: -146px;
  bottom: -26px;
}

#maguro .secret {
  left: -78px;
  bottom: -2px;
}

#maguro .secret_txt {
  width: 191px;
}
@media screen and (max-width: 768px) {
  #maguro .sakana_main {
    margin: calc(52 / 375 * 100vw) auto calc(58 / 375 * 100vw);
    position: static;
    width: calc(335 / 375 * 100vw);
    /* width: 335px; */
  }
  #maguro .sakana_ttl h1 {
    width: 141px;
  }
  #maguro .sub {
    width: 141px;
  }
  #maguro .explanation01 {
    width: calc(116 / 375 * 100vw);
    top: calc(-84 / 375 * 100%);
    left: calc(0 / 375 * 100%);
  }
  #maguro .explanation02 {
    width: calc(114 / 375 * 100%);
    top: calc(-72 / 375 * 100%);
    right: calc(2 / 375 * 100%);
    left: auto;
  }
  #maguro .explanation03 {
    width: calc(121 / 375 * 100vw);
    left: calc(210 / 375 * 100vw);
    top: calc(90 / 375 * 100vw);
  }
  #maguro .explanation04 {
    width: calc(96 / 375 * 100vw);
    bottom: calc(-24 / 375 * 100vw);
    left: calc(90 / 375 * 100vw);
  }
  #maguro .secret_txt {
    width: 224px;
  }
}

/* ------------
torobincho
------------*/

#torobincho .sakana_ttl h1 {
  width: 346px;
}
#torobincho .lead {
  width: 365px;
}

#torobincho .sub {
  width: 162px;
  left: -99px;
  top: -9px;
}
#torobincho .sakana_main {
  /* width: calc(713 / 1000 * 100vw);
  left: calc(-46 / 1000 * 100vw); */
  width: 813px;
  left: -46px;
  margin: 10px 0;
  position: relative;
}

#torobincho .explanation01 {
  /* width: calc(137 / 1000 * 100vw);
  top: calc(64 / 1000 * 100vw);
  left: calc(-66 / 1000 * 100vw); */
  width: 177px;
  top: 64px;
  left: -76px;
}
#torobincho .explanation02 {
  /* width: calc(291 / 1000 * 100vw);
  top: calc(20 / 1000 * 100vw);
  left: calc(347 / 1000 * 100vw); */
  width: 331px;
  top: 20px;
  left: 407px;
}
#torobincho .explanation03 {
  /* width: calc(179 / 1000 * 100vw);
  right: calc(-61 / 1000 * 100vw);
  top: calc(65 / 1000 * 100vw); */
  width: 219px;
  right: -111px;
  top: 53px;
}
#torobincho .explanation04 {
  /* width: calc(158 / 1000 * 100vw);
  bottom: calc(27 / 1000 * 100vw);
  right: calc(149 / 1000 * 100vw); */
  width: 181px;
  bottom: 29px;
  right: 145px;
}
#torobincho .explanation05 {
  /* width: calc(126 / 1000 * 100vw);
  bottom: calc(-12 / 1000 * 100vw);
  left: calc(227 / 1000 * 100vw); */
  width: 166px;
  bottom: -32px;
  left: 255px;
}

#torobincho .data {
  /* right: calc(-108 / 1000 * 100vw);
  bottom: calc(-26 / 1000 * 100vw); */
  right: -188px;
  bottom: -46px;
}

#torobincho .secret {
  left: -88px;
  bottom: -30px;
  width: 251px;
}
#torobincho .secret::before {
  content: none;
}

@media screen and (max-width: 768px) {
  #torobincho .sakana_ttl h1 {
    width: 227px;
  }
  #torobincho .sakana_main {
    width: auto;
    margin: calc(94 / 375 * 100vw) auto calc(65 / 375 * 100vw);
    position: static;
  }
  #torobincho .sub {
    width: 168px;
  }
  #torobincho .secret::before {
    content: unset;
  }
  #torobincho .explanation01 {
    width: calc(137 / 375 * 100vw);
    left: 0;
    top: calc(-23 / 375 * 100vw);
  }
  #torobincho .explanation02 {
    width: calc(218 / 375 * 100vw);
    top: calc(-78 / 375 * 100vw);
    left: calc(87 / 375 * 100vw);
  }
  #torobincho .explanation03 {
    width: calc(109 / 375 * 100vw);
    top: calc(-14 / 375 * 100vw);
    left: auto;
    right: calc(4 / 375 * 100vw);
  }
  #torobincho .explanation04 {
    width: calc(134 / 375 * 100vw);
    bottom: calc(-26 / 375 * 100vw);
    left: auto;
    right: calc(7 / 375 * 100vw);
  }
  #torobincho .explanation05 {
    width: calc(127 / 375 * 100vw);
    bottom: calc(-49 / 375 * 100vw);
    left: calc(45 / 375 * 100vw);
  }
  #torobincho .secret {
    position: static;
    width: auto !important;
  }
  #torobincho .secret p {
    font-size: 12px;
    text-align: center;

  }
}

/* ----------
toro
-----------*/
#toro .sakana_ttl {
  display: block;
  position: relative;
  left: -100px;
}
#toro .sakana_ttl h1 {
  width: 167px;
}
#toro .sakana_ttl p {
  width: 314px;
  margin-top: 12px;
}

#toro .sub {
  width: 167px;
  left: 56px;
  top: 217px;
}
#toro .sakana_main {
  width: 758px;
  left: 121px;
  top: -109px;
  position: relative;
}

#toro .explanation01 {
  width: 191px;
  top: -180px;
  left: 278px;
}
#toro .explanation02 {
  width: 207px;
  top: 140px;
  right: -64px;
}
#toro .explanation03 {
  width: 229px;
  right: -110px;
  top: -278px;
}
#toro .explanation04 {
  width: 87px;
  top: -146px;
  right: -8px;
}
#toro .explanation05 {
  width: 272px;
  top: -243px;
  right: -165px;
  z-index: -1;
}

#toro .data {
  left: -152px;
  bottom: 64px;
}

#toro .secret {
  width: 226px;
  margin-bottom: 5px;
  bottom: 60px;
  left: 80px;
}
#toro .btn {
  top: -33px;
}
@media screen and (max-width: 768px) {
  #toro .sakana_ttl {
    left: auto;
  }
  #toro .sakana_ttl h1 {
    width: 110px;
  }
  #toro .sub {
    width: 166px;
  }
  #toro .sakana_main {
    width: auto;
    position: static;
    margin: calc(46 / 375 * 100vw) auto calc(74 / 375 * 100vw);
  }
  #toro .explanation01 {
    left: 0;
    top: calc(-30 / 375 * 100vw);
    width: calc(151 / 375 * 100vw);
  }
  #toro .explanation02 {
    top: calc(112 / 375 * 100vw);
    left: auto;
    right: calc(2 / 375 * 100vw);
    width: calc(114 / 375 * 100vw);
  }
  #toro .explanation03 {
    top: calc(220 / 375 * 100vw);
    left: 0;
    width: calc(189 / 375 * 100vw);
  }
  #toro .explanation04 {
    top: auto;
    left: calc(10 / 375 * 100vw);
    width: calc(82 / 375 * 100vw);
    bottom: calc(-43 / 375 * 100vw);
  }
  #toro .explanation05 {
    width: auto;
    position: static;
    margin-bottom: calc(77 / 375 * 100vw);
  }
  #toro .secret_txt {
    width: 276px;
  }
}
/* -----------
samon
-------------*/
#samon .sakana_ttl h1 {
  width: 261px;
}
#samon .lead {
  width: 351px;
}

#samon .sub {
  width: 226px;
  left: -83px;
  top: -28px;
}
#samon .sakana_main {
  width: 835px;
  left: -20px;
  margin: 0px auto 80px;
  position: relative;
}

#samon .explanation01 {
  width: 124px;
  top: 31px;
  left: -86px;
}
#samon .explanation02 {
  width: 183px;
  top: -12px;
  right: 200px;
}
#samon .explanation03 {
  width: 359px;
  left: 318px;
  top: 171px;
}
#samon .explanation04 {
  width: 170px;
  bottom: -66px;
  left: -67px;
}

#samon .data {
  right: -159px;
  bottom: -113px;
}

#samon .secret {
  left: 161px;
  bottom: -80px;
}
#samon .secret_txt {
  width: 224px;
}

@media screen and (max-width: 768px) {
  #samon .sakana_ttl h1 {
    width: 171px;
  }
  #samon .sub {
    width: 269px;
  }
  #samon .sakana_main {
    width: auto;
    margin: calc(50 / 375 * 100vw) auto calc(69 / 375 * 100vw);
    position: static;
  }
  #samon .explanation01 {
    top: calc(-34 / 375 * 100vw);
    left: 0;
    width: calc(100 / 375 * 100vw);
  }
  #samon .explanation02 {
    top: calc(-33 / 375 * 100vw);
    left: auto;
    right: 0;
    width: calc(129 / 375 * 100vw);
  }
  #samon .explanation03 {
    top: calc(74 / 375 * 100vw);
    left: auto;
    right: 0;
    width: calc(174 / 375 * 100vw);
  }
  #samon .explanation04 {
    top: calc(88 / 375 * 100vw);
    left: 0;
    width: calc(130 / 375 * 100vw);
  }
  #samon .secret_txt {
    width: 260px;
  }
}

/* --------------
ikura
---------------*/

#ikura .sakana_block {
  display: flex;
  justify-content: space-around;
}
#ikura .sakana_ttl {
  display: block;
}
#ikura .sakana_ttl h1 {
  width: 214px;
}
#ikura .lead {
  width: 320px;
  margin: 10px 0 0 14px;
}

#ikura .sub {
  width: 113px;
  left: -65px;
  top: 17px;
}
#ikura .sakana_main {
  width: 288px;
  left: 0px;
  top: 12.6px;
  position: relative;
}

#ikura .explanation01 {
  width: 142px;
  top: 20px;
  right: -86px;
}
#ikura .explanation02 {
  width: 180px;
  bottom: -45px;
  right: -10px;
}
#ikura .explanation03 {
  width: 52px;
  left: -55px;
  bottom: -14px;
}

.ikura__description {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 0;
}
#ikura .arrow {
  width: 26px;
  margin-top: 49px;
}
.ikura__description01--txt,
.ikura__description02--txt,
.ikura__description03--txt {
  width: 59px;
}
.ikura__description01--img {
  width: 281px;
}
.ikura__description02--img {
  width: 182px;
  margin-top: 14px;
}
.ikura__description02--lead {
  width: 214px;
  margin-top: 20px;
  margin-left: -17px;
}

.ikura__description03--img {
  width: 168px;
}
.ikura__description03--lead {
  width: 196px;
  margin-top: 5px;
  margin-left: -17px;
}

#ikura .data {
  margin-left: 18px;
  position: static;
}

@media screen and (max-width: 768px) {
  #ikura {
    margin: auto;
  }
  #ikura .sakana_block {
    display: block;
  }
  #ikura .lead {
    margin: 16px 0 32px;
  }
  #ikura .sub {
    width: 91px;
  }
  #ikura .sakana_main {
    width: calc(200 / 375 * 100vw);
    margin: calc(49 / 375 * 100vw) auto calc(80 / 375 * 100vw);
    position: static;
  }
  #ikura .ikura--description {
    display: block;
  }
  #ikura .explanation01 {
    width: calc(142 / 375 * 100vw);
    top: calc(-35 / 375 * 100vw);
    right: calc(2 / 375 * 100vw);
  }
  #ikura .explanation02 {
    width: calc(180 / 375 * 100vw);
    right: calc(6 / 375 * 100vw);
    bottom: calc(-50 / 375 * 100vw);
  }
  #ikura .explanation03 {
    left: auto;
    width: calc(52 / 375 * 100vw);
    bottom: calc(5 / 375 * 100vw);
  }
  .ikura__description {
    display: block;
  }
  .ikura__description01--txt,
  .ikura__description02--txt,
  .ikura__description03--txt {
    width: calc(81 / 375 * 100vw);
    margin: 0 auto;
  }
  .ikura__description01--img {
    width: calc(269 / 375 * 100vw);
    margin: calc(8 / 375 * 100vw) auto calc(16 / 375 * 100vw);
  }
  .ikura__description02--img,
  .ikura__description03--img {
    margin: calc(16 / 375 * 100vw) auto;
  }
  .ikura__description02--img,
  .ikura__description02--lead {
    width: calc(218 / 375 * 100vw);
    margin: calc(16 / 375 * 100vw) auto;
  }
  .ikura__description03--img,
  .ikura__description03--lead {
    width: calc(201 / 375 * 100vw);
    margin: calc(16 / 375 * 100vw) auto;
  }
  #ikura .arrow {
    transform: rotate(90deg);
    margin: calc(16 / 375 * 100vw) auto;
    width: calc(30 / 375 * 100vw);
  }
  #ikura .data {
    margin-left: auto;
  }
}

/* ---------------
buri
--------------------*/
/* #buri {
  top: 60px;
} */
#buri .sakana_ttl h1 {
  width: 167px;
}
#buri .sakana_ttl .lead {
  width: 464px;
}

#buri .sub {
  width: 113px;
  left: 21px;
  top: 8px;
}
#buri .sakana_main {
  width: 823px;
  left: 93px;
  position: relative;
}

#buri .explanation01 {
  width: 174px;
  top: -37px;
  left: 190px;
}
#buri .explanation02 {
  width: 338px;
  top: 37px;
  right: 147px;
}
#buri .explanation03 {
  width: 228px;
  left: 81px;
  top: 160px;
}

#buri .data {
  left: -148px;
  bottom: -83px;
}

#buri .btn {
  top: 113px;
}
@media screen and (max-width: 768px) {
  #buri .sakana_ttl h1 {
    width: 110px;
  }
  #buri .sub {
    width: 91px;
  }
  #buri .sakana_main {
    width: auto;
    position: static;
    margin: calc(68 / 375 * 100vw) auto calc(85 / 375 * 100vw);
  }
  #buri .explanation01 {
    width: calc(134 / 375 * 100vw);
    top: calc(-51 / 375 * 100vw);
    left: 0;
  }
  #buri .explanation02 {
    width: calc(222 / 375 * 100vw);
    left: auto;
    top: calc(11 / 375 * 100vw);
    right: calc(1 / 375 * 100vw);
  }
  #buri .explanation03 {
    width: calc(139 / 375 * 100vw);
    top: calc(66 / 375 * 100vw);
    left: 0;
  }
}

/* --------------
amaebi
----------------*/

#amaebi .sakana_ttl h1 {
  width: 261px;
}
#amaebi .lead {
  width: 403px;
}

#amaebi .sub {
  width: 178px;
  left: -132px;
  top: -17px;
}
#amaebi .sakana_main {
  width: 683px;
  left: 50px;
  position: relative;
}

#amaebi .explanation01 {
  width: 289px;
  top: 47px;
  left: -102px;
}
#amaebi .explanation02 {
  width: 164px;
  top: 160px;
  right: -70px;
}
#amaebi .explanation03 {
  width: 185px;
  left: 120px;
  top: 302px;
}
#amaebi .explanation04 {
  width: 191px;
  top: 91px;
  left: -120px;
}

#amaebi .data {
  right: -278px;
  bottom: -56px;
}
#amaebi .secret {
  right: -230px;
  top: 33px;
}

#amaebi .secret_txt {
  width: 162px;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  #amaebi .sakana_ttl h1 {
    width: 171px;
  }
  #amaebi .sub {
    width: 194px;
  }
  #amaebi .sakana_main {
    width: auto;
    position: static;
    margin: calc(75 / 375 * 100vw) auto calc(66 / 375 * 100vw);
  }
  #amaebi .explanation01 {
    width: calc(218 / 375 * 100vw);
    top: calc(-26 / 375 * 100vw);
    left: auto;
    right: calc(19 / 375 * 100vw);
  }
  #amaebi .explanation02 {
    width: calc(84 / 375 * 100vw);
    left: auto;
    top: calc(116 / 375 * 100vw);
    right: calc(14 / 375 * 100vw);
  }
  #amaebi .explanation03 {
    width: calc(110 / 375 * 100vw);
    top: auto;
    left: 0;
    bottom: calc(-30 / 375 * 100vw);
  }
  #amaebi .explanation04 {
    width: calc(151 / 375 * 100vw);
    top: calc(-59 / 375 * 100vw);
    left: 0;
  }
  #amaebi .secret {
    right: auto;
    top: auto;
  }
  #amaebi .secret_txt {
    width: 219px;
  }
}

/* -------------
ika
----------------*/
#ika .sakana_block {
  display: flex;
  align-items: flex-start;
  position: relative;
}
#ika .sakana_ttl {
  flex-direction: column;
  align-items: flex-start;
}
#ika .sakana_ttl h1 {
  width: 167px;
  position: relative;
  margin-bottom: 10px;
}
#ika .sakana_ttl p {
  width: 299px;
  margin-left: 12px;
}

#ika .sub {
  width: 163px;
  right: 72px;
  top: 188px;
}
#ika .sakana_main {
  width: 578px;
  left: -47px;
  top: -17.4px;
  position: relative;
}

#ika .explanation01 {
  width: 148px;
  top: 18px;
  left: 49px;
}
#ika .explanation02 {
  width: 97px;
  top: 45px;
  right: 3px;
}
#ika .explanation03 {
  width: 147px;
  right: 167px;
  top: 301px;
}
#ika .explanation04 {
  width: 376px;
  bottom: 5px;
  left: -161px;
}

#ika .data {
  right: -80px;
  bottom: -62px;
}

@media screen and (max-width: 768px) {
  #ika .sakana_block {
    display: block;
  }
  #ika .sakana_ttl h1 {
    width: 109px;
  }
  #ika .sub {
    width: 140px;
  }
  #ika .sakana_main {
    width: calc(265 / 375 * 100vw);
    position: static;
    margin: calc(24 / 375 * 100vw) auto calc(86 / 375 * 100vw);
  }
  #ika .explanation01 {
    width: calc(162 / 375 * 100vw);
    top: calc(-10 / 375 * 100vw);
    left: calc(-10 / 375 * 100vw);
  }
  #ika .explanation02 {
    width: calc(97 / 375 * 100vw);
    top: calc(20 / 375 * 100vw);
    right: calc(17 / 375 * 100vw);
  }
  #ika .explanation03 {
    width: calc(147 / 375 * 100vw);
    top: auto;
    right: 0;
    bottom: calc(-24/375*100vw);
  }
  #ika .explanation04 {
    width: calc(163 / 375 * 100vw);
    bottom: calc(-52 / 375 * 100vw);
    left: calc(-15 / 375 * 100vw);
  }
}
/* ------------
tako
---------------*/

#tako .sakana_block {
  display: flex;
  align-items: flex-start;
  position: relative;
}
#tako .sakana_ttl {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  top: -50px;
  left: 40px;
}
#tako .sakana_ttl h1 {
  width: 167px;
  margin-bottom: 10px;
}
#tako .lead {
  width: 230px;
}

#tako .sakana_block {
  margin: 50px 0 36px;
}
#tako .sub {
  width: 113px;
  left: 58px;
  top: -53px;
}
#tako .sakana_main {
  width: 696px;
  position: relative;
}

#tako .explanation01 {
  width: 179px;
  top: 24px;
  left: 58px;
}
#tako .explanation02 {
  width: 170px;
  top: -16px;
  left: 194px;
}
#tako .explanation03 {
  width: 172px;
  right: 40px;
  top: -4px;
}
#tako .explanation04 {
  width: 172px;
  bottom: -3px;
  left: 188px;
}

#tako .data {
  bottom: -104px;
  left: -26px;
}

#tako .secret {
  position: absolute;
  right: -70px;
  bottom: -60px;
}
#tako .secret_txt {
  width: 170px;
}
#tako .btn {
  top: 77px;
}
@media screen and (max-width: 768px) {
  #tako .sakana_block {
    display: block;
    margin: 0;
  }
  #tako .sakana_ttl {
    display: block;
    padding: calc(30 / 375 * 100%) 5.2% 0;
    position: static;
  }
  #tako .sakana_ttl h1 {
    width: 110px;
  }
  #tako .sakana_ttl {
    left: auto;
  }
  #tako .sub {
    width: 91px;
  }
  #tako .sakana_main {
    width: auto;
    position: static;
    margin: calc(84 / 375 * 100vw) auto calc(77 / 375 * 100vw);
  }
  #tako .explanation01 {
    width: calc(113 / 375 * 100vw);
    top: calc(-4 / 375 * 100vw);
    left: 0;
  }
  #tako .explanation02 {
    width: calc(132 / 375 * 100vw);
    top: calc(-68 / 375 * 100vw);
    left: calc(65 / 375 * 100vw);
  }
  #tako .explanation03 {
    width: calc(100 / 375 * 100vw);
    top: calc(-53 / 375 * 100vw);
    right: 0;
  }
  #tako .explanation04 {
    width: calc(172 / 375 * 100vw);
    bottom: calc(-46 / 375 * 100vw);
    left: calc(43 / 375 * 100vw);
  }
  #tako .secret {
    position: relative;
  }
  #tako .secret_txt {
    width: auto;
  }
}
/* ------------------
anago
---------------------*/
#anago .sakana_ttl h1 {
  width: 214px;
}
#anago .sakana_ttl p {
  width: 351px;
}

#anago .sub {
  width: 130px;
  left: -159px;
  top: -2px;
}
#anago .sakana_main {
  width: 706px;
}

#anago .explanation01 {
  width: 220px;
  top: -20px;
  left: -8px;
}
#anago .explanation02 {
  width: 285px;
  top: 12px;
  right: -150px;
}
#anago .explanation03 {
  width: 190px;
  left: -88px;
  bottom: 10px;
}
#anago .explanation04 {
  width: 199px;
  top: 77.5px;
  left: -115px;
}

#anago .data {
  right: -254px;
  bottom: 7px;
}

@media screen and (max-width: 768px) {
  #anago .sakana_ttl h1 {
    width: 140px;
  }
  #anago .sub {
    width: 116px;
  }
  #anago .sakana_main {
    width: auto;
    margin: calc(86 / 375 * 100vw) auto calc(39 / 375 * 100vw);
    position: static;
  }
  #anago .explanation01 {
    width: calc(294 / 375 * 100vw);
    top: calc(-49 / 375 * 100vw);
    left: calc(34 / 375 * 100vw);
  }
  #anago .explanation02 {
    width: calc(107 / 375 * 100vw);
    top: calc(52 / 375 * 100vw);
    right: calc(6 / 375 * 100vw);
    left: auto;
  }
  #anago .explanation03 {
    width: calc(107 / 375 * 100vw);
    bottom: calc(-4 / 375 * 100vw);
    left: calc(60 / 375 * 100vw);
  }
  #anago .explanation04 {
    width: calc(159 / 375 * 100vw);
    bottom: auto;
    left: calc(-10/375*100vw);
    top: calc(-76 / 375 * 100vw);
  }
}
/* ----------------
unagi
----------------*/
#unagi .sakana_ttl h1 {
  width: 214px;
}
#unagi .lead {
  width: 354px;
}
#unagi .sub {
  width: 162px;
  left: -159px;
  top: 0px;
}
#unagi .sakana_main {
  width: 711px;
  position: relative;
  left: -31px;
}

#unagi .explanation01 {
  width: 92px;
  top: -19px;
  left: 29px;
}
#unagi .explanation02 {
  width: 174px;
  top: 45px;
  left: 330px;
}
#unagi .explanation03 {
  width: 297px;
  right: -125px;
  top: 10px;
}
#unagi .explanation04 {
  width: 218px;
  bottom: 2px;
  left: -138px;
}
#unagi .explanation05 {
  width: 185px;
  top: 114px;
  left: -105px;
}

#unagi .data {
  right: -109px;
  bottom: -32px;
}
#unagi .secret_txt {
  width: 209px;
}
#unagi .secret {
  right: -250px;
  top: 90px;
}

#unagi .btn {
  margin-top: 65px;
}
@media screen and (max-width: 768px) {
  #unagi .sakana_ttl h1 {
    width: 140px;
  }
  #unagi .sub {
    width: 167px;
  }

  #unagi .sakana_main {
    width: auto;
    position: static;
    margin: calc(106 / 375 * 100vw) auto calc(92 / 375 * 100vw);
  }
  #unagi .secret {
    top: auto;
    right: auto;
  }
  #unagi .explanation01 {
    width: calc(186 / 375 * 100vw);
    top: calc(-46 / 375 * 100vw);
    left: calc(36 / 375 * 100vw);
  }
  #unagi .explanation02 {
    width: calc(134 / 375 * 100vw);
    top: calc(-90 / 375 * 100vw);
    right: 0;
    left: auto;
  }
  #unagi .explanation03 {
    width: calc(152 / 375 * 100vw);
    top: auto;
    right: 0;
    bottom: calc(-60 / 375 * 100vw);
  }
  #unagi .explanation04 {
    width: calc(108 / 375 * 100vw);
    bottom: calc(-48 / 375 * 100vw);
    left: calc(10 / 375 * 100vw);
  }
  #unagi .explanation05 {
    width: calc(145 / 375 * 100vw);
    top: calc(-58 / 375 * 100vw);
    left: calc(-6/375*100vw);
  }
  #unagi .secret_txt {
    width: 253px;
  }
}
/* ------------
tubugai
-------------------*/

#tubugai {
  display: flex;
  justify-content: center;
  position: relative;
}
#tubugai .sakana_block {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap: 70px;
}
#tubugai .sakana_ttl {
  flex-direction: column;
  align-items: flex-start;
}
#tubugai .sakana_ttl h1 {
  width: 261px;
  position: relative;
  margin-bottom: 10px;
}
#tubugai .sakana_ttl p {
  width: 354px;
}

#tubugai .sub {
  width: 129px;
  left: -67px;
  top: 13px;
}
#tubugai .sakana_main {
  width: 467px;
  position: relative;
}

#tubugai .explanation01 {
  width: 194px;
  bottom: 86px;
  left: -121px;
}
#tubugai .explanation02 {
  width: 145px;
  top: 26px;
  left: 260px;
}
#tubugai .explanation03 {
  width: 151px;
  right: 168px;
  bottom: 1px;
}

#tubugai .data {
  left: -50px;
  top: 290px;
}
#tubugai .btn {
  top: 97px;
}
@media screen and (max-width: 768px) {
  #tubugai .sakana_block {
    display: block;
  }

  #tubugai .sakana_ttl h1 {
    width: 171px;
  }
  #tubugai .sub {
    width: 116px;
  }
  #tubugai .sakana_main {
    width: auto;
    position: static;
    margin: calc(16 / 375 * 100vw) auto calc(100 / 375 * 100vw);
  }
  #tubugai .explanation01 {
    width: calc(146 / 375 * 100vw);
    bottom: calc(-8 / 375 * 100vw);
    left: 0;
  }
  #tubugai .explanation02 {
    width: calc(145 / 375 * 100vw);
    top: 0;
    right: calc(24 / 375 * 100vw);
    left: auto;
  }
  #tubugai .explanation03 {
    width: calc(132 / 375 * 100vw);
    bottom: calc(-70 / 375 * 100vw);
    right: calc(38 / 375 * 100vw);
  }
}
/* --------------
hotate
---------------*/
#hotate .sakana_ttl {
  align-items: flex-start;
}
#hotate .sakana_ttl h1 {
  width: 214px;
}
#hotate .lead {
  width: 365px;
}
#hotate .sub {
  width: 146px;
  left: -122px;
  top: -42px;
}
#hotate .sakana_main {
  width: 731px;
  left: -59px;
  position: relative;
}

#hotate .explanation01 {
  width: 272px;
  top: 2px;
  left: 110px;
}
#hotate .explanation02 {
  width: 176px;
  top: 33px;
  left: 529px;
}
#hotate .explanation03 {
  width: 61px;
  right: 102px;
  bottom: -26px;
}
#hotate .explanation04 {
  width: 150px;
  bottom: -24px;
  right: 325px;
}

#hotate .data {
  right: -178px;
  bottom: -127px;
}
#hotate .secret {
  left: -50px;
  bottom: -75px;
}
#hotate .secret_txt {
  width: 254px;
}
#hotate .btn {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  #hotate .sakana_ttl h1 {
    width: 140px;
  }
  #hotate .sub {
    width: 141px;
  }
  #hotate .sakana_main {
    width: auto;
    position: static;
    margin: calc(71 / 375 * 100vw) auto calc(84 / 375 * 100vw);
  }
  #hotate .explanation01 {
    width: calc(172 / 375 * 100vw);
    top: calc(-63 / 375 * 100vw);
    left: calc(48 / 375 * 100vw);
  }
  #hotate .explanation02 {
    width: calc(58 / 375 * 100vw);
    top: calc(-33 / 375 * 100vw);
    right: calc(2 / 375 * 100vw);
    left: auto;
  }
  #hotate .explanation03 {
    width: calc(42 / 375 * 100vw);
    bottom: calc(-26 / 375 * 100vw);
    right: calc(1 / 375 * 100vw);
  }
  #hotate .explanation04 {
    width: calc(150 / 375 * 100vw);
    bottom: calc(-50 / 375 * 100vw);
    right: calc(94 / 375 * 100vw);
  }
}