@charset "UTF-8";
/* ------------------------------
	WHOLE
------------------------------ */
html {
  font-size: calc(62.5% + 1vw);
}

body#about {
  background: url(/mybrand/common/img/bg_mybrand.jpg?5) repeat;
}

header, main section, footer, header h1, footer section {
  width: 100%;
  height: auto;
  text-align: center;
  overflow: hidden;
}

article > section {
  padding: 50px 5% 80px;
  box-sizing: border-box;
}

body#about article > section > h2,
body#about article > section h3 {
  font-size: 1.5rem;
  letter-spacing: 3px;
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 2rem;
}

body#about article > section > h2::before {
  content: "";
  width: 50%;
  height: 1px;
  background: rgb(0, 0, 0);
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (min-width: 500px) {
  body#about article > section > h2 {
    font-size: 23px;
  }
  body#about article > section h3 {
    font-size: 21px;
  }
}
/* ------------------------------
	HEADER
------------------------------ */
header {
  display: block;
  position: relative;
}

header#about {
  height: 385px;
}

header#NOINDEX {
  height: 60px;
}

header > a#logo {
  max-width: 180px;
  display: block;
  position: absolute;
  top: 20px;
  z-index: 10;
}

header#about > a#logo,
header#NOINDEX > a#logo {
  width: 40%;
  left: 5%;
}

header > a#logo > img {
  width: 100%;
}

/*
header#about>a#logo + section {
    height: 400px !important;
    background-position: bottom right;
}
*/
header#about > section#mainPanel {
  height: 100%;
  padding: 70px 5% 0;
  box-sizing: border-box;
  background: bottom right/cover url(/mybrand/content/images/01_common/bg_main2.jpg) no-repeat;
}

header#about > section#mainPanel > h1 {
  font-size: 23px;
  letter-spacing: -1px;
}

header#about > nav {
  display: none;
  position: absolute;
}

section#mainPanel > span {
  color: rgb(0, 140, 200);
  width: 100%;
  font-size: 15px;
  font-family: "Shuei NijimiMGo B", sans-serif;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
}

/*
header#about>nav ol li {
	list-style-type: none;
    padding: 1rem;
}
header#about>nav>ol>li>a,
header#about>nav>ol>li>a:hover {
    display: block;
    min-width: 1rem;
    font-size: 1.3rem;
    line-height: 1.8rem;
    letter-spacing: .2rem;
	white-space: pre-wrap;
	padding-top: 2rem;
	list-style-type: none;
}
header#about>nav ol li a {
    width: 100%;
    display: block;
}
header#about>nav ol li a:hover {
    opacity: .7;
}
header#about>nav ol li.active a, header#about ol li.active a:hover {
    opacity: .3;
}
*/
/* responsive */
@media screen and (max-width: 350px) {
  header#about#toppage h1 + *,
header#about figure + *,
header#about#toppage h1 + * > span,
header#about figure + * > span {
    font-size: 18px;
    letter-spacing: 1px;
  }
  header#about:not(#toppage) > nav > a#instagram {
    width: 30px;
    text-indent: calc(100% - 30px);
    white-space: nowrap;
    overflow: hidden;
  }
  header#about > nav ol li {
    padding: 0.5em;
  }
  header#about:not(#toppage) > nav ol li {
    padding: 0.2em;
  }
}
@media screen and (min-width: 400px) {
  header#about > section#mainPanel {
    padding-top: 100px;
  }
}
@media screen and (min-width: 750px) {
  header#about > section#mainPanel > h1 {
    white-space: pre-wrap;
    font-size: 23px;
  }
  header#about > section#mainPanel {
    padding-top: 130px;
  }
  section#mainPanel > span {
    text-align: right;
  }
}
@media screen and (min-width: 1000px) {
  header#about > section#mainPanel > h1 {
    white-space: pre-wrap;
    font-size: 28px;
  }
  header#about > a#logo + section {
    background-size: 100%;
  }
}
/* ------------------------------
	FORM
------------------------------ */
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search], textarea {
  /* width: calc(100% - 2em) !important; */
  width: 100%;
  height: 16px;
  margin-top: 5px;
  margin-bottom: 3px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 1px;
  font-size: 16px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif !important;
  padding: 23px 1rem;
  box-sizing: border-box;
  /*letter-spacing: .1rem;*/
  outline: 0;
}

/* Search */
form#search {
  width: 280px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  top: -3px;
}

