@charset "utf-8";

/*
 * SHIPS KIDS OCCASION COLLECTION 2027
 * 編集の目印（検索して移動）
 *   --SP--             スマホ：767px以下
 *   --PC--             PC：768px以上
 *   2027 PDF           キービジュアルのロゴ位置
 *   PDFの画像内ラベル  A〜F・対応クレジットの見出し
 *   小物B位置          ネクタイのクレジット配置
 *   画像内ラベルの位置 A/Bラベルの細かい座標
 *   PC画像拡大         拡大画像のサイズ・背景・動き
 * common.css / common_sp.css は共通ファイル。通常はこのファイルを編集。
 */

.h_bar, 
#beltbnr {
	display: none;
}
#specialty .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

#specialty .clearfix:before {
  content: "";
  display: block;
  clear: both;
}

#specialty .clearfix {
  display: block;
}

#specialty a:hover img {
  opacity: 1 !important;
}

/* font */
#specialty h2,
#specialty h3,
#specialty h4,
#specialty p,
#specialty span,
#specialty ul,
#specialty li,
#specialty a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #000000;
}

/*--SP--*/
@media only screen and (max-width: 767px) {
  #specialty .sp {
    display: block;
  }

  #specialty .pc {
    display: none;
  }

  /* main-visual */
  #specialty .main-visual {
    position: relative;
    text-align: center;
  }

  #specialty .main-visual-title {
    position: absolute;
    top: 89.48%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #specialty .main-visual-title img {
    width: 100%;
  }

  /* main-lead */
  #specialty .main-lead {
    padding: 35px 0;
    text-align: center;
    margin-top: -75px;
  }

  #specialty .main-lead p {
    font-size: 12px;
    line-height: 1.6;
  }

  #specialty .main-lead img {
    width: 40%;
  }

  /* main-inner */
  #specialty .main-inner {
    position: relative;
  }

  /* content-size */
  #specialty .content-size {
    margin-bottom: 35px;
    text-align: center;
  }

  #specialty .content-size p {
    font-size: 10px;
    line-height: 1.6;
    color: #717171 !important;
  }

  #specialty .content-size p span {
    color: #717171 !important;
  }

  #specialty .content-size p span.boy-size {
    margin-right: 20px;
  }

  /* content-sticky */
  #specialty .content-sticky {
    margin-top: -100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 90;
  }

  #specialty .content-sticky p {
    padding-top: 100px;
  }

  #specialty .content-sticky.is-fixed p {
    position: fixed;
    top: 0;
    right: 0;
  }

  #specialty .content-sticky span {
    font-family: "din-2014", sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 0px 10px 0px 10px;
    letter-spacing: 2px;
    width: 40px;
    height: 200px;
    margin-top: 25px;
  }

  /* content */
  #specialty .content {
    width: 100%;
    margin: 0 auto;
  }

  /* credit */
  #specialty .credit .accordion {
    margin: 15px 0;
    display: inline-block;
    position: relative;
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 2;
  }

  #specialty .credit .accordion::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50px;
    width: 14px;
    height: 14px;
    background-image: url( "../images/icon_plus.png");
    background-position: top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  #specialty .credit .accordion.open::before {
    background-image: url( "../images/icon_minus.png");
  }

  #specialty .credit-inner {
    display: none;
  }

  #specialty .credit-inner h3 {
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .credit-inner ul:nth-child(n+2) {
    margin-top: 20px;
  }

  #specialty .credit-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
  }

  #specialty .credit-item:last-child {
    margin-bottom: 0;
  }

  #specialty .credit-btn {
    width: 45px;
    margin-right: 15px;
  }

  #specialty .credit-btn a {
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000000;
    transition: all 0.3s ease 0s;
  }

  #specialty .credit-btn a:hover {
    color: #ffffff !important;
    background-color: #000000;
  }

  #specialty .credit-txt {
    font-size: 12px;
    line-height: 1.2;
  }

  /* content-box */
  #specialty .model01,
