@charset 'UTF-8';

#toc{
  padding-top: 11.2rem;
}

/*  sx  */
#sx{
  padding-bottom: 0;
}
#sx h2+.desc{
  margin-top: .8rem;
}
#sx>.desc{
  padding: 4.4rem 0;
  margin: 0 auto;
  max-width: 44.0rem;
  max-width: 310px;
}
@media screen and (min-width: 768px){
  #sx>.desc{
    margin: 0;
    max-width: none;
  }
}
#sx>.desc p{
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.5rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(247, 79, 124);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
#sx>.desc p::before{
  content: '\3010';
  -webkit-transform: scaleY(2.3);
  transform: scaleY(2.3);
}
#sx>.desc p::after{
  content: '\3011';
  -webkit-transform: scaleY(2.3);
  transform: scaleY(2.3);
}
@media screen and (min-width: 768px){
  #sx>.desc p{
    display: block;
  }
  #sx>.desc p::before{
    -webkit-transform: none;
    transform: none;
  }
  #sx>.desc p::after{
    -webkit-transform: none;
    transform: none;
  }
}
#sx .sxlist{
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sx .sxlist li{
  flex-basis: calc(180 / 375 * 100%);
}
#sx .sxlist li:nth-of-type(n+3){
  margin-top: calc(15 / 375 * 100%);
}
@media screen and (min-width: 768px){
  #sx .sxlist li{
    flex-basis: calc(262.5 / 1200 * 100%);
  }
  #sx .sxlist li:nth-of-type(n+3){
    margin-top: 0;
  }
  #sx .sxlist li:nth-of-type(n+5){
    margin-top: 4.0rem;
  }
}
#sx .sxlist li a{
  padding: 0 calc(20 / 17 * 1em) calc(17 / 17 * 1em) calc(20 / 17 * 1em);
  display: block;
  font-size: 1.7rem;
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  height: 100%;
  box-sizing: border-box;
}
#sx .sxlist li figure{
  margin: 0;
}
#sx .sxlist li figcaption{
  padding-top: .175em;
  font-size: inherit;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: rgb(11, 16, 87);
  text-align: justify;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}
#sx .detail{
  padding-top: 6.3em;
}
#sx .detail>section{
  padding: 3.0rem calc( (50vw - 50%) / 2);
  margin: 0 calc( (50% - 50vw) / 2) 4.8rem calc( (50% - 50vw) / 2);
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px){
  #sx .detail>section{
    padding: 3.0rem;
    margin: 0 0 4.8rem 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  #sx .text{
    flex-basis: calc(826 / 1140 *100%);
  }
  #sx .ill{
    flex-basis: calc(314 / 1140 *100%);
    -webkit-box-ordinal-group: 0;
    order: -1;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }
}
#sx .detail h3{
  padding: 1.14rem 1.6rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.3rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: rgb(11, 16, 87);
  background-color: rgb(242, 239, 242);
  border-top: dotted 2px rgb(11, 16, 87);
  border-bottom: dotted 2px rgb(11, 16, 87);
}
@media screen and (min-width: 768px){
  #sx .detail .container{
    padding-top: 3.0rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  #sx .detail .container section{
    flex-basis: calc(434 / 826 * 100%);
  }
  #sx .detail .container .desc{
    flex-basis: calc(362 / 826 * 100%);
  }
}
#sx .detail .text section{
  margin: 2.6rem 0 2.0rem 0;
  border-radius: 20px;
  border: solid 1px rgb(11, 16, 87);
  background-color: rgb(255, 255, 255, 0.8);
  overflow: hidden;
}
@media screen and (min-width: 768px){
  #sx .detail .text section{
    margin: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}
#sx .detail h4{
  padding: .58rem 2.0rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
  border: solid 1px rgb(11, 16, 87);
  background-color: rgb(11, 16, 87);
}
#sx .detail ul{
  padding: 2.0rem;
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 768px){
  #sx .detail ul{
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
  }
}
#sx .detail li{
  padding: .2em 0 .2em .75em;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: calc(1.35 / 18 * 1em);
  color: rgb(11, 16, 87);
  text-indent: -.75em;
  font-weight: 500;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}
#sx .detail li::before{
  content: '\30FB';
  display: inline-block;
  text-indent: 0;
  width: .75em;
}
#sx .detail .desc p{
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: 0.05em;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  text-decoration: underline;
  -webkit-text-decoration-style: dotted;
  text-decoration-style: dotted;
  -webkit-text-decoration-color: rgb(178, 165, 187);
  text-decoration-color: rgb(178, 165, 187);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}
#sx .detail .image{
  margin: 0 auto;
  max-width: 222px;
  text-align: center;
}
@media screen and (min-width: 768px){
  #sx .detail .image{
    margin: 0;
    max-width: none;
  }
}
@media screen and (min-width: 768px){
  #sx .forfam{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
#sx .forfam>section{
  padding: 3.0rem calc( (50vw - 50%) / 2);
  margin: 0 calc( (50% - 50vw) / 2);
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
}
#sx .forfam>section:not(:last-of-type){
  margin-bottom: 4.8rem;
}
@media screen and (min-width: 768px){
  #sx .forfam>section{
    padding: 3.0rem;
    margin: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-basis: calc(576.5 / 1200 * 100%);
    box-sizing: border-box;
  }
  #sx .forfam>section:not(:last-of-type){
    margin-bottom: 0;
  }
  #sx .forfam>section:not(:nth-last-of-type(-n+2)){
    margin-bottom: 4.8rem;
  }
}
#sx .forfam h3{
  padding: 1.14rem 1.6rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.3rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: rgb(11, 16, 87);
  background-color: rgb(242, 239, 242);
  border-top: dashed 2px rgb(11, 16, 87);
  border-bottom: dashed 2px rgb(11, 16, 87);
}
#sx .forfam h3 br{
  display: none;
}
@media screen and (min-width: 1280px){
  #sx .forfam h3{
    text-align: center;
  }
  #sx .forfam h3 br{
    display: inline;
  }
}
#sx .forfam section section{
  margin-top: 2.2rem;
  border-radius: 20px;
  border: solid 1px rgb(11, 16, 87);
  background-color: rgb(255, 255, 255, 0.8);
  overflow: hidden;
}
@media screen and (min-width: 768px){
  #sx .forfam section section{
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
  }
}
#sx .forfam h4{
  padding: .58rem 2.0rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
  border: solid 1px rgb(11, 16, 87);
  background-color: rgb(11, 16, 87);
}
#sx .forfam ul{
  padding: 2.0rem;
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 768px){
  #sx .forfam ul{
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
  }
}
#sx .forfam li{
  padding: .2em 0 .2em .75em;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: calc(1.35 / 18 * 1em);
  color: rgb(11, 16, 87);
  text-indent: -.75em;
  font-weight: 500;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}
