@charset "utf-8";

/* common ----------*/
body { }
main {
/*  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif;*/
  font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height:1.6;
  font-size: var(--font-size-base);
}
section { margin: 0; }

div:after,ul:after { display:none; }
p { margin:0; }

.breadcrumbs { color: #fff; margin-bottom: 10px; }
.breadcrumbs a { color: #fff; }

.inner { max-width:124rem; width:100%; padding:0 2rem; margin:0 auto; }

#pageup { width:5rem; }
#pageup .inner { padding:0; }

/* =========================================
   レザーストラップ作りワークショップ LP
   ========================================= */

/* slide (line.htmlと同様slickを使用) */
.ws .slick-dots { margin-top:1rem; position:initial; }
.ws .slick-dots li { padding:0!important; text-align:center; width:auto; height:auto; }
.ws .slick-dots li button { width:1.5rem; height:1.5rem; background:#c9bda9; border-radius:50%; }
.ws .slick-dots li.slick-active button { background:#5a3d24; margin:0 auto; }
.ws .slick-dots li button:before { content:""; display:none; }

/* common */
.ws div:after, .ws ul:after { display:none; }
.ws .inner { max-width:104rem; width:100%; padding:0 2rem; margin:0 auto; }
.ws { color:#3a2c1e; }
.ws .pc-only { display:inline!important; }
.ws .sp-only { display:none!important; }
.ws section { margin-top:6rem; }
.ws section:last-child { margin-bottom:10rem; }

.ws .title {
  position:relative;
  border-bottom:solid 1px #a98d6b;
  padding:0 0 1.2rem 2rem;
  display:flex;
  align-items:center;
  font-weight:bold;
  font-size:2.4rem;
  line-height:1.4;
  color:#4a3218;
}
.ws .title:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:calc(100% - 1.2rem);
  width:0.8rem;
  background:#5a3d24;
}

/* ---------- MV ---------- */
#ws-mv { margin-top:0; padding-top:10rem; } /* ★固定ヘッダーとMV画像の重なり回避（PC）：ヘッダー高さ分の余白。ヘッダー高さが変わったらこの値を調整 */
#ws-mv .inner { padding:0; max-width:120rem; }
#ws-mv picture { display:block; }
#ws-mv picture img { display:block; width:100%; height:auto!important; max-height:none!important; object-fit:contain!important; } /* ★サイト共通CSSのimg高さ・object-fit指定を打ち消し、MV画像を元比率で全体表示（トリミング防止） */
#ws-mv .lead { max-width:100rem; margin:4rem auto 0; padding:0 2rem; text-align:center; }
#ws-mv .maincopy {
  font-size:3.2rem;
  font-weight:bold;
  line-height:1.5;
  color:#4a3218;
  letter-spacing:0.04em;
}
#ws-mv .subcopy { margin-top:2rem; font-size:1.6rem; line-height:2; text-align:center; }

#ws-mv .fv-info {
  max-width:60rem;
  margin:3.5rem auto 0;
  text-align:left;
  border:solid 1px #cbb595;
  background:#fbf7f0;
  padding:2.5rem 3rem;
}
#ws-mv .fv-info li { font-size:1.5rem; line-height:1.9; padding:0.4rem 0; border-bottom:dashed 1px #ddd0bb; }
#ws-mv .fv-info li:last-child { border-bottom:none; }
#ws-mv .fv-info li .lb {
  display:inline-block;
  min-width:6em;
  font-weight:bold;
  color:#5a3d24;
  margin-right:0.5em;
}
#ws-mv .fv-limited {
  margin:3rem auto 0;
  display:inline-block;
  border-bottom: solid 1px #5a3d24;
  border-top: solid 1px #5a3d24;
  color:#5a3d24;
  font-weight:bold;
  font-size:1.8rem;
  padding:1.2rem 3rem;
  letter-spacing:0.05em;
}

/* CTAボタン共通 */
.ws .fv-btn { max-width:38rem; width:100%; margin:3.5rem auto 0; }
.ws .fv-btn a,
#ws-push .btn a,
#ws-support .btn a {
  display:block;
  background:#5a3d24;
  color:#fff;
  font-size:1.9rem;
  font-weight:bold;
  text-align:center;
  line-height:1.4;
  padding:1.6rem 1rem;
  border-radius:0.4rem;
  border:solid 2px #5a3d24;
  transition:.2s;
}
.ws .fv-btn a:hover,
#ws-push .btn a:hover {
  background:#fff;
  color:#5a3d24;
}