#specialty .model02,
#specialty .model05,
#specialty .model06,
#specialty .model07,
#specialty .model08,
#specialty .other02 {
    width: 100%;
    margin: 0 0 75px 0;
  }

  #specialty .model01 .credit,
#specialty .model02 .credit,
#specialty .model05 .credit,
#specialty .model06 .credit,
#specialty .model07 .credit,
#specialty .model08 .credit,
#specialty .other02 .credit {
    width: calc(100% - 80px);
    margin: 0 auto;
    text-align: left;
  }

  #specialty .model03,
#specialty .model04,
#specialty .other01,
#specialty .other03 {
    width: calc(100% - 80px);
    margin: 0 auto 75px;
  }

  #specialty .model03 .credit,
#specialty .model04 .credit,
#specialty .other01 .credit,
#specialty .other03 .credit {
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  #specialty .style01 {
    width: calc(100% - 80px);
    margin: 0 auto 75px;
  }

  #specialty .style01 .credit {
    width: calc(100% - 80px);
    /* margin: 0 auto; */
    text-align: left;
  }

  #specialty .style01 .content-inner:nth-child(n+2) {
    margin-top: 75px;
  }

  #specialty .style02 {
    width: calc(100% - 80px);
    margin: 0 auto 75px;
  }

  #specialty .style02 .content-image {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  #specialty .style02 .neck-style {
    width: 50%;
    position: relative;
  }

  #specialty .style02 .neck-style p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #ffffff !important;
  }

  #specialty .style02 .credit {
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  #specialty .style03 {
    width: 100%;
    margin: 0 0 75px 0;
  }

  #specialty .style03 .content-image {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    padding-top: 120%;
  }

  #specialty .style03 .other-style01 {
    position: absolute;
    width: 54.37%;
    top: 0;
    left: 25%;
  }

  #specialty .style03 .other-style02 {
    position: absolute;
    width: 29.92%;
    top: 35%;
    right: 0;
  }

  #specialty .style03 .other-style03 {
    position: absolute;
    width: 53.44%;
    bottom: 0;
    left: 40px;
  }

  #specialty .style03 .other-style01 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #000000 !important;
  }

  #specialty .style03 .other-style02 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #ffffff !important;
  }

  #specialty .style03 .other-style03 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 13px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #000000 !important;
  }

  #specialty .style03 .credit {
    width: calc(100% - 80px);
    margin: 0 auto;
    text-align: left;
  }

}

