@charset "UTF-8";

/* ============================================================
   WORKS（制作サンプル）ページ専用のスタイル

   style.css の約束は守る：
   グラデーションと影は使わない／角丸は使わない／色は紙・墨・深緑
   そのうえで、スクリーンショットを見せる面だけ白を敷いて
   清潔感を出す。白い面と1pxの罫線だけで組み、装飾は足さない。
   ============================================================ */

/* ============================================================
   サンプル1件
   ============================================================ */
.wcard{
  margin-top: var(--sp-6);
  background: #fff;
  border: 1px solid var(--rule);
}

/* ---------------- スクリーンショット ----------------
   パソコン表示を大きく置き、スマホ表示はその右下に重ねる。
   枠の高さはパソコン表示だけで決まるようにして、
   スマホを絶対配置する（並べると右下に大きな余白ができるため）。 */
.wcard__shots{
  position: relative;
  padding: var(--sp-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.wcard__pc{
  position: relative;
  aspect-ratio: 1440 / 900;
  background: #fff;
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.wcard__pc img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.wcard__sp{
  position: relative;
  width: 44%;
  max-width: 200px;
  margin: var(--sp-4) 0 0 auto;
  aspect-ratio: 390 / 844;
  background: #fff;
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.wcard__sp img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* スクリーンショットがまだ無いとき（撮影前）に、割れた画像を見せない */
.wcard__pc.is-missing::after,
.wcard__sp.is-missing::after{
  content: "スクリーンショット準備中";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  font-size: var(--t-xs);
  line-height: 1.8;
  text-align: center;
  color: var(--ink-3);
  background: var(--paper);
}

/* ---------------- 本文 ---------------- */
.wcard__body{ padding: var(--sp-5) var(--sp-4) var(--sp-5); }

.wcard__head{
  padding-bottom: var(--sp-2);
}
.wcard__tag{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.wcard__tag .en{
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0;
}
.wcard__name{
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--ink);
}
.wcard__catch{
  margin: var(--sp-2) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* サイトを見る */
.wcard__cta{
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.wcard__btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .06em;
  transition: background .3s var(--ease);
}
.wcard__btn span{ transition: transform .3s var(--ease); }
.wcard__btn:hover{ background: var(--accent); }
.wcard__btn:hover span{ transform: translateX(4px); }

/* ============================================================
   掲載についてのお断り
   ============================================================ */
.wnote{
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--rule);
}
.wnote__title{
  margin: 0 0 var(--sp-3);
  font-family: var(--en);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}
.wnote__lead{
  margin: 0;
  max-width: 74ch;
  font-size: var(--t-sm);
  line-height: 1.95;
  color: var(--ink-2);
}

/* ============================================================
   最後のご案内
   ============================================================ */
.wend{
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-2);
}
.wend__text{
  margin: 0 0 var(--sp-3);
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: 1.95;
  color: var(--ink-2);
}

/* ============================================================
   画面が広いとき
   ============================================================ */
@media (min-width: 768px) {
  .wcard__shots{ padding: var(--sp-5); }
  .wcard__body{ padding: var(--sp-5); }

  /* スマホ表示をパソコン表示の右下に重ねる */
  .wcard__sp{
    position: absolute;
    right: var(--sp-5);
    bottom: var(--sp-4);
    width: 17%;
    max-width: 230px;
    margin: 0;
    outline: 7px solid var(--paper-2);
  }
}

@media (min-width: 1024px) {
  .wcard__shots{ padding: var(--sp-6); }
  .wcard__body{ padding: var(--sp-6); }
  .wcard__sp{ right: var(--sp-6); bottom: var(--sp-5); width: 16%; }
  .wcard__name{ font-size: 2.1rem; }
}