@charset "UTF-8";

/* placeholder */
:placeholder-shown {
  color: #AEB2B4;
}

::-webkit-input-placeholder {
  color: #AEB2B4;
}

::-moz-placeholder {
  color: #AEB2B4;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #AEB2B4;
}

/*========================================
  common
========================================*/
/* anchor */
a {
  text-decoration: none;
  color: #00A6C2;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

a img {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 899px) {
  a {
    word-break: break-all;
  }
}

/* ul ol */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/*========================================
  head
========================================*/
.contHead {
  margin-bottom: 16px;
  font-size: 2rem;
  color: #AEB2B4;
}

/*========================================
  block
========================================*/
/* block */
.titleBlock,
.contentBlock {
  width: 1204px;
  margin: 80px auto;
}

.contentWrap {
  border: 1px solid #D7D8D9;
}

.mngBlock {
  margin: 80px 0;
}

@media screen and (max-width: 899px) {

  .titleBlock,
  .contentBlock {
    width: 100%;
    margin: 40px auto;
  }
}

/* column */
.columnSet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 40px 0;
}

.columnSet.dev2>* {
  width: 484px;
  margin-top: 40px;
}

.columnSet.dev3>* {
  width: 312px;
  margin-top: 40px;
}

.columnSet.dev4>* {
  width: 226px;
  margin-top: 40px;
}

.columnSet.dev5>* {
  width: 184px;
  margin-top: 32px;
}

.columnSet.sep9to3>*:nth-child(1) {
  width: 742px;
}

.columnSet.sep9to3>*:nth-child(2) {
  width: 226px;
}

.columnSet.sep8to4>*:nth-child(1) {
  width: 656px;
}

.columnSet.sep8to4>*:nth-child(2) {
  width: 312px;
}

.columnSet.sep7to5>*:nth-child(1) {
  width: 570px;
}

.columnSet.sep7to5>*:nth-child(2) {
  width: 398px;
}

.columnSet.sep6to6>*:nth-child(1) {
  width: 484px;
}

.columnSet.sep6to6>*:nth-child(2) {
  width: 484px;
}

.columnSet.sep5to7>*:nth-child(1) {
  width: 398px;
}

.columnSet.sep5to7>*:nth-child(2) {
  width: 570px;
}

.columnSet.sep4to8>*:nth-child(1) {
  width: 312px;
}

.columnSet.sep4to8>*:nth-child(2) {
  width: 656px;
}

.columnSet.sep3to9>*:nth-child(1) {
  width: 226px;
}

.columnSet.sep3to9>*:nth-child(2) {
  width: 742px;
}

@media screen and (max-width: 899px) {
  .columnSet {
    display: block;
  }

  .columnSet.dev2>*,
  .columnSet.dev3>*,
  .columnSet.dev4>*,
  .columnSet.dev5>* {
    width: 100%;
    margin-top: 40px;
  }

  .columnSet.sep9to3>*:nth-child(1),
  .columnSet.sep8to4>*:nth-child(1),
  .columnSet.sep7to5>*:nth-child(1),
  .columnSet.sep6to6>*:nth-child(1),
  .columnSet.sep5to7>*:nth-child(1),
  .columnSet.sep4to8>*:nth-child(1),
  .columnSet.sep3to9>*:nth-child(1) {
    width: 100%;
  }

  .columnSet.sep9to3>*:nth-child(2),
  .columnSet.sep8to4>*:nth-child(2),
  .columnSet.sep7to5>*:nth-child(2),
  .columnSet.sep6to6>*:nth-child(2),
  .columnSet.sep5to7>*:nth-child(2),
  .columnSet.sep4to8>*:nth-child(2),
  .columnSet.sep3to9>*:nth-child(2) {
    width: 100%;
    margin-top: 16px;
  }
}

/*========================================
  button
========================================*/
/* button */
.btn,
[class*="btn-"] {
  display: block;
  box-sizing: border-box;
  padding: 10px 20px;
  text-align: center;
  letter-spacing: 1px;
  line-height: 2rem;
  font-weight: bold;
  font-size: 1.4rem;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-in-out 0.2s;
  transition: all 0.2s ease-in-out 0.2s;
}

.btn:hover,
[class*="btn-"]:hover {
  opacity: 0.6;
}

*[class*="btn-"][class*="-sld-bl"] {
  border: 1px solid #00A6C2;
  background-color: #00A6C2;
  color: #FFF;
}

*[class*="btn-"][class*="-sld-bl"]:hover {
  color: #FFF;
}

*[class*="btn-"][class*="-sld-bk"] {
  border: 1px solid #353E43;
  background-color: #353E43;
  color: #FFF;
}

*[class*="btn-"][class*="-sld-bk"]:hover {
  color: #FFF;
}

*[class*="btn-"][class*="-sld-gy"] {
  border: 1px solid #EBECEC;
  background-color: #EBECEC;
  color: #5D6569;
}

*[class*="btn-"][class*="-sld-gy"]:hover {
  color: #5D6569;
}

*[class*="btn-"][class*="-sld-wh"] {
  border: 1px solid #FFF;
  background-color: #FFF;
  color: #00A6C2;
}

*[class*="btn-"][class*="-sld-wh"]:hover {
  color: #00A6C2;
}

*[class*="btn-"][class*="-sld-og"] {
  border: 1px solid #E47B3C;
  background-color: #E47B3C;
  color: #FFF;
}

*[class*="btn-"][class*="-sld-og"]:hover {
  color: #FFF;
}

*[class*="btn-"][class*="-bdr-bl"] {
  background-color: #FFF;
  border: 1px solid #00A6C2;
  color: #00A6C2;
}

*[class*="btn-"][class*="-bdr-bl"]:hover {
  color: #00A6C2;
}

*[class*="btn-"][class*="-bdr-bk"] {
  background-color: #FFF;
  border: 1px solid #353E43;
  color: #353E43;
}

*[class*="btn-"][class*="-bdr-bk"]:hover {
  color: #353E43;
}

*[class*="btn-"][class*="-bdr-gy"] {
  background-color: #FFF;
  border: 1px solid #D7D8D9;
  color: #5D6569;
}

*[class*="btn-"][class*="-bdr-gy"]:hover {
  color: #5D6569;
}

*[class*="btn-"][class*="-bdr-wh"] {
  background-color: transparent;
  border: 1px solid #FFF;
  color: #FFF;
}

*[class*="btn-"][class*="-bdr-wh"]:hover {
  color: #FFF;
}

*[class*="btn-"][class*="-bdr-og"] {
  background-color: transparent;
  border: 1px solid #E47B3C;
  color: #E47B3C;
}

