@charset "UTF-8";
/* ==========================================================================
   商品開発の仕事とは？ ― 干支の置物『金運黄金大明神(神羊)』ができるまで
   --------------------------------------------------------------------------
   ・ラッパー : #product_development（すべてのセレクタはこのIDから開始）
   ・PC       : min-width: 768px（コンテンツ幅 925px 想定）
   ・SP       : max-width: 767px
   ・クラス接頭辞 : pd-
   ========================================================================== */


/* ==========================================================================
   0. 既存CSSの影響を打ち消すリセット
   ========================================================================== */
#product_development,
#product_development *,
#product_development *::before,
#product_development *::after {
  box-sizing: border-box;
}

#product_development h2,
#product_development h3,
#product_development p,
#product_development ol,
#product_development li,
#product_development figure,
#product_development picture,
#product_development img,
#product_development span,
#product_development div {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-style: normal;
  text-indent: 0;
  text-transform: none;
  float: none;
}

#product_development h2::before,
#product_development h2::after,
#product_development h3::before,
#product_development h3::after,
#product_development li::before,
#product_development li::after,
#product_development p::before,
#product_development p::after {
  content: none;
  display: none;
}

#product_development ol,
#product_development li {
  list-style: none;
}

#product_development img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* ==========================================================================
   1. ベース（PC / SP 共通）
   ========================================================================== */
#product_development {
  --pd-gold: #c08b25;
  --pd-line: #c0913a;
  --pd-cream: #faf6eb;
  --pd-yellow: #fef5d4;
  --pd-brown: #4a3424;
  --pd-text: #3b3530;
  --pd-sub: #7d6d5b;
  --pd-accent: #b7883d;
  --pd-badge-bg: #fde8a7;
  --pd-badge-text: #86642c;
  --pd-serif: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "HGS明朝E", "MS P明朝", serif;
  --pd-sans: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;

  position: relative;
  width: 100%;
  max-width: 925px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--pd-cream);
  color: var(--pd-text);
  font-family: var(--pd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* 読み上げ・SEO用（視覚的には非表示） */
#product_development .pd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- メインビジュアル --- */
#product_development .pd-hero {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#product_development .pd-hero img {
  width: 100%;
}

/* --- フロー全体 --- */
#product_development .pd-flow {
  position: relative;
}

/* --- START / GOAL --- */
#product_development .pd-milestone {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7a94b 0%, #c38f2d 55%, #b27e1e 100%);
  color: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
}

/* --- 時間軸（縦線） --- */
#product_development .pd-steps {
  position: relative;
}

#product_development .pd-steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 3px;
  background: var(--pd-line);
}

/* --- 各ステップ --- */
#product_development .pd-step {
  position: relative;
}

#product_development .pd-step--band {
  background: var(--pd-yellow);
}

#product_development .pd-step__lead {
  margin: 0 0 4px;
  color: var(--pd-sub);
  font-family: var(--pd-serif);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
}

#product_development .pd-step__head {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 14px;
}

/* 時間軸上のドット */
#product_development .pd-step__head::before {
  content: "";
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: var(--pd-gold);
}

#product_development .pd-step__title {
  margin: 0;
  padding: 0;
  color: var(--pd-brown);
  font-family: var(--pd-serif);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
}

#product_development .pd-step__text {
  margin: 0;
  color: var(--pd-text);
  text-align: justify;
}

#product_development .pd-step__media {
  margin: 0;
}

/* --- 期間バッジ --- */
#product_development .pd-badge {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--pd-badge-bg);
  box-shadow: 0 0 8px 3px rgba(253, 226, 150, .8);
  color: var(--pd-badge-text);
  font-family: var(--pd-sans);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}

/* --- コラム（吹き出し） --- */
#product_development .pd-column {
  position: relative;
}

#product_development .pd-column__main {
  width: 110%;
}

/* --- 商品完成 --- */
#product_development .pd-complete {
  position: relative;
  z-index: 2;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .96) 90%, rgba(255, 255, 255, 0) 100%);
}

#product_development .pd-complete__inner {
  display: inline-block;
  text-align: left;
}

#product_development .pd-complete__head {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}

#product_development .pd-complete__title {
  margin: 0;
  padding: 0;
  color: var(--pd-accent);
  font-family: var(--pd-serif);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
}

#product_development .pd-complete__text {
  margin: 0;
  color: var(--pd-text);
}

/* --- GOAL下の点線 --- */
#product_development .pd-dots {
  width: 8px;
  height: 42px;
  background: radial-gradient(circle, var(--pd-gold) 3.5px, transparent 4px) center top / 8px 14px repeat-y;
}

/* --- 広告展開による販売へ --- */
#product_development .pd-promo {
  position: relative;
  overflow: hidden;
  background: #f4ecd6 url("https://www.suishowin.co.jp/wordpress/wp-content/themes/suishowin/images/recruit/bg.jpg") center / cover no-repeat;
}

