#articleContainer {
  width: 90%;
  max-width: 900px;
  margin: 200px auto 0;
}

.articleInfo {
  display: flex;
  justify-content: space-between;
}

.articleCategory {
  width: 137px;
  height: 29px;
  border: 1px solid var(--secondaryColor);
  box-sizing: border-box;
  border-radius: 15px;
  color: var(--secondaryColor);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.returnBtn a {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 0 10px;
}

.returnBtn a img {
  width: 25px;
}

.articleMovie {
  margin-top: 10px;
}

.articleMovie iframe {
  width: 100%!important;
  height: 100%!important;
  aspect-ratio: 16 / 9;
}

.articleContentsContainer {
  margin-top: 20px;
}

.articleContentsContainer h1 {
  margin: 20px 0;
  font-size: 36px;
  line-height: 1.4;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: bold;
}

#articleContainer .moreBtn {
  margin: 60px auto 0;
}





#flowContainer {
  width: 90%;
  max-width: 900px;
  margin: 120px auto 0;
}





#purchaseContainer {
  width: 90%;
  max-width: 900px;
  margin: 90px auto 230px;
  padding: 50px 50px 50px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

#purchaseContainer h3 {
  font-size: 34px;
  color: var(--primaryColor);
}

.purchaseTitle {
  font-size: 20px;
  font-weight: bold;
}

