@charset "utf-8";

/* ===== ジェネ用フォント ===== */

.font-future{ font-family:'Audiowide', sans-serif; --font-heading:'Audiowide', sans-serif; }
.font-pop{ font-family:'Cherry Bomb One', sans-serif; --font-heading:'Cherry Bomb One', sans-serif; }
.font-solid{ font-family:'Gasoek One', sans-serif; --font-heading:'Gasoek One', sans-serif; }
.font-retro{ font-family:'Limelight', serif; --font-heading:'Limelight', serif; }
.font-calligraphy{ font-family:'Lobster', cursive; --font-heading:'Lobster', cursive; }
.font-casual{ font-family:'Luckiest Guy', cursive; --font-heading:'Luckiest Guy', cursive; }
.font-old-pop{ font-family:'Modak', cursive; --font-heading:'Modak', cursive; }
.font-grunge{ font-family:'Rubik Dirt', system-ui; --font-heading:'Rubik Dirt', system-ui; }
.font-logo{ font-family:'Shrikhand', serif; --font-heading:'Shrikhand', serif; }
.font-mode{ font-family:'WDXL Lubrifont JP N', sans-serif; }

.font-modern{ font-family:'Stack Sans Headline', sans-serif; --font-heading:'Stack Sans Headline', sans-serif; }
.font-classic{ font-family:'Playfair Display SC', serif; --font-heading:'Playfair Display SC', serif; }
.font-brand{ font-family:'Julius Sans One', sans-serif; --font-heading:'Julius Sans One', sans-serif; }
.font-artdeco{ font-family:'Poiret One', sans-serif; --font-heading:'Poiret One', sans-serif; }
.font-oriental{ font-family:'Aref Ruqaa', serif; --font-heading:'Aref Ruqaa', serif; }
.font-wamodern{ font-family:'Kaisei Decol', serif; --font-heading:'Kaisei Decol', serif; }
.font-nuance{ font-family:'Yuji Mai', serif; --font-heading:'Yuji Mai', serif; }
.font-cute{ font-family:'Hachi Maru Pop', cursive; --font-heading:'Hachi Maru Pop', cursive; }
.font-rough{ font-family:'Yusei Magic', sans-serif; --font-heading:'Yusei Magic', sans-serif; }
.font-sign{ font-family:'Arizonia', cursive; --font-heading:'Arizonia', cursive; }
.font-story{ font-family:'Charmonman', cursive; --font-heading:'Charmonman', cursive; }

.font-base-normal{ font-family:'Noto Sans JP', sans-serif; --font-body:'Noto Sans JP', sans-serif; }
.font-base-marugo{ font-family:'Zen Maru Gothic', sans-serif; --font-body:'Zen Maru Gothic', sans-serif; }
.font-base-mincho{ font-family:'Zen Old Mincho', serif; --font-body:'Zen Old Mincho', serif; }
.font-base-modern{ font-family:'M PLUS U', sans-serif; --font-body:'M PLUS U', sans-serif; }
.font-base-ryurei{ font-family:'Quintessential', serif; --font-body:'Quintessential', serif; }


/* ===== ジェネ用レイアウト ===== */

#jobposter_stage p:empty{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

.generator-section{
  margin-top:32px;
}

.generator-section-sm{
  margin-top:16px;
}

.generator-section-lg{
  margin-top:48px;
}

.generator-section-xs{
  margin-top:8px;
}

.generator-columns{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.generator-column{
  flex:1;
  min-width:0;
}

.generator-check-group{
  margin-top:12px;
}

@media (max-width:600px){
  .generator-columns{
    flex-direction:column;
    align-items:stretch;
  }
}

.imageRow > p:empty,
.zoomWrap > p:empty{
  display:none;
}

.zoomWrap > p{
  margin:0;
  display:contents;
}

/* ===== ジェネレーター共通UI ===== */

.imageRow{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:12px;
  width:100%;
}

.imageRow input[type="file"]{
  flex:0 0 auto;
}

.zoomWrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  margin-top:10px;
}

.zoomWrap > span{
  white-space:nowrap;
}

.zoomWrap input[type="range"]{
  flex:1;
}

@media (max-width:600px){
	
  .generator-columns.generator-columns-keep{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }

  .generator-columns.generator-columns-keep .generator-column{
    flex:1 1 0;
  }

  .imageRow{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .imageRow input[type="file"]{
    width:100%;
    max-width:100%;
  }

	.zoomWrap{
	  width:100%;
	  flex-direction:row;
	  align-items:center !important;
	  gap:10px;
	}

	.zoomWrap > span{
	  flex:0 0 auto;
	  width:auto;
	  text-align:left !important;
	  white-space:nowrap;
	}

	.zoomWrap input[type="range"]{
	  flex:1;
	  width:auto;
	  min-width:0;
	}

}

/* ===== カラーコントロール ===== */

.color-control{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-right:10px;
}

.color-control input[type="color"]{
  width:42px;
  height:32px;
  padding:2px;
  flex:0 0 42px;
}

.color-control input[type="text"]{
  flex:1;
  min-width:0;
  height:40px;
  padding:4px 8px;
  font-size:14px;
  box-sizing:border-box;
}

/* ===== スライダー ===== */

.generator-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}