/* ---------- movie ---------- */
#ws-movie .movie { max-width:80rem; width:100%; margin:0 auto; position:relative; padding-bottom:56.25%; }
#ws-movie .movie iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; border-radius:0.4rem; }
@supports (aspect-ratio: 16 / 9) {
  #ws-movie .movie { padding-bottom:0; aspect-ratio:16 / 9; }
  #ws-movie .movie iframe { position:static; }
}

/* ---------- intro ---------- */
#ws-intro .scrap { max-width:64rem; width:100%; margin:0 auto 3.5rem; }
#ws-intro .scrap img { width:100%; height:auto; border-radius:0.4rem; }
#ws-intro .txt { margin-top:2.5rem; font-size:1.6rem; line-height:2; }
#ws-intro .txt p { margin-top:1.5rem; }
#ws-intro .txt p:first-child { margin-top:0; }

/* ---------- item ---------- */
#ws-item ul.photos { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; margin-top:3rem; }
#ws-item ul.photos > li { width:calc((100% - 2rem) / 2); }
#ws-item ul.photos > li:first-child { width:100%; }
#ws-item ul.photos > li img { width:100%; border-radius:0.4rem; }
#ws-item .detail { margin-top:3rem; }
#ws-item .detail p.tx { font-size:1.5rem; line-height:1.9; }
#ws-item .detail p.tx + ul.photos2 { margin-top:2.5rem; }
#ws-item .detail ul.photos2 + p.tx { margin-top:2.5rem; }
#ws-item ul.photos2 { display:flex; justify-content:space-between; gap:2rem; }
#ws-item ul.photos2 > li { width:calc((100% - 2rem) / 2); }
#ws-item ul.photos2 > li img { width:100%; border-radius:0.4rem; }
#ws-item ul.point { margin-top:2.5rem; }
#ws-item ul.point li {
  position:relative;
  padding:0.8rem 0 0.8rem 2.4rem;
  font-size:1.5rem;
  font-weight:bold;
  border-bottom:dashed 1px #ddd0bb;
}
#ws-item ul.point li:before {
  content:"";
  position:absolute;
  left:0.2rem;
  top:1.3rem;
  width:1rem;
  height:1rem;
  background:#8a6a44;
  border-radius:50%;
}

/* ---------- step ---------- */
#ws-step ul.steps { display:flex; justify-content:space-between; margin-top:3rem; }
#ws-step ul.steps > li { width:23%; }
#ws-step .ph img { width:100%; border-radius:0.4rem; }
#ws-step .st {
  margin-top:1.5rem;
  font-weight:bold;
  color:#8a6a44;
  font-size:1.4rem;
  letter-spacing:0.08em;
}
#ws-step .sh {
  font-weight:bold;
  font-size:1.8rem;
  color:#4a3218;
  margin-top:0.3rem;
  padding-bottom:0.8rem;
  border-bottom:solid 1px #cbb595;
}
#ws-step .sx { margin-top:1.2rem; font-size:1.4rem; line-height:1.8; }

/* ---------- outline ---------- */
#ws-outline table.ov { width:100%; margin-top:3rem; border-collapse:collapse; font-size:1.5rem; }
#ws-outline table.ov th,
#ws-outline table.ov td { border:solid 1px #cbb595; padding:1.4rem 1.8rem; text-align:left; line-height:1.7; vertical-align:middle; }
#ws-outline table.ov th { width:24%; background:#f3ece0; font-weight:bold; color:#4a3218; white-space:nowrap; }

/* ---------- recommend ---------- */
#ws-recommend ul.rec { display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:3rem; }
#ws-recommend ul.rec > li {
  width:48.5%;
  background:#fbf7f0;
  border:solid 1px #cbb595;
  border-radius:0.4rem;
  padding:2.5rem;
  margin-bottom:2.5rem;
}
#ws-recommend .rh {
  font-weight:bold;
  font-size:1.8rem;
  color:#5a3d24;
  padding-bottom:1rem;
  margin-bottom:1rem;
  border-bottom:solid 1px #ddd0bb;
}
#ws-recommend .rx { font-size:1.5rem; line-height:1.9; }