#sx .forfam li::before{
  content: '\30FB';
  display: inline-block;
  text-indent: 0;
  width: .75em;
}

/*  flow  */
#flow section{
  padding: 5.2rem 0 3.8rem 0;
}
#flow section h3{
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.5rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(11, 16, 87);
}
#flow .howto .desc{
  padding-top: 3.6rem;
}
#flow section .desc p{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
}
#flow section .desc .notes p{
  font-size: 1.4rem;
  line-height: 1.8;
}
#flow section em{
  font-style: normal;
  position: relative;
  z-index: 0;
  line-height: 1.2;
}
#flow section em::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  height: calc(8 / 16 * 1em);
  background-color: rgb(255, 255, 1, 0.7);
}
#flow .howto .desc p{
  text-align: center;
}
#flow .flow ol{
  padding: 2.4rem 0 0 0;
  margin: 0 auto;
  list-style: none;
  max-width: 414px;
}
@media screen and (min-width: 768px){
  #flow .flow ol{
    margin: 0;
    max-width: none;
  }
}
#flow .flow ol>li:not(:last-of-type){
  padding-bottom: 3.4rem;
}
@media screen and (min-width: 768px){
  #flow .flow ol>li{
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }
  #flow .flow ol>li:not(:last-of-type){
    padding-bottom: 8.8rem;
  }
  #flow .flow ol>li .num{
    flex-basis: calc(120 / 1200 * 100%);
    flex-shrink: 0;
  }
  #flow .flow ol>li .term{
    flex-basis: 21.4rem;
    flex-shrink: 0;
  }
  #flow .flow ol>li .desc{
    padding-left: calc(30 / 1200 * 100%);
    -webkit-box-flex: 1;
    flex-grow: 1;
  }
}
#flow .flow .num{
  font-size: 1.6rem;
  line-height: 1.9;
  letter-spacing: calc(1.2 / 16 * 1em);
  color: rgb(11, 16, 87);
  white-space: nowrap;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
@media screen and (min-width: 768px){
  #flow .flow .num{
    -webkit-transform: none;
    transform: none;
  }
}
@media screen and (min-width: 1280px){
  #flow .flow .num{
    text-align: center;
  }
}
#flow .flow .num span{
  font-size: calc(25 / 16 * 100%);
}
#flow .flow .term{
  margin: 0 auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 21.4rem;
  height: 21.4rem;
  font-family: var(--NotoSerifJP);
  font-size: 2.8rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  color: rgb(11, 16, 87);
  background-color: rgb(255, 252, 241);
  border: 1.8rem solid rgb(203, 194, 208);
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
}
@media screen and (min-width: 768px){
  #flow .flow .term{
    margin: 0;
  }
}
#flow .flow ol li:not(:first-of-type) .term::before{
  content: '';
  position: absolute;
  bottom: calc(100% + 1.8rem + 2.9rem);
  border-top: 2.9rem solid rgb(11, 16, 87);
  border-left: 1.15rem solid transparent;
  border-right: 1.15rem solid transparent;
}
@media screen and (min-width: 768px){
  #flow .flow ol li:not(:first-of-type) .term::before{
    bottom: calc(100% + 1.8rem);
  }
  #flow .flow ol li:not(:first-of-type) .term::after{
    content: '';
    position: absolute;
    bottom: calc(100% + 1.8rem + 2.9rem);
    z-index: -10;
    width: .5rem;
    height: 100%;
    background-color: rgb(11, 16, 87);
  }
}
#flow .flow ol li:nth-of-type(1) .term{
  border-color: rgb(203, 194, 208);
}
#flow .flow ol li:nth-of-type(2) .term{
  border-color: rgb(165, 152, 178);
}
#flow .flow ol li:nth-of-type(3) .term{
  border-color: rgb(141, 126, 160);
}
#flow .flow ol li:nth-of-type(4) .term{
  border-color: rgb(105, 91, 137);
}
#flow .flow ul{
  padding: .88rem 1.6rem;
  margin: 1.7rem 0;
  list-style: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
}
#flow .flow ul li{
  padding: 0.35em 0 0.35em 0.9em;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-indent: -0.9em;
}
#flow .flow ul li::before{
  margin-top: -.25em;
  margin-right: .25em;
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.0rem;
  height: 1.0rem;
  border-radius: 50%;
  background-color: currentColor;
}
#flow .flow ul li .mark{
  font-size: 50%;
}
#flow .flow .desc{
  padding-top: 1.6rem;
}
@media screen and (min-width: 768px){
  #flow .flow .desc{
    padding-top: 0;
  }
}