input[type=search] {
  color: rgb(0, 0, 0);
  width: 230px;
  height: 32px;
  border: none;
  background: transparent;
  font-weight: 600;
  padding: 0 0 0 20px;
  opacity: 1;
  outline: 0;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type=search] + label {
  width: 100%;
  height: 40px;
  display: block;
  border: 1px solid rgb(200, 200, 200);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 23px;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

input[type=search]:focus + label {
  color: rgb(0, 0, 0);
  background: rgba(100, 110, 140, 0.3);
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type=search] ~ a.action,
input[type=search] ~ a.action:hover {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background: none;
  position: absolute;
  top: 7px;
  right: 7px;
}

input[type=search] ~ a.action::before,
input[type=search] ~ a.action::after {
  content: "";
  display: block;
  position: absolute;
  transform: none;
}

input[type=search] ~ a.action::before {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

input[type=search] ~ a.action::after {
  width: 3px;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 3px;
  right: 9px;
}

body#about a.submit {
  background: linear-gradient(180deg, rgba(2, 68, 97, 0.8) 0%, rgba(0, 50, 90, 0.8) 100%);
  border-radius: 100px;
  padding: 20px 50px;
  color: rgb(255, 255, 255);
}

/* ------------------------------
	USER
------------------------------ */
body[id^=user] {
  background: rgb(255, 255, 255);
  /* main */
}
body[id^=user] h1, body[id^=user] h2, body[id^=user] h3, body[id^=user] p, body[id^=user] li, body[id^=user] label, body[id^=user] table * {
  color: rgb(26, 32, 44);
}
body[id^=user] h3, body[id^=user] table * {
  /*font-family: new-hero,"New Hero Medium","AxisProN-Medium","A+mfCv-AXIS Font ベーシック M ProN",HiraginoSans-W5,"游ゴシック Medium","Yu Gothic Medium",sans-serif;*/
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 600;
}
body[id^=user] h3 {
  font-size: 20px;
  line-height: 1.5em;
  display: inline-block;
  padding-top: 0;
}
body[id^=user] .remove {
  display: none;
}
body[id^=user] dl[class^=popup] {
  position: absolute;
  display: flex;
}
body[id^=user] dl[class^=popup] dt {
  margin: 0 3px;
}
body[id^=user] dl[class^=popup] dt.download {
  background: center/100% url(/mybrand/common/img/i_download.svg) no-repeat;
}
body[id^=user] dl[class^=popup] dt.edit {
  background: center/100% url(/mybrand/common/img/i_dot.svg) no-repeat;
}
body[id^=user] dl[class^=popup] dt.delete {
  background: center/100% url(/mybrand/common/img/i_delete.svg) no-repeat;
}
body[id^=user] dl[class^=popup] dt.active + dd {
  opacity: 1;
  pointer-events: auto;
  z-index: 99;
}
body[id^=user] dl[class^=popup] dd {
  min-width: 100px;
  padding: 10px 0;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(200, 200, 200);
  border-radius: 5px;
  filter: drop-shadow(1px 1px 1px rgb(224, 231, 241));
  position: absolute;
  top: 15px;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
body[id^=user] dl[class^=popup] dd li {
  display: block;
  list-style: none;
}
body[id^=user] main[id^=user] {
  padding: 25px;
  box-sizing: border-box;
  position: relative;
}
body[id^=user] main[id^=user]#user_identification dl.form input:not([type=checkbox]) {
  width: 50px;
  height: 80px;
  margin: 10px;
  text-align: center;
  font-size: 20px;
}
body[id^=user] main[id^=user] a[class^=a-] {
  display: block;
}
body[id^=user] main[id^=user] a[class^=a-][class*=back] {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
}
body[id^=user] main[id^=user] a[class^=a-][class*=back]::before {
  content: "";
}
body[id^=user] main[id^=user] button.submit, body[id^=user] main[id^=user] a.submit, body[id^=user] main[id^=user] a.submit:hover {
  color: rgb(255, 255, 255);
  font-size: 13px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 500;
  line-height: 1;
  background: rgb(33, 39, 41);
  padding: 9.5px 20px;
  border-radius: 18px;
  cursor: pointer;
  border: none;
}
body[id^=user] main[id^=user] button.submit[action^=remove], body[id^=user] main[id^=user] a.submit[action^=remove], body[id^=user] main[id^=user] a.submit[action^=remove]:hover {
  color: rgb(33, 39, 41);
  background: rgb(247, 249, 250);
  border: 1px solid rgb(33, 39, 41);
  font-weight: 600;
}
body[id^=user] main[id^=user] dl[class^=popup] button.submit, body[id^=user] main[id^=user] dl[class^=popup] a.submit, body[id^=user] main[id^=user] dl[class^=popup] a.submit:hover { /*reset*/
  color: rgb(76, 81, 93);
  background: none;
  font-weight: 600;
  line-height: 1.8em;
  border-radius: 0;
  padding: 0 10px;
}
body[id^=user] main[id^=user] dl[class^=popup] a {
  color: rgb(76, 81, 93);
  font-size: 13px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 600;
  display: block;
  text-decoration: none;
  padding: 0 10px;
}
body[id^=user] main[id^=user] dl[class^=popup] a.autofill span[type=delete] {
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 3px;
  right: 10px;
  cursor: pointer;
  z-index: 10;
}
body[id^=user] main[id^=user] dl[class^=popup] a.autofill span[type=delete]::before, body[id^=user] main[id^=user] dl[class^=popup] a.autofill span[type=delete]::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
body[id^=user] main[id^=user] dl[class^=popup] a.autofill span[type=delete]::before {
  background: rgba(255, 255, 255, 0.6);
  /* box-shadow: 0 1px 1px 0 rgb(150 150 160 / 80%); */
  border-radius: 50%;
}
body[id^=user] main[id^=user] dl[class^=popup] a.autofill span[type=delete]::after {
  background: center/60% url(/mybrand/common/img/i_delete.svg) no-repeat;
  border-radius: 50%;
  opacity: 0.5;
}
body[id^=user] main[id^=user] dl[class^=popup] a:hover, body[id^=user] main[id^=user] dl[class^=popup] a.submit:hover, body[id^=user] main[id^=user] dl[class^=popup] a:focus {
  background: rgb(224, 231, 241);
  text-decoration: none;
}
body[id^=user] main[id^=user] dl[class^=popup] a.disabled {
  pointer-events: none;
  opacity: 0.7;
}

/* common */
/* body */
/* Body :: Popup */
/* header user. */
header[id^=user] {
  min-height: 65px;
  background: rgb(255, 255, 255);
}
header[id^=user] > a#logo {
  width: 130px;
  height: 80%;
  top: 10%;
  left: 30px;
}