/* ---------- support ---------- */
#ws-support .wrap { position:relative; border:solid 3px #a98d6b; padding:5rem 4rem 4rem; background:#fbf7f0; }
#ws-support .wrap .tt {
  position:absolute;
  top:-2rem;
  left:50%;
  transform:translateX(-50%);
  background:#5a3d24;
  color:#fff;
  font-weight:bold;
  font-size:2rem;
  line-height:4rem;
  padding:0 3rem;
  border-radius:0.4rem;
  white-space:nowrap;
}
#ws-support .wrap .tx { font-size:1.6rem; line-height:2; text-align:center; }
#ws-support ul.tag { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2.5rem; }
#ws-support ul.tag li {
  background:#fff;
  border:solid 1px #8a6a44;
  color:#5a3d24;
  font-weight:bold;
  font-size:1.4rem;
  padding:0.6rem 1.6rem;
  border-radius:2rem;
}

/* ---------- access ---------- */
#ws-access .wrap { position:relative; border:solid 3px #a98d6b; padding:5rem 4rem 4rem; background:#fbf7f0; }
#ws-access .wrap .tt {
  position:absolute;
  top:-2rem;
  left:50%;
  transform:translateX(-50%);
  background:#5a3d24;
  color:#fff;
  font-weight:bold;
  font-size:2rem;
  line-height:4rem;
  padding:0 3rem;
  border-radius:0.4rem;
  white-space:nowrap;
}
#ws-access .flb { display:flex; justify-content:space-between; align-items:stretch; gap:3rem; }
#ws-access .map { width:55%; }
#ws-access .map iframe { width:100%; height:100%; min-height:32rem; border-radius:0.4rem; display:block; }
#ws-access .info { width:45%; }
#ws-access .info ul li {
  font-size:1.5rem;
  line-height:1.8;
  padding:1.2rem 0;
  border-bottom:dashed 1px #ddd0bb;
}
#ws-access .info ul li:last-child { border-bottom:none; }
#ws-access .info ul li .lb {
  display:block;
  font-weight:bold;
  color:#5a3d24;
  margin-bottom:0.3rem;
}

/* ---------- push ---------- */
#ws-push .box {
  background:#5a3d24;
  color:#fff;
  text-align:center;
  padding:5rem 3rem;
  border-radius:0.6rem;
}
#ws-push .ph { font-size:2.6rem; font-weight:bold; letter-spacing:0.04em; }
#ws-push .px { margin-top:2rem; font-size:1.6rem; line-height:2; }
#ws-push .btn { max-width:40rem; width:100%; margin:3rem auto 0; }
#ws-push .btn a {
  background:#fff;
  color:#5a3d24;
  border-color:#fff;
}
#ws-push .btn a:hover { background:#e9d9c2; }

/* ---------- faq ---------- */
#ws-faq dl.faq { margin-top:3rem; }
#ws-faq dl.faq dt {
  position:relative;
  font-weight:bold;
  font-size:1.6rem;
  color:#4a3218;
  padding:1.6rem 0 1.6rem 3.5rem;
  border-top:solid 1px #cbb595;
}
#ws-faq dl.faq dt:before {
  content:"Q";
  position:absolute;
  left:0;
  top:1.3rem;
  width:2.4rem;
  height:2.4rem;
  line-height:2.4rem;
  text-align:center;
  background:#5a3d24;
  color:#fff;
  border-radius:50%;
  font-size:1.4rem;
}
#ws-faq dl.faq dt.fst { border-top: none; }
#ws-faq dl.faq dd {
  position:relative;
  font-size:1.5rem;
  line-height:1.9;
  padding:0 0 1.8rem 3.5rem;
}
#ws-faq dl.faq dd:before {
  content:"A";
  position:absolute;
  left:0;
  top:0;
  width:2.4rem;
  height:2.4rem;
  line-height:2.4rem;
  text-align:center;
  background:#a98d6b;
  color:#fff;
  border-radius:50%;
  font-size:1.4rem;
}

/* ---------- form ---------- */
#ws-form .formlead { margin-top:2.5rem; font-size:1.6rem; line-height:1.9; text-align:center; }
#ws-form .formarea {
  margin-top:3rem;
  border:solid 1px #cbb595;
  background:#fbf7f0;
  padding:3rem;
}
#ws-form .formnote { font-size:1.4rem; line-height:1.8; color:#8a6a44; }
#ws-form ul.formfields { margin-top:2rem; }
#ws-form ul.formfields li {
  font-size:1.5rem;
  padding:1rem 0;
  border-bottom:dashed 1px #ddd0bb;
}
#ws-form ul.formfields li:last-child { border-bottom:none; }
#ws-form .req, #ws-form .any {
  display:inline-block;
  min-width:4em;
  text-align:center;
  color:#fff;
  font-size:1.2rem;
  font-weight:bold;
  padding:0.2rem 0.6rem;
  margin-right:1rem;
  border-radius:0.3rem;
}
#ws-form .req { background:#b1533f; }
#ws-form .any { background:#a98d6b; }

