@charset "UTF-8";

/* color
---------------------------------------------------------------------------- */
/*==================================================================*/
/* mypage css　*/
/*==================================================================*/
.read {
  text-align: center;
  margin: 2em auto 4em;
  line-height: 2;
}
.footnavi{
  text-align:center;
  padding:24px;
}
.completed {
  width: 96%;
  margin: 2em auto;
  padding: 1em 0;
  text-align: center;
  font-size: 1.2em;
  color: #ff5f2f;
  border: 1px solid #ff5f2f;
}

.history-block .buy_btn {
	margin-top: 12px;
	font-size: 11px;
	display: inline-block;
	border-radius: 100vh;
	background: #271d1a;
	color: #fff;
	font-weight: bold;
	padding:6px 24px;
	line-height: 1;
	position: relative;
  }
  .history-block .buy_btn::after {
	font-family: "Font Awesome 6 Free",sans-serif;
	content: "\f105";
	position: absolute;
	font-size: 9px;
	font-weight: 900;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	right: 8px;
	color: #fff;
  }
  .history-block .buy_btn:hover {
	background: #ff5f2f;
  color: #fff;
  }
  .history-block .buy_btn a{
    color: #fff;
    }
  .history-block .txt-hosoku,
  .history-block .no_stock{
    font-size:13px;
    padding:8px 0;
  }
.password-btn {
  margin-left: 1em;
  width: 70px;
  display: inline-block;
  font-weight: bold;
  font-size: 0.8em;
  letter-spacing: 0.15em;
  text-align: center;
  /* 文字位置   */
  cursor: pointer;
  /* カーソル   */
  padding: 0.8em 1em;
  /* 余白       */
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  /* 文字色     */
  line-height: 1em;
  /* 1行の高さ  */
  opacity: 1;
  /* 透明度     */
  transition: .3s;
  /* なめらか変化 */
  border-radius: 5px;
}

.add-deliverry .button {
  width: 95%;
  width: 230px;
  margin: 0 auto;
  display: inline-block;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: center;
  /* 文字位置   */
  cursor: pointer;
  /* カーソル   */
  padding: 1em 1.5em;
  /* 余白       */
  background: #ff5f2f;
  color: #ffffff;
  /* 文字色     */
  line-height: 1em;
  /* 1行の高さ  */
  opacity: 1;
  /* 透明度     */
  transition: .3s;
  /* なめらか変化 */
  border: none;
  border-radius: 10px;
}

.txt-center {
  padding: 2em 0;
  text-align: center;
}

.change-up {
  font-size: 1.8em;
}

.btn-base {
  display: block;
  text-align: center;
  max-width: 230px;
  margin: 0 auto;
  padding: 0.8em;
  background: #ffea44;
  color: #000;
  border: 1px solid #ffea44;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.2s linear;
  line-height: 1.2;
  cursor: pointer;
}
.btn-base:hover {
  text-decoration: none;
}

#btn {
  margin: 2em 0;
  text-align: center;
}
#btn ul {
  display: flex;
  justify-content: center;
  flex-flow: row-reverse;
}
#btn ul li {
  margin: 0 1em;
}
#btn ul li input {
  max-width: 230px;
  margin: 0 auto;
  padding: 0.8em;
  background: #ffea44;
  color: #000;
  border: 1px solid #ffea44;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.2s linear;
  line-height: 1.2;
  cursor: pointer;
  font-size: 1.1em;
}
#btn ul li input:hover {
  box-shadow: 0px 0px 10px 0px #d3d3d3;
  cursor: pointer;
}
#btn ul li.back input {
  width: 200px;
  background-color: #fff;
  border: 1px solid #c5c5c5;
  color: #000;
}
#btn ul li.back input:hover {
  box-shadow: 0px 0px 10px 0px #d3d3d3;
  cursor: pointer;
}

.title-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #000;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.title-area h2 {
  font-size: 1.8em;
}
.title-area h2 span {
  font-size: 0.6em;
  display: block;
}
.title-area p {
  text-align: right;
}

.mypage-inner {
  display: flex;
  justify-content: space-between;
}
.mypage-inner .menu-box {
  width: 31.3%;
  margin: 1%;
  padding: 1.5em;
  border: 1px solid #d9d9d9;
}
.mypage-inner .menu-box h3 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
}
.mypage-inner .menu-box h3 img {
  vertical-align: middle;
}
.mypage-inner .menu-box p {
  font-size: 0.95em;
  margin-bottom: 1em;
}