main[id^=user] > form > button[action*=create],
main[id^=user] > form > a[action*=create] {
  position: absolute;
  top: 25px;
  right: 25px;
}

main[id^=user] article {
  min-height: 150px;
  background: rgb(255, 255, 255);
  border-radius: 23px;
  margin: 20px auto;
  padding: 25px;
  box-sizing: border-box;
}

main[id^=user] article.bottom {
  border-radius: 0 0 23px 23px;
  margin: 0 auto 20px;
}

main[id^=user] aside {
  width: 100%;
  display: flex;
}

main[id^=user] aside.top {
  background: rgb(207, 212, 216);
  border-radius: 23px 23px 0 0;
  margin: 20px auto 0;
  padding: 25px;
  box-sizing: border-box;
}

main[id^=user] aside.left {
  justify-content: flex-start;
}

main[id^=user] aside.right {
  justify-content: flex-end;
}

main[id^=user] aside > dl,
main[id^=user] aside > dl > dd {
  display: flex;
  align-items: center;
}

main[id^=user] aside > dl > dt {
  font-size: 15px;
  letter-spacing: -1px;
}

/* Main :: table */
main[id^=user] table {
  width: 100%;
  border-spacing: unset;
}

main[id^=user] table * {
  font-size: 13px;
}

main[id^=user] table a,
main[id^=user] table a:hover {
  display: block;
  text-decoration: underline;
}

main[id^=user] table a:hover {
  color: rgb(100, 100, 100);
}

main[id^=user] table th,
main[id^=user] table td {
  padding: 20px;
  text-align: left;
}

main[id^=user] table th {
  color: rgb(130, 130, 130);
  font-size: 12px;
  padding-bottom: 5px;
}

main[id^=user] table td {
  border-top: 1px solid rgb(230, 230, 230);
}

main[id^=user] table td.option dl[class^=popup] dt {
  list-style: none;
  width: 13px;
  height: 13px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

main[id^=user] table td.option dl[class^=popup] dt::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  display: none;
  top: -4px;
  left: -4px;
  background: rgba(0, 29, 64, 0.1);
  border-radius: 50%;
  z-index: 1;
}

main[id^=user] table td.option dl[class^=popup] dt.active::before {
  display: block;
}

/*
main[id^="user"] table td.option li {
    list-style: none;
    width: 13px;
    height: 13px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
main[id^="user"] table td.option li.download {
    background: center/100% url(/common/img/i_download.svg) no-repeat;
}
*/
/*new-hero,"New Hero Medium","AxisProN-Medium","A+mfCv-AXIS Font ベーシック M ProN",HiraginoSans-W5,"游ゴシック Medium","Yu Gothic Medium",sans-serif*/
/* Main :: Form */
main[id^=user] dl.form input:not([type=checkbox]),
main[id^=user] dl.form label.select,
main[id^=user] dl.form textarea {
  margin: 0;
  margin-bottom: 5px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  outline: 0;
  width: 100%;
  min-width: 0px;
  height: 38px;
  outline: transparent solid 2px;
  outline-offset: 2px;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(50, 50, 50, 0.1) 1px 2px 8px;
}

main[id^=user] dl.form input,
main[id^=user] dl.form input ~ label,
main[id^=user] dl.form label.select,
main[id^=user] dl.form textarea,
main[id^=user] dl.form label.select > select {
  /*letter-spacing: .1rem;*/
  letter-spacing: 0;
  line-height: 1rem;
  font-size: 15px;
  font-weight: 500;
  /*font-family: "A1 Mincho", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium","MS PMincho",serif !important;*/
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif !important;
}