.productContainer {
  margin-top: 15px;
  border-radius: 20px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productContainer > div {
  border-bottom: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productContainer > div > div:first-of-type {
  border-right: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productHeader {
  height: 45px;
  background: #d0d0d0;
  font-weight: bold;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  color: #fff;
  display: flex;
}

.productHeader div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.productHeader div:first-of-type {
  flex: 0 1 510px;
}

.productHeader div:last-of-type {
  flex: 0 1 270px;
}

.productContents {
  display: flex;
}
.productContents:last-of-type {
  border-bottom: none;
}

.productContents div {
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productContents div:first-of-type {
  flex: 0 1 510px;
}

.productContents div:last-of-type {
  flex: 0 1 270px;
}

.purchase1 .moreBtn {
  margin: 30px auto;
}

.purchase2 {
  margin-top: 80px;
}

.formContainer {
  margin-top: 25px;
}

.formGroup {
  margin-bottom: 20px;
}

.formGroup input {
  width: 100%;
  max-width: 600px;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
}

.uploadContainer {
  margin-top: 50px;
  padding: 40px 25px;
  box-sizing: border-box;
  border: 2px solid #dcdcdc;
  border-radius: 20px;
}

.uploadForm {
  display: block;
  padding: 10px 15px;
  box-sizing: border-box;
}

.uploadForm:nth-of-type(even) {
  background: #faf6f3;
}

.uploadForm span {
  display: block;
}

.uploadForm.filefield {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 12px;
}
.filefield__legend {
  grid-column: 1 / -1;
  font-size: 14px;
  color: #6b7280;
}

/* input[type=file] は視覚的に隠す */
.filefield .filefield__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* カスタムボタン */
.filefield__button {
  width: 141px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primaryColor);
  color: #fff;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
}
/* .filefield .filefield__input:focus + .filefield__button {
  outline: 3px solid #bfdbfe;
  outline-offset: 2px;
} */

/* 選択状況の表示 */
.filefield__text {
  /* min-width: 16ch; */
  max-width: 100%;
  height: 45px;
  padding: 6px 20px;
  display: flex;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  background: #fff;
  color: #bababa;
  border-radius: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

/* 選択後スタイル（JSで .is-selected を親に付与） */
.filefield.is-selected .filefield__text {
  background: #ecfeff;
  color: #0e7490;
  font-weight: 600;
}

/* コメント欄 */
.filefield__comment {
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.uploadForm input[type="text"] {
  width: 100%;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
}

.uploadContainer .moreBtn {
  margin: 40px auto 0;
}









@media (max-width: 1024px) {
#articleContainer {
  /* width: 90%;
  max-width: 900px; */
  margin: 150px auto 0;
}

/* .articleInfo {
  display: flex;
  justify-content: space-between;
} */

/* .articleCategory {
  width: 137px;
  height: 29px;
  border: 1px solid var(--secondaryColor);
  box-sizing: border-box;
  border-radius: 15px;
  color: var(--secondaryColor);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.returnBtn a {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 0 10px;
}

.returnBtn a img {
  width: 25px;
} */

/* .articleMovie {
  margin-top: 10px;
}

.articleMovie video {
  width: 100%!important;
} */

.articleContentsContainer {
  margin-top: 20px;
}

.articleContentsContainer h1 {
  margin: 20px 0 18px;
  font-size: 30px;
  /* line-height: 1.4;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: bold; */
}

#articleContainer .moreBtn {
  margin: 50px auto 0;
}





#flowContainer {
  /* width: 90%;
  max-width: 900px; */
  margin: 100px auto 0;
}





/* #purchaseContainer {
  width: 90%;
  max-width: 900px;
  margin: 90px auto 230px;
  padding: 50px 50px 50px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

#purchaseContainer h3 {
  font-size: 34px;
  color: var(--primaryColor);
}

.purchaseTitle {
  font-size: 20px;
  font-weight: bold;
} */

/* .productContainer {
  margin-top: 15px;
  border-radius: 20px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productContainer > div {
  border-bottom: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productContainer > div > div:first-of-type {
  border-right: 2px solid #dcdcdc;
  box-sizing: border-box;
}

.productHeader {
  height: 45px;
  background: #d0d0d0;
  font-weight: bold;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  color: #fff;
  display: flex;
}

.productHeader div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.productHeader div:first-of-type {
  flex: 0 1 510px;
}

.productHeader div:last-of-type {
  flex: 0 1 270px;
}

.productContents {
  display: flex;
}
.productContents:last-of-type {
  border-bottom: none;
}

.productContents div {
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productContents div:first-of-type {
  flex: 0 1 510px;
}

.productContents div:last-of-type {
  flex: 0 1 270px;
} */

/* .purchase1 .moreBtn {
  margin: 30px auto;
} */

/* .purchase2 {
  margin-top: 50px;
}

.formContainer {
  margin-top: 25px;
}

.formGroup {
  margin-bottom: 20px;
}

.formGroup input {
  width: 100%;
  max-width: 600px;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
}

.uploadContainer {
  margin-top: 50px;
  padding: 40px 25px;
  box-sizing: border-box;
  border: 2px solid #dcdcdc;
  border-radius: 20px;
}

.uploadForm {
  display: block;
  padding: 10px 15px;
  box-sizing: border-box;
}

.uploadForm:nth-of-type(even) {
  background: #faf6f3;
}

.uploadForm span {
  display: block;
} */

/* .uploadForm.filefield {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 12px;
}
.filefield__legend {
  grid-column: 1 / -1;
  font-size: 14px;
  color: #6b7280;
}

.filefield .filefield__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.filefield__button {
  width: 141px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primaryColor);
  color: #fff;
  border-radius: 23px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
}
.filefield .filefield__input:focus + .filefield__button {
  outline: 3px solid #bfdbfe;
  outline-offset: 2px;
}

.filefield__text {
  min-width: 16ch;
  max-width: 100%;
  height: 45px;
  padding: 6px 20px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  background: #fff;
  color: #bababa;
  border-radius: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.filefield.is-selected .filefield__text {
  background: #ecfeff;
  color: #0e7490;
  font-weight: 600;
}

.filefield__comment {
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.uploadForm input[type="text"] {
  width: 100%;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
}

.uploadContainer .moreBtn {
  margin: 40px auto 0;
} */

}












@media (max-width: 560px) {
#articleContainer {
  /* width: 90%;
  max-width: 900px; */
  margin: 120px auto 0;
}

/* .articleInfo {
  display: flex;
  justify-content: space-between;
} */

.articleCategory {
  width: 121px;
  height: 32px;
  /* border: 1px solid var(--secondaryColor);
  box-sizing: border-box; */
  border-radius: 16px;
  font-size: 14px;
  /* color: var(--secondaryColor);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; */
}

.returnBtn a {
  font-size: 20px;
  /* display: flex;
  align-items: center; */
  gap: 0 6px;
}

.returnBtn a img {
  width: 25px;
}

/* .articleMovie {
  margin-top: 10px;
}

.articleMovie video {
  width: 100%!important;
}

.articleContentsContainer {
  margin-top: 20px;
} */

.articleContentsContainer h1 {
  margin: 15px 0 13px;
  font-size: 22px;
  /* line-height: 1.4;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: bold; */
}

#articleContainer .moreBtn {
  margin: 40px auto 0;
}





#flowContainer {
  /* width: 90%;
  max-width: 900px; */
  margin: 70px auto 0;
}