/*--PC--*/
@media only screen and (min-width: 768px) {
  #specialty .sp {
    display: none;
  }

  #specialty .pc {
    display: block;
  }

  /* main-visual */
  #specialty .main-visual {
    position: relative;
    text-align: left;
  }

  #specialty .main-visual-title {
    position: absolute;
    top: 87.48%;
    left: 30%;
    transform: translate(-50%, -50%);
  }

  #specialty .main-visual-title img {
    width: 36.45%;
  }

  /* main-lead */
  #specialty .main-lead {
    padding: 70px 0 40px;
    text-align: center;
  }

  #specialty .main-lead p {
    font-size: 16px;
    line-height: 2;
  }

  #specialty .main-lead img {
    width: 15%;
  }

  /* main-inner */
  #specialty .main-inner {
    position: relative;
  }

  /* content-size */
  #specialty .content-size {
    margin-bottom: 70px;
    text-align: center;
  }

  #specialty .content-size p {
    font-size: 12px;
    line-height: 2;
    color: #717171 !important;
  }

  #specialty .content-size p span {
    color: #717171 !important;
  }

  #specialty .content-size p span.boy-size {
    margin-right: 20px;
  }

  #specialty .content-size p span.girl-size {
    margin-right: 30px;
  }

  /* content-sticky */
  #specialty .content-sticky {
    margin-top: -10px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 90;
  }

  #specialty .content-sticky p {
    padding-top: 100px;
  }

  #specialty .content-sticky.is-fixed p {
    position: fixed;
    top: 0;
    right: 0;
  }

  #specialty .content-sticky span {
    font-family: "din-2014", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 0 35px 0 35px;
    letter-spacing: 2px;
    width: 90px;
    height: 260px;
  }

  /* content */
  #specialty .content {
    width: 1120px;
    margin: 0 auto;
  }

  /* credit */
  #specialty .credit-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
  }

  #specialty .credit-item:last-child {
    margin-bottom: 0;
  }

  #specialty .credit-btn {
    width: 50px;
    margin-right: 25px;
  }

  #specialty .credit-btn a {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000000;
    transition: all 0.3s ease 0s;
  }

  #specialty .credit-btn a:hover {
    color: #ffffff !important;
    background-color: #000000;
  }

  #specialty .credit-txt {
    font-size: 14px;
    line-height: 1.2;
  }

  #specialty .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  /* content-box */
  #specialty .model01 {
    width: 905px;
    margin: 0 0 150px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #specialty .model01 .content-image {
    width: 60%;
  }

  #specialty .model01 .credit {
    width: 40%;
  }

  #specialty .model01 .credit-inner {
    margin-left: 50px;
    text-align: left;
    margin-bottom: 40px;
  }

  #specialty .model01 .credit-inner ul:last-child {
    margin-top: 40px;
  }

  #specialty .model02 {
    width: 100%;
    margin: 0 auto 150px;
    position: relative;
    cursor: pointer;
  }

  #specialty .model02 .credit {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  #specialty .model02:hover .credit {
    opacity: 1;
  }

  #specialty .model02 .credit-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 40px;
  }

  #specialty .model02 .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .model02 .credit-inner ul {
    width: 34%;
    text-align: left;
  }

  #specialty .model02 .credit-inner h3,
#specialty .model02 .credit-inner p,
#specialty .model02 .credit-inner a,
#specialty .model02 .credit-inner ul,
#specialty .model02 .credit-inner li {
    color: #ffffff !important;
  }

  #specialty .model02 .credit-btn a {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff;
    transition: all 0.3s ease 0s;
  }

  #specialty .model02 .credit-btn a:hover {
    color: #000000 !important;
    background-color: #ffffff;
  }

  #specialty .model03 {
    width: 900px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .model03 .content-image {
    width: 47%;
  }

  #specialty .model03 .credit {
    width: 53%;
  }

  #specialty .model03 .credit-inner {
    margin-left: 50px;
    text-align: left;
    margin-bottom: 50px;
  }

  #specialty .model04 {
    width: 900px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .model04 .content-image {
    width: 47%;
    order: 2;
  }

  #specialty .model04 .credit {
    width: 53%;
    order: 1;
  }

  #specialty .model04 .credit-inner {
    margin-left: 50px;
    text-align: left;
    margin-bottom: 50px;
  }

  #specialty .model05 {
    width: 901px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .model05 .content-image {
    width: 60%;
  }

  #specialty .model05 .credit {
    width: 40%;
  }

  #specialty .model05 .credit-inner {
    margin-left: 50px;
    text-align: left;
    margin-bottom: 50px;
  }

  #specialty .model06 {
    width: 100%;
    margin: 0 auto 150px;
    position: relative;
    cursor: pointer;
  }

  #specialty .model06 .credit {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  #specialty .model06:hover .credit {
    opacity: 1;
  }

  #specialty .model06 .credit-inner {
    margin: 120px 40px 0 40px;
  }

  #specialty .model06 .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .model06 .credit-inner ul {
    text-align: left;
  }

  #specialty .model06 .credit-inner ul:last-child {
    margin-top: 40px;
  }

  #specialty .model06 .credit-inner h3,