*[class*="btn-"][class*="-bdr-og"]:hover {
  color: #E47B3C;
}

*[class*="btn-"][class*="-lt"],
*[class*="btn-"][class*="-gt"] {
  position: relative;
}

*[class*="btn-"][class*="-lt"]::after,
*[class*="btn-"][class*="-gt"]::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(0) translateY(-50%);
  transform: translateX(0) translateY(-50%);
  width: 1em;
  height: 1em;
  background-size: contain;
}

*[class*="btn-"][class*="-lt"]::after {
  left: 18px;
  -webkit-transform: scale(1) rotate(180deg) translateX(0) translateY(50%) skewX(0) skewY(0);
  transform: scale(1) rotate(180deg) translateX(0) translateY(50%) skewX(0) skewY(0);
}

*[class*="btn-"][class*="-gt"]::after {
  right: 18px;
}

*[class*="btn-"][class*="-sld-bl"]::after,
*[class*="btn-"][class*="-sld-bk"]::after {
  background: url("../img/icon_btn_wdg.svg#wh") no-repeat center center;
  background-size: 12px 12px;
}

*[class*="btn-"][class*="-sld-gy"]::after {
  background: url("../img/icon_btn_wdg.svg#gy") no-repeat center center;
  background-size: 12px 12px;
}

*[class*="btn-"][class*="-bdr-bl"]::after {
  background: url("../img/icon_btn_wdg.svg#bl") no-repeat center center;
  background-size: 12px 12px;
}

*[class*="btn-"][class*="-bdr-bk"]::after {
  background: url("../img/icon_btn_wdg.svg#bk") no-repeat center center;
  background-size: 12px 12px;
}

*[class*="btn-"][class*="-bdr-gy"]::after {
  background: url("../img/icon_btn_wdg.svg#gy") no-repeat center center;
  background-size: 12px 12px;
}

*[class*="btn-"][class*="-xl"] {
  padding: 18px 38px;
  font-size: 1.8rem;
}

*[class*="btn-"][class*="-lt-xl"] {
  padding: 18px 38px 18px 38px;
}

*[class*="btn-"][class*="-gt-xl"] {
  padding: 18px 38px 18px 38px;
}

*[class*="btn-"][class*="-lg"] {
  padding: 13px 28px;
  font-size: 1.4rem;
}

*[class*="btn-"][class*="-lt-lg"] {
  padding: 13px 28px 13px 48px;
}

*[class*="btn-"][class*="-gt-lg"] {
  padding: 13px 48px 13px 28px;
}

*[class*="btn-"][class*="-md"] {
  padding: 8px 18px;
  font-size: 1.4rem;
}

*[class*="btn-"][class*="-lt-md"] {
  padding: 8px 18px 8px 38px;
}

*[class*="btn-"][class*="-gt-md"] {
  padding: 8px 38px 8px 18px;
}

*[class*="btn-"].icon-google::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url("../img/icon_google.svg") no-repeat center center;
  background-size: 20px 20px;
  vertical-align: middle;
}

.wideBtn {
  margin-top: 40px;
}

.wideBtn>* {
  width: 100%;
  margin-top: 16px;
}

.wideBtn *[class^="btn-"] {
  display: block;
}

/* set - button, form  */
.actSet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 40px;
}

.actSet>* {
  margin: 0 16px 16px 0;
}

.actSet.pos-c {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.actSet.pos-c *[class^="btn-"] {
  margin: 0;
}

@media screen and (max-width: 480px) {
  .actSet {
    /*display: block;*/
  }

  .actSet>* {
    /*width: 100%;*/
  }

  .actSet>*:not(:first-child) {
    margin: 16px 0 0;
  }
}

/* set - button */
.btnSet {
  margin-top: 80px;
}

.btnSet ul {
  margin-top: 40px;
}

.btnSet ul li {
  margin-top: 24px;
}

.btnSet a[class^="btn-"] {
  display: block;
}

/*========================================
  form
========================================*/
input[type=checkbox]+label::before,
input[type=radio]+label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-color: #FFF;
  vertical-align: middle;
}

/* checkbox */
input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  display: inline-block;
  position: relative;
  padding: 2px 0 2px 32px;
}