/* =========================================
   レスポンシブ
   ========================================= */
@media screen and (max-width:900px){
  .ws .title { font-size:2rem; }
  #ws-mv .maincopy { font-size:2.6rem; }

  #ws-step ul.steps { flex-wrap:wrap; }
  #ws-step ul.steps > li { width:48%; margin-bottom:3rem; }
}

@media screen and (max-width:600px){
  /* SP時、親コンテナが細く残るのを防ぎ画面幅いっぱいに広げる */
  .ws, .main_inner.ws { width:100%; max-width:100%; margin:0 auto; }
  .ws .inner { max-width:100%; width:100%; padding:0 1.5rem; box-sizing:border-box; }
  /* MVのleadは.innerと二重paddingになるので内側paddingを解除し全幅化 */
  #ws-mv .lead { max-width:100%; width:100%; padding:0; box-sizing:border-box; }
  #ws-mv .subcopy,
  #ws-intro .txt,
  #ws-item .detail,
  #ws-recommend ul.rec > li { width:100%; max-width:100%; box-sizing:border-box; }

  .ws .pc-only { display:none!important; }
  .ws .sp-only { display:inline!important; }
  .ws section { margin-top:4.5rem; }
  .ws section:last-child { margin-bottom:10rem; }
  .ws .title { font-size:1.8rem; padding-left:1.6rem; }
  .ws .title:before { width:0.6rem; }

  #ws-mv { padding-top:9rem; } /* ★固定ヘッダーとMV画像の重なり回避（SP）：ヘッダー高さ8rem＋余裕1rem */
  #ws-mv .lead { margin-top:3rem; }
  #ws-mv .maincopy { font-size:2.2rem; }
  #ws-mv .subcopy { font-size:1.5rem; text-align:left; width:90%; margin:2rem auto 0; }
  #ws-mv .fv-info { padding:2rem; width:95%; }
  #ws-mv .fv-info li .lb { display:block; min-width:auto; margin-bottom:0.2rem; }
  #ws-mv .fv-limited { font-size:1.5rem; padding:1rem 1.8rem; }
  .ws .fv-btn a { font-size:1.7rem; }

  #ws-item ul.photos { flex-wrap:wrap; gap:1rem; margin-top:2rem; }
  #ws-item ul.photos > li { width:calc((100% - 1rem) / 2); }
  #ws-item ul.photos > li:first-child { width:100%; }
  #ws-item .detail { margin-top:2rem; }

  #ws-step ul.steps > li { width:100%; }

  #ws-outline table.ov,
  #ws-outline table.ov tbody,
  #ws-outline table.ov tr,
  #ws-outline table.ov th,
  #ws-outline table.ov td { display:block; width:100%; }
  #ws-outline table.ov th { border-bottom:none; }
  #ws-outline table.ov td { border-top:none; margin-bottom:-1px; }

  #ws-recommend ul.rec > li { width:100%; }

  #ws-support .wrap { padding:5rem 2rem 3rem; }
  #ws-support .wrap .tt { font-size:1.6rem; width:90%; padding:0.8rem 1rem; line-height:1.6; white-space:normal; text-align:center; }

  #ws-access .wrap { padding:5rem 2rem 3rem; }
  #ws-access .wrap .tt { font-size:1.6rem; width:90%; padding:0.8rem 1rem; line-height:1.6; white-space:normal; text-align:center; }
  #ws-access .flb { display:block; }
  #ws-access .map, #ws-access .info { width:100%; }
  #ws-access .map iframe { min-height:26rem; }
  #ws-access .info { margin-top:2.5rem; }

  #ws-push .box { padding:3.5rem 2rem; }
  #ws-push .ph { font-size:2rem; }
  #ws-push .px { font-size:1.5rem; text-align:left; }

  #ws-form .formarea { padding:2rem; }
}

.sp-only { display:none; }
@media screen and (max-width:600px){
  .sp-only { display:block; }
  #ws-support .wrap .tx { text-align:left; }
}