@charset "utf-8";

/*
***********************************************************
PC
***********************************************************
*/
/* 元画像から抽出した正確なカラーコード */
:root {
  --pink: #f69cb6;
  --teal: #53bba5;
  --orange: #fc5e3f;
  --yellow: #fed300;
  --blue: #116bc7;
  --line-width: 6px;
  /* 元画像の線の太さに合わせた設定 */
}

/* 枠線全体 */
#section-present .custom-frame {
  position: relative;
  display: block;
  max-width: 1050px;
  margin: 0 auto;
}

#section-present .custom-frame.store {
  padding: 50px 90px;
}

#section-present .custom-frame.web {
  padding: 50px 90px 60px;
}

#section-present .custom-frame.web {
  margin-top: var(--size24);
}

/* 各角（使い回しをしない個別のスライス画像） */
#section-present .corner {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

#section-present .type1.top-left {
  top: 0;
  left: 0;
  background-image: url('/campaign/toystory5/images/border/corner1-top-left.webp');
}

#section-present .type1.top-right {
  top: 0;
  right: 0;
  background-image: url('/campaign/toystory5/images/border/corner1-top-right.webp');
}

#section-present .type1.bottom-left {
  bottom: 0;
  left: 0;
  background-image: url('/campaign/toystory5/images/border/corner1-bottom-left.webp');
}

#section-present .type1.bottom-right {
  bottom: 0;
  right: 0;
  background-image: url('/campaign/toystory5/images/border/corner1-bottom-right.webp');
}

#section-present .type2.top-left {
  top: 0;
  left: 0;
  background-image: url('/campaign/toystory5/images/border/corner2-top-left.webp');
}

#section-present .type2.top-right {
  top: 0;
  right: 0;
  background-image: url('/campaign/toystory5/images/border/corner2-top-right.webp');
}

#section-present .type2.bottom-left {
  bottom: 0;
  left: 0;
  background-image: url('/campaign/toystory5/images/border/corner2-bottom-left.webp');
}

#section-present .type2.bottom-right {
  bottom: 0;
  right: 0;
  background-image: url('/campaign/toystory5/images/border/corner2-bottom-right.webp');
}

/* 各辺の配置（接続部を綺麗に覆うため10px重ねる） */
#section-present .edge {
  position: absolute;
  z-index: 2;
}

/* 上辺：左右非対称の比率（1 : 2）で引き伸ばし、ドットを正確に左寄りに配置 */
#section-present .edge.top {
  top: 0;
  left: 30px;
  right: 30px;
  height: 40px;
  /* コーナーの画像のheight */
  display: flex;
  align-items: center;
}

#section-present .edge.top .line.yellow-left {
  flex-grow: 1;
  /* 左側は短め */
  height: var(--line-width);
  background-color: var(--yellow);
  border-radius: 999px;
}

#section-present .edge.top .line.yellow-right {
  flex-grow: 2.5;
  /*  右側を2.5倍長くすることで、ドットが左寄りの位置を維持 */
  height: var(--line-width);
  background-color: var(--yellow);
  border-radius: 999px;
}

#section-present .edge.top .line.teal-left {
  flex-grow: 1;
  /* 左側は短め */
  height: var(--line-width);
  background-color: var(--teal);
  border-radius: 999px;
}

#section-present .edge.top .line.teal-right {
  flex-grow: 2.5;
  /*  右側を2.5倍長くすることで、ドットが左寄りの位置を維持 */
  height: var(--line-width);
  background-color: var(--teal);
  border-radius: 999px;
}

#section-present .edge.top .dots-container {
  width: 24px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 10px;
  flex-shrink: 0;
}

#section-present .edge.top .dots-container.yellow {
  background-image: url('/campaign/toystory5/images/border/dots1-top.webp');
}

#section-present .edge.top .dots-container.teal {
  background-image: url('/campaign/toystory5/images/border/dots2-top.webp');
}

/* 下辺：左右非対称の比率（1 : 1.1）で引き伸ばし、ドットをわずかに左寄りに配置 */
#section-present .edge.bottom {
  bottom: 10px;
  /*  */
  left: 30px;
  right: 30px;
  height: 20px;
  /* コーナーの画像のheight / 2 */
  display: flex;
  align-items: center;
}