#product_development .pd-promo__title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #fff;
  color: var(--pd-brown);
  font-family: var(--pd-serif);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
}

#product_development .pd-promo__visual {
  position: relative;
}

#product_development .pd-promo__gold {
  position: absolute;
  z-index: 1;
}

#product_development .pd-promo__magazine {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   2. PC（min-width: 768px）
   ========================================================================== */
@media screen and (min-width: 768px) {

  /* --- START / GOAL --- */
  #product_development .pd-milestone {
    width: 96px;
    height: 96px;
    font-size: 18px;
  }

  #product_development .pd-milestone--start {
    margin: -59px auto 0;
  }

  #product_development .pd-milestone--goal {
    margin: -20px auto 0;
  }

  /* --- 時間軸：中央 --- */
  #product_development .pd-steps {
    padding: 22px 0 0;
  }

  #product_development .pd-steps--after {
    padding: 0;
  }

  #product_development .pd-steps::before {
    left: 50%;
    margin-left: -1.5px;
  }

  /* --- ステップ：2カラム --- */
  #product_development .pd-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  #product_development .pd-step__media {
    display: flex;
    justify-content: center;
    grid-row: 1;
  }

  #product_development .pd-step__body {
    grid-row: 1;
  }

  /* 写真が左・テキストが右 */
  #product_development .pd-step--media-left .pd-step__media {
    grid-column: 1;
  }

  #product_development .pd-step--media-left .pd-step__body {
    grid-column: 2;
    padding: 0 86px 0 37px;
  }

  #product_development .pd-step--media-left .pd-step__head::before {
    left: -51px; /* 37px（余白）+ 14px（ドット半径） */
  }

  /* テキストが左・写真が右 */
  #product_development .pd-step--media-right .pd-step__body {
    grid-column: 1;
    padding: 0 37px 0 60px;
  }

  #product_development .pd-step--media-right .pd-step__media {
    grid-column: 2;
  }

  #product_development .pd-step--media-right .pd-step__head {
    justify-content: space-between;
  }

  #product_development .pd-step--media-right .pd-step__head::before {
    right: -51px; /* 37px（余白）+ 14px（ドット半径） */
  }

  #product_development .pd-step__head::before {
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }

  #product_development .pd-step__lead {
    font-size: 13px;
  }

  #product_development .pd-step__title {
    font-size: 24px;
  }

  #product_development .pd-step__text {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .12em;
  }

  #product_development .pd-badge {
    min-width: 112px;
    margin-left: 12px;
    padding: 4px 16px;
    font-size: 17px;
  }

  /* --- 各ステップの余白調整 --- */
  #product_development .pd-step--planning {
    align-items: start;
    padding: 25px 0 32px;
  }

  #product_development .pd-step--planning .pd-step__body {
    padding-top: 18px;
  }

  #product_development .pd-step--brushup {
    align-items: start;
    padding: 31px 0 37px;
  }

  #product_development .pd-step--brushup .pd-step__body {
    padding-top: 15px;
  }

  #product_development .pd-step--brushup .pd-step__media {
    justify-content: flex-start;
  }

  #product_development .pd-step--sample {
    align-items: start;
    padding: 37px 0 0;
  }

  #product_development .pd-step--sample .pd-step__body {
    padding-top: 9px;
  }

  /* サンプル画像の下端は「商品完成」の楕円に少し重ねる（時間軸は楕円の手前で止める） */
  #product_development .pd-step--sample {
    margin-bottom: -30px;
  }

  #product_development .pd-step--sample .pd-step__media {
    position: relative;
    z-index: 3;
  }

  #product_development .pd-step--prayer {
    align-items: start;
    padding: 34px 0 0;
  }

  #product_development .pd-step--prayer .pd-step__body {
    padding-top: 4px;
  }

  /* --- コラム --- */
  #product_development .pd-column {
    padding-left: 2px;
  }

  #product_development .pd-column__main {
    max-width: 452px;
  }

  #product_development .pd-column__trail {
    position: absolute;
    top: 172px;
    left: -101px;
    width: 86px;
  }

  /* --- 商品完成 --- */
  #product_development .pd-complete {
    width: 560px;
    max-width: 100%;
    min-height: 220px;
    margin: 0 auto;
    padding: 46px 40px;
    text-align: center;
  }

  #product_development .pd-complete__head .pd-badge {
    margin: 0 22px 0 0;
  }

  #product_development .pd-complete__title {
    font-size: 26px;
  }

  #product_development .pd-complete__text {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .12em;
  }

  /* --- GOAL下の点線 --- */
  #product_development .pd-dots {
    margin: 8px auto 14px;
  }

  /* --- 広告展開による販売へ --- */
  #product_development .pd-promo {
    height: 237px;
  }

  #product_development .pd-promo__title {
    position: absolute;
    top: 58px;
    left: 6.6%;   /* 925px時 61px */
    width: 40.3%; /* 925px時 373px */
    height: 61px;
    font-size: 22px;
    font-weight: 500;
  }

  #product_development .pd-promo__visual {
    position: absolute;
    top: -3px;
    right: 1.5%;  /* 925px時 14px */
    width: 57.3%; /* 925px時 530px */
  }

  #product_development .pd-promo__gold {
    top: 0;
    right: 1.1%;
    width: 51%;   /* 925px時 270px */
  }

  #product_development .pd-promo__magazine {
    width: 100%;
  }
}