#specialty .model06 .credit-inner p,
#specialty .model06 .credit-inner a,
#specialty .model06 .credit-inner ul,
#specialty .model06 .credit-inner li {
    color: #ffffff !important;
  }

  #specialty .model06 .credit-btn a {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff;
    transition: all 0.3s ease 0s;
  }

  #specialty .model06 .credit-btn a:hover {
    color: #000000 !important;
    background-color: #ffffff;
  }

  #specialty .model07 {
    width: 900px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #specialty .model07 .content-image {
    width: 60%;
  }

  #specialty .model07 .credit {
    width: 40%;
  }

  #specialty .model07 .credit-inner {
    margin-left: 50px;
    text-align: left;
  }

  #specialty .model07 .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .model07 .credit-inner ul:last-child {
    margin-top: 40px;
  }

  #specialty .model08 {
    width: 903px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .model08 .content-image {
    width: 60%;
    order: 2;
  }

  #specialty .model08 .credit {
    width: 40%;
  }

  #specialty .model08 .credit-inner {
    margin-right: 50px;
    text-align: left;
    margin-bottom: 50px;
  }

  #specialty .style01 {
    width: 900px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 78px;
  }

  #specialty .style01 .content-inner {
    width: 50%;
  }

  #specialty .style01 .content-image {
    margin-bottom: 25px;
  }

  #specialty .style01 .credit-inner {
    /* margin-left: 50px; */
    text-align: left;
  }

  #specialty .style02 {
    width: 900px;
    margin: 0 auto 150px;
  }

  #specialty .style02 .content-image {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }

  #specialty .style02 .neck-style {
    width: 33%;
    position: relative;
  }

  #specialty .style02 .neck-style p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #ffffff !important;
  }

  #specialty .style02 .credit-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    text-align: left;
  }

  #specialty .style02 .credit-inner ul {
    width: 50%;
  }

  #specialty .style02 .credit-inner ul:last-child {
    margin-top: 40px;
  }

  #specialty .style02 .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .style03 {
    width: 900px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .style03 .content-image {
    width: 60%;
    order: 2;
  }

  #specialty .style03 .other-style01 {
    position: relative;
    width: 59.37%;
    margin: 0 0 0 120px;
  }

  #specialty .style03 .other-style02 {
    position: relative;
    width: 34.92%;
    margin: 30px 0 0 350px;
  }

  #specialty .style03 .other-style03 {
    position: relative;
    width: 58.44%;
    margin: -200px 0 0 0;
  }

  #specialty .style03 .other-style01 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #000000 !important;
  }

  #specialty .style03 .other-style02 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #ffffff !important;
  }

  #specialty .style03 .other-style03 p {
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 1.4;
    color: #000000 !important;
  }

  #specialty .style03 .credit {
    width: 40%;
    order: 1;
  }

  #specialty .style03 .credit-inner {
    text-align: left;
  }

  #specialty .style03 .credit-inner h3 {
    font-size: 14px;
    font-weight: 900 !important;
    line-height: 2;
    margin-bottom: 15px;
  }

  #specialty .style03 .credit-inner ul:nth-child(n+2) {
    margin-top: 40px;
  }

  #specialty .other01 {
    width: 900px;
    margin: 0 0px 80px 250px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .other01 .content-image {
    width: 47%;
  }

  #specialty .other01 .credit {
    width: 53%;
  }

  #specialty .other01 .credit-inner {
    margin-left: 50px;
    text-align: left;
  }

  #specialty .other02 {
    width: 100%;
    margin: 0 0px 80px 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .other02 .content-image {
    width: 47%;
  }

  #specialty .other02 .credit {
    width: 53%;
  }

  #specialty .other02 .credit-inner {
    margin-left: 50px;
    text-align: left;
  }

  #specialty .other03 {
    width: 900px;
    margin: 0px 0px 150px 135px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #specialty .other03 .content-image {
    width: 47%;
    order: 2;
  }

  #specialty .other03 .credit {
    width: 53%;
    padding-left: 135px;
  }

  #specialty .other03 .credit-inner {
    margin-right: 0;
    text-align: left;
  }

}

/*--SP/PC共通--*/
/* フェードイン */
#specialty .fadeIn {
  opacity: 0;
  transform: translateY(50px);
}