main[id^=user] dl.form input[type=radio] {
  display: none;
}

main[id^=user] dl.form ul.radio input ~ label::before {
  top: 3px;
}

main[id^=user] dl.form ul.radio input ~ label::after {
  top: 8px;
}

main[id^=user] dl.form ul.radio input:checked ~ label,
main[id^=user] dl.form ul.checkbox input:checked ~ label {
  color: rgb(26, 32, 44);
}

main[id^=user] dl.form ul.radio input:checked ~ label::before {
  border: 1px solid rgba(26, 32, 44, 0.5);
}

main[id^=user] dl.form ul.radio input:checked ~ label::after {
  background: rgb(26, 32, 44);
}

main[id^=user] dl.form label.select > select {
  padding: 0 28px 0 0px;
}

main[id^=user] dl.form label.select {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

main[id^=user] dl.form input:not([type=checkbox])::-moz-placeholder, main[id^=user] dl.form textarea::-moz-placeholder {
  color: rgb(200, 200, 200);
}

main[id^=user] dl.form input:not([type=checkbox]):-ms-input-placeholder, main[id^=user] dl.form textarea:-ms-input-placeholder {
  color: rgb(200, 200, 200);
}

main[id^=user] dl.form input:not([type=checkbox])::placeholder,
main[id^=user] dl.form textarea::placeholder {
  color: rgb(200, 200, 200);
}

main[id^=user] dl.form dt {
  color: rgb(130, 130, 130);
  font-size: 12px;
  font-family: new-hero, "New Hero Medium", "AxisProN-Medium", "A+mfCv-AXIS Font ベーシック M ProN", HiraginoSans-W5, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  font-weight: 600;
  padding-top: 8px;
}

main[id^=user] dl.form > dt + dd {
  position: relative;
}

main[id^=user] dl.form > dt#postalcode + dd::before,
main[id^=user] dl.form > dt#invoicenumber + dd::before {
  content: "";
  color: rgb(100, 100, 100);
  position: absolute;
  top: 5px;
  left: 9px;
  z-index: 1;
}
main[id^=user] dl.form > dt#postalcode + dd > input[type=text],
main[id^=user] dl.form > dt#invoicenumber + dd > input[type=text] {
  text-indent: 16px;
}

main[id^=user] dl.form > dt#postalcode + dd::before {
  content: "〒";
}

main[id^=user] dl.form > dt#invoicenumber + dd::before {
  content: "T";
}

/* Main :: Form :: Checbox */
main[id^=user] ul.checkbox > li {
  margin: 0;
  list-style: none;
  position: relative;
}

main[id^=user] ul.checkbox > li::before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  border: 1px solid rgb(100, 100, 100);
  border-radius: 2px;
  background: rgb(255, 255, 255);
  position: absolute;
  left: 0;
  top: 9px;
}

main[id^=user] ul.checkbox > li input[type=checkbox] ~ label {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  letter-spacing: -1px;
  font-size: 14px;
  font-weight: 600;
  text-indent: 15px;
}

main[id^=user] ul.checkbox > li input[type=checkbox]:checked ~ label {
  color: rgb(32, 125, 180);
  transition: 0.5s;
}

main[id^=user] ul.checkbox > li input[type=checkbox] ~ label::before,
main[id^=user] ul.checkbox > li input[type=checkbox] ~ label::after {
  height: 2px;
  border-radius: 0;
  background: rgb(32, 125, 180);
  opacity: 0;
}

main[id^=user] ul.checkbox > li input[type=checkbox] ~ label::before {
  width: 6px;
  transform: rotate(45deg);
  top: 15px;
  left: 0;
}

main[id^=user] ul.checkbox > li input[type=checkbox] ~ label::after {
  width: 10px;
  transform: rotate(-45deg);
  top: 13px;
  left: 3px;
}

main[id^=user] ul.checkbox > li input[type=checkbox]:checked ~ label::before,
main[id^=user] ul.checkbox > li input[type=checkbox]:checked ~ label::after {
  opacity: 1;
  transition: 0.2s;
}

main[id^=user] dl.form input[name$=published_at] {
  width: 150px;
}

main[id^=user] dl[class*=multiple] {
  display: flex;
  flex-wrap: wrap;
  /* border-top: 3px double rgb(100 100 100 / 50%); */
  margin-top: 30px;
  padding-top: 20px;
  position: relative;
}
main[id^=user] dl[class*=multiple] > div {
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
}

main[id^=user] dl[class*=multiple].account_detail > div[id^=delivery_date] {
  width: 150px;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=contents] {
  width: calc(100% - 150px);
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=note] {
  width: 100%;
  padding-bottom: 20px;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=unitprice],
main[id^=user] dl[class*=multiple].account_detail > div[id^=amount],
main[id^=user] dl[class*=multiple].account_detail > div[id^=price],
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] {
  width: 33.3333333333%;
  padding-right: 30px;
  box-sizing: border-box;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=unitprice] > dd,
