@charset "utf-8";

/*===================
fv
===================*/
.productPage__fv {
  margin-bottom: 120px;
}
.productPage__fvWrap {
  position: relative;
  padding-bottom: 70px;
  margin-bottom: 24px;
}
.productPage__fvPic {
  width: 85%;
  max-width: 1500px;
  margin: 0 auto;
}
.productPage__ttl {
  max-width: 460px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
.productPage__txt {
  margin-bottom: 33px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.352;
  text-align: center;
}
.productPage__menuList {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.productPage__menuLink {
  display: block;
  width: 150px;
  padding: 7px 0;
  border: 2px solid #003161;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  transition: 0.3s;
}
.productPage__menuLink:hover {
  background: #003161;
  color: #fff;
}
@media screen and (max-width: 750px) {
  .productPage__fv {
    margin-bottom: 71px;
  }
  .productPage__fvPic {
    width: 100%;
  }
  .productPage__ttl {
    width: 91%;
  }
  .productPage__txt {
    margin-bottom: 21px;
    font-size: 17px;
  }

  .productPage__menuList {
    width: 92%;
    max-width: 310px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .productPage__menuLink {
    width: auto;
    font-size: 17px;
  }
}
/*===================
product
===================*/
.productPage__productMain {
  background: #28375e;
}
.productPage__productMainContainer {
  padding-bottom: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.productPage__productMainLeft {
  width: 50%;
  padding-left: 9%;
  position: relative;
}
.productPage__productMainRight {
  width: 50%;
  padding-left: 5%;
  padding-top: 8.5%;
  position: relative;
}
.productPage__productMainTtl {
  width: clamp(60px, 5.555vw, 80px);
  height: clamp(200px, 18.472vw, 266px);
  background: url(../imgs/product/ttl_bg.png) center center / cover no-repeat;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: clamp(27px, 2.777vw, 40px);
  font-weight: 700;
  letter-spacing: 0.3em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

  position: absolute;
  top: -18%;
  left: 13%;
}
.productPage__productMainTtl span {
  padding-top: clamp(22px, 2.777vw, 40px);
}
#crab-shrimp .productPage__productMainTtl {
  letter-spacing: 0.05em;
}
#processed .productPage__productMainTtl {
  letter-spacing: 0.05em;
}
#crab-shrimp .productPage__productMainTtl span {
  padding-top: clamp(10px, 1.18vw, 17px);
}
.productPage__productMainPic {
  margin-top: -20px;
}
.productPage__productMainPic .img {
  border-radius: 10px;
}
.productPage__productMainDeco {
  width: 60%;
  max-width: 370px;
  position: absolute;
  top: -35px;
  right: 26px;
}
.productPage__productMainDeco02 {
  width: 64%;
  max-width: 388px;
  top: -87px;
  right: 73px;
}
.productPage__productMainDeco03 {
  width: 54%;
  max-width: 330px;
  top: -72px;
  right: 85px;
}
.productPage__productMainDeco04 {
  width: 48%;
  max-width: 291px;
  top: -39%;
  right: 120px;
}
.productPage__productMainHeading {
  margin-bottom: 20px;
  font-size: clamp(19px, 2.43vw, 35px);
  font-weight: 700;
  color: #fff;
}
.productPage__productMainTxt {
  margin-bottom: 28px;
  font-size: clamp(14px, 1.319vw, 19px);
  font-weight: 600;
  line-height: 1.74;
  color: #fff;
}
.productPage__productBtnLink {
  display: block;
  max-width: 300px;
  padding: 8px 49px 8px 20px;
  background: #fff;
  border: 1px solid #003161;
  font-size: clamp(17px, 1.319vw, 19px);
  font-weight: 700;
  color: #003161;
  transition: 0.3s;
  position: relative;
}
.productPage__productBtnLink::before {
  display: block;
  content: "";
  width: 16px;
  height: 6px;
  background: url(../imgs/product/arrow_b.png) center center / cover no-repeat;
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
.productPage__productBtnLink:hover {
  background: #c92a28;
  border: 1px solid #c92a28;
  border-radius: 10px;
  color: #fff;
  transition: 0.3s;
}
.productPage__productBtnLink:hover.productPage__productBtnLink::before {
  background: url(../imgs/product/arrow_w.png) center center / cover no-repeat;
}
.productPage__productContents {
  padding: 60px 0 120px;
  /* background-color: #fff; */
  background-image: url(../imgs/product/bg.jpg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: repeat;
}
.productPage__productList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 7.22vw, 104px) 13%;
}
.productPage__productItem {
  width: 100%;
  position: relative;
}
.productPage__productItem:nth-child(n + 4):nth-child(3n + 1)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  max-width: 1220px;
  width: 90.5vw;
  margin: 0 auto;
  top: clamp(-52px, -3.61vw, -15px);
  height: 1px;
  background-color: #003161;
  z-index: 1;
}
.productPage__productPic {
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 63%;
  margin-bottom: 10px;
  display: block;
  overflow: hidden;
}
.productPage__productPic .img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.productPage__productTtl {
  margin-bottom: 9px;
  font-size: clamp(19px, 1.736vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.productPage__productTxt {
  margin-bottom: 27px;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 600;
  line-height: 1.764;
}
.nopost {
  font-size: 12px;
}
@media screen and (max-width: 1025px) {
  .productPage__productList {
    column-gap: 5%;
  }
}
@media screen and (max-width: 860px) {
  .productPage__productList {
    grid-template-columns: repeat(2, 1fr);
  }
  .productPage__productItem:nth-child(n + 4):nth-child(3n + 1)::after {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .productPage__productMainContainer {
    padding-bottom: 41px;
    flex-direction: column;
  }
  .productPage__productMainLeft {
    width: 100%;
    padding-left: 10%;
  }
  .productPage__productMainRight {
    width: 100%;
    padding-left: 1%;
    padding-top: 6.5%;
  }
  .productPage__productMainTtl {
    top: -41px;
    left: 1%;
  }
  .productPage__productMainDeco {
    display: none;
  }
  .productPage__productMainPic {
    margin-top: -10px;
  }
  .productPage__productMainHeading {
    margin-bottom: 9px;
  }
  .productPage__productMainTxt {
    margin-bottom: 23px;
    line-height: 1.43;
  }

  .productPage__productBtnLink {
    max-width: 320px;
    padding: 8px 15px 8px 8px;
  }
  .productPage__productBtnLink::before {
    right: 19px;
  }
}
@media screen and (max-width: 620px) {
  .productPage__productList {
    display: flex;
    flex-direction: column;
    row-gap: 16vw;
  }
}

/*===================
online
===================*/
.online {
  padding: 0px 0 116px;
  background: url(../imgs/product/bg.jpg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: repeat;
}
.online__inner {
  width: 92%;
  margin: 0 auto;
}
.online__ttl {
  max-width: 472px;
  margin: 0 auto 20px;
}
.online__banner {
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .online__ttl {
    max-width: 320px;
  }
  .online__banner {
    max-width: 320px;
  }
}