#specialty .fadeIn.active {
  opacity: 1;
  transform: translateY(0);
  transition: all, transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
}

/* 2027 PDFとの配置照合による調整 */
#specialty .main-visual-title {
  z-index: 1;
  margin: 0;
  padding: 0;
  transform: none;
}

#specialty .main-visual-title img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  #specialty .main-visual-title {
    top: 9.07%;
    left: 5.1%;
    width: 18.3%;
  }

}

@media (max-width: 767px) {
  #specialty .main-visual-title {
    top: 13.1%;
    left: 26.53%;
    width: 46.8%;
  }

}

/* PDFの画像内ラベルと対応クレジット */
#specialty .style02 .neck-style p {
  color: #000 !important;
}

#specialty .other01 .content-image,
#specialty .other02 .content-image {
  position: relative;
}

#specialty .occasion-image-label {
  position: absolute;
  z-index: 1;
  color: #000 !important;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  pointer-events: none;
}

#specialty .occasion-credit-label h3 {
  margin: 0 0 15px;
}

#specialty .occasion-credit-label:not(:first-child) {
  margin-top: 25px;
}

/* スマホでGIRL/BOYを同じCREDITボタンから開く・PDFの小物B位置 */
#specialty .occasion-label-black {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

@media (min-width: 768px) {
  #specialty .occasion-boy-b {
    align-items: flex-start;
  }

  #specialty .occasion-boy-b > .credit {
    align-self: flex-start;
  }

  #specialty .occasion-boy-b .credit-inner {
    margin-top: 0;
    padding-top: 0;
  }

}

/* 画像内ラベルの位置：left / top / bottom / right */
#specialty .label-girl-accessory-a {
  left:2.65%;
  top:93%;
}

#specialty .label-girl-accessory-b {
  left:65.15%;
  top:53.3%;
}

#specialty .label-boy-accessory-a {
  right:3%;
  bottom:3%;
}

#specialty .label-boy-accessory-b {
  left:52%;
  top:93.5%;
}

/* PC画像拡大：サイト共通スタイルから独立 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  #specialty .content-image img, #specialty .main-visual-image img { cursor: zoom-in; }
}
#shipskids-zoom {
  position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; border-radius: 0; background: transparent;
  overflow: hidden; box-sizing: border-box; color: #222;
}
#shipskids-zoom:not([open]) { display: none; }
#shipskids-zoom::backdrop {
  background: rgba(0, 0, 0, .72); opacity: 0; transition: opacity .24s ease;
}
#shipskids-zoom.is-visible::backdrop { opacity: 1; }
#shipskids-zoom .shipskids-zoom-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 60px 48px; box-sizing: border-box;
}
#shipskids-zoom img {
  display: block; width: auto; height: auto; margin: 0;
  max-width: min(80vw, 1100px); max-height: 80vh;
  border: 0; border-radius: 0; object-fit: contain;
  opacity: 0; transform: scale(.98); will-change: opacity, transform;
  transition: opacity .24s ease, transform .24s ease;
}
#shipskids-zoom.is-visible img { opacity: 1; transform: scale(1); }
#shipskids-zoom .shipskids-zoom-close {
  appearance: none; position: absolute; top: 16px; right: 24px;
  width: 44px; height: 44px; min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #fff; box-shadow: none;
  font-size: 0; cursor: pointer; opacity: 0; transform: none;
  transition: opacity .24s ease;
}
#shipskids-zoom .shipskids-zoom-close::before,
#shipskids-zoom .shipskids-zoom-close::after {
  content: ''; display: block; position: absolute; top: 21px; left: 12px;
  width: 20px; height: 2px; margin: 0; padding: 0;
  background: #222; border: 0; transform: rotate(45deg);
}
#shipskids-zoom .shipskids-zoom-close::after { transform: rotate(-45deg); }
#shipskids-zoom.is-visible .shipskids-zoom-close { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #shipskids-zoom img, #shipskids-zoom::backdrop,
  #shipskids-zoom .shipskids-zoom-close { transition: none; }
}