main[id^=user] dl[class*=multiple].account_detail > div[id^=amount] > dd,
main[id^=user] dl[class*=multiple].account_detail > div[id^=price] > dd,
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] > dd {
  width: 100%;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=unitprice] > dd > input,
main[id^=user] dl[class*=multiple].account_detail > div[id^=amount] > dd > input,
main[id^=user] dl[class*=multiple].account_detail > div[id^=price] > dd > input,
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] > dd > input {
  width: calc(100% - 30px);
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=price],
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] {
  padding-right: 0;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=price] > dd > input,
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] > dd > input {
  width: 100%;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] {
  padding-left: 20px;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=tax_class] > dd > input {
  width: 100%;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=note] {
  width: 66.6666666667%;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=note] textarea {
  /*min-height: auto;*/
  min-height: 85px;
  resize: vertical;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=unitprice]::after,
main[id^=user] dl[class*=multiple].account_detail > div[id^=amount]::after {
  position: absolute;
  bottom: 7px;
  right: 21px;
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=unitprice]::after {
  content: "×";
}
main[id^=user] dl[class*=multiple].account_detail > div[id^=amount]::after {
  content: "=";
}
main[id^=user] dl[class*=multiple].account_detail > button.submit[action^=remove] {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/*
main[id^="user"] dt[id*="unitprice"],
main[id^="user"] dt[id*="unitprice"] + dd input {width: 5rem;}
main[id^="user"] dt[id*="unitprice"] + dd * {display: inline-block;}
main[id^="user"] dt[id*="unitprice"] + dd::after {content: '×';display: inline-block;}
*/
main[id^=user] span.savehistory {
  color: rgb(150, 150, 150);
  font-size: 13px;
  letter-spacing: 0.5px;
  font-family: new-hero, "New Hero Medium", "AxisProN-Medium", "A+mfCv-AXIS Font ベーシック M ProN", HiraginoSans-W5, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  margin: 7px auto auto 13px;
}

/* responsive */
@media screen and (min-width: 1000px) {
  /* body */
  body[id^=user] {
    background: rgb(212, 218, 226);
  }
  /* header user. */
  header[id^=user] {
    width: calc(100% - 50px);
    margin: 0 auto;
    background: rgb(241, 243, 245);
    border-radius: 0 0 32px 32px;
  }
  /* main */
  main[id^=user] {
    width: calc(100% - 50px);
    margin: 20px auto;
    background: rgb(241, 243, 245);
    border-radius: 32px;
  }
  /* table */
}
/* ------------------------------
	SECTION :: GREAEING
------------------------------ */
article > section > h1 {
  font-size: 1.5rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
}
article > section > h1 + dl {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}
article > section > h1 + dl > dt > h3 > mark {
  background: rgb(255, 255, 255);
  padding: 5px;
}
article > section > h1 + dl > dd > p {
  font-size: 18px;
  letter-spacing: -0.5px;
  white-space: pre-wrap;
  padding-top: 5px;
}

/* ------------------------------
	SECTION :: TABLE-OF-CONTENT
------------------------------ */
section#table-of-contents > dl {
  width: 90%;
  max-width: 450px;
  background: rgba(255, 255, 255, 0.5);
  margin: 50px auto 20px;
  padding: 30px;
  box-sizing: border-box;
  text-align: left;
}

section#table-of-contents > dl > dt {
  margin-bottom: 20px;
  text-align: center;
}

section#table-of-contents > dl > dd > ol {
  margin-bottom: 10px;
}

section#table-of-contents > dl > dd > ol ol {
  padding-left: 20px;
}

section#table-of-contents > dl ol li {
  padding-top: 8px;
}

section#table-of-contents > dl ol li > a {
  color: rgb(0, 140, 200);
  text-decoration: underline;
}

section#table-of-contents > dl > dd > ol + p {
  font-size: 13px;
  margin-top: 20px;
}

section#table-of-contents > dl ol ol:nth-of-type(1) > li {
  list-style-type: "1-";
}

section#table-of-contents > dl ol ol > li:nth-of-type(1)::before {
  content: "1. ";
}

section#table-of-contents > dl ol ol > li:nth-of-type(2)::before {
  content: "2. ";
}

section#table-of-contents > dl ol ol > li:nth-of-type(3)::before {
  content: "3. ";
}

section#table-of-contents > dl ol ol > li:nth-of-type(4)::before {
  content: "4. ";
}

section#table-of-contents > dl ol ol > li:nth-of-type(5)::before {
  content: "5. ";
}

section#table-of-contents > dl ol ol > li:nth-of-type(6)::before {
  content: "6. ";
}

/* ------------------------------
	SECTION :: SEC01
------------------------------ */
article > section h3 {
  margin-left: 0;
}

article > section#sec01 {
  position: relative;
}

article > section#sec01::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  bottom: -27px;
  right: 50px;
  background: center/contain url(/mybrand/common/img/i_ship.svg) no-repeat;
}

