@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700&display=swap");
/*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */
.pickr{position:relative;overflow:visible;-webkit-transform:translateY(0);transform:translateY(0)}
.pickr *{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}
.pickr .pcr-button{position:relative;height:2em;width:2em;padding:0.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;-webkit-transition:all 0.3s;transition:all 0.3s}
.pickr .pcr-button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
.pickr .pcr-button::before{z-index:initial}
.pickr .pcr-button::after{position:absolute;content:'';top:0;left:0;height:100%;width:100%;-webkit-transition:background 0.3s;transition:background 0.3s;background:var(--pcr-color);border-radius:.15em}
.pickr .pcr-button.clear{background-size:70%}
.pickr .pcr-button.clear::before{opacity:0}
.pickr .pcr-button.clear:focus{-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color);box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}
.pickr .pcr-button.disabled{cursor:not-allowed}
.pickr *,.pcr-app *{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}
.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color);box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}
.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{-webkit-transition:-webkit-box-shadow 0.3s;transition:-webkit-box-shadow 0.3s;transition:box-shadow 0.3s;transition:box-shadow 0.3s, -webkit-box-shadow 0.3s}
.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25);box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25)}
.pcr-app{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:10000;border-radius:0.1em;background:#fff;opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0s 0.3s;transition:opacity 0.3s, visibility 0s 0.3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;-webkit-box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);left:0;top:0}
.pcr-app.visible{-webkit-transition:opacity 0.3s;transition:opacity 0.3s;visibility:visible;opacity:1}
.pcr-app .pcr-swatches{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:0.75em}
.pcr-app .pcr-swatches.pcr-last{margin:0}
@supports (display: grid){.pcr-app .pcr-swatches{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}
.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:0.15em;cursor:pointer;margin:2.5px;-ms-flex-negative:0;flex-shrink:0;-ms-grid-column-align:center;justify-self:center;-webkit-transition:all 0.15s;transition:all 0.15s;overflow:hidden;background:transparent;z-index:1}
.pcr-app .pcr-swatches>button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}
.pcr-app .pcr-swatches>button::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,0.05);border-radius:0.15em;-webkit-box-sizing:border-box;box-sizing:border-box}
.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}
.pcr-app .pcr-swatches>button:not(.pcr-active){-webkit-box-shadow:none;box-shadow:none}
.pcr-app .pcr-interaction{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 -0.2em 0 -0.2em}
.pcr-app .pcr-interaction>*{margin:0 0.2em}
.pcr-app .pcr-interaction input{letter-spacing:0.07em;font-size:0.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;-webkit-transition:all 0.15s;transition:all 0.15s;padding:0.45em 0.5em;margin-top:0.75em}
.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(0.975);filter:brightness(0.975)}
.pcr-app .pcr-interaction input:focus{-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75);box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75)}
.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;-webkit-box-flex:1;-ms-flex:1 1 8em;flex:1 1 8em;min-width:8em;-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:.15em;background:#f1f3f4;cursor:text}
.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}
.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}
.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}
.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}
.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}
.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{-webkit-filter:brightness(0.925);filter:brightness(0.925)}
.pcr-app .pcr-interaction .pcr-save{background:#4285f4}
.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}
.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75);box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75)}
.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;cursor:grab;cursor:-webkit-grab}
.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}
.pcr-app[data-theme='nano']{width:14.25em;max-width:95vw}
.pcr-app[data-theme='nano'] .pcr-swatches{margin-top:.6em;padding:0 .6em}
.pcr-app[data-theme='nano'] .pcr-interaction{padding:0 .6em .6em .6em}
.pcr-app[data-theme='nano'] .pcr-selection{display:-ms-grid;display:grid;grid-gap:.6em;-ms-grid-columns:1fr .6em 4fr;grid-template-columns:1fr 4fr;-ms-grid-rows:5fr .6em auto .6em auto;grid-template-rows:5fr auto auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:10.5em;width:100%;align-self:flex-start}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(5){-ms-grid-row:5;-ms-grid-column:1}
.pcr-app[data-theme='nano'] .pcr-selection > *:nth-child(6){-ms-grid-row:5;-ms-grid-column:3}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1;grid-area:2 / 1 / 4 / 1;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-left:.6em}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette{-ms-grid-row:1;-ms-grid-row-span:1;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:1 / 1 / 2 / 3;width:100%;height:100%;z-index:1}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser{-ms-grid-row:2;-ms-grid-column:2;grid-area:2 / 2 / 2 / 2}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{-ms-grid-row:3;-ms-grid-column:2;grid-area:3 / 2 / 3 / 2}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{height:0.5em;margin:0 .6em}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:50em}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider{background:-webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));background:-webkit-linear-gradient(left, red, #ff0, lime, cyan, blue, #f0f, red);background:linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red)}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{background:-webkit-gradient(linear, left top, right top, from(transparent), to(black)),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background:-webkit-linear-gradient(left, transparent, black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background:linear-gradient(to right, transparent, black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%, 0.25em}
@media print, (min-width: 768px) {
  .forSp {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .forPc {
    display: none !important;
  }
}
.moduleTitle {
  margin: 40px 0 0;
  padding: 1px 10px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #72ACFF;
}
@media print, (min-width: 768px) {
  .moduleTitle {
    max-width: 375px;
  }
}
.moduleSource {
  margin: 20px 0 0;
  padding: 0 24px;
}
.moduleSource__btn {
  position: relative;
  margin: 10px -3px;
  text-align: right;
}
.moduleSource__view, .moduleSource__copy {
  display: inline-block;
  margin: 0 3px;
  font-size: 12px;
  text-align: center;
  min-width: 100px;
}
.moduleSource__view > span, .moduleSource__copy > span {
  display: block;
  line-height: 1;
  padding: 10px 10px;
  border-radius: 3px;
  background: #eee;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
body.pc .moduleSource__view > span:hover, body.pc .moduleSource__copy > span:hover {
  opacity: 0.8;
}
.moduleSource__view {
  min-width: 120px;
}
.moduleSource__view > span > span:first-of-type {
  display: inline-block;
}
.moduleSource__view > span > span:last-child {
  display: none;
}
.moduleSource__view.-active > span > span:first-of-type {
  display: none;
}
.moduleSource__view.-active > span > span:last-child {
  display: inline-block;
}
.moduleSource__copy {
  position: relative;
}
.moduleSource__comp {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  line-height: 1;
  padding: 8px 8px;
  border: 1px solid #bad3ff;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  -webkit-transition-property: opacity, top;
  transition-property: opacity, top;
  z-index: 1001;
}
.moduleSource__comp.-show {
  top: -8px;
  opacity: 1;
}
.moduleSource__code {
  display: none;
}
.moduleSource code {
  display: block;
  width: 100%;
  padding: 20px;
  white-space: pre;
  background: #fffcf6;
  overflow: auto;
}
.moduleSource textarea {
  display: none;
}
.moduleBlock {
  background: #fff;
}
.moduleBlock .moduleTitle {
  margin-top: 0;
}
.moduleSetValues {
  margin: 0 24px;
  padding: 0 0 30px;
}
.moduleSetValues p {
  margin: 10px 0;
}
.moduleSetValues code {
  display: block;
  width: 100%;
  padding: 20px;
  white-space: pre;
  background: #fffcf6;
  overflow: auto;
}
.moduleSetKeyColor {
  margin: 0 24px;
  padding: 0 0 30px;
}
.moduleSetKeyColor__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
  font-size: 12px;
}
.moduleSetKeyColor__list .pickr {
  width: 50px;
  height: 50px;
}
.moduleSetKeyColor__list .pickr .pcr-button {
  width: 100%;
  height: 100%;
}
.moduleSetKeyColor__list > div:nth-child(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 10px;
}
.moduleSetBgColor {
  margin: 0 24px;
  padding: 0 0 30px;
}
.moduleSetBgColor__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  font-size: 12px;
}
.moduleSetBgColor__list .pickr {
  width: 50px;
  height: 50px;
}
.moduleSetBgColor__list .pickr .pcr-button {
  width: 100%;
  height: 100%;
}
.moduleSetBgColor__list > div:nth-child(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 10px;
}
.moduleSetFont {
  margin: 0 24px;
  padding: 0 0 30px;
}
.moduleSetFont__list {
  line-height: 1.1;
  margin-top: 10px;
  font-size: 32px;
}
.moduleSetFont__list:nth-child(1) {
  font-family: "Noto Sans JP", sans-serif;
}
.moduleSetFont__list:nth-child(2) {
  font-family: "Noto Serif JP", serif;
}
.moduleSetTone {
  margin: 0 24px;
  padding: 0 0 30px;
}
.moduleSetTone__list {
  margin-top: 10px;
}
.moduleSetTone__list .radio__item span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 150px;
  height: 40px;
  background: #CBD0D3;
  color: #fff;
}
.moduleSetTone__list:nth-child(1) .radio__item span {
  border-radius: 6px;
}
.moduleBlock .radio {
  display: inline-block;
  position: relative;
}
.moduleBlock .radio input[type=radio] {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: -10;
}
.moduleBlock .radio__item {
  display: inline-block;
  width: 100%;
  padding-left: 26px;
  cursor: pointer;
}
.moduleBlock .radio__item:before, .moduleBlock .radio__item:after {
  position: absolute;
  content: "";
  display: block;
  border-radius: 90%;
}
.moduleBlock .radio__item:before {
  top: 50%;
  left: 0;
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 1px solid #202124;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.5;
}
.moduleBlock .radio__item:after {
  top: 50%;
  left: 3px;
  z-index: 2;
  width: 9px;
  height: 9px;
  -webkit-transform: translateY(-50%) scale(0.5);
          transform: translateY(-50%) scale(0.5);
  opacity: 0;
  background: #202124;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.moduleBlock .radio input[type=radio]:checked + .radio__item::before {
  opacity: 1;
}
.moduleBlock .radio input[type=radio]:checked + .radio__item::after {
  opacity: 1;
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}
/*# sourceMappingURL=module.css.map */