/* PCでコンテンツ幅が925pxより狭くなった場合の保険 */
@media screen and (min-width: 768px) and (max-width: 924px) {
  #product_development .pd-column__trail {
    display: none;
  }
}


/* ==========================================================================
   3. SP（max-width: 767px）
   時間軸を左寄せにし、右側にコンテンツを縦並び
   ========================================================================== */
@media screen and (max-width: 767px) {

  /* 時間軸の位置（左端からの距離）・コンテンツ開始位置 */
  #product_development {
    --pd-axis: 34px;
    --pd-content: 64px;
    --pd-dot: 18px;
  }

  /* --- START / GOAL --- */
  #product_development .pd-milestone {
    width: 56px;
    height: 56px;
    font-size: 12px;
  }

  #product_development .pd-milestone--start {
    margin: -28px 0 0 calc(var(--pd-axis) - 28px);
  }

  #product_development .pd-milestone--goal {
    margin: 0 0 0 calc(var(--pd-axis) - 28px);
  }

  /* --- 時間軸：左寄せ --- */
  #product_development .pd-steps {
    padding: 16px 0 0;
  }

  #product_development .pd-steps--after {
    padding: 0;
  }

  #product_development .pd-steps::before {
    left: var(--pd-axis);
    margin-left: -1.5px;
  }

  /* --- ステップ：縦並び --- */
  #product_development .pd-step {
    display: block;
    padding: 30px 16px 32px var(--pd-content);
  }

  #product_development .pd-step__head {
    flex-wrap: wrap;
    margin: 0 0 12px;
  }

  #product_development .pd-step__head::before {
    top: 5px; /* 見出し1行目の中央に合わせる */
    left: calc(var(--pd-axis) - var(--pd-content) - var(--pd-dot) / 2);
    width: var(--pd-dot);
    height: var(--pd-dot);
  }

  #product_development .pd-step__lead {
    font-size: 12px;
  }

  #product_development .pd-step__title {
    font-size: 20px;
  }

  #product_development .pd-step__text {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: .04em;
  }

  #product_development .pd-step__media {
    margin-top: 18px;
  }

  #product_development .pd-badge {
    margin: 2px 0 2px 12px;
    padding: 2px 14px;
    font-size: 13px;
  }

  /* --- コラム --- */
  #product_development .pd-column__trail {
    width: 56px;
    margin: 0 0 -6px 24px;
  }

  #product_development .pd-column__main {
    max-width: 452px;
  }

  #product_development .pd-step--sample .pd-step__media img {
    margin: 0 auto;
  }

  #product_development .pd-step--prayer {
    padding-bottom: 24px;
  }

  /* --- 商品完成（SPは時間軸を途切れさせずドットを置く） --- */
  #product_development .pd-complete {
    z-index: auto;
    padding: 44px 16px 44px var(--pd-content);
  }

  #product_development .pd-complete::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pd-axis);
    z-index: 1;
    width: 3px;
    margin-left: -1.5px;
    background: var(--pd-line);
  }

  #product_development .pd-complete__head {
    flex-wrap: wrap;
  }

  #product_development .pd-complete__head::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--pd-axis) - var(--pd-content) - var(--pd-dot) / 2);
    z-index: 2;
    width: var(--pd-dot);
    height: var(--pd-dot);
    margin-top: calc(var(--pd-dot) / -2);
    border-radius: 50%;
    background: var(--pd-gold);
  }

  #product_development .pd-complete__head .pd-badge {
    order: 2;
  }

  #product_development .pd-complete__title {
    order: 1;
    font-size: 22px;
  }

  #product_development .pd-complete__text {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: .04em;
  }

  #product_development .pd-complete__text br {
    display: none;
  }

  /* --- GOAL下の点線 --- */
  #product_development .pd-dots {
    margin: 8px 0 14px calc(var(--pd-axis) - 4px);
  }

  /* --- 広告展開による販売へ --- */
  #product_development .pd-promo {
    padding: 32px 16px 0;
  }

  #product_development .pd-promo__title {
    width: 100%;
    padding: 14px 10px;
    font-size: 19px;
  }

  #product_development .pd-promo__visual {
    width: 100%;
    max-width: 476px;
    margin: 22px auto 0;
  }

  #product_development .pd-promo__gold {
    top: -12%;
    right: -4%;
    width: 52%;
  }

  #product_development .pd-promo__magazine {
    width: 100%;
  }
}