article > section#sec01 > dl {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

article > section#sec01 > dl > dt {
  padding-left: 70px;
  position: relative;
  top: 20px;
}

article > section#sec01 > dl > dt::before {
  content: "";
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

article > section#sec01 > dl > dt:nth-of-type(1)::before {
  background: bottom right/contain url(/mybrand/common/img/icon_01.svg) no-repeat;
}

article > section#sec01 > dl > dt:nth-of-type(2)::before {
  background: bottom right/contain url(/mybrand/common/img/icon_02.svg) no-repeat;
}

article > section#sec01 > dl > dt:nth-of-type(3)::before {
  background: bottom right/contain url(/mybrand/common/img/icon_03.svg) no-repeat;
}

article > section#sec01 > dl > dt:nth-of-type(4)::before {
  background: bottom right/contain url(/mybrand/common/img/icon_04.svg) no-repeat;
}

article > section#sec01 > dl > dt:nth-of-type(5)::before {
  background: bottom right/80% url(/mybrand/common/img/icon_05.svg) no-repeat;
}

article > section#sec01 > dl > dt:nth-of-type(6)::before {
  background: bottom right/contain url(/mybrand/common/img/icon_06.svg) no-repeat;
}

article > section#sec01 h3 > mark {
  color: rgb(30, 30, 30);
  font-family: "Shuei NijimiMGo B", sans-serif;
  letter-spacing: 3px;
  padding-bottom: 5px;
  background: linear-gradient(transparent, 50%, rgba(255, 255, 255, 0.9) 50%);
  background: -webkit-linear-gradient(transparent, 50%, rgba(255, 255, 255, 0.9) 50%);
}

article > section#sec01 p {
  font-size: 17px;
  letter-spacing: -0.5px;
  white-space: pre-wrap;
  padding-top: 5px;
}

article > section#sec01 p > strong,
article > section#sec01 h4 > strong,
article > section#sec01 a,
article > section#sec01 a:hover {
  color: rgb(0, 140, 200);
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 600;
  border-bottom: 1px solid rgb(0, 140, 200);
  padding-bottom: 3px;
}

article > section#sec01 ul {
  padding-left: 20px;
}

article > section#sec01 p.notice {
  font-size: 15px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  font-weight: 600;
}

article > section#sec01 p.notice::before {
  content: "※ ";
}

dl#upDate {
  padding: 50px 0 0;
}

dl#upDate * {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  letter-spacing: 1px;
}

@media screen and (min-width: 750px) {
  article > section#sec01 > dl > dt {
    padding-left: 0;
  }
  article > section#sec01 > dl > dt::before {
    width: 80px;
    height: 80px;
    bottom: auto;
    left: -100px;
  }
}
/* ------------------------------
	SECTION :: SEC02
------------------------------ */
article > section#sec02 {
  background: linear-gradient(180deg, rgba(0, 140, 200, 0.8) 0%, rgba(0, 50, 90, 0.8) 100%);
}

article > section#sec02 * {
  color: rgba(255, 255, 255, 0.9);
  line-height: 32px;
  text-align: left;
}

article > section#sec02 > h2::before {
  background: rgb(255, 255, 255);
}

article > section#sec02 p#message {
  color: rgb(255, 255, 255);
  font-size: 19px;
  line-height: 41px;
  letter-spacing: 1px;
  margin-bottom: 50px;
}

article > section#sec02 a.button {
  font-size: 23px;
  letter-spacing: 5px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 10px solid;
  padding: 20px 50px;
  margin-bottom: 50px;
  text-align: center;
}

article > section#sec02 > h2 + img {
  border-radius: 50%;
  margin: 10px auto 20px;
}

article > section#sec02 > h2 + img + p > span {
  width: 100%;
  padding-top: 1rem;
  display: inline-block;
  text-align: right;
}

@media screen and (min-width: 750px) {
  article > section#sec02 > h2 + img {
    float: left;
    margin-right: 20px;
  }
}
/* ------------------------------
	FORM
------------------------------ */
dl.contact {
  color: rgb(255, 255, 255);
  width: 100%;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: center;
}

dl.contact,
dl.form {
  max-width: 500px;
  margin: 50px auto;
  text-align: left;
}

dl.contact > dt,
dl.form dl > dt {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 2em;
}

dl.contact > dd {
  width: 100%;
  font-size: 1em;
  letter-spacing: 0.1em;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(150, 150, 150);
  padding: 50px 20%;
  box-sizing: border-box;
}

dl.contact > dd > span {
  display: block;
  color: rgb(0, 0, 0);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.8em;
  text-align: left;
}

dl.contact > dd > span > strong {
  font-size: 1.3em;
}

dl.contact > dd > p {
  font-size: 14px;
  padding-top: 1em;
  line-height: 1.5em;
  text-align: left;
  white-space: pre-wrap;
}

