@charset "utf-8";
/*----------------------------------------------------
  CSSリセット
----------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align:baseline;background:transparent;}body { line-height: 1; }article, aside, dialog, figure, footer, header, hgroup, nav,section{ display: block; }nav ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before,blockquote:after, q:before, q:after {content: '';content: none;}a{margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;background: transparent;}ins {background-color: #ff9;color: #000;text-decoration: none;}mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold;}del { text-decoration: line-through; }abbr[title], dfn[title]{border-bottom: 1px dotted #000;cursor: help;}table {border-collapse:collapse;border-spacing: 0;}hr {display: block;height: 1px;border: 0;border-top: 1px solid #cccccc;	margin:1em0;padding: 0;}input, select { vertical-align: middle; }
/*----------------------------------------------------
----------------------------------------------------*/
html, body {
	height: auto;
}
body {
	color: #000;
	font-family: sans-serif;
	font-size: 17px;
	letter-spacing: .015em;
	line-height: 1.75;
	word-wrap: break-word;
	overflow-x: hidden;
}
body > .wrap {
	width: 100%;
	min-height: 100%;
	position: relative;
	height: auto !important;
}
.pr {
	display: block;
	font-size: 11px;
	color: #666;
	text-align: right;
	margin: 8px;
}
.pr2 {
	display: block;
	font-size: 11px;
	color: #666;
	text-align: center;
	margin: 10px;
}
 .confetti_explosion {
  max-width: 640px;
  font-size: 17px;
  margin: 0 auto 20px;
  width: 100%;
  padding: 0;
}