.generator-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;

  width:18px;
  height:18px;
  border-radius:50%;

  background:#9f8bb3;
  border:none;

  cursor:pointer;
  margin-top:-6px;
}

.generator-slider::-webkit-slider-runnable-track{
  height:6px;
  background:#ddd6e6;
  border-radius:999px;
}

/* ===== タブ ===== */

.generator-tabs{
  display:flex;
  gap:0;
  margin:24px 0 0;
}

.generator-tab{
  box-sizing:border-box;
  border:1px solid #cfcfcf;
  border-bottom:1px solid #9e8db8;
  background:#f3f3f3;
  color:#333;
  padding:12px 22px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-right:-1px;
}

.generator-tab:first-child{
  border-radius:4px 0 0 0;
}

.generator-tab:last-child{
  border-radius:0 4px 0 0;
}

.generator-tab p{
  margin:0;
}

/* アクティブ */

.generator-tab.is-active{
  background:#b9aec9;
  color:#fff;
  border-color:#b9aec9;
  position:relative;
  z-index:2;
}

/* 本文 */

.generator-tab-panel{
  display:none;
  border:1px solid #b9aec9;
  border-top:3px solid #9e8db8;
  background:#fff;
  padding:20px;
  margin-top:-1px;
  margin-bottom:24px;
}

.generator-tab-panel.is-active{
  display:block;
}

.generator-tabs + p,
.generator-tab-panel + p{
  display:none;
}
.generator-tabs > p{
  margin:0;
  display:contents;
}

.generator-tab-panel > p:empty,
.generator-column > p:empty{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

.generator-tab-panel > p{
  display:contents !important;
  margin:0 !important;
  padding:0 !important;
}

.imageRow > p,
.zoomWrap > p{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ===== 入力内容保存機能 ===== */

.jobposter-saveDataColumns {
  display: flex;
  gap: 16px;
}

.jobposter-saveDataSlot{
  padding:16px;
  border:1px solid #ddd7e5;
  border-radius:10px;
  background:#fcfbfd;

  flex: 1;
  min-width: 0;

}

.jobposter-saveDataTitle {
  margin-bottom: 12px;
  font-weight: 700;
  text-align: center;
}

.jobposter-saveDataButton{
  width:100%;
  padding:10px 14px;
  margin-top:8px;

  background:#ddd6e6;
  color:#a391bb;

  border:1px solid #ddd6e6;
  border-radius:10px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;
  transition:.2s;
}

.jobposter-saveDataButton:hover{
  background:#b2a5c1;
  color:#fff;
  border-color:#b2a5c1;
}

.jobposter-saveDataReset{
  margin-top: 16px;
  background:#fff;
  color:#a391bb;
  border:1px solid #ddd6e6;
}

.jobposter-saveDataReset:hover{
  background:#f7f4fa;
  color:#a391bb;
}

.jobposter-saveDataNotice {
  min-height: 24px;
  margin-top: 12px;
  font-size: 14px;
}

/* スマホでも2列を維持 */
@media (max-width: 600px) {
  .jobposter-saveDataColumns {
    gap: 8px;
  }

  .jobposter-saveDataSlot {
    padding: 10px;
  }

  .jobposter-saveDataButton {
    padding: 7px 4px;
  }
}

/* ===== 保存ボタン ===== */

.generator-saveButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 32px;
  border-radius:999px;
  border:1px solid #b2a5c1;
  background:#b2a5c1;
  color:#ffffff;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1;
  cursor:pointer;
  transition:0.25s ease;
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

.generator-saveButton .btn-inner{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.generator-saveButton .after{
  font-size:12px;
}

.generator-saveButton i{
  position:relative;
  top:-1px;
}

.generator-saveButton:hover{
  background:#ffffff;
  color:#b2a5c1;
  border-color:#b2a5c1;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
}

.generator-saveButton:hover i{
  color:#b2a5c1;
}

.generator-saveButton:active{
  transform:translateY(0);
}

/* ===== スペーサー ===== */

.generator-spacer-sm{ height:10px; }
.generator-spacer{ height:20px; }
.generator-spacer-lg{ height:30px; }
.generator-spacer-xlg{ height:40px; }