.form a.action,
a.contact,
a.more {
  color: rgb(255, 255, 255);
  width: 100%;
  /*max-width: 350px;*/
  font-size: 18px;
  letter-spacing: 0.1em;
  background: rgb(0, 0, 0);
  margin: 50px auto;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
}

a.contact {
  background: rgb(235, 98, 56);
}

a.more {
  margin-top: 20px;
}

.form a.action::before,
a.contact::before,
a.more::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 25px;
  margin-right: 0.7em;
  transform: translate(0, 0.3em);
}

.form a.action::before {
  background: center/contain url(/mybrand/common/img/i_note.svg) no-repeat;
}

a.contact::before {
  background: center/contain url(/mybrand/common/img/i_contact.svg) no-repeat;
}

a.more::before {
  background: center/contain url(/mybrand/common/img/i_scope.svg) no-repeat;
}

dl.form aside.notice {
  max-height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: rgb(250, 250, 250);
  margin: 30px 0;
  padding: 30px 10%;
  overflow: auto;
}

dl.form aside.notice * {
  color: rgb(30, 30, 30);
  font-size: 13px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif;
  line-height: 21px;
  margin-top: 0;
  padding-top: 0;
}

dl.form aside.notice > dl > dt {
  font-size: 15px;
  padding-bottom: 15px;
  text-align: center;
}

dl.form aside.notice h2 {
  font-weight: 600;
  margin-top: 13px;
}

dl.form aside.notice + p {
  font-size: 13px;
  margin-bottom: 30px;
  padding: 0 5%;
  text-align: left;
}

dl.form dl {
  width: 100%;
  text-align: left;
}

dl.form dl > dt {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 2em;
}

dl.form dl > dt.required::after {
  content: "*必須";
  color: rgb(220, 55, 25);
  font-size: 0.6em;
  margin-left: 1em;
}

dl.form dl > dt.group {
  font-size: 0;
}

dl.form input.disabled {
  display: none;
}

dl.form input[editable=disabled] {
  background: rgba(250, 250, 250, 0.3);
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

dl.form ul > li, dl.form ol > li {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

dl.form dt.group,
dl.form dt.group + dd {
  display: inline-block;
}

input[type=text], input[type=tel], input[type=email], input[type=password], textarea {
  /*width: calc(100% - 2em) !important;*/
  width: 100%;
  height: 16px;
  margin-top: 5px;
  margin-bottom: 3px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 1px;
  font-size: 16px;
  font-family: "A1 Mincho", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "MS PMincho", serif !important;
  padding: 23px 1rem;
  box-sizing: border-box;
  letter-spacing: 0.1rem;
  outline: 0;
}

textarea {
  min-height: 13rem;
  font-size: 16px;
  line-height: 1.5rem;
  letter-spacing: 0;
  margin-bottom: 0;
  padding: 13px 1rem;
}

input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {
  border-bottom: 3px solid rgba(0, 140, 200, 0.8);
  padding-bottom: 21px;
  transition: 0.1s all;
}

label.select {
  height: 40px;
  margin-right: 20px;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.7);
  display: block;
  position: relative;
}

label.select > select {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  font-size: 1rem;
  background: transparent;
  border: none;
  font-size: 16px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "MS PGothic", sans-serif !important;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-block;
  padding: 0 40px 0 20px;
  outline: 0;
  -webkit-appearance: none; /* ベンダープレフィックス(Google Chrome、Safari用) */
  -moz-appearance: none; /* ベンダープレフィックス(Firefox用) */
  appearance: none; /* 標準のスタイルを無効にする */
}

label.select::before,
label.select::after {
  content: "";
  width: 8px;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  pointer-events: none;
}

label.select::before {
  transform: rotate(45deg);
  right: 20px;
}

label.select::after {
  transform: rotate(-45deg);
  right: 15px;
}

input[type=text][name=postalcode],
label.select.prefecture,
label.select.grade {
  max-width: 10rem;
}

a.action {
  font-size: 18px;
  letter-spacing: 3px;
  display: inline-block;
  background: linear-gradient(180deg, rgb(0, 120, 180) 0%, rgb(0, 50, 90) 50%);
  /* border: 1px solid rgba(255,255,255,.8); */
  /* border-bottom: 10px solid rgba(255,255,255,1); */
  padding: 20px 50px;
  margin-bottom: 50px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 10px;
}

input.input_problem, textarea.input_problem, label.select > select.input_problem, ul.radio > li > input.input_problem + label::before {
  background: rgba(255, 25, 0, 0.3);
}

span.errormsg {
  color: rgb(255, 25, 0);
  display: inherit;
}

/*radio button & checobox*/
ul.checkbox > li::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  border: 1px solid rgb(100, 100, 100);
  border-radius: 2px;
  background: rgb(255, 255, 255);
  position: absolute;
  left: 0;
  top: 6px;
}

ul.radio > li > input,
ul.checkbox > li > input {
  /* display: none; */
  opacity: 0;
  position: absolute;
}