img {
	display: block;
	width: 100%;	
	max-width: 600px;
	margin: 14px auto;
}
video {
	display: block;
	width: 100%;	
	max-width: 600px;
	margin: 0 auto;
}
p {
	margin: 20px;
}
a {
	color: #0066cc;
}
.red {
	color: #ff0000;
}
.blue {
	color: #0000ff;
}
.yellow {
	color: #ffff00;
}
.orange {
	color: #ff6e00;
}
.purple {
	color: #9933ff;
}
.pink {
	color: #ff00ff;
}
.wht {
	color: #fff;
}
.mk_y {
	background: #ffff00;
	margin: 4px 0;
}
.mk_r {
	background: #ff0000;
	margin: 4px 0;
}
.mk_b {
	background: #0000ff;
	margin: 4px 0;
}
.mk_or {
	background: #ff5d00;
	margin: 4px 0;
}
.mk_bk {
	background: #000;
	margin: 4px 0;
}
.uline {
	display: inline;
	border-bottom: 1px solid;
	padding-bottom: 1px;
	margin-bottom: 1px;
}
.uline2 {
	display: inline;
	border-bottom: 2px solid;
	padding-bottom: 2px;
	margin-bottom: 2px;
}
ul {
	position: relative;
	width: 90%;
	margin: 40px auto;
	padding: 20px 0;
}
li {
	margin-left: 40px;
}
 .speech-balloon {
  width: 94%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  opacity: 0;
  transition: opacity 1.5s;
}
 .speech-balloon.is-active {
  opacity: 1;
}
 .speech-balloon strong {
  font-style: normal;
  text-decoration: none;
  font-weight: bold;
  color: #e83154;
}
 .speech-balloon .image {
  width: 15%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
 .speech-balloon .image img {
  width: 100%;
  height: 100% !important;
  vertical-align: bottom;
  object-fit: cover;
  margin: 0 auto !important;
}
 .speech-balloon .text {
  width: 85%;
  border: 1px solid #000000;
  border-radius: 20px;
  padding: min(30px, 4%);
  font-size: min(4.6666666667vw, 28px);
  line-height: 1.4;
  position: relative;
  box-sizing: border-box;
}
 .speech-balloon .text::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 6px);
}
 .speech-balloon.left .image {
  order: 1;
}
 .speech-balloon.left .text {
  order: 2;
  background-color: #ecfbf8;
}
 .speech-balloon.left .text::before {
  background-color: #ecfbf8;
  left: -8px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
}
 .speech-balloon.right .image {
  order: 2;
}
 .speech-balloon.right .text {
  order: 1;
  background-color: #ffffff;
}
 .speech-balloon.right .text::before {
  background-color: #ffffff;
  right: -8px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}
 .combox {
  width: 80%;
  margin: 2em 0;
  position: relative;
  padding: 0.25em 1em;
  border: solid 2px #ffcb8a;
  border-radius: 3px 0 3px 0;
}
 .combox img,
 video {
  width: 100%;
  padding: 5px 0px;
}
 .combox p {
  font-size: 15px;  	
  text-align: left; 	
  margin: 5px;
}
 .combox:before,
 .combox:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid 2px #ffcb8a;
  border-radius: 50%;
}
 .combox:after {
  top: -12px;
  left: -12px;
}
 .combox:before {
  bottom: -12px;
  right: -12px;
}
 .stock-information {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 619px) {
   .stock-information {
    font-size: 2.7vw;
  }
}
 .stock-information ul {
  width: 100%;
  max-width: 800px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ddf4fe;
  padding: 14px;
  border-radius: 10px;
}
 .stock-information ul li {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
}
 .stock-information ul li:first-of-type {
  margin-top: 0;
}
 .stock-information ul li .term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  background-color: #7f7f7f;
  color: #ffffff;
  font-size: 1.4em;
  padding: 0.2em 2% 0.1em;
  margin-right: 15px;
}
 .stock-information ul li .term::after {
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 15px;
  height: 100%;
  background: -webkit-gradient(linear, right top, left bottom, color-stop(48%, transparent), color-stop(52%, #7f7f7f)) no-repeat top left/100% 51.2%, -webkit-gradient(linear, right bottom, left top, color-stop(48%, transparent), color-stop(52%, #7f7f7f)) no-repeat bottom left/100% 51.2%;
  background: linear-gradient(to bottom left, transparent 48%, #7f7f7f 52%) no-repeat top left/100% 51.2%, linear-gradient(to top left, transparent 48%, #7f7f7f 52%) no-repeat bottom left/100% 51.2%;
}
 .stock-information ul li .desc {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0.5em;
  font-size: 1.2em;
}
 .stock-information ul li.present {
  position: relative;
}
 .stock-information ul li.present .term {
  background: #fb5f76;
}
 .stock-information ul li.present .term::after {
  content: "";
  background: -webkit-gradient(linear, right top, left bottom, color-stop(48%, transparent), color-stop(52%, #fb5f76)) no-repeat top left/100% 51.5%, -webkit-gradient(linear, right bottom, left top, color-stop(48%, transparent), color-stop(52%, #fb5f76)) no-repeat bottom left/100% 51.5%;
  background: linear-gradient(to bottom left, transparent 48%, #fb5f76 52%) no-repeat top left/100% 51.5%, linear-gradient(to top left, transparent 48%, #fb5f76 52%) no-repeat bottom left/100% 51.5%;
}
 .stock-information ul li.present .desc {
  font-weight: 700;
  color: #fb5f76;
}
 .stock-information ul li.present .desc span {
  color: #333;
}
 .stock-information ul li.present::before {
  content: "";
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 6px solid #ff0000;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 10;
  -webkit-animation: blink 1.5s linear infinite;
  animation: blink 1.5s linear infinite;
}
 .stock-information .soldout {
  background-color: #fb5f76;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
  padding: 0.3em;
  margin-left: 0.6em;
  border-radius: 4px;
}
@-webkit-keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
 .downArrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 .downArrow>span {
  /* 矢印の大きさの設定 */
  width: 100px;
  height: 65px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 .downArrow>span::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 40%;
  /* 矢印の色の設定 */
  background: #ff69b4;
}
 .downArrow>span::after {
  content: "";
  display: block;
  width: 100%;
  height: 60%;
  /* 矢印の色の設定 */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
  background: linear-gradient(to top right, transparent 49%, #ff69b4 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ff69b4 50%) top right/50% 100% no-repeat;
}
.movebtn {
  -webkit-animation-name: btnAnime02;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: btnAnime02;
  -moz-animation-duration: 1.0s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
  align-items: flex-start;
  justify-content: center;
}
@-webkit-keyframes btnAnime02 {
  0% {
     -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -8px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes btnAnime02 {
  0% {
    -moz-transform: translate(0, 0);
  }
  50% {
    -moz-transform: translate(0, -8px);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}
 .a-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }
  50%,
  70% {
    transform: scale(0.95);
  }
}
 h2 {
  font-size: 20px;
  color: #fff;
  background: #3880ff;
  text-align: center;
  padding: 10px !important;
  margin: 40px 10px 20px !important;
  font-weight: 700;
  line-height: 30px;
  position: relative;
}
 h2:before {
  border-top: 10px solid #3880ff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: "";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
}
 .comment-field {
  font-size: 16px;
  line-height: 1.5;
  color: #666666;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
 .comment-field-item,
 .comment-field-reply-item {
  overflow: hidden;
}
 .comment-field-item .inner,
 .comment-field-reply-item .inner {
  padding: 1em;
  border-bottom: 1px solid #ddd;
  display: grid;
  grid-template-columns: 5em auto;
  gap: 0 1em;
  box-sizing: border-box;
}
 .comment-field-item .info>*+*,
 .comment-field-reply-item .info>*+* {
  margin-block-start: 1em;
}
 .comment-field-item .profile,
 .comment-field-reply-item .profile {
  display: flex;
  align-items: baseline;
  gap: 0 1.5em;
}
 .comment-field-item .name,
 .comment-field-reply-item .name {
  font-weight: 600;
  padding: 1em 0 0;
}
 .comment-field-item .date,
 .comment-field-reply-item .date {
  color: #999;
  font-size: 0.8em;
}
 .comment-field-item .date::before,
 .comment-field-reply-item .date::before {
  content: " | ";
}
 .comment-field-item .textarea,
 .comment-field-reply-item .textarea {
  text-align: justify;
  line-height: 1.8;
}
 .comment-field-item .action,
 .comment-field-reply-item .action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 .comment-field-item .reply-btn,
 .comment-field-reply-item .reply-btn {
  display: flex;
  align-items: center;
  gap: 0 0.5em;
  padding: 0.15em 0.5em;
  border: solid 1px #ddd;
  border-radius: 0.5em;
  cursor: pointer;
  transition: 0.25s;
  font-size: 0.8em;
}
 .comment-field-item .reply-btn::before,
 .comment-field-reply-item .reply-btn::before {
  content: "▼";
  transition: 0.25s;
  font-size: 0.8em;
}
 .comment-field-item .reply-btn::after,
 .comment-field-reply-item .reply-btn::after {
  content: "件";
}
 .comment-field-item .reply-btn:hover,
 .comment-field-reply-item .reply-btn:hover {
  background-color: #ddd;
}
 .comment-field-item .thumbs-wrap,
 .comment-field-reply-item .thumbs-wrap {
  display: flex;
  align-items: center;
  gap: 0 1em;
}
 .comment-field-item .thumbs-btn,
 .comment-field-reply-item .thumbs-btn {
  display: flex;
  align-items: center;
  gap: 0 0.25em;
  cursor: pointer;
  position: relative;
}
 .comment-field-item .thumbs-btn::before,
 .comment-field-reply-item .thumbs-btn::before {
  content: "";
  width: 24px;
  height: 21px;
  display: block;
  background: url(https://file.mysquadbeyond.com/uploads/article_photo/photo/2538951/33efda89-e27f-4084-8b15-6c568fa23e5f.png) no-repeat;
}
 .comment-field-item .thumbs-btn::after,
 .comment-field-reply-item .thumbs-btn::after {
  content: "";
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: rgba(240, 232, 158, 0.1843137255);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition-duration: 0.5s;
  scale: 0;
  display: inline-block;
}
 .comment-field-item .thumbs-btn.active,
 .comment-field-reply-item .thumbs-btn.active {
  color: #ff0000;
}
 .comment-field-item .thumbs-btn.active .thumbs-num,
 .comment-field-reply-item .thumbs-btn.active .thumbs-num {
  animation: thumsAction 0.5s ease;
}
 .comment-field-item .thumbs-btn.active::before,
 .comment-field-reply-item .thumbs-btn.active::before {
  width: 24px;
  height: 21px;
  background: url(https://file.mysquadbeyond.com/uploads/article_photo/photo/2538950/198b9227-621d-4798-8e11-770119038ba9.png) no-repeat;
  animation: toThums 0.75s forwards;
}
 .comment-field-item .thumbs-btn.disabled,
 .comment-field-reply-item .thumbs-btn.disabled {
  pointer-events: none;
}
 .comment-field-item .thumbs-btn.down::before,
 .comment-field-reply-item .thumbs-btn.down::before {
  rotate: 180deg;
}
 .comment-field-item .thumbs-btn.down.active::before,
 .comment-field-reply-item .thumbs-btn.down.active::before {
  rotate: 180deg !important;
}
 .comment-field-item.is-reply-open .reply-btn {
  background-color: #ddd;
}
 .comment-field-item.is-reply-open .reply-btn::before {
  rotate: 180deg;
}
 .comment-field-item.is-reply-open .comment-field-reply {
  opacity: 1;
  max-height: 100%;
  animation: fadeIn 1s ease forwards;
}
 .comment-field-reply .comment-field-reply-item:not(:last-child) {
  border-bottom: none;
}
 .comment-field-reply .comment-field-reply-item:not(:last-child) .inner {
  border-bottom: 1px solid #ddd;
}
 .comment-field-reply .comment-field-reply-item:last-child {
  border-bottom: 1px solid #ddd;
}
 .comment-field-reply .comment-field-reply-item .inner {
  width: 90%;
  margin-left: auto;
  border-left: 5px solid #666;
  border-bottom: none;
}
 .comment-field-reply .comment-field-reply-item .action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 500px) {
   .comment-field {
    font-size: 3vw;
  }
}
@keyframes thumsAction {
  0% {
    scale: 1;
    rotate: 0;
  }
  40% {
    scale: 0.5;
    rotate: -90;
  }
  50% {
    scale: 0;
    rotate: -180;
  }
  100% {
    scale: 1;
    rotate: 0;
  }
}
@keyframes toThums {
  0% {
    rotate: 0;
    scale: 1;
  }
  20% {
    rotate: 75deg;
    scale: 0.5;
  }
  70% {
    rotate: -45deg;
    scale: 1.2;
  }
  100% {
    rotate: 0deg;
    scale: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 100%;
  }
}
 footer {
  width: 90%;
  background: #f5f1f1;
  font-size: 14px;
  margin: 30px auto　10px;
  padding: 10px;
}
article {
	background: #fff;
}
article section {
	width: 620px;
	margin: 0 auto;
	padding: 0 10px;
}
@media(max-width:1023px) {
header .wrap { width: 95%; }
aside .wrap, article > section, footer .wrap {
	width: 100%;
	padding: 0;
}