input[type=checkbox]+label::before {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FFF;
  border: 2px solid #AEB2B4;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

input[type=checkbox]:checked+label::before {
  border: none;
  background: url("../img/icon_check.svg#wh") no-repeat center center #00A6C2;
  background-size: 24px 24px;
}

input[type=checkbox]:disabled+label {
  color: #AEB2B4;
}

input[type=checkbox]:disabled+label::before {
  border: 1px solid #D7D8D9;
}

/* radio */
input[type=radio] {
  display: none;
}

input[type=radio]+label::before {
  border: 2px solid #AEB2B4;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

input[type=radio]:checked+label::before {
  border: 2px solid #00A6C2;
  background: url("../img/icon_radio.svg#bl") no-repeat center center;
  background-size: 24px 24px;
}

input[type=radio]:disabled+label {
  color: #AEB2B4;
}

input[type=radio]:disabled+label::before {
  border: 2px solid #D7D8D9;
}

/* form - default */
input[type=text],
input[type=tel],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
textarea {
  width: 100%;
  padding: 13px 18px;
  outline: 0;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 2rem;
  font-size: 1.4rem;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus {
  outline: 0;
  border: 1px solid #00A6C2;
}

input[type=text]:disabled,
input[type=tel]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
textarea:disabled {
  border: 1px solid #D7D8D9;
}

input[type=search] {
  padding: 18px 18px 18px 48px;
  background: url("../img/icon_search.svg#gy") no-repeat 20px center #FFF;
  background-size: 20px 20px;
}

input.credit {
  padding: 13px 178px 13px 18px;
  background: url("../img/credit.png") no-repeat right center;
}

/* input */
.inputBox {
  display: inline-block;
}

.inputBox input+p {
  display: none;
  margin-top: 8px;
  font-weight: bold;
  color: #C60000;
}

.inputBox input.error {
  border: 1px solid #C60000;
}

.inputBox input.error+p {
  display: block;
}

.inputBox.size-sm {
  width: 100px;
}

.inputBox.size-md {
  width: 200px;
}

.inputBox.size-lg {
  width: 300px;
}

/* select */
.selectBox {
  display: block;
  position: relative;
}

.selectBox select {
  position: relative;
  z-index: 0;
  display: inline-block;
  box-sizing: border-box;
  padding: 13px 32px 13px 22px;
  background-color: #FFF;
  border: 1px solid #D7D8D9;
  line-height: 2rem;
  font-weight: normal;
  font-size: 1.4rem;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.selectBox select:focus {
  outline: 0;
  border: 1px solid #00A6C2;
}

.selectBox select:disabled {
  border: 1px solid #D7D8D9;
  color: #D7D8D9;
}

.selectBox::before {
  content: "-選択してください-";
  position: absolute;
  left: 1px;
  top: 1px;
  display: block;
  z-index: 10;
  width: calc(100% - 2px);
  padding: 16px 32px 16px 22px;
  background-color: #FFF;
  line-height: 1;
  color: #AEB2B4;
  pointer-events: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.en_selectBox::before {
  content: "- Please select subject -";
}

.selectBox::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 25px;
  z-index: 50;
  -webkit-transform: translateX(0) translateY(-50%);
  transform: translateX(0) translateY(-50%);
  width: 12px;
  height: 12px;
  background: url("../img/icon_btn_select_down.svg#bk") no-repeat center center;
  background-size: 12px 12px;
  pointer-events: none;
}

.selectBox.multiple::after {
  display: none;
}

.selectBox option.placeholder {
  display: none;
}

/* form - error */
.selectBox select,
.selectBox input,
.inputBox select,
.inputBox input {
  width: 100%;
}

.selectBox select+p,
.selectBox input+p,
.inputBox select+p,
.inputBox input+p {
  display: none;
}

.selectBox select.error,
.selectBox input.error,
.inputBox select.error,
.inputBox input.error {
  border: 1px solid #C60000;
}

.selectBox select.error+p,
.selectBox input.error+p,
.inputBox select.error+p,
.inputBox input.error+p {
  display: block;
  margin-top: 8px;
  font-weight: bold;
  color: #C60000;
}

/* 横並び（名前など） */
.col2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.col2>* {
  width: calc(50% - 8px);
}

.col2.pos-l {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.col2.pos-l>* {
  width: auto;
  padding-right: 32px;
}

/* check button */
.checkBtn {
  margin-top: 40px;
}

.checkBtn li {
  margin-top: 16px;
}

.checkBtn li label {
  position: relative;
  display: block;
  padding: 24px 16px 24px 64px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.checkBtn li label::before {
  position: absolute;
  left: 16px;
  top: 50%;
  -webkit-transform: translateX(0) translateY(-50%);
  transform: translateX(0) translateY(-50%);
}

/* choice box */
.choiceBox {
  width: 320px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.choiceBox .choiceHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px;
}

.choiceBox .choiceHead div {
  overflow: hidden;
  display: block;
  width: 20px;
  height: 0;
  padding-top: 20px;
  background: url("../img/icon_cross.svg#gy") no-repeat center center;
  background-size: 16px 16px;
  cursor: pointer;
}

.choiceBox .choiceHead div:hover {
  opacity: 0.6;
}

.choiceBox .choiceList {
  padding: 10px 20px;
  border-top: 1px solid #D7D8D9;
}

.choiceBox .choiceList li {
  padding: 10px 0;
}

.choiceBox .period {
  padding: 10px 0;
  border-top: 1px solid #D7D8D9;
}

.choiceBox .period dt {
  padding: 10px 20px;
  font-weight: bold;
  color: #AEB2B4;
}

.choiceBox .period dd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 10px 20px;
}

.choiceBox .period dd .selectBox:not(:first-child) {
  margin-left: 8px;
}

.checkBoxList li {
  padding: 8px 16px;
}

/* infoBox */
.infoBox {
  margin-top: 40px;
}

.infoBox dt::before {
  content: "●";
  color: #353E43;
}

.infoBox dd {
  max-height: 1000px;
  margin-top: 16px;
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.infoBox dd p {
  margin-top: 16px;
}

.infoBox dd p em {
  font-style: normal;
  color: #00A6C2;
}

.infoBox dd.hide {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
}

/*========================================
  table
========================================*/
/* table wrapper */
.tableWrap {
  overflow-x: auto;
  margin: 40px 0;
  width: 100%;
}

.tableWrap table {
  table-layout: auto;
  min-width: 100%;
  width: 100%;
}

@media screen and (max-width: 899px) {
  .tableWrap {
    margin: 16px 0;
  }

  .tableWrap table {
    width: 800px;
  }
}

/* list list */
.listTable {
  border-collapse: collapse;
}

.listTable thead th {
  padding: 16px 0;
  text-align: left;
  border-bottom: 2px solid #D7D8D9;
  color: #5D6569;
}

.listTable tbody td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid #D7D8D9;
}

.listTable tbody td:last-child {
  width: 70px;
  padding-right: 0;
}

.listTable tbody td:last-child *[class*="btn-sld"] {
  width: 100%;
  padding: 8px;
}

.listTable tbody td span[class^="stts-"] {
  display: inline-block;
}

.listTable tbody td span[class^="stts-"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 2px solid #AEB2B4;
  vertical-align: middle;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.listTable tbody td .stts-open::before {
  background-color: #d3ffbf;
  border: 2px solid #a9cc99;
}

.listTable tbody td .stts-close::before {
  background-color: #F6F6F6;
  border: 2px solid #C5C5C5;
}

.listTable tbody td .stts-unexam::before {
  background-color: #bfefff;
  border: 2px solid #99bfcc;
}

.listTable tbody td .stts-exam::before {
  background-color: #ffe9bf;
  border: 2px solid #ccba99;
}

.listTable tbody td .stts-reject::before {
  background-color: #ffc3bf;
  border: 2px solid #cc9c99;
}

/*========================================
  list
========================================*/
/* simpleListBox */
.simpleAnchorList {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

.simpleAnchorList li {
  padding-right: 1em;
  border-right: 1px solid #CCC;
  margin-right: 1em;
  margin-bottom: .5em;
}

.simpleAnchorList li:last-child {
  padding-right: 0;
  border-right: 0;
  margin-right: 0;
}

/*========================================
  image
========================================*/
/* fit image */
.fitImg img {
  max-width: 100%;
  height: auto;
}

/*========================================
  text
========================================*/
/* review star */
.reviewStar {
  vertical-align: middle;
}

/* require */
.require {
  margin: 0 4px;
  color: #FF0014;
}

/* sum(金額) */
.sum {
  display: block;
  padding-right: 8px;
  text-align: right;
}

/* line wrap */
.lw,
.lw span {
  display: inline-block;
}

/* br */
br.pc {
  display: block;
}

br.sp {
  display: none;
}

@media screen and (max-width: 899px) {
  br.pc {
    display: none;
  }

  br.sp {
    display: block;
  }
}

/*========================================
  common
========================================*/
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%;
  /* 10px */
}

body {
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.4rem;
  color: #353E43;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/*========================================
  global header
========================================*/

header {
  position: relative;
  z-index: 2;
  min-height: 81px;
  /* ガタつき調整のため 子要素の持つ高さ + border 1px */
  flex: 1 0 auto;
}

/* 899pxは、packages/pages/scss/_base.scss の $breakpoint.spを参照 */
@media screen and (max-width: 899px) {
  header {
    min-height: 60px;
    /* ガタつき調整のため */
  }
}

main {
  position: relative;
  z-index: 1;
}

/*========================================
  global footer
========================================*/

/*========================================
  商品管理
========================================*/
/* 商品管理フレーム */
.board {
  display: table;
  width: 100%;
  min-width: 1000px;
  min-height: calc(100% - 80px);
}

.ctrlPanel {
  display: table-cell;
  vertical-align: top;
  position: relative;
  width: 229px;
  padding: 20px 0 80px;
  backgroud-color: #FFF;
  border-right: 1px solid #D7D8D9;
}

.ctrlPanel p {
  position: relative;
  padding: 10px 20px;
  font-weight: bold;
  color: #AEB2B4;
}

.ctrlPanel p::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: calc(100% - 20px);
  background-color: #5D6569;
}

.ctrlPanel ul {
  padding-left: 30px;
}

.ctrlPanel ul li {
  padding: 16px 0;
}

.ctrlPanel ul li a {
  padding-left: 30px;
  background-size: 16px 16px;
  color: #5D6569;
}

.ctrlPanel ul li a.current,
.ctrlPanel ul li a:hover {
  color: #00A6C2;
}

.ctrlPanel ul.menuAccount {
  /*
    li:nth-child(2) a {
        @include icon(dashboard, gy, bl);
    }
    li:nth-child(3) a {
        @include icon(dashboard, gy, bl);
    }
    li:nth-child(4) a {
        @include icon(dashboard, gy, bl);
    }
    li:nth-child(5) a {
        @include icon(dashboard, gy, bl);
    }*/
}

.ctrlPanel ul.menuAccount li:nth-child(1) a {
  background: url("../img/icon_dashboard.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuAccount li:nth-child(1) a.current,
.ctrlPanel ul.menuAccount li:nth-child(1) a:hover {
  background: url("../img/icon_dashboard.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(1) a {
  background: url("../img/icon_dashboard.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(1) a.current,
.ctrlPanel ul.menuPersonal li:nth-child(1) a:hover {
  background: url("../img/icon_dashboard.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(2) a {
  background: url("../img/icon_favorite.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(2) a.current,
.ctrlPanel ul.menuPersonal li:nth-child(2) a:hover {
  background: url("../img/icon_favorite.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(3) a {
  background: url("../img/icon_library.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(3) a.current,
.ctrlPanel ul.menuPersonal li:nth-child(3) a:hover {
  background: url("../img/icon_library.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(4) a {
  background: url("../img/icon_setting.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuPersonal li:nth-child(4) a.current,
.ctrlPanel ul.menuPersonal li:nth-child(4) a:hover {
  background: url("../img/icon_setting.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuCustomer {
  /*
    li:nth-child(2) a {
        @include icon(library, gy, bl);
    }
    li:nth-child(3) a {
        @include icon(library, gy, bl);
    }*/
}

.ctrlPanel ul.menuCustomer li:nth-child(1) a {
  background: url("../img/icon_library.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuCustomer li:nth-child(1) a.current,
.ctrlPanel ul.menuCustomer li:nth-child(1) a:hover {
  background: url("../img/icon_library.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(1) a {
  background: url("../img/icon_merchandise.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(1) a.current,
.ctrlPanel ul.menuExhibitor li:nth-child(1) a:hover {
  background: url("../img/icon_merchandise.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(2) a {
  background: url("../img/icon_order.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(2) a.current,
.ctrlPanel ul.menuExhibitor li:nth-child(2) a:hover {
  background: url("../img/icon_order.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(3) a {
  background: url("../img/icon_customer.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(3) a.current,
.ctrlPanel ul.menuExhibitor li:nth-child(3) a:hover {
  background: url("../img/icon_customer.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(4) a {
  background: url("../img/icon_sales.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(4) a.current,
.ctrlPanel ul.menuExhibitor li:nth-child(4) a:hover {
  background: url("../img/icon_sales.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(5) a {
  background: url("../img/icon_report.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuExhibitor li:nth-child(5) a.current,
.ctrlPanel ul.menuExhibitor li:nth-child(5) a:hover {
  background: url("../img/icon_report.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuLogout {
  position: absolute;
  left: 0;
  bottom: 10px;
}

.ctrlPanel ul.menuLogout li:nth-child(1) a {
  background: url("../img/icon_logout.svg#gy") no-repeat left center;
  background-size: 16px 16px;
}

.ctrlPanel ul.menuLogout li:nth-child(1) a.current,
.ctrlPanel ul.menuLogout li:nth-child(1) a:hover {
  background: url("../img/icon_logout.svg#bl") no-repeat left center;
  background-size: 16px 16px;
}

@media screen and (max-width: 899px) {
  .ctrlPanel ul.menuLogout {
    position: static;
  }
}

.ctrlPanel ul+ul {
  margin-top: 40px;
}

@media screen and (max-width: 899px) {
  .ctrlPanel ul+ul {
    margin-top: 16px;
  }
}

.mainPanel {
  display: table-cell;
  vertical-align: top;
}

.mainPanel .panelHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 32px;
  border-bottom: 1px solid #D7D8D9;
}

.mainPanel .panelHead h2 {
  font-weight: bold;
  font-size: 2.4rem;
}

.mainPanel .panelHead .pageName {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.mainPanel .panelHead .pageName>*:not(:last-child) {
  margin-right: 24px;
}

.mainPanel .panelHead .pageFunc {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.mainPanel .panelHead .pageFunc>* {
  margin-left: 16px;
}

.mainPanel .panelBody {
  padding: 32px;
}

.mainPanel .panelBody+.panelBody {
  border-top: 1px solid #D7D8D9;
}

@media screen and (max-width: 480px) {
  .mainPanel .panelHead {
    display: block;
    padding: 16px;
  }

  .mainPanel .panelHead .pageName {
    display: block;
  }

  .mainPanel .panelHead .pageName>*:not(:last-child) {
    margin-right: 0;
  }

  .mainPanel .panelHead .pageName>*[class^="btn-"] {
    display: inline-block;
    margin-bottom: 32px;
  }

  .mainPanel .panelHead .pageFunc {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 32px;
  }

  .mainPanel .panelHead .pageFunc>* {
    margin-left: 0;
    margin-right: 16px;
  }

  .mainPanel .panelBody {
    padding: 16px;
  }
}

@media screen and (max-width: 899px) {
  .board {
    display: block;
    position: relative;
    width: 100%;
    min-width: auto;
  }

  .board .ctrlPanel {
    display: block;
    position: absolute;
    left: -230px;
    top: 0;
    z-index: 900;
    width: 261px;
    height: 100%;
    padding: 20px 0;
    background-color: #FFF;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }

  .board .mainPanel {
    display: block;
    padding-left: 32px;
  }
}

/* 商品詳細　*/
.itemDetail {
  margin-top: 40px;
}

.itemDetail h2 {
  margin-bottom: 32px;
  font-size: 1.8rem;
}

.itemDetail>p {
  margin-top: 16px;
}

.itemDetail .itemImg {
  margin-top: 24px;
}

.itemDetail .itemImg>p {
  margin-top: 16px;
  color: #5D6569;
}

/*========================================
  Web用ヘッダー
========================================*/
.gHead.web {
  background-color: #353E43;
  color: #FFF;
  -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  /*
    @include mq(tb) {
        background-color: #FFF;
        color: $cl-main;
        .accountStts {
            .navItems {
                > li {
                    &.lang {
                        > p {
                            background: url("../img/icon_language.svg#bk") no-repeat center center;
                            background-size: 20px 20px;
                            &:hover {
                                background: url("../img/icon_language.svg#bk") no-repeat center center;
                                background-size: 20px 20px;
                            }
                        }
                    }
                    &.topic {
                        > p {
                            .txt {
                                background: url("../img/icon_bell.svg#bk") no-repeat center center;
                                background-size: 20px 20px;
                                &:hover {
                                    background: url("../img/icon_bell.svg#bk") no-repeat center center;
                                    background-size: 20px 20px;
                                }
                            }
                        }
                    }
                    &.login {
                        > a {
                            background: url("../img/icon_account.svg#bk") no-repeat 5px center;
                            background-size: 20px 20px;
                            color: #FFF;
                            &:hover {
                                background: url("../img/icon_account.svg#bk") no-repeat 5px center;
                                background-size: 20px 20px;
                                color: #FFF;
                            }
                        }
                        .subItem {
                            ul {
                                &:last-child {
                                    li a {
                                        background: url("../img/icon_logout.svg#bk") no-repeat left center;
                                        background-size: 20px 20px;
                                        &:hover {
                                            background: url("../img/icon_logout.svg#bk") no-repeat left center;
                                            background-size: 20px 20px;
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            }


            @include mq(tb) {
                .accountStts {
                    display: none;
                }
            }

        }
    }
    */
}

.gHead.web .accountStts .navItems>li.lang>p {
  background: url("../img/icon_language.svg#wh") no-repeat center center;
  background-size: 20px 20px;
}

.gHead.web .accountStts .navItems>li.lang>p:hover {
  background: url("../img/icon_language.svg#wh") no-repeat center center;
  background-size: 20px 20px;
}

.gHead.web .accountStts .navItems>li.topic>p .txt {
  background: url("../img/icon_bell.svg#wh") no-repeat center center;
  background-size: 20px 20px;
}

.gHead.web .accountStts .navItems>li.topic>p .txt:hover {
  background: url("../img/icon_bell.svg#wh") no-repeat center center;
  background-size: 20px 20px;
}

.gHead.web .accountStts .navItems>li.login>a {
  background: url("../img/icon_account.svg#wh") no-repeat 5px center;
  background-size: 20px 20px;
  color: #FFF;
}

.gHead.web .accountStts .navItems>li.login>a:hover {
  background: url("../img/icon_account.svg#wh") no-repeat 5px center;
  background-size: 20px 20px;
  color: #FFF;
}

.gHead.web .accountStts .navItems>li.login .subItem ul:last-child li a {
  background: url("../img/icon_logout.svg#wh") no-repeat left center;
  background-size: 20px 20px;
}

.gHead.web .accountStts .navItems>li.login .subItem ul:last-child li a:hover {
  background: url("../img/icon_logout.svg#wh") no-repeat left center;
  background-size: 20px 20px;
}

@media screen and (max-width: 899px) {
  .gHead.web .accountStts .accountStts {
    display: none;
  }
}

/*========================================
  Web用フッター
========================================*/
.gFoot.web .siteNav .categorySet .column {
  width: 174.4px;
}

.gFoot.web .siteNav .categorySet .column:first-child {
  width: 174.4px;
}

.gFoot.web .signature .extra {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

@media screen and (max-width: 480px) {
  .gFoot.web .signature .extra {
    display: block;
    margin-top: 16px;
  }
}

@media screen and (max-width: 480px) {
  .gFoot.web .siteNav .logo {
    margin: 0 auto;
  }

  .gFoot.web .siteNav .categorySet {
    display: none;
  }
}

@media screen and (max-width: 480px) and (max-width: 899px) {
  .gFoot.web .siteNav .logo {
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .gFoot.web .signature {
    display: none;
  }
}

/*========================================
  フォーム入力
========================================*/
/* form - frame */
.formFrame {
  width: 100%;
  max-width: 732px;
  margin: 0 auto;
  padding: 60px 0;
  background-color: #FFF;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@media screen and (max-width: 899px) {
  .formFrame {
    padding: 40px 16px;
    border-left: none;
    border-right: none;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
}

.formFrame.completed .formHead::before,
.formFrame.sended .formHead::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 32px;
  border: 4px solid #00A6C2;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

@media screen and (max-width: 899px) {

  .formFrame.completed,
  .formFrame.sended {
    margin: 0 auto;
  }
}

.formFrame.completed .formHead::before {
  background: url("../../cmn/img/icon_check.svg#bl") no-repeat center center;
  background-size: 40px 40px;
}

.formFrame.sended .formHead::before {
  background: url("../../cmn/img/icon_mail.svg#bl") no-repeat center center;
  background-size: 50px 50px;
}

.formFrame .formHead {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.formFrame .formHead h2 {
  margin-bottom: 32px;
  font-size: 2.4rem;
}

.formFrame .formHead p {
  margin-top: 16px;
  text-align: left;
}

.formFrame .formHead a {
  font-size: 1.6rem;
  font-weight: bold;
}

.formFrame .formBody {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.formFrame .formItems {
  margin-top: 40px;
}

.formFrame .formItems dt {
  margin-top: 32px;
  font-weight: bold;
  font-size: 1.4rem;
}

.formFrame .formItems dd {
  margin-top: 8px;
}

.formFrame .formItems.confirm dt {
  font-weight: normal;
  font-size: 1.4rem;
}

.formFrame .formItems.confirm dd {
  font-weight: bold;
  font-size: 1.6rem;
}

.formFrame .briefing>*:first-child {
  margin-top: 0;
}

.formFrame .briefing p {
  margin-top: 16px;
  color: #5D6569;
}

.formFrame .mailSender {
  margin: 32px 0;
}

.formFrame .mailSender a {
  display: block;
  padding: 16px 32px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  word-wrap: break-word;
  font-size: 1.6rem;
  color: #353E43;
}

.formFrame .agreementCheck {
  margin-top: 32px;
  font-size: 1.4rem;
}

.formFrame .agreementCheck dl dt {
  padding-left: 1em;
  text-indent: -1em;
}

.formFrame .agreementCheck dl dt::before {
  content: "●";
}

.formFrame .agreementCheck dl dd {
  margin-top: 24px;
  color: #868B8E;
}

.formFrame .agreementCheck dl .checkBtn {
  margin-top: 32px;
}

.formFrame .optional {
  display: inline-block;
  margin: 0 16px;
  padding: 0 12px;
  vertical-align: middle;
  line-height: 1.67;
  font-weight: normal;
  font-size: 1.2rem;
  color: #FFF;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #868B8E;
}

.formFrame .partition {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0;
  font-size: 1.6rem;
  color: #868B8E;
}

.formFrame .partition::before,
.formFrame .partition::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #D7D8D9;
}

.formFrame .partition::before {
  margin-right: 32px;
}

.formFrame .partition::after {
  margin-left: 32px;
}

.formFrame .separater {
  max-width: 460px;
  margin: 40px auto;
  border: none;
  border-top: 1px solid #D7D8D9;
}

.formFrame .supportMes {
  margin-top: 8px;
  text-align: right;
}

.formFrame .supportMes p {
  display: inline-block;
}

.formFrame *[class^="btn-"] {
  min-width: 280px;
}

/*========================================
  CTA
========================================*/
.cta {
  width: 100%;
  min-width: 1040px;
  padding: 56px 20px;
  background-color: #00A6C2;
  text-align: center;
  color: #FFF;
}

.cta .ctaHead {
  font-weight: bold;
  font-size: 3.2rem;
}

.cta ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  margin-top: 40px;
}

.cta ul li {
  width: 200px;
}

.cta ul li:not(:first-child) {
  margin-left: 24px;
}

.cta *[class*="btn-"] {
  width: 100%;
}

@media screen and (max-width: 899px) {
  .cta {
    min-width: auto;
    padding: 40px 20px;
  }

  .cta .ctaHead {
    font-size: 2.4rem;
  }

  .cta ul {
    display: block;
    margin-top: 32px;
  }

  .cta ul li {
    margin: 0 auto;
  }

  .cta ul li:not(:first-child) {
    margin: 24px auto 0;
  }
}

/*========================================
  main
========================================*/
/* title block */
.titleBlock h2 {
  font-size: 3.2rem;
}

.titleBlock p {
  margin-top: 32px;
}

.titleBlock .actSet {
  margin-top: 40px;
}

/*========================================
  top
========================================*/
#top_feature h3 {
  position: relative;
  text-align: center;
  font-weight: normal;
  font-size: 2.4rem;
}

#top_feature .columnSet>* h4 {
  font-size: 1.6rem;
}

#top_feature .columnSet>* p {
  margin-top: 16px;
}

#top_feature .columnSet>* .tagList {
  margin-top: 16px;
}

/*========================================
  mkt_product_detail
========================================*/
.productBlock {
  width: 656px;
  margin: 40px auto;
  padding: 32px;
}

@media screen and (max-width: 899px) {
  .productBlock {
    width: 100%;
    max-width: 656px;
  }
}

.showcase .itemImg {
  overflow: hidden;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.showcase .itemImg img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase .itemThumb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 16px -8px;
}

.showcase .itemThumb li {
  position: relative;
  width: 100px;
  margin: 8px;
}

.showcase .itemThumb li::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border: 2px solid #353E43;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  opacity: 0.5;
  pointer-events: none;
}

.showcase .itemThumb li.current::after,
.showcase .itemThumb li:hover::after {
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: 8px solid #00A6C2;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.showcase .itemThumb li a {
  display: block;
  overflow: hidden;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.showcase .itemThumb li a img {
  display: block;
}

.showcase .itemThumb li.hidden {
  margin: 0 8px;
}

.showcase .itemThumb li.hidden::after {
  display: none;
}

@media screen and (max-width: 480px) {
  .showcase .itemThumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
}

.showcase .itemSummary {
  margin-top: 40px;
}

.showcase .itemSummary small {
  margin-bottom: 32px;
  font-size: 1.6rem;
  color: #5D6569;
}

.showcase .itemSummary h2 {
  font-size: 3.2rem;
}

.showcase .itemSummary p {
  margin-top: 24px;
}

.showcase .itemOrder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 160px;
  margin-top: 40px;
  padding: 16px 32px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.showcase .itemOrder dt {
  margin: 16px 0;
}

.showcase .itemOrder dt strong {
  display: block;
  font-weight: bold;
  font-size: 3.2rem;
  color: #353E43;
}

.showcase .itemOrder dd {
  margin: 16px 0;
}

.showcase .itemPreview {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
  margin-top: 16px;
  padding: 16px 32px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.showcase .itemPreview dt {
  padding-left: 32px;
  background-size: 16px 16px;
  font-weight: bold;
}

.showcase .itemPreview dd a {
  padding-right: 24px;
  background: url("../img/icon_btn_wdg.svg#gy") no-repeat right center;
  background-size: 12px 12px;
  color: #5D6569;
}

.showcase .itemPreview.locate dt {
  background: url("../img/icon_order_cloud.svg#bk") no-repeat left center;
  background-size: 24px 24px;
}

.showcase .itemPreview.package dt {
  background: url("../img/icon_order_pkg.svg#bk") no-repeat left center;
  background-size: 24px 24px;
}

.itemSeller {
  margin-top: 40px;
}

.itemSeller .sellerId {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 32px;
}

.itemSeller .sellerId .sellerImg {
  overflow: hidden;
  margin-right: 24px;
  width: 60px;
  height: 60px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.itemSeller .sellerId .sellerImg img {
  display: block;
}

.itemSeller .sellerId .sellerName dd {
  font-weight: bold;
  font-size: 1.6rem;
}

.itemDetail {
  margin-top: 40px;
}

.itemDetail h2 {
  margin-bottom: 32px;
  font-size: 1.8rem;
}

.itemDetail>p {
  margin-top: 16px;
}

.itemDetail .itemImg {
  margin-top: 24px;
}

.itemDetail .itemImg>p {
  margin-top: 16px;
  color: #5D6569;
}

.unsuitableBtn {
  margin-top: 40px;
  text-align: center;
}

.customerReview {
  margin-top: 40px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.customerReview .reviewHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 32px;
  border-bottom: 1px solid #D7D8D9;
}

.customerReview .reviewHead .reviewResult h3 {
  font-size: 1.8rem;
}

.customerReview .reviewHead .reviewResult p {
  margin-top: 8px;
}

.customerReview .reviewBody {
  padding: 32px;
}

.customerReview .reviewBody .reportBox:not(:first-child) {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #D7D8D9;
}

.customerReview .reviewBody .reportBox .reportTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.customerReview .reviewBody .reportBox .reportTitle .ratio {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.customerReview .reviewBody .reportBox .reportTitle .ratio strong {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.4rem;
}

.customerReview .reviewBody .reportBox>p {
  margin-top: 16px;
}

.customerReview .reviewBody .reportBox .author {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.customerReview .reviewBody .reportBox .author .reporter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.customerReview .reviewBody .reportBox .author .reporter .customerImg {
  overflow: hidden;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.customerReview .reviewBody .reportBox .author .reporter .postDate {
  margin-left: 8px;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  .customerReview .reviewHead {
    padding: 16px;
  }

  .customerReview .reviewBody {
    padding: 16px;
  }

  .customerReview .reviewBody .reportBox .reportTitle {
    display: block;
  }

  .customerReview .reviewBody .reportBox .reportTitle .ratio {
    margin-top: 8px;
  }

  .customerReview .reviewBody .reportBox .author {
    display: block;
  }

  .customerReview .reviewBody .reportBox .author .postDate {
    margin-top: 8px;
  }
}

.packageList {
  margin-top: 80px;
}

.packageList .pkgHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.packageList .pkgHead h3 {
  font-weight: bold;
  font-size: 2rem;
}

.packageList .pkgBox {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.packageList .pkgBox .pkgImg {
  overflow: hidden;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 280px;
}

.packageList .pkgBox .pkgImg img {
  display: block;
  width: 100%;
  height: auto;
}

.packageList .pkgBox .pkgDetail {
  width: calc(100% - 304px);
}

.packageList .pkgBox .pkgDetail small {
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
  color: #5D6569;
}

.packageList .pkgBox .pkgDetail .pkgTitle {
  font-size: 2rem;
}

.packageList .pkgBox .pkgDetail p {
  margin-top: 16px;
}

.packageList .pkgBox .pkgDetail .pkgTags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 16px;
}

.packageList .pkgBox .pkgDetail .pkgTags li {
  margin-right: 16px;
  padding: 6px 18px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.2rem;
}

@media screen and (max-width: 480px) {
  .packageList .pkgHead {
    display: block;
  }

  .packageList .pkgHead a[class^="btn-"] {
    display: inline-block;
    margin-top: 16px;
  }

  .packageList .pkgBox {
    display: block;
    margin-top: 32px;
  }

  .packageList .pkgBox .pkgImg {
    margin: 0 auto;
    width: 100%;
    max-width: 280px;
  }

  .packageList .pkgBox .pkgDetail {
    width: 100%;
    margin-top: 16px;
  }
}

.ratio {
  text-align: center;
}

.ratio strong {
  display: block;
  line-height: 1;
  font-weight: bold;
  font-size: 3.2rem;
}

.ratio p {
  white-space: nowrap;
}

/*========================================
  mkt_product_pay
========================================*/
.orderBlock {
  width: 656px;
  margin: 40px auto;
}

.orderBlock .orderHead {
  position: relative;
}

.orderBlock .orderHead h2 {
  text-align: center;
  font-size: 2.4rem;
}

.orderBlock .orderHead p {
  text-align: center;
}

.orderBlock .orderHead p a {
  display: inline-block;
  margin: 0 0.5em;
  font-weight: bold;
}

.orderBlock .orderBody {
  padding: 32px;
}

.orderBlock .orderBody .checkBtn {
  width: 484px;
  margin: 40px auto 0;
}

@media screen and (max-width: 899px) {
  .orderBlock {
    width: 100%;
  }

  .orderBlock .orderBody .checkBtn {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .orderBlock {
    width: 100%;
  }

  .orderBlock .orderHead {
    padding: 0 16px;
  }

  .orderBlock .orderBody {
    padding: 16px;
  }
}

.orderStep {
  position: relative;
  width: 484px;
  margin: 40px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.orderStep::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 0;
  width: 100%;
  height: 1px;
  background-color: #D7D8D9;
}

.orderStep li {
  position: relative;
  z-index: 10;
  background-color: #FFF;
  font-weight: bold;
  color: #66cada;
}

.orderStep li::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  padding: 10px;
  text-align: center;
  background-color: #66cada;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-weight: bold;
  color: #FFF;
}

.orderStep li:nth-child(1)::before {
  content: "1";
}

.orderStep li:nth-child(2)::before {
  content: "2";
}

.orderStep li:nth-child(3)::before {
  content: "3";
}

.orderStep li:nth-child(4)::before {
  content: "4";
}

.orderStep li.current {
  font-weight: bold;
  color: #00A6C2;
}

.orderStep li.current::before {
  background-color: #00A6C2;
}

.orderStep li.current~li {
  font-weight: normal;
  color: #5D6569;
}

.orderStep li.current~li::before {
  background-color: #AEB2B4;
}

@media screen and (max-width: 899px) {
  .orderStep {
    width: 398px;
  }
}

@media screen and (max-width: 480px) {
  .orderStep {
    width: 100%;
  }
}

.sheetWrap {
  max-width: 1000px;
}

@media screen and (max-width: 480px) {
  .sheetWrap {
    overflow-x: auto;
  }
}

.itemDatasheet {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}

.itemDatasheet th,
.itemDatasheet td {
  border-bottom: 1px solid #D7D8D9;
  text-align: left;
}

.itemDatasheet th {
  width: 180px;
  padding: 24px 16px 24px 0;
  vertical-align: middle;
  white-space: nowrap;
}

.itemDatasheet th small {
  display: block;
  margin-top: 8px;
  font-weight: normal;
  font-size: 1.2rem;
  color: #868B8E;
}

.itemDatasheet td {
  padding: 24px 0;
}

.itemDatasheet td .ver {
  display: inline-block;
  margin-right: 16px;
}

@media screen and (max-width: 480px) {
  .itemDatasheet {
    display: block;
  }

  .itemDatasheet thead,
  .itemDatasheet tbody,
  .itemDatasheet tr,
  .itemDatasheet th,
  .itemDatasheet td {
    display: block;
    width: 100%;
  }

  .itemDatasheet tr {
    padding: 16px 0;
    border-bottom: 1px solid #D7D8D9;
  }

  .itemDatasheet th,
  .itemDatasheet td {
    padding: 0;
    border-bottom: none;
  }

  .itemDatasheet th {
    margin-bottom: 8px;
  }
}

.formRow+.formRow {
  margin-top: 16px;
}

.tagList li {
  display: inline-block;
  margin-right: 16px;
  padding: 4px 20px;
  border: 2px solid #AEB2B4;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.tagList li a {
  color: #5D6569;
}

.confirmMessage {
  margin: 40px;
  text-align: center;
}

.confirmMessage small {
  display: block;
  margin-top: 16px;
  font-size: 1.2rem;
  color: #AEB2B4;
}

/*========================================
  新規登録
========================================*/
#entry {
  padding: 80px 0;
  background-color: #EBECEC;
}

.entryBlock {
  width: 484px;
  margin: 0 auto;
  padding: 40px;
  background: #FFF;
}

.entryBlock .entryHead {
  margin: 40px 0;
  text-align: center;
}

.entryBlock .entryHead h2 {
  margin-bottom: 40px;
  font-size: 2rem;
}

.entryBlock .entryHead p a {
  display: inline-block;
  margin: 0 8px;
  font-weight: bold;
}

.entryForm {
  margin-top: 80px;
}

.entryForm dt {
  margin-top: 32px;
  font-weight: bold;
  font-size: 1.4rem;
}

.entryForm dd {
  margin-top: 16px;
}

.entryForm dd input[type=text],
.entryForm dd input[type=tel],
.entryForm dd input[type=email],
.entryForm dd input[type=url],
.entryForm dd input[type=password] {
  padding: 11px 12px;
}

/*========================================
  商品管理
========================================*/
.panelBody>*:first-child {
  margin-top: 0;
}

.panelBody>*:last-child {
  margin-bottom: 0;
}

.checkAction+.mngBlock {
  margin-top: 0;
}

.mngHeadSet {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.mngHeadSet .mngHead {
  margin-bottom: 32px;
  font-size: 2.4rem;
}

.mngHeadSet .mngSubHead {
  margin: 32px 0 16px;
}

/* check action */
.checkAction {
  margin-bottom: 80px;
}

.caBox {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 32px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.caBox label {
  display: block;
  position: absolute;
  right: -12px;
  top: -12px;
  z-index: 10;
  overflow: hidden;
  width: 24px;
  height: 0;
  padding-top: 24px;
  background: url("../img/icon_cross.svg#wh") no-repeat center center #5D6569;
  background-size: 10px 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

.caBox:hover label {
  opacity: 1;
  pointer-events: visible;
}

.caBox:hover label:hover {
  opacity: 0.7;
}

.caBox .caDetail {
  flex: 1;
  padding-right: 32px;
}

.caBox .caDetail dt {
  font-weight: bold;
  font-size: 1.6rem;
}

.caBox .caDetail dd {
  margin-top: 16px;
}

.caBox .caDetail dd span {
  display: inline-block;
}

.caBox .caBtn {
  width: 200px;
}

/* article list */
.atclList {
  border-top: 1px solid #D7D8D9;
}

.atclList li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #D7D8D9;
}

.atclList li time {
  width: 200px;
  color: #868B8E;
}

.atclList li p {
  flex: 1;
}

.atclList li p a {
  color: #353E43;
}

/* function block */
.funcItems {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 40px;
}

.addItem {
  width: 150px;
}

.addItem button {
  width: 100%;
  padding: 8px 12px;
}

.sortItems {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.sortItems li {
  width: 150px;
}

.sortItems li:not(:first-child) {
  margin-left: 16px;
}

.sortItems li .selectBox select {
  padding: 8px 32px 8px 22px;
}

.funcOrder {
  margin-bottom: 40px;
}

.funcCustomer {
  margin-bottom: 40px;
}

.funcSales {
  margin-bottom: 40px;
}

@media screen and (max-width: 480px) {
  .funcItems {
    display: block;
    margin-bottom: 40px;
  }

  .addItem {
    width: 100%;
  }

  .sortItems {
    display: block;
  }

  .sortItems li {
    width: 100%;
  }

  .sortItems li:not(:first-child) {
    margin: 16px 0 0;
  }

  .funcOrder,
  .funcCustomer,
  .funcSales {
    margin-bottom: 16px;
  }
}

/* tab */
.tabSet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.tabSet input[name=tabSelect] {
  display: none;
}

.tabSet input[name=tabSelect]+label {
  width: 50%;
  padding: 8px;
  border: 2px solid #D7D8D9;
  text-align: center;
  font-weight: bold;
  color: #868B8E;
}

.tabSet input[name=tabSelect]+label:first-child {
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}

.tabSet input[name=tabSelect]+label:last-child {
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}

.tabSet input[name=tabSelect]+label::before {
  display: none;
}

.tabSet input[name=tabSelect]:checked+label {
  background-color: #ccedf3;
  border: 2px solid #ccedf3;
  font-weight: bold;
  color: #00A6C2;
}

.tabSet .tabContent {
  display: none;
  width: 100%;
  margin-top: 40px;
}

.tabSet #tab01:checked~#tabContent01,
.tabSet #tab02:checked~#tabContent02 {
  display: block;
}

/* add thumbnail */
.addThumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin-top: -24px;
}

.addThumbs::after {
  content: "";
  display: block;
  width: calc((100% - 48px) / 3);
}

.addThumbs .addBtn {
  position: relative;
  width: calc((100% - 48px) / 3);
  margin-top: 24px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #D7D8D9;
}

.addThumbs .addBtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: url("../img/icon_cross.svg#gy") no-repeat center center;
  background-size: 30px 30px;
  pointer-events: none;
}

.addThumbs .addBtn:hover {
  opacity: 0.6;
}

.addThumbs label.thumb {
  overflow: hidden;
  width: calc((100% - 48px) / 3);
  margin-top: 24px;
  border: 2px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.addThumbs label.thumb::before {
  display: none;
}

.addThumbs label.thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.addThumbs input[type=radio]:checked+label.thumb {
  border: 2px solid #00A6C2;
}

/* report */
.reportBlock+.reportBlock {
  margin-top: 40px;
}

.reportBlock .reportHead {
  margin-bottom: 16px;
}

/* account menu */
.accountMenu ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 1000px;
  margin-right: -32px;
}

.accountMenu ul::after {
  content: "";
  display: block;
  width: 312px;
}

.accountMenu ul li {
  width: 312px;
  margin: 0 32px 32px 0;
}

.accountMenu ul li a {
  display: block;
  height: 175px;
  padding: 24px;
  border: 1px solid #D7D8D9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.6rem;
  color: #353E43;
}