ul.radio > li > input ~ label,
ul.checkbox > li > input ~ label {
  font-size: 16px;
  line-height: 30px;
  display: block;
  margin-right: 0;
  padding: 0 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: 0.5s;
}

ul.checkbox > li > input ~ label {
  font-weight: 600;
  padding: 0;
  text-indent: 20px;
}

ul.radio > li > input:checked ~ label,
ul.checkbox > li > input:checked ~ label {
  color: rgb(235, 98, 56);
  transition: 0.5s;
}

ul.radio > li > input ~ label::before, ul.radio input ~ label::after,
ul.checkbox > li > input ~ label::before, ul.checkbox input ~ label::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
}

ul.radio > li > input ~ label::before {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  /* top: 0; */
  top: 6px;
  left: 0;
}

ul.radio > li > input ~ label::after {
  width: 8px;
  height: 8px;
  background: rgba(235, 98, 56, 0);
  /* top: 5px; */
  top: 11px;
  left: 5px;
  transition: 0.3s;
  transform: scale(0.5, 0.5);
}

ul.radio > li > input:checked ~ label::before {
  border: 1px solid rgba(235, 98, 56, 0.5);
}

ul.checkbox > li > input:checked ~ label::before,
ul.checkbox > li > input:checked ~ label::after {
  height: 5px;
  border-radius: 0;
  background: rgb(235, 98, 56);
}

ul.checkbox > li > input:checked ~ label::before {
  width: 10px;
  transform: rotate(45deg);
  top: 12px;
  left: 0;
}

ul.checkbox > li > input:checked ~ label::after {
  width: 15px;
  transform: rotate(-45deg);
  top: 8px;
  left: 5px;
}

ul.radio > li > input:checked ~ label::after {
  background: rgba(235, 98, 56, 0.75);
  transform: scale(1, 1);
  transition: 0.2;
}

ol.breadcrumbs {
  margin-top: -40px;
  padding-left: 25px;
}

ol.breadcrumbs > li {
  margin-left: 0;
  display: inline-block;
  vertical-align: middle;
}

ol.breadcrumbs > li:not(:first-of-type)::before {
  content: "＜";
  display: inline-block;
  margin-right: 5px;
}

dl.course {
  width: 100%;
}

dl.course > dt {
  background: rgba(205, 185, 154, 0.1);
  padding: 20px 30px;
  box-sizing: border-box;
  font-size: 23px;
  font-family: YuMincho, "游明朝体", "游明朝 Medium", "Yu Mincho Medium", serif;
  text-align: center;
  position: relative;
}

dl.course > dt::before,
dl.course > dt::after {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

dl.course > dt::before {
  width: 50px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5.5em, -50%);
}

section dl.course li {
  margin: 15px 0;
}

dl.course li > mark {
  line-height: 1em;
  padding: 2px 0;
  font-size: 16px;
  font-weight: 600;
}

dl.course li > a {
  text-decoration: underline;
  font-size: 20px;
  font-weight: 600;
}

/* ------------------------------
	FOOTER
------------------------------ */
footer {
  height: auto;
  background: rgb(230, 230, 230);
  padding: 20px 5% 85px;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

footer > a, footer > a:hover {
  font-size: 13px;
  font-family: "Arvo", serif;
  letter-spacing: 0.05rem;
  position: absolute;
  top: -3em;
  left: 50%;
  transform: translate(-50%, 0);
  transition: 0.2s;
}

footer > a:hover {
  opacity: 0.6;
}

footer > a::before {
  content: "\f0d8";
  font-family: FontAwesome;
  margin-right: 0.3rem;
}

footer dt {
  margin-bottom: 20px;
}

footer dt img {
  width: 80px;
  padding-top: 3px;
}

footer dd {
  width: 100%;
  max-width: 940px;
  height: auto;
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 21px;
  margin: 0;
  text-align: left;
}

footer dd::before {
  content: "〒";
}

footer > small {
  color: rgb(255, 255, 255);
  width: 100%;
  background: rgb(0, 0, 0);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-family: "Arvo", serif;
  display: inline;
  padding: 15px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

/* responsive */
@media screen and (min-width: 500px) {
  footer dt,
footer dd {
    display: inline-block;
    vertical-align: top;
  }
  footer dd {
    width: 400px;
    white-space: pre-wrap;
    padding-left: 20px;
  }
}
@media screen and (min-width: 700px) {
  footer {
    padding: 30px calc((100% - 600px) / 2) 80px;
    overflow: hidden;
  }
  footer > a, footer > a:hover {
    top: 30px;
    left: auto;
    right: calc((100% - 600px) / 2);
    transform: translate(0, 0);
  }
}
@media screen and (min-width: 1015px) {
  footer {
    padding: 30px calc((100% - 880px) / 2) 80px;
  }
  footer > a, footer > a:hover {
    right: calc((100% - 880px) / 2);
  }
}/*# sourceMappingURL=layout.css.map */