#section-present .edge.bottom .line.orange-left {
  flex-grow: 1;
  height: var(--line-width);
  background-color: var(--orange);
  border-radius: 999px;
}

#section-present .edge.bottom .line.orange-right {
  flex-grow: 1.1;
  /* 右側を少し長めにする */
  height: var(--line-width);
  background-color: var(--orange);
  border-radius: 999px;
}

#section-present .edge.bottom .line.blue-left {
  flex-grow: 1;
  height: var(--line-width);
  background-color: var(--blue);
  border-radius: 999px;
}

#section-present .edge.bottom .line.blue-right {
  flex-grow: 1.1;
  /* 右側を少し長めにする */
  height: var(--line-width);
  background-color: var(--blue);
  border-radius: 999px;
}

#section-present .edge.bottom .dots-container {
  width: 24px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 10px;
  flex-shrink: 0;
}

#section-present .edge.bottom .dots-container.orange {
  background-image: url('/campaign/toystory5/images/border/dots1-bottom.webp');
}

#section-present .edge.bottom .dots-container.blue {
  background-image: url('/campaign/toystory5/images/border/dots2-bottom.webp');
}

/* */
/* */
/* 左辺：全体の高さに対して約22%の位置に常に隙間がくる比率 */
/* */
/* */
#section-present .edge.left {
  left: 8px;
  /**/
  top: 30px;
  bottom: 30px;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* */
/* 左辺　上 */
/* */
#section-present .left-yellow-container {
  height: 42%;
  /* 全体の高さに対して常に約42%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-present .line.yellow-vertical {
  flex-grow: 1;
  width: var(--line-width);
  background-color: var(--yellow);
  border-radius: 999px;
}

#section-present .cap.yellow-cap {
  width: var(--line-width);
  height: 6px;
  flex-shrink: 0;
}

#section-present .left-teal-container {
  height: 22%;
  /* 全体の高さに対して常に約22%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-present .line.teal-vertical {
  flex-grow: 1;
  width: var(--line-width);
  background-color: var(--teal);
  border-radius: 999px;
}

#section-present .cap.teal-cap {
  width: var(--line-width);
  height: 6px;
  flex-shrink: 0;
}

#section-present .edge.left .gap {
  height: 8px;
  flex-shrink: 0;
}

/* */
/* 左辺　下 */
/* */
#section-present .left-orange-container {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-present .cap.orange-cap {
  width: var(--line-width);
  height: 6px;
  flex-shrink: 0;
}

#section-present .line.orange-vertical {
  flex-grow: 1;
  width: var(--line-width);
  background-color: var(--orange);
  border-radius: 999px;
}

/* */
/* 左辺　下 */
/* */
#section-present .left-blue-container {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-present .cap.blue-cap {
  width: var(--line-width);
  height: 6px;
  flex-shrink: 0;
}

#section-present .line.blue-vertical {
  flex-grow: 1;
  width: var(--line-width);
  background-color: var(--blue);
  border-radius: 999px;
}

/* */
/* */
/* 右辺：全体の高さに対して約55%の位置に常に隙間がくる比率 */
/* */
/* */
#section-present .edge.right {
  right: 9px;
  /*  */
  top: 30px;
  bottom: 30px;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* */
/* 右辺　上 */
/* */
#section-present .right-yellow-container {
  height: 65%;
  /* 全体の高さに対して約65%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* */
/* 右辺　下 */
/* */
#section-present .right-orange-container {
  height: 30%;
  /* 全体の高さに対して約30%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* */
/* 右辺　上 */
/* */
#section-present .right-teal-container {
  height: 85%;
  /* 全体の高さに対して約85%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* */
/* 右辺　下 */
/* */
#section-present .right-blue-container {
  height: 55%;
  /* 全体の高さに対して約55%の比率を維持 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-present .edge.right .gap {
  height: 12px;
  flex-shrink: 0;
}

/* -------------------------------------------
        カード外側のスタイル（実線）
------------------------------------------- */
#section-present .mint-card-outer {
  width: 100%;
  max-width: 870px;
  /* PC等で表示する際の最大横幅 */
  background-color: #ffffff;
  /* 内側の背景色 */
  border: 3px solid #5ec4af;
  border-radius: 28px;
  /* 外側の角丸 */
  padding: 8px;
  /* 外枠と内枠の間隔 */
  box-sizing: border-box;
  margin: 0 auto;
}