#purchaseContainer {
  width: 90%;
  max-width: 900px;
  margin: 70px auto 170px;
  padding: 30px 25px 30px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

#purchaseContainer h3 {
  font-size: 32px;
  color: var(--primaryColor);
}

.purchaseTitle {
  font-size: 18px;
  /* font-weight: bold; */
}

.productContainer.sp {
  display: block;
  /* margin-top: 15px;
  border-radius: 20px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box; */
}

.productContainer > div {
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-bottom: 2px solid #dcdcdc;
  box-sizing: border-box; */
}
.productContainer > div:last-of-type {
  border-bottom: none;
}

/* .productContainer > div > div:first-of-type {
  border-right: 2px solid #dcdcdc;
  box-sizing: border-box;
} */

.productHeader {
  /* height: 45px;
  background: #d0d0d0;
  font-weight: bold;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  color: #fff;
  display: flex; */
  justify-content: center;
  align-items: center;
}
.productHeader:not(:first-of-type) {
  border-radius: 0;
}

/* .productHeader div {
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* .productHeader div:first-of-type {
  flex: 0 1 510px;
}

.productHeader div:last-of-type {
  flex: 0 1 270px;
}

.productContents {
  display: flex;
}
.productContents:last-of-type {
  border-bottom: none;
}

.productContents div {
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* .productContents div:first-of-type {
  flex: 0 1 510px;
}

.productContents div:last-of-type {
  flex: 0 1 270px;
} */

.purchase1 .moreBtn {
  margin: 40px auto;
}

/* .purchase2 {
  margin-top: 50px;
} */

.formContainer {
  margin-top: 20px;
}

.formGroup {
  margin-bottom: 15px;
}

/* .formGroup input {
  width: 100%;
  max-width: 600px;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
} */

.uploadContainer {
  margin-top: 50px;
  padding: 20px 5px;
  /* box-sizing: border-box;
  border: 2px solid #dcdcdc; */
  /* border-radius: 15px; */
}

.uploadForm {
  /* display: block; */
  padding: 10px 15px;
  /* box-sizing: border-box; */
}

/* .uploadForm:nth-of-type(even) {
  background: #faf6f3;
} */

.uploadForm span.filefield__text {
  display: block;
}

.uploadForm.filefield {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px px;
  align-items: center;
  padding: 12px;
}
.filefield__legend {
  grid-column: 1 / -1;
  font-size: 14px;
  color: #6b7280;
}

.filefield .filefield__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.filefield__button {
  width: 141px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primaryColor);
  color: #fff;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: bold;
}
.filefield .filefield__input:focus + .filefield__button {
  outline: 3px solid #bfdbfe;
  outline-offset: 2px;
}

.filefield__text {
  min-width: 16ch;
  max-width: 100%;
  height: 45px;
  padding: 6px 20px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  background: #fff;
  color: #bababa;
  border-radius: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.filefield.is-selected .filefield__text {
  background: #ecfeff;
  color: #0e7490;
  font-weight: 600;
}

.filefield__comment {
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.uploadForm input[type="text"] {
  width: 100%;
  height: 45px;
  margin-top: 5px;
  padding: 0 15px;
  border-radius: 15px;
  border: 2px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
}

.uploadContainer .moreBtn {
  margin: 40px auto 0;
}

}