* {
  box-sizing: border-box
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
  margin: 0;
  /* font-family: fot-udkakugo-large-pr6n, sans-serif; */
  font-style: normal;
  letter-spacing: 1px;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

#header {
  padding: 0 2% 1% 2%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  background: #fff;
  position: fixed;
  width: 100%;
  z-index: 100;

}

#page_top {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.logo img {
  width: 150px;
  flex: 1;
}

#page_top ul.menu {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0% 5%;
}

#page_top .menu li {
  font-size: 16px;
  color: #fff;
  padding: 5px 30px;
  background: #3367A5;
  margin: 2px 10px 0px 10px;
  border-radius: 2rem;
}

#page_top .menu li:hover {
  background: #000;
}

.logininfo {
  background: #fff;
  text-align: right;
  padding-right: 5%;
  padding-bottom: 2px;
}

.btn:hover{
  opacity: 0.8;
}
.btn--orange,
a.btn--orange {
  color: #000;
  padding: 5px 10px;
  background-color: #E5E5E5;
  text-decoration: none;
  border-radius: 2rem;
}

#content {
  padding: 150px 20px 100px 20px;
  width: 1200px;
  margin: 0 auto;
}

.s-nav {
  width: 250px;
  position: fixed;
}

.search,
.contact {
  margin-bottom: 15px;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  padding: 15px;
}

.result {
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  padding: 15px;
  margin-left: 270px;
  font-size: 14px;
  margin-bottom: 20px;
}

.search input[type="text"],
.login-form input[type="text"] {
  padding: 0.5rem;
  background: hsl(0, 0%, 100%);
  border: 0;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #000;
  pointer-events: auto;
  width: 100%;
  margin-bottom: 20px;
}

.form-name {
  font-size: 14px;
}

.styled-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: calc(100% - 10px);
  padding: 0.5rem;
  cursor: pointer;
  border: solid 1px #000;
  background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.4) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  /* background-color:#e4fdff; */
}

.baseinfo-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  /* border: 1px solid gray; */
  border: none;
  font-size: 16px;
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  background-color: #e4fdff;
}

.order-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 100%;
  padding: 5px 0px 5px 5px;
  font-size: 10px;
  text-align: center;
}

.s-btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: #3367A5;
  color: #ffffff;
  border: solid 0px #000;
  width: 100%;
  font-size: 18px;
  margin-top: 20px;
  padding: 0.5rem;
  cursor: pointer;
  text-align: center;
}

.s-btn:hover {
  background: #000;
  color: #fff;
}

.no-btn {
  -webkit-appearance: none;
  appearance: none;
  background: #B2B2B2;
  color: #ffffff;
  border: solid 0px #000;
  width: 220px;
  font-size: 18px;
  margin: 5px 10px;
  padding: 0.5rem;
  pointer-events: none;
  text-align: center;
}

.reset {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  color: #3367A5;
  font-weight: 600;
  cursor: pointer;
}

.wechat::before {
  content: "";
  display: inline-block;
  background-image: url("img/wechat-logo.png");
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: contain;
  vertical-align: middle;
}

.wechat {
  font-size: 20px;
  font-weight: 600;
}

.result table,
.add-list table {
  width: 100%;
  border-collapse: collapse;
  border: solid 1px #000;
  margin-top: 20px;
}

.result table th,
.result table td,
.add-list table th,
.add-list table td {
  border: dashed 1px #000;

}

.result table th,
.add-list table th {
  background: #C5E7F7;
  padding: 20px 10px;
}

.result table td,
.add-list table td {
  padding: 5px 10px;
  background: #fff;
}

.result input[type="text"] {
  width: 60px;
}

.progressbar {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.progressbar .item {
  position: relative;
  width: 16.6%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  line-height: 15px;
  background: #F5F5F5;
  color: #999999;
}

.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 100%;
  content: '';
  border: 20px solid transparent;
  border-left: 15px solid #F5F5F5;
  margin: auto;
}

.progressbar .item:not(:last-child)::before {
  margin-left: 1px;
  border-left-color: #FFF;
}

/* active */

.progressbar .item.active {
  z-index: 1;
  background: #3367A5;
  color: #FFF;
}

.progressbar .item.active:not(:last-child)::after {
  border-left-color: #3367A5;
}

.progressbar .item.active:not(:last-child)::before {
  border-left: none;
}

.money {
  text-align: right;
}

.money p {
  font-size: 20px;
  font-weight: 600;
  line-height: 0px;
}

.order-info {
  display: flex;
  justify-content: space-between;

}

.check {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.check .s-btn {
  width: 220px;
  margin: 5px 10px;
}

.ship {
  display: flex;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.ship-select {
  width: 48%;
  margin-bottom: 10px;
  margin-right: 5px;
}

.seikyu {
  width: 1000px;
  margin: 0 auto;
}

.add-list {
  padding-top: 150px;
}

.login-page {
  margin: 0;
  display: flex;
  height: 100vh;
  background-image: url("../img/image-login.png");
}

.siteimage {
  width: 65%;
}

.login-form {
  display: block;
  text-align: center;
  width: 35%;
  background: #fff;
  padding: 10% 5%;
}

.login-form .form-name {
  text-align: left;
}

.copyright {
  font-size: 12px;
  margin-top: 50px;
}

.mini-btn {
  background: #FA8036;
  padding: 2px 10px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}



.close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 50px;
  color: #fff;
  z-index: 1000;
  background: red;
  width: 50px;
  height: 50px;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
}

.close_notice{
	cursor: pointer;
    position: absolute;
    top: 10px;
    border-radius: 50vh;
    right: 10px;
    font-size: 24px;
    color: rgb(105, 105, 105);
    z-index: 1000;
}

.close:hover{
  background: red;
color: rgb(255, 255, 255);
}


#pop-up,#pop-up_notice{
	display: none;
	/* label でコントロールするので input は非表示に */
}