#section-present .mint-card-outer.blue {
  border: 3px solid #126BC5;
}

/* -------------------------------------------
    カード内側のスタイル（点線）
------------------------------------------- */
#section-present .mint-card-inner {
  position: relative;
  border-radius: 20px;
  /* 内側の角丸（外側との隙間を考慮した数値） */
  /* 2026-06-02: padding-left/rightをclamp()で可変に修正（画面幅1000px→480pxで40px→15pxに滑らかに変化） */
  padding: 24px clamp(15px, calc(5px + (100vw - 480px) * 25 / 520), 40px);
  /* 左右パディングは画面幅に応じて40px→15pxに可変（480px以下で15px固定） */
  z-index: 1;
  /* テキストをSVGの手前に表示するため */
  /*
    指定内容の解説
    stroke='%235ec4af': カラーコード #5ec4af をURL用にエンコードした指定です（# を %23 に変換しています）。
    stroke-width='2': ドットの直径（2px）です。
    stroke-linecap='round': 点線の端を丸めることで、長さ0の点線を正円のドットに変換しています[2]。
    stroke-dasharray='0, 12': 点の長さ（0px）と、次の点の中心までの距離（12px）を指定しています。ドットの直径が2px（半径1pxずつ両側に広がる）であるため、実質的な隙間は 12px - 2px = 10px となります。
    x='1' y='1' width='calc(100% - 2px)'...: 線自体の幅（太さ2px）の半分（1px）だけ内側に描画することで、ドットの端がカードの外枠からはみ出して欠けてしまうのを防いでいます。
    rx='19' ry='19': 1px内側に寄せた枠線に合わせて、角丸（20px）のカーブがきれいに重なるよう、わずかに縮小した「19」を指定しています。
    */
  /* ズレを防ぐために pathLength を指定したSVG背景
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3e%3crect x='1' y='1' width='calc(100%25 - 2px)' height='calc(100%25 - 2px)' rx='19' ry='19' fill='none' stroke='%235ec4af' stroke-width='2' pathLength='1269' stroke-dasharray='0%2c 9' stroke-linecap='round'/%3e%3c/svg%3e");
    */
}

#section-present .card-border {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  z-index: -1;
  /* テキストの後ろに回り込ませる */
  pointer-events: none;
  /* テキスト選択などの邪魔をしない */
  overflow: visible;
  /* 必須：ドットの外側が削れるのを防ぎます */
}

#section-present .card-border rect {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width: 768px) {
  #section-present .custom-frame.store {
    padding: 50px 44px;
  }

  #section-present .custom-frame.web {
    padding: 50px 44px;
  }

  #section-present .right-orange-container {
    height: 40%;
  }

  /* 上辺 */
  #section-present .edge.top .line.yellow-left {
    flex-grow: 1;
  }

  #section-present .edge.top .line.yellow-right {
    flex-grow: 3.5;
  }

  #section-present .edge.top .line.teal-left {
    flex-grow: 1;
  }

  #section-present .edge.top .line.teal-right {
    flex-grow: 3.5;
    /*  右側を3.5倍長く */
  }

  /* 底辺 */
  #section-present .edge.bottom .line.orange-left {
    flex-grow: 1.2;
    /* 左側を少し長めにする */
  }

  #section-present .edge.bottom .line.orange-right {
    flex-grow: 1;
  }

  #section-present .edge.bottom .line.blue-left {
    flex-grow: 1.2;
    /* 左側を少し長めにする */
  }

  #section-present .edge.bottom .line.blue-right {
    flex-grow: 1;
  }
}

@media (max-width: 480px) {
  #section-present .mint-card-outer {
    border-radius: 20px;
    /* 画面が狭いときは角丸を少し小さく */
    padding: 6px;
    /* 外枠と内枠の間隔を狭く調整 */
  }
}