@charset "utf-8";

.preview-area {
  color: #ffffff;
  line-height: 1;
  padding: 1em;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}

.preview-area button{
  padding: 0.5em 1em;
  border-radius: 4px;
  color: #1a1a1a;
  letter-spacing: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.preview-area button::before{
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 999px;
  border: 1px solid #006FFD;
}

.preview-area button.is-active::before{
  background-color: #006FFD;
}


/*-----------------------------------------------------------------------
root
----------------------------------------------------------------------*/

/* Green */
:root {
  --color-text: #333333;/* フォントの色 */
  --color-accent: #6d9b7c;/* 強調色。リンクの色など */
  --color-pale: #EDF0EB;/* 強調色のペールカラー */
  --color-wh: #FFF;
  --color-grey: rgba(0, 0, 0, 0.5);
  --color-mgrey: rgba(0, 0, 0, 0.2);
  --color-lgrey: rgba(0, 0, 0, 0.05);
  --bg-imgblock01: url(../_img/green/bg_01.jpg);
  --bg-imgblock02: url(../_img/green/bg_02.jpg);
  --bg-imgblock03: url(../_img/green/bg_03.jpg);
  --bg-imgblock04: url(../_img/green/bg_04.jpg);
  --bg-imgblock05: url(../_img/green/bg_05.jpg);
}

/* Pink */
:root[data-theme="pink"] {
  --color-text: #333333;/* フォントの色 */
  --color-accent: #d28996;/* 強調色。リンクの色など */
  --color-pale: #FAEFEF;/* 強調色のペールカラー */
  --color-wh: #FFF;
  --color-grey: rgba(0, 0, 0, 0.5);
  --color-mgrey: rgba(0, 0, 0, 0.2);
  --color-lgrey: rgba(0, 0, 0, 0.05);
  --bg-imgblock01: url(../_img/pink/bg_01.jpg);
  --bg-imgblock02: url(../_img/pink/bg_02.jpg);
  --bg-imgblock03: url(../_img/pink/bg_03.jpg);
  --bg-imgblock04: url(../_img/pink/bg_04.jpg);
  --bg-imgblock05: url(../_img/pink/bg_05.jpg);
}

/* Beige */
:root[data-theme="beige"] {
  --color-text: #333333;/* フォントの色 */
  --color-accent: #BA855D;/* 強調色。リンクの色など */
  --color-pale: #F8F3EE;/* 強調色のペールカラー */
  --color-wh: #FFF;
  --color-grey: rgba(0, 0, 0, 0.5);
  --color-mgrey: rgba(0, 0, 0, 0.2);
  --color-lgrey: rgba(0, 0, 0, 0.05);
  --bg-imgblock01: url(../_img/beige/bg_01.jpg);
  --bg-imgblock02: url(../_img/beige/bg_02.jpg);
  --bg-imgblock03: url(../_img/beige/bg_03.jpg);
  --bg-imgblock04: url(../_img/beige/bg_04.jpg);
  --bg-imgblock05: url(../_img/beige/bg_05.jpg);
}

/* Blue */
:root[data-theme="blue"] {
  --color-text: #333333;/* フォントの色 */
  --color-accent: #4682b4;/* 強調色。リンクの色など */
  --color-pale: #E9EEF2;/* 強調色のペールカラー */
  --color-wh: #FFF;
  --color-grey: rgba(0, 0, 0, 0.5);
  --color-mgrey: rgba(0, 0, 0, 0.2);
  --color-lgrey: rgba(0, 0, 0, 0.05);
  --bg-imgblock01: url(../_img/blue/bg_01.jpg);
  --bg-imgblock02: url(../_img/blue/bg_02.jpg);
  --bg-imgblock03: url(../_img/blue/bg_03.jpg);
  --bg-imgblock04: url(../_img/blue/bg_04.jpg);
  --bg-imgblock05: url(../_img/blue/bg_05.jpg);
}

/* Purple */
:root[data-theme="purple"] {
  --color-text: #333333;/* フォントの色 */
  --color-accent: #9061A4;/* 強調色。リンクの色など */
  --color-pale: #F4EFF6;/* 強調色のペールカラー */
  --color-wh: #FFF;
  --color-grey: rgba(0, 0, 0, 0.5);
  --color-mgrey: rgba(0, 0, 0, 0.2);
  --color-lgrey: rgba(0, 0, 0, 0.05);
  --bg-imgblock01: url(../_img/purple/bg_01.jpg);
  --bg-imgblock02: url(../_img/purple/bg_02.jpg);
  --bg-imgblock03: url(../_img/purple/bg_03.jpg);
  --bg-imgblock04: url(../_img/purple/bg_04.jpg);
  --bg-imgblock05: url(../_img/purple/bg_05.jpg);
}