@charset "UTF-8";
/* CSS Document */
.howto-join dl {
  background-color: #eff4fa;
  padding: 24px; }

.base dt {
  line-height: 2; }

.detail.nuigurumi-land {
  color: var(--base-color04); }

.detail h2 {
  margin: 0 auto;
  font-size: 1.2em;
  background-color: var(--base-color01);
  padding: .5em .5em .5em 2em;
  position: sticky;
  top: 0;
  z-index: 2;
  border-radius: 100px; }

.detail.free h2 {
  min-height: 72px; }

.detail.nuigurumi-land h2 {
  background-color: var(--base-color05); }

.detail.nuigurumi-land h3 {
  color: var(--base-color04);
  border-top-color: var(--base-color04);
  border-bottom-color: var(--base-color04); }

.detail .wrap {
  padding: 16px 16px 48px;
  border-radius: 0 0 36px 36px; }

.detail.free .wrap,
.detail.paid2 .wrap {
  border-left: 1px dashed var(--base-color02);
  border-right: 1px dashed var(--base-color02);
  border-bottom: 1px dashed var(--base-color02); }

.detail.paid1 .wrap {
  border-left: 1px dashed var(--base-color04);
  border-right: 1px dashed var(--base-color04);
  border-bottom: 1px dashed var(--base-color04); }

.detail:not(:last-child) {
  margin: 0 0 100px; }

.detail h2 span {
  font-size: 1.4em;
  background-image: linear-gradient(transparent 50%, #ff6 50%); }

.detail dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 2;
  margin: 24px 0; }

.detail dt {
  width: 15%; }

.detail dd {
  width: 85%;
  margin: 0; }

.detail p {
  padding: 0 0 0 24px;
  margin: 0 0 24px 0; }

.detail p.tn {
  padding: 0;
  margin: 0; }

.detail p.image {
  text-align: center;
  margin: 0 auto 48px; }

.detail p.image img {
  width: 100%;
  max-width: 300px; }

.price {
  font-size: 1.3em; }

.detail .link {
  text-align: center; }

.detail .tn {
  margin: 0 auto 50px;
  display: flex;
  justify-content: space-around; }

.detail .about .tn {
  margin: 0 auto 24px;
  padding: 0; }

.about .link a {
  background-color: #678603; }

.detail .tn img {
  width: 32%;
  max-width: 300px; }

.free .tn img {
  width: 46%;
  max-width: 300px; }

.detail ul {
  margin: 24px 0;
  padding: 0 0 0 24px; }

.detail ul li {
  line-height: 2; }

.detail ul li + li {
  border-top: 1px solid #678603;
  padding-top: 24px;
  margin-top: 24px; }

.detail .note {
  font-size: .9em; }

.detail .note::before {
  content: "※"; }

.paid .priceList {
  display: grid;
  justify-content: center;
  background-color: #efefef;
  border-radius: 16px;
  padding: 1em 0; }
.paid li br {
  display: none; }
  @media screen and (max-width: 480px) {
    .paid li br {
      display: inline; } }
.paid .note + .note {
  color: red; }

.recommend {
  border: 1px dotted;
  outline: 1px solid;
  outline-offset: 4px;
  position: relative;
  width: calc(100% - 2em);
  margin: 80px auto 40px; }

.free .recommend,
.paid2 .recommend {
  border-color: var(--base-color02);
  outline-color: var(--base-color02); }

.paid1 .recommend {
  border-color: var(--base-color04);
  outline-color: var(--base-color04); }

.recommend h4 {
  position: absolute;
  top: -0.5em;
  left: 1em;
  background-color: #fff;
  font-size: 1.2em;
  padding: 0 1em; }

.recommend h4::before,
.recommend h4::after {
  content: none; }

.recommend li {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  text-indent: -1em;
  padding: 0 0 0 1em; }

.recommend li:not(:last-child) {
  margin: 0 auto 1em; }

.recommend li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c　";
  color: var(--base-color02); }

.nuigurumi-land .recommend li::before {
  color: var(--base-color04); }

.nuigurumi-land .link a {
  background-color: var(--base-color04); }

.about {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin: 0 auto 50px;
  padding: 24px;
  background-color: #fbffee;
  box-shadow: 0 0 0 8px #dde7bc;
  -webkit-box-shadow: 0 0 0 8px #dde7bc; }

.about h4 {
  display: block;
  /*★*/
  color: #678603;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  padding: 0;
  margin: 1em 0 2em; }

.about h4::before,
.about h4::after {
  letter-spacing: .5em;
  color: #dde7bc;
  position: relative;
  /*★*/
  display: inline;
  /*★*/
  background-color: inherit;
  /*★*/ }

.about h4::before {
  font-family: "Font Awesome 5 Free";
  content: "\f610\f1b0\f201 "; }

.about h4::after {
  font-family: "Font Awesome 5 Free";
  content: " \f0c3\f6d3\f200"; }

.about h5 {
  color: #666;
  display: inline-block;
  font-weight: bold; }

.about ul {
  line-height: 1.5;
  margin: 0 auto 24px; }

@media screen and (max-width: 768px) {
  .base .h-display-none,
  .link .h-display-none {
    display: inline; } }
@media screen and (max-width: 480px) {
  main {
    border-radius: 0; }

  .summary dl dd:nth-child(2) {
    margin: 0 auto 2em; }

  .link a {
    border-radius: 20px; }

  .detail:not(:last-child) {
    margin: 0 0 40px; }

  .detail h3:not(:first-child) {
    margin: 2em auto 1em; }

  .detail ul {
    margin: 0;
    padding: 0; }

  .detail dt {
    width: 40%; }

  .detail dd {
    width: 60%;
    margin: 0; }

  .detail p {
    padding: 0;
    margin: 0; }

  .detail .tn {
    margin: 48px auto; }

  .recommend {
    margin: 32px auto;
    padding: 1em .5em; }

  .recommend h4 {
    padding: 0 .5em; }

  .recommend li {
    line-height: 1.2;
    text-indent: 0;
    padding: 0 0 1em; }

  .recommend li:not(:last-child) {
    border-bottom: 1px dashed var(--base-color02); }

  .recommend ul li::before {
    content: ""; }

  .link {
    text-align: center; }

  .about {
    padding: 1em; }

  .about h4::before,
  .about h4::after {
    font-size: .8em; }

  .about h4::before {
    vertical-align: super; }

  .about h4::after {
    vertical-align: sub; }

  .about.lab li:last-child p {
    margin: 0 auto; } }

/*# sourceMappingURL=howto-join.css.map */