@charset "UTF-8";
.codeSample {
  padding: 150px 0;
}
.codeSample .cordList,
.codeSample .usageExample,
.codeSample .remarks {
  margin: 0 auto 5vh;
  padding: 2%;
  background-color: rgba(18, 60, 62, 0.5);
  box-shadow: 0px 0px 15px #000000;
  border-radius: 10px;
  width: 900px;
}
.codeSample .cordList h1,
.codeSample .usageExample h1,
.codeSample .remarks h1 {
  margin-bottom: 4vh;
  padding: 1vh 0;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.codeSample .cordList h2,
.codeSample .usageExample h2,
.codeSample .remarks h2 {
  margin-bottom: 2vh;
  padding-bottom: 2vh;
  border-bottom: 1px dotted;
  font-size: 22px;
  font-weight: 800;
}
.codeSample .cordList .sample_details {
  margin-bottom: 3em;
}
.codeSample .cordList .sample_details .caution {
  margin-top: 2%;
  font-size: 14px;
}
.codeSample .cordList .sample_details dl {
  display: flex;
  flex-wrap: wrap;
}
.codeSample .cordList .sample_details dl dt {
  margin: 0 2% 2% 0;
  align-content: center;
  width: 30%;
}
.codeSample .cordList .sample_details dl dt .memo {
  display: block;
  font-size: 10px;
}
.codeSample .cordList .sample_details dl .visibility_bg {
  background-color: #666;
}
.codeSample .cordList .sample_details dl .visibility_font {
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.codeSample .cordList .sample_details dl .visibility_border_color {
  padding: 0.1em;
  background-color: #666;
}
.codeSample .cordList .sample_details dl .visibility_border_color div {
  border: 1px solid #fff;
  padding: 2%;
  color: #fff;
}
.codeSample .cordList .sample_details dl dd {
  margin-bottom: 2%;
  padding: 0.3em;
  border-radius: 3px;
  background: #fff;
  width: 68%;
}
.codeSample .cordList .sample_details dl dd textarea {
  padding: 1%;
  align-content: center;
  border-radius: 3px;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 16px;
  line-height: 1em;
  vertical-align: bottom;
  background-color: #efefef;
  color: #000;
}
.codeSample .cordList .sample_details .font_size_edit .bold-font {
  font-size: 20px;
}
.codeSample .cordList .sample_details .border_color_edit dt {
  border-width: 1px;
  border-style: solid;
}
.codeSample .cordList .sample_details .bg_img_edit dt {
  color: #fff;
}
.codeSample .cordList .sample_details .radius_edit dt {
  background-color: #999;
  color: #fff;
}
.codeSample .cordList .sample_details .padding_edit dt {
  background-color: #999;
  color: #fff;
}
.codeSample .cordList .sample_details .width_edit {
  display: block;
}
.codeSample .cordList .sample_details .width_edit dt {
  margin: 0 auto 2%;
  padding: 2%;
  background-color: #999;
  color: #fff;
}
.codeSample .cordList .sample_details .width_edit dd {
  width: 100%;
}
.codeSample .cordList .sample_details:nth-last-of-type(1) {
  margin-bottom: 0;
}
.codeSample .usageExample div {
  margin-bottom: 6vh;
}
.codeSample .usageExample div h2 {
  margin-bottom: 3vh;
}
.codeSample .usageExample div .caution {
  margin-top: 2vh;
  font-size: 14px;
}
.codeSample .usageExample div:nth-last-of-type(1) {
  margin-bottom: 0;
}
.codeSample .remarks {
  padding: 2%;
  background-color: #000;
}
.codeSample .remarks h2 {
  color: #fff;
}
.codeSample .remarks ul {
  list-style: disc inside;
  text-align: left;
}
.codeSample .remarks ul li {
  margin-bottom: 1%;
  color: #fff;
}
.w_cmp .cmp_details .cmp_freetext,
div.codeSample {
  /* フォントサイズ・太さ */
  /* フォントカラー */
  /* BGカラー */
  /* 線を付ける */
  /* ボーダーカラー */
  /*BG画像*/
  /*パディング*/
  /*角丸*/
  /*幅調整*/
}
.w_cmp .cmp_details .cmp_freetext .large-font,
div.codeSample .large-font {
  font-size: 25px;
}
.w_cmp .cmp_details .cmp_freetext .small-font,
div.codeSample .small-font {
  font-size: 14px;
}
.w_cmp .cmp_details .cmp_freetext .bold-font,
div.codeSample .bold-font {
  font-weight: 900;
}
.w_cmp .cmp_details .cmp_freetext .align-center-font,
div.codeSample .align-center-font {
  text-align: center;
}
.w_cmp .cmp_details .cmp_freetext .align-left-font,
div.codeSample .align-left-font {
  text-align: left;
}
.w_cmp .cmp_details .cmp_freetext .align-right-font,
div.codeSample .align-right-font {
  text-align: right;
}
.w_cmp .cmp_details .cmp_freetext .underline-font,
div.codeSample .underline-font {
  text-decoration: underline;
}
.w_cmp .cmp_details .cmp_freetext .white-font,
div.codeSample .white-font {
  color: #fff;
}
.w_cmp .cmp_details .cmp_freetext .red-font,
div.codeSample .red-font {
  color: #f00;
}
.w_cmp .cmp_details .cmp_freetext .orange-font,
div.codeSample .orange-font {
  color: #f90;
}
.w_cmp .cmp_details .cmp_freetext .yellow-font,
div.codeSample .yellow-font {
  color: #ff0;
}
.w_cmp .cmp_details .cmp_freetext .light-green-font,
div.codeSample .light-green-font {
  color: #6f0;
}
.w_cmp .cmp_details .cmp_freetext .green-font,
div.codeSample .green-font {
  color: #360;
}
.w_cmp .cmp_details .cmp_freetext .light-blue-font,
div.codeSample .light-blue-font {
  color: #0cf;
}
.w_cmp .cmp_details .cmp_freetext .blue-font,
div.codeSample .blue-font {
  color: #06f;
}
.w_cmp .cmp_details .cmp_freetext .pink-font,
div.codeSample .pink-font {
  color: #f0f;
}
.w_cmp .cmp_details .cmp_freetext .purple-font,
div.codeSample .purple-font {
  color: #90f;
}
.w_cmp .cmp_details .cmp_freetext .light-brown-font,
div.codeSample .light-brown-font {
  color: #c96;
}
.w_cmp .cmp_details .cmp_freetext .brown-font,
div.codeSample .brown-font {
  color: #630;
}
.w_cmp .cmp_details .cmp_freetext .black-font,
div.codeSample .black-font {
  color: #000;
}
.w_cmp .cmp_details .cmp_freetext .white-bg,
div.codeSample .white-bg {
  background-color: #fff;
}
.w_cmp .cmp_details .cmp_freetext .red-bg,
div.codeSample .red-bg {
  background-color: #f00;
}
.w_cmp .cmp_details .cmp_freetext .orange-bg,
div.codeSample .orange-bg {
  background-color: #f90;
}
.w_cmp .cmp_details .cmp_freetext .yellow-bg,
div.codeSample .yellow-bg {
  background-color: #ff0;
}
.w_cmp .cmp_details .cmp_freetext .light-green-bg,
div.codeSample .light-green-bg {
  background-color: #6f0;
}
.w_cmp .cmp_details .cmp_freetext .green-bg,
div.codeSample .green-bg {
  background-color: #360;
}
.w_cmp .cmp_details .cmp_freetext .light-blue-bg,
div.codeSample .light-blue-bg {
  background-color: #0cf;
}
.w_cmp .cmp_details .cmp_freetext .blue-bg,
div.codeSample .blue-bg {
  background-color: #06f;
}
.w_cmp .cmp_details .cmp_freetext .pink-bg,
div.codeSample .pink-bg {
  background-color: #f0f;
}
.w_cmp .cmp_details .cmp_freetext .purple-bg,
div.codeSample .purple-bg {
  background-color: #90f;
}
.w_cmp .cmp_details .cmp_freetext .light-brown-bg,
div.codeSample .light-brown-bg {
  background-color: #c96;
}
.w_cmp .cmp_details .cmp_freetext .brown-bg,
div.codeSample .brown-bg {
  background-color: #630;
}
.w_cmp .cmp_details .cmp_freetext .black-bg,
div.codeSample .black-bg {
  background-color: #000;
}
.w_cmp .cmp_details .cmp_freetext .full-border,
div.codeSample .full-border {
  border: 1px solid;
}
.w_cmp .cmp_details .cmp_freetext .top-border,
div.codeSample .top-border {
  border-top: 1px solid;
}
.w_cmp .cmp_details .cmp_freetext .bottom-border,
div.codeSample .bottom-border {
  border-bottom: 1px solid;
}
.w_cmp .cmp_details .cmp_freetext .left-border,
div.codeSample .left-border {
  border-left: 1px solid;
}
.w_cmp .cmp_details .cmp_freetext .right-border,
div.codeSample .right-border {
  border-right: 1px solid;
}
.w_cmp .cmp_details .cmp_freetext .white-border,
div.codeSample .white-border {
  border-color: #fff;
}
.w_cmp .cmp_details .cmp_freetext .red-border,
div.codeSample .red-border {
  border-color: #f00;
}
.w_cmp .cmp_details .cmp_freetext .orange-border,
div.codeSample .orange-border {
  border-color: #f90;
}
.w_cmp .cmp_details .cmp_freetext .yellow-border,
div.codeSample .yellow-border {
  border-color: #ff0;
}
.w_cmp .cmp_details .cmp_freetext .light-green-border,
div.codeSample .light-green-border {
  border-color: #6f0;
}
.w_cmp .cmp_details .cmp_freetext .green-border,
div.codeSample .green-border {
  border-color: #360;
}
.w_cmp .cmp_details .cmp_freetext .light-blue-border,
div.codeSample .light-blue-border {
  border-color: #0cf;
}
.w_cmp .cmp_details .cmp_freetext .blue-border,
div.codeSample .blue-border {
  border-color: #06f;
}
.w_cmp .cmp_details .cmp_freetext .pink-border,
div.codeSample .pink-border {
  border-color: #f0f;
}
.w_cmp .cmp_details .cmp_freetext .purple-border,
div.codeSample .purple-border {
  border-color: #90f;
}
.w_cmp .cmp_details .cmp_freetext .light-brown-border,
div.codeSample .light-brown-border {
  border-color: #c96;
}
.w_cmp .cmp_details .cmp_freetext .brown-border,
div.codeSample .brown-border {
  border-color: #630;
}
.w_cmp .cmp_details .cmp_freetext .black-border,
div.codeSample .black-border {
  border-color: #000;
}
.w_cmp .cmp_details .cmp_freetext .site-img-bg,
div.codeSample .site-img-bg {
  background-image: url("/img/w_img/pattern_bg.png");
  background-size: 100% auto;
}
.w_cmp .cmp_details .cmp_freetext .gold-img-bg,
div.codeSample .gold-img-bg {
  background-image: url("../w_img/patternBg_gold.png");
  background-size: 100% auto;
}
.w_cmp .cmp_details .cmp_freetext .red-img-bg,
div.codeSample .red-img-bg {
  background-image: url("../w_img/patternBg_red.png");
  background-size: 40% auto;
}
.w_cmp .cmp_details .cmp_freetext .navy-img-bg,
div.codeSample .navy-img-bg {
  background-image: url("../w_img/patternBg_navy.png");
  background-size: 130% auto;
}
.w_cmp .cmp_details .cmp_freetext .green-img-bg,
div.codeSample .green-img-bg {
  background-image: url("../w_img/patternBg_green.png");
  background-size: 130% auto;
}
.w_cmp .cmp_details .cmp_freetext .black-img-bg,
div.codeSample .black-img-bg {
  background-image: url("../w_img/patternBg_black.png");
  background-size: 70% auto;
}
.w_cmp .cmp_details .cmp_freetext .box-padding,
div.codeSample .box-padding {
  padding: 2%;
}
.w_cmp .cmp_details .cmp_freetext .large-radius,
div.codeSample .large-radius {
  border-radius: 100px;
}
.w_cmp .cmp_details .cmp_freetext .small-radius,
div.codeSample .small-radius {
  border-radius: 5px;
}
.w_cmp .cmp_details .cmp_freetext .width100,
div.codeSample .width100 {
  width: 100%!important;
}
.w_cmp .cmp_details .cmp_freetext .width80,
div.codeSample .width80 {
  width: 80%!important;
}
.w_cmp .cmp_details .cmp_freetext .width50,
div.codeSample .width50 {
  width: 50%!important;
}
.w_cmp .cmp_details .cmp_freetext .width-just,
div.codeSample .width-just {
  width: auto!important;
  display: inline-block !important;
}
.w_cmp .cmp_details .cmp_freetext div,
.w_cmp .cmp_details .cmp_freetext section,
.w_cmp .cmp_details .cmp_freetext h1,
.w_cmp .cmp_details .cmp_freetext h2,
.w_cmp .cmp_details .cmp_freetext h3,
.w_cmp .cmp_details .cmp_freetext p,
.w_cmp .cmp_details .cmp_freetext table {
  margin-bottom: 2vh;
  margin-left: auto!important;
  margin-right: auto!important;
}