#password .inner {
  margin-bottom: 4em;
}

#entry .note {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #555;
}

#history .history-block {
  margin-bottom: 2em;
  border: 1px solid #dbdbdb;
}
#history .history-block .top-area {
  background: #f0f0f0;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#history .history-block .top-area .l-area {
  width: 80%;
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
#history .history-block .top-area .l-area ul {
  margin-bottom: 0.5em;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#history .history-block .top-area .l-area ul li {
  margin-right: 1em;
}
#history .history-block .top-area .l-area ul li:after {
  content: "|";
  padding-left: 1em;
}
#history .history-block .top-area .r-area {
  width: 20%;
  text-align: right;
}
#history .history-block .top-area .r-area .stage {
  margin-bottom: 0.5em;
}
#history .history-block .top-area .r-area .stage span {
  display: block;
  width: 100px;
  margin: 0 0 0 auto;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
}
#history .history-block .top-area .r-area .stage span.hassou {
  background: #a92700;
}
#history .history-block .top-area .r-area .stage span.yotei {
  background: #a98b30;
}
#history .history-block .top-area .r-area .stage span.misyori {
  background: #158e3f;
}
#history .history-block .top-area .r-area .stage span.cancel {
  background: #616161;
}
#history .history-block .top-area .r-area .date {
  font-size: 0.8em;
  color: #555;
}
#history .history-block .bottom-area {
  padding: 1em;
  border-bottom:1px dotted #aaa;
}
#history .history-block .bottom-area .inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#history .history-block .bottom-area .inner p.photo {
  margin-right: 1em;
  width: 120px;
  overflow: hidden;
  height: auto;
}
#history .history-block .bottom-area .inner p.photo img {
  width: 120px;
  height: auto;
  object-fit: cover;
}
#history .history-block .bottom-area .inner ul {
  display: flex;
  justify-content: flex-start;
}
#history .history-block .bottom-area .inner ul li {
  margin-right: 1em;
  font-size: 0.8em;
}
#history .history-block .bottom-area .inner p.cord {
  font-size: 0.8em;
}
#history .history-block .bottom-area .inner h2 {
  font-size: 1.2em;
}

/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1000px) {
  .title-area {
    display: block;
  }
  .title-area h2 {
    margin-bottom: 0.25em;
    font-size: 1.4em;
    font-weight: bold;
  }
  .title-area h2 span {
    color: #555;
    font-weight: normal;
  }
  .title-area p {
    padding: 0.4em;
    font-size: 0.8em;
    background: #f0f0f0;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    text-align: left;
  }

  .mypage-inner {
    display: block;
  }
  .mypage-inner .menu-box {
    width: 100%;
    margin: 0 0 1em 0;
  }
}
#login_end #btn li {
  font-weight: bold;
}
#login_end #btn li.cart a {
  max-width: 250px;
  margin: 0 auto;
  display: block;
  padding: 0.5em 2em;
  background: #ff5f2f;
  color: #fff;
  border-radius: 10px;
}
#login_end #btn li.login a {
  margin: 0 auto;
  max-width: 250px;
  display: block;
  padding: 0.5em 2em;
  background: #ffe945;
  color: #000;
  border-radius: 10px;
}

/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 767px) {
  .read {
    margin: 1em auto 1.5em;
  }
  .footnavi{
    text-align:left;
    padding:24px 16px;
  }
  .txt-center {
    padding: 0;
  }

  #history .inblock-s {
    width: 100%;
  }
  #history .history-block .top-area {
    display: block;
  }
  #history .history-block .top-area .l-area {
    width: 100%;
  }
  #history .history-block .top-area .r-area {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }
  #history .history-block .top-area .r-area p.stage {
    margin-right: 1em;
    font-size: 0.8em;
  }
  #history .history-block .bottom-area .inner {
    font-size: 0.8em;
  }
  #history .history-block .bottom-area .inner ul {
    display: block;
  }
  #history .history-block .bottom-area .inner p a.link-txt {
    font-size: 1.1em;
  }

  #btn {
    text-align: center;
  }
  #btn ul {
    display: block;
  }
  #btn ul li {
    width: 90%;
    font-size: 0.9em;
    margin: 0 auto 0.5em;
  }
}
/*===========================================================================*/
/*  media quary:480px  */
/*===========================================================================*/
@media screen and (max-width: 480px) {
  .password-btn {
    margin-top: 1em;
    margin-left: 0;
    display: block;
  }
}

/*# sourceMappingURL=mypage.css.map */