.overlay{
	display: none;
	/* input にチェックが入るまでは非表示に */
}

#pop-up:checked+.overlay {
  display: block;
  z-index: 9999;
  background-color: #000000b0;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

#pop-up_notice:checked+.overlay{
	display: block;
	z-index: 9999;
	background-color: #000000bb;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}


.window {
  width: 860px;
  /* max-width: 300px; */
  overflow-y: scroll;
  overflow-x: hidden;
  /* max-width: 380px; */
  height: 70%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: fixed;
  top: 50%;
  left: 50%;
  border: 10px solid #336CB0;
  padding: 0px 10px 50px 10px;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.window_notice{
	max-width: 80%;
	width: 400px;
	background-color: #f2fbff;
	border-radius: 6px;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	transform: translate(-50%, -50%);
	z-index: 10000;
}

.window::-webkit-scrollbar {
  background: #336CB0;
}

.window::-webkit-scrollbar-thumb {
  background-color: #E1D3CB;
}

.window::-webkit-scrollbar-thumb:hover {
  background-color: #E1D3CB;
}

@media screen and (max-width: 900px) {
  .window {
    width: 90%;
    height: 80%;
  }
}


#pop-up_detail {
  display: none;
  /* label でコントロールするので input は非表示に */
}

.overlay_detail {
  display: none;
  /* input にチェックが入るまでは非表示に */
}

#pop-up_detail:checked+.overlay_detail {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.window_detail {
  width: 70%;
  overflow-y: scroll;
  overflow-x: hidden;
  flex-wrap: wrap;
  /* max-width: 380px; */
  height: 70%;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  transform: translate(-50%, -50%);
}



#pop-up_progress {
  display: none;
  /* label でコントロールするので input は非表示に */
}

.overlay_progress {
  display: none;
  /* input にチェックが入るまでは非表示に */
}

#pop-up_progress:checked+.overlay_progress {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.window_progress {
  max-width: 80%;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  transform: translate(-50%, -50%);
}


.gotop {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #5e00e7;
  padding-top: 30px;
  text-align: center;
  border-radius: 100%;
  letter-spacing: 2px;
  font-size: 85%;
  text-decoration: none;
  color: #fff;
  opacity: 1;
  position: fixed;
  bottom: 110px;
  right: 20px;
  z-index: 10000;
}

.gotop::before {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 15%;
  height: 15%;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}

.gotop:hover {
  opacity: 0.8;
}

@media screen and (min-width:860px) {
  .gotop {
    bottom: 20px;
    right: 40px;
  }
}


.result-center {
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  padding: 15px;
  /* margin-left: 270px; */
  font-size: 14px;
  margin-bottom: 20px;
}

.result-center table,
.add-list table {
  width: 100%;
  border-collapse: collapse;
  border: solid 1px #000;
  margin-top: 20px;
}

.result-center table th,
.result table td,
.add-list table th,
.add-list table td {
  border: dashed 1px #000;

}

.result-center table th,
.add-list table th {
  background: #C5E7F7;
  padding: 20px 10px;
}

.result-center table td,
.add-list table td {
  padding: 5px 10px;
  background: #fff;
}

.result-center input[type="text"] {
  width: 60px;
}


.menubtn {
  position: relative;
  width: 200px;
  height: 80px;
  border-radius: 0.5em;
  background-color: cadetblue;
  color: white;
  cursor: pointer;
  font-size: large;
  padding: 5px 10px;
  /* display: none; */
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
}

.menubtn:hover {
  transform: scale(1.1, 1.1);
}

.menubtn:active {
  -webkit-transform: translate(0, 2px);
  -moz-transform: translate(0, 2px);
  transform: translate(0, 2px);
  border-bottom: none;
}


.menubtn_gray {
  position: relative;
  width: 200px;
  height: 80px;
  border-radius: 0.5em;
  background-color: gray;
  color: darkgray;
  cursor: pointer;
  font-size: large;
  padding: 5px 10px;
  /* display: none; */
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
}


.link {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}
.link:hover {
  color: rgb(99, 99, 223);
}


/* ドロップエリアのスタイル */
#dropArea {
  width: 100%;
  height: 200px;
  border: 2px dashed #333;
  margin: 10px 0px 50px 0px;
  text-align: center;
  line-height: 200px;
  color: #666;
  font-size: 18px;
  background-color: #f9f9f9;
}

#dropArea.hover {
  background-color: #e0e0e0;
}
#dropArea:hover {
  background: rgb(242, 251, 255);
}

#fileList {
  margin-top: 20px;
  list-style-type: none;
}

#fileList li {
  margin: 5px 0;
}