@charset "UTF-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main {
  /*------------------------------------------------------------
  	MV
  ------------------------------------------------------------*/
}
#main .mv {
  position: relative;
  background: linear-gradient(-89.96deg, #fff 50.859%, #F4F9FE 99.974%);
}
#main .mv .mvInner {
  position: relative;
  width: 151.2rem;
  height: 109.6rem;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  #main .mv .mvInner {
    width: 37.5rem;
    height: 75.8rem;
  }
}
#main .mv .wave {
  position: absolute;
  top: 60.4rem;
  /* 波の左端（デザイン上は画面外の尖り）を常に画面左外に置き、右側は画面幅に合わせて伸ばす */
  left: calc(47.3rem - 50vw);
  width: calc(35.552rem + 100vw);
  height: 38.57rem;
  pointer-events: none;
}
@media all and (max-width: 896px) {
  #main .mv .wave {
    top: 63.2rem;
    left: calc(13.25rem - 50vw);
    width: calc(14.206rem + 100vw);
    height: 10.5rem;
  }
}
#main .mv .wave img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
#main .mv .wave .w9 {
  mix-blend-mode: multiply;
}
#main .mv .photo {
  position: absolute;
  top: 0;
  left: 70.6rem;
  width: 80.6rem;
}
@media all and (max-width: 896px) {
  #main .mv .photo {
    top: 25.4rem;
    left: 0;
    width: 37.5rem;
  }
}
#main .mv .photo img {
  display: block;
  width: 100%;
}
#main .mv .photo {
  /* デザイン幅より広い画面：写真の端を画面端まで延長 */
}
#main .mv .photo::before, #main .mv .photo::after {
  position: absolute;
  top: 0;
  height: 100%;
  content: "";
}
#main .mv .photo::after {
  left: 100%;
  width: calc((100vw - 151.2rem) / 2 + 0.2rem);
  -webkit-mask-image: linear-gradient(to right, #000 0, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, transparent 100%);
  background: url(../img/index/mv_photo_edge.webp) repeat-x left top/0.1rem 100%;
}
@media all and (max-width: 896px) {
  #main .mv .photo::after {
    width: calc((100vw - 37.5rem) / 2 + 0.2rem);
    background-image: url(../img/index/mv_photo_sp_edge_r.webp);
  }
}
#main .mv .photo::before {
  display: none;
}
@media all and (max-width: 896px) {
  #main .mv .photo::before {
    display: block;
    right: 100%;
    width: calc((100vw - 37.5rem) / 2 + 0.2rem);
    -webkit-mask-image: linear-gradient(to left, #000 0, transparent 100%);
    mask-image: linear-gradient(to left, #000 0, transparent 100%);
    background: url(../img/index/mv_photo_sp_edge_l.webp) repeat-x left top/0.1rem 100%;
  }
}
#main .mv .dot {
  position: absolute;
  border-radius: 50%;
}
#main .mv .dot.d01 {
  top: 15.4rem;
  left: 52rem;
  width: 3.2rem;
  height: 3.2rem;
  background-color: #F5F2B1;
}
#main .mv .dot.d02 {
  top: 86.2rem;
  left: 74.4rem;
  width: 3.2rem;
  height: 3.2rem;
  background-color: #F5F2B1;
}
#main .mv .dot.d03 {
  top: 15.5rem;
  left: 62.5rem;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #fff;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
#main .mv .dot.d04 {
  top: 47rem;
  left: 82.4rem;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #ECF2F8;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
#main .mv .dot.d05 {
  top: 11.2rem;
  left: 76rem;
  width: 4rem;
  height: 4rem;
  background-color: #D3F5FF;
}
#main .mv .dot.d06 {
  top: 91rem;
  left: 85.2rem;
  width: 4rem;
  height: 4rem;
  background-color: #D3F5FF;
}
#main .mv .dot.d07 {
  top: 6.2rem;
  left: 63.6rem;
  width: 3.2rem;
  height: 3.2rem;
  background-color: #F5F2B1;
}
@media all and (max-width: 896px) {
  #main .mv .dot.d01 {
    top: 8.8rem;
    left: 27.4rem;
    width: 2rem;
    height: 2rem;
    background-color: #D3F5FF;
    opacity: 1;
    mix-blend-mode: normal;
  }
  #main .mv .dot.d02 {
    top: 28.8rem;
    left: 2.4rem;
    width: 1.6rem;
    height: 1.6rem;
    background-color: #F5F2B1;
  }
  #main .mv .dot.d03 {
    top: 75rem;
    left: 4.9rem;
    width: 1rem;
    height: 1rem;
    background-color: #F5F2B1;
    opacity: 1;
    mix-blend-mode: normal;
  }
  #main .mv .dot.d04 {
    top: 8.1rem;
    left: 23.2rem;
    width: 1rem;
    height: 1rem;
    background-color: #F5F2B1;
    opacity: 1;
    mix-blend-mode: normal;
  }
  #main .mv .dot.d05 {
    top: 76.5rem;
    left: 10rem;
    width: 1.6rem;
    height: 1.6rem;
    background-color: #D3F5FF;
  }
  #main .mv .dot.d06, #main .mv .dot.d07 {
    display: none;
  }
}
#main .mv .textBox {
  position: absolute;
  top: 18rem;
  left: 8.1rem;
  width: 89.6rem;
}
@media all and (max-width: 896px) {
  #main .mv .textBox {
    top: 8.4rem;
    left: 1.5rem;
    width: 34.6rem;
  }
}
#main .mv .textBox .name span {
  display: inline-block;
  padding: 0.3rem 1.6rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 2.8rem;
  border-radius: 10rem;
  background-color: #5E91EE;
}
@media all and (max-width: 896px) {
  #main .mv .textBox .name span {
    padding: 0.2rem 1.2rem;
    font-size: 1.1rem;
    letter-spacing: 0.06rem;
    line-height: 2rem;
  }
}
#main .mv .textBox .catch {
  margin-top: 1.6rem;
  color: #1F3B7A;
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: 0.28rem;
  line-height: 8.6rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .mv .textBox .catch {
    margin-top: 0.8rem;
    font-size: 3rem;
    letter-spacing: 0.06rem;
    line-height: 4rem;
  }
}
#main .mv .textBox .catch em {
  color: #5E91EE;
  font-style: normal;
  background: linear-gradient(transparent 68%, #F7F5C1 68%);
}
#main .mv .textBox .lead {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 3rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .mv .textBox .lead {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    line-height: 2.2rem;
    white-space: normal;
  }
}
#main .mv .textBox .lead strong {
  color: #1F3B7A;
  font-weight: 700;
}
#main .mv .mvBtn {
  position: absolute;
  top: 49.27rem;
  left: 7.8rem;
}
#main .mv .mvBtn a {
  gap: 3.3985rem;
  padding: 2.3365rem 4.2482rem 2.3365rem 6.7971rem;
  font-size: 2.6551rem;
  letter-spacing: 0.12745rem;
  border-radius: 10.6204rem;
  box-shadow: 0 0.531rem 0 #697FBF;
}
#main .mv .mvBtn a::after {
  width: 0.8496rem;
  height: 0.8496rem;
  margin: 0 0.176rem;
  border-width: 0.2124rem;
}
#main .mv .mvBtn .ru {
  letter-spacing: 0.42482rem;
}
#main .mv .mvBtn small {
  font-size: 1.6993rem;
}
@media all and (max-width: 896px) {
  #main .mv .mvBtn {
    top: 59.6rem;
    left: calc(50% + 0.05rem);
    transform: translateX(-50%);
  }
  #main .mv .mvBtn a {
    display: flex;
    justify-content: center;
    width: auto;
    padding: 1.3rem 3rem;
    font-size: 1.6rem;
    letter-spacing: 0.09rem;
    line-height: 3rem;
    border: 0.2rem solid #fff;
    border-radius: 3.2rem;
    box-shadow: none;
    filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25));
  }
  #main .mv .mvBtn a::after {
    display: none;
  }
  #main .mv .mvBtn .ru {
    letter-spacing: 0.272rem;
  }
  #main .mv .mvBtn small {
    font-size: 1.1rem;
    line-height: 1;
  }
}
#main .mv .featList {
  position: absolute;
  top: 64rem;
  left: 7.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62.8rem;
  padding: 1.0914rem 2.015rem;
  border-radius: 2.1829rem;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0.6822rem 0.6822rem 2.0465rem 0.3411rem rgba(0, 0, 0, 0.15);
}
@media all and (max-width: 896px) {
  #main .mv .featList {
    top: 27rem;
    left: 22.5rem;
    flex-direction: column;
    width: 13rem;
    justify-content: flex-start;
    padding: 0.6rem 1rem;
    border-radius: 1.2452rem;
    box-shadow: 0.3891rem 0.3891rem 1.1674rem 0.1946rem rgba(0, 0, 0, 0.15);
  }
}
#main .mv .featList li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.1829rem;
  width: 17rem;
  min-height: 18.7592rem;
  padding: 0.5037rem 0;
}
@media all and (max-width: 896px) {
  #main .mv .featList li {
    gap: 0.6rem;
    width: 9.6976rem;
    min-height: 0;
    padding: 0.2874rem 0;
  }
}
#main .mv .featList li + li {
  margin-left: 2.1828rem;
}
@media all and (max-width: 896px) {
  #main .mv .featList li + li {
    margin: 1rem 0 0;
  }
}
#main .mv .featList li + li::before {
  position: absolute;
  top: 50%;
  left: -1.0914rem;
  width: 0.13643rem;
  height: 18.7592rem;
  content: "";
  border-radius: 0.1rem;
  background-color: #DBE3F4;
  transform: translate(-50%, -50%);
}
@media all and (max-width: 896px) {
  #main .mv .featList li + li::before {
    top: -0.5rem;
    left: 50%;
    width: 10.7011rem;
    height: 0.078rem;
  }
}
#main .mv .featList li p {
  width: 100%;
  color: #7090D4;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .mv .featList li p {
    font-size: 1.1rem;
    line-height: 1.6rem;
  }
}
#main .mv .featList .ico {
  position: relative;
  font-size: 1rem;
}
#main .mv .featList .ico .circle {
  position: absolute;
  top: 0;
  border-radius: 50%;
}
#main .mv .featList .ico img {
  position: absolute;
  max-width: none;
}
#main .mv .featList .ico .num {
  position: absolute;
  left: 0;
  padding: 0.3rem 0.4rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 2.2rem;
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  background-color: #7090D4;
}
@media all and (max-width: 896px) {
  #main .mv .featList .ico .num {
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    line-height: 1.255rem;
    border-width: 0.1141rem;
    border-radius: 1.6rem;
  }
}
#main .mv .featList .i01 .ico {
  width: 12.256em;
  height: 11.847em;
}
@media all and (max-width: 896px) {
  #main .mv .featList .i01 .ico {
    font-size: 0.55rem;
  }
}
#main .mv .featList .i01 .ico .circle {
  left: 0.606em;
  width: 11.6495em;
  height: 11.6495em;
  background-color: #C4EBEC;
}
#main .mv .featList .i01 .ico img {
  top: 0;
  left: 0.379em;
  width: 11.8445em;
}
#main .mv .featList .i01 .ico .num {
  top: 0.044rem;
}
#main .mv .featList .i02 .ico {
  width: 12.805em;
  height: 12.09em;
}
@media all and (max-width: 896px) {
  #main .mv .featList .i02 .ico {
    font-size: 0.53rem;
  }
}
#main .mv .featList .i02 .ico .circle {
  left: 0.696em;
  width: 11.9377em;
  height: 11.9377em;
  background-color: #CDDFF8;
}
#main .mv .featList .i02 .ico img {
  top: 0.091em;
  left: 0.395em;
  width: 12.41em;
}
#main .mv .featList .i02 .ico .num {
  top: 0.065rem;
}
#main .mv .featList .i03 .ico {
  width: 12.252em;
  height: 11.645em;
}
@media all and (max-width: 896px) {
  #main .mv .featList .i03 .ico {
    font-size: 0.55rem;
  }
}
#main .mv .featList .i03 .ico .circle {
  left: 0.617em;
  width: 11.635em;
  height: 11.635em;
  background-color: #C4EBEC;
}
#main .mv .featList .i03 .ico img {
  top: 0;
  left: 0.314em;
  width: 11.9229em;
}
#main .mv .featList .i03 .ico .num {
  top: 0.043rem;
}
#main {
  /*------------------------------------------------------------
  	about
  ------------------------------------------------------------*/
}
#main .about {
  position: relative;
  padding: 12rem 0 11.38rem;
  background-color: #DBE3F4;
}
@media all and (max-width: 896px) {
  #main .about {
    padding: 8rem 0 7.27rem;
  }
}
#main .about .deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#main .about .deco.c01 {
  top: -15.354rem;
  left: calc(50% + 45.246rem);
  width: 28.9rem;
  height: 28.9rem;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .about .deco.c01 {
    top: -2.821rem;
    left: calc(50% + 5.774rem);
    width: 10.838rem;
    height: 10.838rem;
  }
}
#main .about .deco.c02 {
  top: -1.132rem;
  left: calc(50% + 65.754rem);
  width: 22.6rem;
  height: 22.6rem;
  background-color: #D9F1ED;
}
@media all and (max-width: 896px) {
  #main .about .deco.c02 {
    top: 2.513rem;
    left: calc(50% + 13.466rem);
    width: 8.475rem;
    height: 8.475rem;
  }
}
#main .about .aboutHead {
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .about .aboutHead .comHead .ja {
    white-space: normal;
  }
}
#main .about .aboutHead .lead {
  margin-top: 4rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .about .aboutHead .lead {
    margin-top: 2.4rem;
  }
}
#main .about .aboutHead .lead .l1 {
  display: block;
  font-size: 1.6rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .about .aboutHead .lead .l1 {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .about .aboutHead .lead .l2 {
  display: block;
  margin-top: 0.8rem;
  font-size: 2.6rem;
  line-height: 3.6rem;
}
@media all and (max-width: 896px) {
  #main .about .aboutHead .lead .l2 {
    margin-top: 0;
    font-size: 2.2rem;
  }
}
#main .about .aboutHead .lead strong {
  color: #7090D4;
  font-weight: 700;
}
#main .about .aboutHead .lead .desu {
  font-size: 1.6rem;
  line-height: 2rem;
}
@media all and (max-width: 896px) {
  #main .about .aboutHead .lead .desu {
    font-size: 1.5rem;
  }
}
#main {
  /*------------------------------------------------------------
  	主宰者プロフィール（MV直下へ移動・実績を統合）
  ------------------------------------------------------------*/
}
#main .organizer {
  position: relative;
  z-index: 1; /* カードの影を次セクションの背景より前に */
  display: flow-root; /* カードの負マージンが親に相殺されないように */
}
#main .organizer .profileBox {
  position: relative;
  margin-top: 6.4rem;
  padding: 5.6rem;
  border-radius: 3.2rem;
  background-color: #fff;
  box-shadow: 1rem 1rem 3rem 0.5rem rgba(0, 0, 0, 0.15);
}
@media all and (max-width: 896px) {
  #main .organizer .profileBox {
    margin-top: 3.7rem;
    padding: 4rem 2rem 5.6rem;
  }
}
#main .organizer .profile {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  margin-top: 5.6rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile {
    flex-direction: column;
    align-items: center;
    margin-top: 2.4rem;
  }
}
#main .organizer .profile .photo {
  position: relative;
  flex-shrink: 0;
  width: 35rem;
  height: 35.86rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .photo {
    width: 29.5rem;
    height: 29.5rem;
  }
}
#main .organizer .profile .photo .circle {
  position: absolute;
  top: 1.023rem;
  left: 0.393rem;
  width: 33.9967rem;
  height: 33.9967rem;
  border-radius: 50%;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .photo .circle {
    top: 0.9rem;
    left: 0.5rem;
    width: 28.6rem;
    height: 28.6rem;
  }
}
#main .organizer .profile .photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 35rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .photo img {
    width: 29.5rem;
  }
}
#main .organizer .profile .textBox {
  width: 63rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .textBox {
    width: 100%;
  }
}
#main .organizer .profile .nameBox {
  color: #7090D4;
  font-weight: 700;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .nameBox {
    text-align: center;
  }
}
#main .organizer .profile .nameBox .name {
  height: 3rem;
  font-size: 3.8rem;
  letter-spacing: 0.19rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .nameBox .name {
    font-size: 3.2rem;
  }
}
#main .organizer .profile .nameBox .name small {
  font-size: 1.6rem;
  line-height: 1;
}
#main .organizer .profile .nameBox .post {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  letter-spacing: 0.09rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .nameBox .post {
    margin-top: 0.8rem;
    font-size: 1.6rem;
    letter-spacing: 0.08rem;
    line-height: 2.5rem;
  }
}
#main .organizer .profile .intro {
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .intro {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .organizer .profile .line {
  display: block;
  height: 0;
  margin: 2.4rem 0 -1px;
  border-top: 1px solid #DBE3F4;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .line {
    margin-top: 1.6rem;
  }
}
#main .organizer .profile .career {
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career {
    margin-top: 1.6rem;
  }
}
#main .organizer .profile .career .txt {
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career .txt {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .organizer .profile .career .txt ul {
  margin-top: 0.8rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career .txt ul {
    white-space: normal;
  }
}
#main .organizer .profile .career .txt li {
  margin-left: 2.4rem;
  list-style: disc;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career .txt li {
    margin-left: 2.25rem;
  }
}
#main .organizer .profile .sTtl {
  color: #7090D4;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .sTtl {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
}
#main .organizer .profile .books {
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .books {
    margin-top: 1.6rem;
  }
}
@media all and (max-width: 896px) {
  #main .organizer .profile .books .sTtl {
    font-size: 2.4rem;
    letter-spacing: 0.12rem;
  }
}
#main .organizer .profile .bookList {
  display: flex;
  gap: 3.4rem;
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .bookList {
    justify-content: space-between;
    gap: 0;
  }
}
#main .organizer .profile .bookList li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
#main .organizer .profile .bookList .img {
  width: 15rem;
  height: 21.3rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .bookList .img {
    width: 12.5rem;
    height: 17.8rem;
  }
}
#main .organizer .profile .bookList .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .organizer .profile .bookList .img.noimg {
  background-color: #DBE3F4;
}
#main .organizer .profile .bookList p {
  font-weight: 700;
  line-height: 2.4rem;
  text-align: center;
  white-space: nowrap;
}
#main .organizer .proBtn {
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .organizer .proBtn {
    margin-top: 3.2rem;
  }
  #main .organizer .proBtn a {
    padding: 2.2rem 2.4rem;
    font-size: 1.6rem;
  }
  #main .organizer .proBtn .ru {
    letter-spacing: 0.256rem;
  }
}
#main {
  /*------------------------------------------------------------
  	shared
  ------------------------------------------------------------*/
}
#main .shared {
  position: relative;
  padding: 12rem 0;
  background-color: #fff;
  background-image: linear-gradient(90deg, #EDF1F9 1px, transparent 1px, transparent calc(100% - 1px), #F4F7FC calc(100% - 1px)), linear-gradient(180deg, #EDF1F9 1px, transparent 1px, transparent calc(100% - 1px), #F4F7FC calc(100% - 1px));
  background-size: 1.6rem 1.6rem;
}
@media all and (max-width: 896px) {
  #main .shared {
    padding: 8rem 0;
  }
}
#main .shared .deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
#main .shared .deco.c01 {
  top: -12.1rem;
  left: calc(50% - 59.9rem);
  width: 18.9rem;
  height: 18.9rem;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .shared .deco.c01 {
    top: -3.192rem;
    left: calc(50% - 13.492rem);
    width: 8.942rem;
    height: 8.192rem;
  }
}
#main .shared .deco.c02 {
  top: -24.2rem;
  left: calc(50% - 80.1rem);
  width: 27.6rem;
  height: 27.6rem;
  background-color: #D9F1ED;
}
@media all and (max-width: 896px) {
  #main .shared .deco.c02 {
    top: -8.436rem;
    left: calc(50% - 23.05rem);
    width: 13.059rem;
    height: 11.962rem;
  }
}
#main .shared .deco.c03 {
  top: 195.1rem;
  left: calc(50% + 62.4rem);
  width: 3.2rem;
  height: 3.2rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .shared .deco.c03 {
    display: none;
  }
}
#main .shared .comHead .en {
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .shared .comHead .en {
    white-space: normal;
  }
}
@media all and (max-width: 896px) {
  #main .shared .comHead .ja {
    font-size: 3.2rem;
    letter-spacing: 0.16rem;
  }
}
#main .shared .sharedList {
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList {
    margin-top: 2.4rem;
  }
}
#main .shared .sharedList > li {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#main .shared .sharedList > li + li {
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList > li + li {
    margin-top: 3.2rem;
  }
}
#main .shared .sharedList .head {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .head {
    gap: 0.8rem;
    width: calc(100% - 0.9rem);
  }
}
#main .shared .sharedList .head .num {
  flex: 1;
  font-size: 8rem;
  font-weight: 700;
  line-height: 5.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .head .num {
    flex: none;
    font-size: 5.2rem;
  }
}
#main .shared .sharedList .head .ttl {
  flex-shrink: 0;
  width: 109.1rem;
  padding: 2rem 4rem;
  border-radius: 4rem;
  background: linear-gradient(to left, #EFF9FD, #DBE3F4);
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .head .ttl {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0.8rem 2.2rem;
  }
}
#main .shared .sharedList .head .ttl .in {
  display: block;
  color: #5E91EE;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  line-height: 3.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .head .ttl .in {
    font-size: 1.9rem;
    letter-spacing: 0.095rem;
    line-height: 2.6rem;
  }
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .head .ttl.wrap .in {
    white-space: normal;
  }
}
#main .shared .sharedList .body {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 109.1rem;
  margin-top: 2.4rem;
  padding: 1.6rem;
  border: 0.2rem solid #80ADDB;
  border-radius: 1.6rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .body {
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    margin-top: 0.8rem;
  }
}
#main .shared .sharedList .body.g24 {
  gap: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .body.g24 {
    gap: 1.6rem;
  }
}
#main .shared .sharedList .body .txt {
  flex: 1;
  min-width: 0;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .body .txt {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .shared .sharedList .body .txt p + p {
  margin-top: 0.8rem;
}
#main .shared .sharedList .img {
  flex-shrink: 0;
  width: 30rem;
  height: 15rem;
  border-radius: 1.6rem;
  background-color: #DBE3F4;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .img {
    width: 100%;
  }
}
#main .shared .sharedList .cardList {
  display: flex;
  gap: 1.6rem;
  width: 109.1rem;
  margin-top: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .cardList {
    flex-direction: column;
    width: 100%;
    margin-top: 0.8rem;
  }
}
#main .shared .sharedList .cardList li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
  width: 35.3rem;
  padding: 1.6rem;
  border: 0.2rem solid #80ADDB;
  border-radius: 1.6rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .cardList li {
    gap: 1.6rem;
    width: 100%;
  }
}
#main .shared .sharedList .cardList li:first-child {
  gap: 1.5rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .cardList li:first-child {
    gap: 1.6rem;
  }
}
#main .shared .sharedList .cardList .tag {
  padding: 0.8rem 2.4rem;
  color: #80ADDB;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.11rem;
  line-height: 3rem;
  white-space: nowrap;
  border-radius: 2.4rem;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .cardList .tag {
    padding: 0.5rem 2.4rem;
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
  }
}
#main .shared .sharedList .cardList .txt {
  width: 100%;
}
@media all and (max-width: 896px) {
  #main .shared .sharedList .cardList .txt {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main {
  /*------------------------------------------------------------
  	why
  ------------------------------------------------------------*/
}
#main .why {
  position: relative;
  padding-bottom: 12rem;
  background-color: #DBE3F4;
}
@media all and (max-width: 896px) {
  #main .why {
    padding-bottom: 8rem;
  }
}
#main .why .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 90rem;
  height: 52rem;
}
@media all and (max-width: 896px) {
  #main .why .photo {
    width: 23.3rem;
    height: 14rem;
  }
}
#main .why .photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 65.633%, transparent 94.913%);
  mask-image: linear-gradient(to bottom, #000 65.633%, transparent 94.913%);
}
@media all and (max-width: 896px) {
  #main .why .photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 11.712%, transparent 88.571%);
    mask-image: linear-gradient(to bottom, #000 11.712%, transparent 88.571%);
  }
}
#main .why .whyInner {
  position: relative;
  width: 151.2rem;
  margin: 0 auto;
  padding-top: 12rem;
}
@media all and (max-width: 896px) {
  #main .why .whyInner {
    width: auto;
    max-width: 50rem;
    padding: 8rem 2.5rem 0;
  }
}
#main .why .whyHead {
  width: 70.3rem;
  margin-left: 73.3rem;
}
@media all and (max-width: 896px) {
  #main .why .whyHead {
    width: auto;
    margin-left: 0;
  }
}
#main .why .whyHead .comHead .en {
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .why .whyHead .comHead .en {
    line-height: 2.7rem;
  }
}
@media all and (max-width: 896px) {
  #main .why .whyHead .comHead .ja {
    font-size: 3.2rem;
    letter-spacing: 0.16rem;
  }
}
#main .why .whyHead .txt {
  margin-top: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .why .whyHead .txt {
    margin-top: 2.2rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .why .whyCard {
  width: 136rem;
  margin: 6.4rem 0 0 7.6rem;
  padding: 5.6rem 7.6rem;
  border-radius: 3.2rem;
  background-color: #fff;
  box-shadow: 1rem 1rem 3rem 0.5rem rgba(0, 0, 0, 0.15);
}
@media all and (max-width: 896px) {
  #main .why .whyCard {
    width: auto;
    margin: 0.8rem 0 0;
    padding: 3.2rem 2rem;
  }
}
#main .why .storyList {
  /* PC：本文を1行約44字（見出し下の本文と同じ幅）に収め、リストをカード中央へ */
  width: 85.3rem;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  #main .why .storyList {
    width: auto;
  }
}
#main .why .storyList > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
@media all and (max-width: 896px) {
  #main .why .storyList > li {
    display: grid;
    grid-template-columns: 5.6rem 1fr;
    align-items: center;
    gap: 1.2rem 1.2rem;
  }
}
#main .why .storyList > li + li {
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .why .storyList > li + li {
    margin-top: 4.8rem;
  }
}
#main .why .storyList .ico {
  flex-shrink: 0;
  width: 12.5rem;
}
@media all and (max-width: 896px) {
  #main .why .storyList .ico {
    width: 5.6rem;
  }
}
#main .why .storyList .ico img {
  display: block;
  width: 100%;
}
#main .why .storyList .box {
  flex: 1;
  min-width: 0;
}
@media all and (max-width: 896px) {
  #main .why .storyList .box {
    display: contents;
  }
}
#main .why .storyList .ttl {
  color: #7090D4;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  line-height: 5.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .why .storyList .ttl {
    justify-self: start;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    line-height: 2.8rem;
    white-space: normal;
  }
}
#main .why .storyList .ttl {
  /* マーカーは行ごとに文字の下だけに引く（2行になっても各行に付く） */
}
#main .why .storyList .ttl span {
  padding: 0 0.8rem;
  background: linear-gradient(transparent 58%, #F7F5C1 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media all and (max-width: 896px) {
  #main .why .storyList .ttl span {
    padding: 0 0.4rem;
    background: linear-gradient(transparent 60%, #F7F5C1 60%);
  }
}
#main .why .storyList .txt {
  margin-top: 1rem;
}
@media all and (max-width: 896px) {
  #main .why .storyList .txt {
    position: relative;
    grid-column: 1/-1;
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 2.8rem;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
#main .why .storyList {
  /* SP：長文は5行まで表示して「続きを読む」で展開 */
}
@media all and (max-width: 896px) {
  #main .why .storyList .clamp .txt {
    max-height: 14rem;
  }
  #main .why .storyList .clamp .txt::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7rem;
    content: "";
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
    transition: opacity 0.4s;
    pointer-events: none;
  }
  #main .why .storyList .clamp.open .txt {
    max-height: var(--open-h, 200rem);
  }
  #main .why .storyList .clamp.open .txt::after {
    opacity: 0;
  }
}
#main .why .storyList .more {
  display: none;
}
@media all and (max-width: 896px) {
  #main .why .storyList .more {
    grid-column: 1/-1;
    justify-self: center;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 2rem;
    color: #7090D4;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    line-height: 2rem;
    border: 1px solid #80ADDB;
    border-radius: 10rem;
    background-color: #fff;
  }
  #main .why .storyList .more::after {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.3rem;
    content: "";
    border-right: 0.15rem solid currentColor;
    border-bottom: 0.15rem solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s, margin 0.3s;
  }
}
@media all and (max-width: 896px) {
  #main .why .storyList .clamp .more {
    display: inline-flex;
  }
}
#main .why .storyList .open .more::after {
  margin-top: 0.3rem;
  transform: rotate(-135deg);
}
#main .why .storyList .arrow {
  position: absolute;
  left: 4.5rem;
  width: 3rem;
  background: linear-gradient(to bottom, #DBE3F4 -10%, #0864D3 135%);
  clip-path: polygon(1rem 0, 2rem 0, 2rem calc(100% - 1.5rem), 3rem calc(100% - 1.5rem), 1.5rem 100%, 0 calc(100% - 1.5rem), 1rem calc(100% - 1.5rem));
}
@media all and (max-width: 896px) {
  #main .why .storyList .arrow {
    top: calc(100% + 0.9rem) !important;
    bottom: auto;
    left: 1.3rem;
    height: 3rem !important;
    background: linear-gradient(to bottom, #DBE3F4 -10%, #0864D3 135%);
  }
}
#main .why .storyList {
  /* PC：アイコン下12pxから次のアイコン上11pxまで（本文量に応じて伸縮） */
}
#main .why .storyList .arrow {
  top: 13.7rem;
  bottom: -2.9rem;
}
#main {
  /*------------------------------------------------------------
  	price
  ------------------------------------------------------------*/
}
#main .price {
  padding: 12rem 0;
}
@media all and (max-width: 896px) {
  #main .price {
    padding: 8rem 0;
  }
}
#main .price .priceBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.4rem 0;
  border: 0.2rem solid #80ADDB;
  border-radius: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .price .priceBox {
    padding: 3rem 1.8rem 3.8rem;
    border-radius: 2.4rem;
  }
}
#main .price .priceBox .comBar {
  width: 109.8rem;
}
@media all and (max-width: 896px) {
  #main .price .priceBox .comBar {
    width: 100%;
  }
}
#main .price .priceRow {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .price .priceRow {
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
}
#main .price .priceRow .now {
  position: relative;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .price .priceRow .now {
    width: 7.5rem;
    height: 7.5rem;
  }
}
#main .price .priceRow .now span {
  position: absolute;
  top: 2.9rem;
  left: 1.7rem;
  color: #80ADDB;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.16rem;
  line-height: 4.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .price .priceRow .now span {
    top: 1.7rem;
    left: 1.3rem;
    font-size: 2.4rem;
    letter-spacing: 0.12rem;
  }
}
#main .price .priceRow .free {
  font-size: 5.6rem;
  font-weight: 700;
  letter-spacing: 0.28rem;
  line-height: 6.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .price .priceRow .free {
    font-size: 3.9rem;
    letter-spacing: 0.195rem;
  }
}
#main .price .txt {
  width: 72.9rem;
  margin-top: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .price .txt {
    width: 100%;
    margin-top: 2.4rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main {
  /*------------------------------------------------------------
  	voice
  ------------------------------------------------------------*/
}
#main .voice {
  padding: 12rem 0;
  overflow: hidden;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .voice {
    padding: 8rem 0;
  }
}
@media all and (max-width: 896px) {
  #main .voice .comHead .en {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
}
@media all and (max-width: 896px) {
  #main .voice .comHead .ja {
    line-height: 6.2rem;
  }
}
#main .voice .voiceSlider {
  width: 100%;
  margin: 4rem auto 0;
}
@media all and (max-width: 896px) {
  #main .voice .voiceSlider {
    margin-top: 2.4rem;
  }
}
#main .voice .voiceSlider .slick-list {
  overflow: visible;
}
#main .voice .voiceSlider .slick-track {
  display: flex;
  align-items: center;
}
#main .voice .voiceSlider .item {
  position: relative;
  width: 37.5rem;
  margin: 0 1.1875rem;
}
@media all and (max-width: 896px) {
  #main .voice .voiceSlider .item {
    width: 29rem;
    margin: 0 0.4rem;
  }
}
#main .voice .voiceSlider .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .voice .voiceSlider .slick-dots {
    margin-top: 2.4rem;
  }
}
#main .voice .voiceSlider .slick-dots li {
  width: 1rem;
  height: 1rem;
}
#main .voice .voiceSlider .slick-dots button {
  display: block;
  width: 1rem;
  height: 1rem;
  font-size: 0;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.4s, transform 0.4s;
}
#main .voice .voiceSlider .slick-dots .slick-active button {
  background-color: #46D9C8;
  transform: scale(1.2);
}
#main .voice {
  /* 中央以外のカードはJSで scale(.9)・画面外側はフェードさせる（位置に連動して滑らかに変化） */
}
#main .voice .card {
  width: 100%;
  padding: 4rem 0;
  color: #7090D4;
  text-align: center;
  border-radius: 3.2rem;
  background-color: #fff;
  box-shadow: 1rem 1rem 3rem 0.5rem rgba(0, 0, 0, 0.15);
  will-change: transform, opacity;
}
@media all and (max-width: 896px) {
  #main .voice .card {
    padding: 3.2rem 0;
  }
}
#main .voice .card .avatar {
  position: relative;
  width: 17.5rem;
  height: 17.5rem;
  margin: 0 auto;
}
#main .voice .card .avatar .circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
#main .voice .card .avatar img {
  position: absolute;
  top: 0.76%;
  left: 0.27%;
  width: 99.22%;
  max-width: none;
}
#main .voice .card.c-a .circle {
  background-color: #F7F5C1;
}
#main .voice .card.c-b .circle {
  background-color: #D9F1ED;
}
#main .voice .card.c-c .circle {
  background-color: #C4D8EC;
}
@media all and (max-width: 896px) {
  #main .voice .card.c-b .circle, #main .voice .card.c-c .circle {
    background-color: #F7F5C1;
  }
}
#main .voice .card .name {
  margin-top: 1.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .voice .card .name {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
}
#main .voice .card .post {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  line-height: 3rem;
}
#main .voice .card .txt {
  margin-top: 2.1rem;
  padding: 0 4rem;
  color: #555;
  font-size: 1.6rem;
  line-height: 3rem;
  text-align: left;
}
@media all and (max-width: 896px) {
  #main .voice .card .txt {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main {
  /*------------------------------------------------------------
  	faq
  ------------------------------------------------------------*/
}
#main .faq {
  padding: 12rem 0;
}
@media all and (max-width: 896px) {
  #main .faq {
    padding: 8rem 0;
  }
}
#main .faq .content {
  display: flex;
  align-items: flex-start;
  gap: 6.4rem;
}
@media all and (max-width: 896px) {
  #main .faq .content {
    display: block;
  }
}
#main .faq .comHead {
  flex-shrink: 0;
}
@media all and (max-width: 896px) {
  #main .faq .comHead {
    text-align: center;
  }
}
@media all and (max-width: 896px) {
  #main .faq .comHead .en {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
}
@media all and (max-width: 896px) {
  #main .faq .comHead .ja {
    line-height: 6.2rem;
  }
}
#main .faq .faqList {
  flex: 1;
  min-width: 0;
}
@media all and (max-width: 896px) {
  #main .faq .faqList {
    margin-top: 2.4rem;
  }
}
#main .faq .faqList .item {
  padding: 2.4rem 2.4rem 2.2rem;
  border-bottom: 0.2rem solid #DBE3F4;
}
@media all and (max-width: 896px) {
  #main .faq .faqList .item {
    padding: 2.4rem 1.6rem 2.2rem;
  }
}
#main .faq .faqList dt button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}
#main .faq .faqList .q {
  flex-shrink: 0;
  padding: 1.6rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 3.4rem;
  border-radius: 3.2rem;
  background-color: #80ADDB;
}
@media all and (max-width: 896px) {
  #main .faq .faqList .q {
    align-self: flex-start;
    padding: 0.9697rem;
    font-size: 2.4242rem;
    letter-spacing: 0.12121rem;
    line-height: 2.0606rem;
    border-radius: 1.9394rem;
  }
}
#main .faq .faqList .qTxt {
  margin-left: 2.3rem;
  color: #555;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  line-height: 3rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .faq .faqList .qTxt {
    flex: 1;
    align-self: flex-start;
    margin-left: 1.6rem;
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
  }
}
#main .faq .faqList .arw {
  position: relative;
  flex-shrink: 0;
  width: 1.98rem;
  height: 1.98rem;
  margin-left: auto;
}
@media all and (max-width: 896px) {
  #main .faq .faqList .arw {
    width: 1.1314rem;
    height: 1.1314rem;
  }
}
#main .faq .faqList .arw::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  border-top: 0.2rem solid #80ADDB;
  border-right: 0.2rem solid #80ADDB;
  border-radius: 0.1rem;
  transform: translate(-50%, -75%) rotate(135deg);
  transition: transform 0.3s;
}
@media all and (max-width: 896px) {
  #main .faq .faqList .arw::before {
    width: 0.9rem;
    height: 0.9rem;
  }
}
#main .faq .faqList .on .arw::before {
  transform: translate(-50%, -25%) rotate(-45deg);
}
#main .faq .faqList dd {
  display: none;
  padding: 2.4rem 0 0 8.8rem;
}
@media all and (max-width: 896px) {
  #main .faq .faqList dd {
    padding: 1.6rem 0 0 5.6rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main {
  /*------------------------------------------------------------
  	reason
  ------------------------------------------------------------*/
}
#main .reason {
  position: relative;
  height: 74.3rem;
  padding-top: 10.6rem;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  #main .reason {
    height: 72.6rem;
    padding: 8rem 1.5rem 0;
  }
}
#main .reason .bg {
  position: absolute;
  inset: 0;
}
#main .reason .bg::before, #main .reason .bg::after {
  position: absolute;
  content: "";
  background: url(../img/index/reason_bg.webp) no-repeat center top/100% auto;
}
#main .reason .bg::before {
  top: 0;
  left: 50%;
  width: max(151.2rem, 100%);
  height: 100%;
  background-size: 100% auto;
  transform: translateX(-50%);
}
@media all and (max-width: 896px) {
  #main .reason .bg::before {
    top: 0.968rem;
    left: calc(50% - 36.994rem);
    width: 75.987rem;
    height: 37.19rem;
    transform: none;
  }
}
#main .reason .bg::after {
  display: none;
}
@media all and (max-width: 896px) {
  #main .reason .bg::after {
    display: block;
    top: 39.225rem;
    left: calc(50% - 44.543rem);
    width: 75.987rem;
    height: 37.19rem;
  }
}
#main .reason::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.5;
  background-image: linear-gradient(90.03deg, #5FAEFF 0%, #35C4C6 66.332%), linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
}
@media all and (max-width: 896px) {
  #main .reason::before {
    background-image: linear-gradient(90deg, #5FAEFF 0%, #35C4C6 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
  }
}
#main .reason .reasonBox {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 121rem;
  margin: 0 auto;
  padding: 5.6rem 0;
  border-radius: 3.2rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .reason .reasonBox {
    width: auto;
    max-width: 50rem;
    padding: 4rem 2.5rem 5.6rem;
  }
}
#main .reason .comBar.big {
  width: 109.8rem;
  opacity: 0.98;
}
@media all and (max-width: 896px) {
  #main .reason .comBar.big {
    width: 100%;
    opacity: 1;
  }
}
#main .reason .comBar.big .ja {
  font-size: 5.6rem;
  letter-spacing: 0.28rem;
  line-height: 6.2rem;
}
@media all and (max-width: 896px) {
  #main .reason .comBar.big .ja {
    font-size: 2.6rem;
    letter-spacing: 0.13rem;
    line-height: 3rem;
  }
}
#main .reason .txtBox {
  width: 93.4rem;
  margin-top: 4rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .reason .txtBox {
    width: 100%;
    margin-top: 2.4rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
    text-align: justify;
  }
}
#main .reason .txtBox p + p {
  margin-top: 1.6rem;
}
#main .reason .reasonBtn {
  margin-top: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .reason .reasonBtn {
    width: 100%;
  }
}

/*------------------------------------------------------------
	MV 読み込み時アニメーション・装飾のゆらぎ
------------------------------------------------------------*/
.js #main .mv .photo {
  animation: mvPhoto 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.js #main .mv .textBox > *,
.js #main .mv .mvBtn,
.js #main .mv .featList li {
  animation: mvUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.js #main .mv .textBox .sub {
  animation-delay: 0.25s;
}
.js #main .mv .textBox .ttl {
  animation-delay: 0.4s;
}
.js #main .mv .textBox .lead {
  animation-delay: 0.55s;
}
.js #main .mv .mvBtn {
  animation-delay: 0.75s;
}
.js #main .mv .featList li:nth-child(1) {
  animation-delay: 0.9s;
}
.js #main .mv .featList li:nth-child(2) {
  animation-delay: 1.05s;
}
.js #main .mv .featList li:nth-child(3) {
  animation-delay: 1.2s;
}
.js #main .mv .wave .w8 {
  animation: waveDrift 14s ease-in-out infinite alternate;
}
.js #main .mv .wave .w9 {
  animation: waveDrift 18s ease-in-out -6s infinite alternate-reverse;
}

#main .mv .dot,
#main .deco {
  animation: floaty 6s ease-in-out infinite alternate;
}
#main .mv .dot:nth-of-type(2n),
#main .deco:nth-of-type(2n) {
  animation-duration: 7.5s;
  animation-delay: -2s;
}
#main .mv .dot:nth-of-type(3n) {
  animation-duration: 5s;
  animation-delay: -3.5s;
}

@keyframes mvPhoto {
  from {
    opacity: 0;
    scale: 1.04;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes mvUp {
  from {
    opacity: 0;
    translate: 0 2.4rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes waveDrift {
  from {
    translate: -1.5% 0;
  }
  to {
    translate: 1.5% 0;
  }
}
@keyframes floaty {
  from {
    translate: 0 -0.6rem;
  }
  to {
    translate: 0 0.6rem;
  }
}
/*------------------------------------------------------------
	参加までの流れ（追加）
------------------------------------------------------------*/
#main .flow {
  padding: 0 0 12rem;
}
@media all and (max-width: 896px) {
  #main .flow {
    padding: 0 0 8rem;
  }
}
#main .flow .flowList {
  display: flex;
  align-items: stretch;
  gap: 5.6rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .flow .flowList {
    flex-direction: column;
    gap: 4rem;
    margin-top: 2.4rem;
  }
}
#main .flow .flowList li {
  position: relative;
  flex: 1;
  padding: 3.2rem 3.2rem 3.6rem;
  border: 0.2rem solid #80ADDB;
  border-radius: 1.6rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .flow .flowList li {
    padding: 2.4rem 2rem 2.8rem;
  }
}
#main .flow .flowList li {
  /* ステップ間の矢印 */
}
#main .flow .flowList li + li::before {
  position: absolute;
  top: 50%;
  left: -3.5rem;
  width: 1.4rem;
  height: 1.4rem;
  content: "";
  border-top: 0.3rem solid #80ADDB;
  border-right: 0.3rem solid #80ADDB;
  border-radius: 0.2rem;
  transform: translateY(-50%) rotate(45deg);
}
@media all and (max-width: 896px) {
  #main .flow .flowList li + li::before {
    top: -2.9rem;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}
#main .flow .num {
  color: #80ADDB;
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 1;
}
@media all and (max-width: 896px) {
  #main .flow .num {
    font-size: 3.2rem;
  }
}
#main .flow .num span {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.14rem;
}
@media all and (max-width: 896px) {
  #main .flow .num span {
    font-size: 1.2rem;
  }
}
#main .flow .ttl {
  margin-top: 1.6rem;
  color: #5E91EE;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.11rem;
  line-height: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .flow .ttl {
    margin-top: 1.2rem;
    font-size: 1.9rem;
    letter-spacing: 0.095rem;
    line-height: 2.8rem;
  }
}
#main .flow .txt {
  margin-top: 1.2rem;
}
@media all and (max-width: 896px) {
  #main .flow .txt {
    margin-top: 0.8rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .flow .txt strong {
  color: #7090D4;
  font-weight: 700;
}
#main .reason .ctaNote {
  margin-top: 1.6rem;
  color: #7090D4;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.4rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .reason .ctaNote {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}

/*------------------------------------------------------------
	主宰者の実績（追加）
------------------------------------------------------------*/
#main .worry {
  padding-top: 12rem;
}
@media all and (max-width: 896px) {
  #main .worry {
    padding-top: 8rem;
  }
}

/*------------------------------------------------------------
	改善（旧B案）
	A. CTAのコントラスト B. フチ文字見出し C. 見出し中央揃え D. 共有されることのカード化
	E. カード統一 F. 背景の交互 G. PCヘッダーの主要リンク H. なぜの引用 I. 共有されることの写真
------------------------------------------------------------*/
/* ---------- A. CTA ---------- */
.comBtn a,
#gHeader .hBtn a {
  background: linear-gradient(to right, #4F7FD9, #2FBFB0);
}

.comBtn a,
#main .mv .mvBtn a {
  box-shadow: 0 0.5rem 0 #36589F;
}

@media all and (max-width: 896px) {
  #main .mv .mvBtn a {
    box-shadow: none;
  }
}

@media all and (max-width: 896px) {
  .fixCta .comBtn a {
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
  }
}

/* ---------- B. フチ文字見出し ---------- */
.comHead .stroke,
#main .price .free .stroke {
  display: inline-block;
  -webkit-text-stroke: 0.6rem #5B7BC9;
  filter: drop-shadow(0 0.3rem 0.6rem rgba(31, 59, 122, 0.22));
}
@media all and (max-width: 896px) {
  .comHead .stroke,
  #main .price .free .stroke {
    -webkit-text-stroke-width: 0.45rem;
  }
}

/* ---------- G. PCヘッダーの主要リンク ---------- */
#gHeader .hMenu {
  position: absolute;
  top: 3.2rem;
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 6rem;
  margin-left: -31.6rem;
}
#gHeader .hMenu ul {
  display: flex;
  gap: 3.2rem;
}
#gHeader .hMenu a {
  position: relative;
  color: #1F3B7A;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 3rem;
  white-space: nowrap;
}
#gHeader .hMenu a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 0.2rem;
  content: "";
  border-radius: 0.1rem;
  background-color: #5E91EE;
  transform: scaleX(0);
  transition: transform 0.3s;
}
@media (hover: hover) {
  #gHeader .hMenu a:hover::after {
    transform: scaleX(1);
  }
}

#main {
  /* ---------- D・E・I. 共有されること ---------- */
}
#main .shared {
  /* F. 方眼を薄く */
  background-image: linear-gradient(90deg, #F4F7FC 1px, transparent 1px, transparent calc(100% - 1px), #F8FAFD calc(100% - 1px)), linear-gradient(180deg, #F4F7FC 1px, transparent 1px, transparent calc(100% - 1px), #F8FAFD calc(100% - 1px));
}
#main .sharedGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 2.4rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .sharedGrid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
}
#main .sharedGrid > li {
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2.4rem 2rem;
  border-radius: 2.4rem;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .sharedGrid > li {
    padding: 1.6rem 1.6rem 1.4rem;
    border-radius: 1.6rem;
  }
}
#main .sharedGrid .sgHead {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .sgHead {
    gap: 1.2rem;
  }
}
#main .sharedGrid .img {
  flex-shrink: 0;
  width: 16rem;
  aspect-ratio: 10/7;
  overflow: hidden;
  border-radius: 1.2rem;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .img {
    width: 10rem;
    border-radius: 0.8rem;
  }
}
#main .sharedGrid .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .sharedGrid .num {
  display: block;
  color: #80ADDB;
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  line-height: 1;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .num {
    font-size: 1.8rem;
  }
}
#main .sharedGrid .ttl {
  margin-top: 0.8rem;
  color: #5E91EE;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.11rem;
  line-height: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .ttl {
    margin-top: 0.4rem;
    font-size: 1.7rem;
    letter-spacing: 0.06rem;
    line-height: 2.5rem;
  }
}
#main .sharedGrid .point {
  margin-top: 1.6rem;
  padding: 1.2rem 1.6rem;
  color: #1F3B7A;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.6rem;
  border-radius: 1.2rem;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .point {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    line-height: 2.3rem;
  }
}
#main .sharedGrid .detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#main .sharedGrid .detail .in {
  overflow: hidden;
}
@media all and (max-width: 896px) {
  #main .sharedGrid .detail .in {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
#main .sharedGrid .detail p {
  margin-top: 1.2rem;
}
#main .sharedGrid .open .detail {
  grid-template-rows: 1fr;
}
#main .sharedGrid .subList div {
  margin-top: 1.2rem;
}
#main .sharedGrid .subList dt {
  display: inline-block;
  padding: 0.2rem 1.6rem;
  color: #80ADDB;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.6rem;
  border-radius: 10rem;
  background-color: #F7F5C1;
}
#main .sharedGrid .subList dd {
  margin-top: 0.4rem;
}
#main .sharedGrid .detailBtn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding: 0.6rem 2rem;
  color: #7090D4;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 2rem;
  border: 1px solid #80ADDB;
  border-radius: 10rem;
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s;
}
#main .sharedGrid .detailBtn::after {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.3rem;
  content: "";
  border-right: 0.15rem solid currentColor;
  border-bottom: 0.15rem solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s, margin 0.3s;
}
@media (hover: hover) {
  #main .sharedGrid .detailBtn:hover {
    color: #fff;
    background-color: #80ADDB;
  }
}
#main .sharedGrid .open .detailBtn::after {
  margin-top: 0.3rem;
  transform: rotate(-135deg);
}
#main {
  /* ---------- C. なぜ：見出し中央＋写真と導入文の横並び ---------- */
}
#main .why .photo {
  display: none;
}
#main .why .whyInner {
  padding-top: 12rem;
}
@media all and (max-width: 896px) {
  #main .why .whyInner {
    padding-top: 8rem;
  }
}
#main .why .whyHead {
  width: 121rem;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  #main .why .whyHead {
    width: auto;
  }
}
#main .why .whyHead .comHead .en {
  line-height: 3.4rem;
}
#main .why .whyIntro {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .why .whyIntro {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2.4rem;
  }
}
#main .why .whyIntro .img {
  flex-shrink: 0;
  width: 52rem;
  overflow: hidden;
  border-radius: 2.4rem;
  box-shadow: 0 1rem 3rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .why .whyIntro .img {
    width: 100%;
    border-radius: 1.6rem;
  }
}
#main .why .whyIntro .img img {
  display: block;
  width: 100%;
  aspect-ratio: 900/520;
  object-fit: cover;
  -webkit-mask-image: none;
  mask-image: none;
}
#main .why .whyIntro .txt {
  flex: 1;
  margin-top: 0;
}
#main {
  /* ---------- H. 引用 ---------- */
}
#main .why .storyList .quote {
  position: relative;
  margin-top: 1.2rem;
  padding-left: 2rem;
  color: #5E91EE;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  line-height: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .why .storyList .quote {
    grid-column: 1/-1;
    margin-top: 0;
    padding-left: 1.6rem;
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}
#main .why .storyList .quote::before {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: 0.4rem;
  content: "";
  border-radius: 0.2rem;
  background-color: #80ADDB;
}
@media all and (min-width: 897px) {
  #main .why .storyList .txt {
    margin-top: 1.2rem;
  }
}
#main {
  /* ---------- E・F. 費用：枠線→影、背景は白 ---------- */
}
#main .price .priceBox {
  padding: 5.6rem 0;
  border: 0;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .price .priceBox {
    padding: 3.2rem 2rem 4rem;
  }
}
#main {
  /* ---------- E・F. 参加までの流れ：薄色背景＋影カード ---------- */
}
#main .flow {
  padding: 12rem 0;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .flow {
    padding: 8rem 0;
  }
}
#main .flow .flowList li {
  padding: 3.4rem 3.4rem 3.8rem;
  border: 0;
  box-shadow: 0 1rem 3rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .flow .flowList li {
    padding: 2.6rem 2.2rem 3rem;
  }
}
#main {
  /* ---------- F. 参加者の声：白背景 ---------- */
}
#main .voice {
  background-color: #fff;
}
#main .voice .voiceSlider .slick-dots button {
  background-color: #DBE3F4;
}
#main .voice .voiceSlider .slick-dots .slick-active button {
  background-color: #46D9C8;
}
#main {
  /* ---------- C・F. FAQ：見出し中央＋薄色背景 ---------- */
}
#main .faq {
  background-color: #EFF5FD;
}
#main .faq .content {
  display: block;
}
#main .faq .faqList {
  max-width: 90rem;
  margin: 4rem auto 0;
  padding: 0 3.2rem;
  border-radius: 2.4rem;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .faq .faqList {
    margin-top: 2.4rem;
    padding: 0;
    border-radius: 1.6rem;
  }
}
#main .faq .faqList .item:last-child {
  border-bottom: 0;
}

/*------------------------------------------------------------
	なぜ：矢印が上から下へ伸びて次の話につながる（各話が画面に入ったら1回）
------------------------------------------------------------*/
.js #main .why .storyList .arrow {
  -webkit-mask: linear-gradient(#000, #000) center top/100% 0% no-repeat;
  mask: linear-gradient(#000, #000) center top/100% 0% no-repeat;
  transition: -webkit-mask-size 1s cubic-bezier(0.65, 0, 0.35, 1) 0.6s, mask-size 1s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}
.js #main .why .storyList .on .arrow {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .js #main .why .storyList .arrow {
    -webkit-mask: none;
    mask: none;
    transition: none;
  }
}
/*------------------------------------------------------------
	本文の読みやすさ（旧B案）
	1. 長文の文字色を少し濃く・字間を少し広く
	2. なぜ：段落分け＋要点を太字（紺）で強調、PCは行間を広げる
------------------------------------------------------------*/
#main .organizer .profile .intro,
#main .organizer .profile .career .txt,
#main .shared .sharedGrid .detail .in,
#main .why .whyIntro .txt,
#main .why .storyList .txt,
#main .price > .content .txt,
#main .price .term dd,
#main .flow .flowList .txt,
#main .faq .faqList dd,
#main .reason .txtBox {
  color: #3A4458;
  letter-spacing: 0.04em;
}
#main .why .whyIntro .txt p + p,
#main .why .storyList .txt p + p {
  margin-top: 1.2rem;
}
@media all and (max-width: 896px) {
  #main .why .whyIntro .txt p + p,
  #main .why .storyList .txt p + p {
    margin-top: 1rem;
  }
}
@media all and (min-width: 897px) {
  #main .why .whyIntro .txt,
  #main .why .storyList .txt {
    line-height: 3.2rem;
  }
}
#main .why .hl {
  color: #1F3B7A;
  font-weight: 700;
}

/*------------------------------------------------------------
	第3弾の改善
	1. お悩みセクション
	3. 共有されること：MVの3つの特長との対応 4. 見出し短縮（HTML）
	5. SPの見出しを小さく 6. 途中の参加ボタン
	・なぜ：導入文と枠の間隔 ・本文の強調をマーカーで目立たせる
------------------------------------------------------------*/
#main {
  /* 1. お悩み */
}
#main .worry {
  position: relative;
  padding-bottom: 12rem;
  background-color: #fff;
}
@media all and (max-width: 896px) {
  #main .worry {
    padding-bottom: 8rem;
  }
}
#main .worry .worryList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 2.4rem;
  max-width: 100rem;
  margin: 4rem auto 0;
}
@media all and (max-width: 896px) {
  #main .worry .worryList {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.4rem;
  }
}
#main .worry .worryList li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 8.8rem;
  padding: 1.6rem 2.4rem 1.6rem 6.4rem;
  color: #3A4458;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.8rem;
  border-radius: 1.6rem;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .worry .worryList li {
    min-height: 0;
    padding: 1.4rem 1.6rem 1.4rem 5rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}
#main .worry .worryList li {
  /* チェックアイコン */
}
#main .worry .worryList li::before {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 2.8rem;
  height: 2.8rem;
  content: "";
  border-radius: 50%;
  background-color: #5E91EE;
  transform: translateY(-50%);
}
@media all and (max-width: 896px) {
  #main .worry .worryList li::before {
    left: 1.4rem;
    width: 2.4rem;
    height: 2.4rem;
  }
}
#main .worry .worryList li::after {
  position: absolute;
  top: 50%;
  left: 2.95rem;
  width: 0.9rem;
  height: 1.5rem;
  content: "";
  border-right: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  transform: translateY(-62%) rotate(45deg);
}
@media all and (max-width: 896px) {
  #main .worry .worryList li::after {
    left: 2.25rem;
    width: 0.8rem;
    height: 1.3rem;
  }
}
#main .worry .worryLead {
  position: relative;
  margin-top: 6.4rem;
  color: #1F3B7A;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 4rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .worry .worryLead {
    margin-top: 5.6rem;
    font-size: 1.8rem;
    letter-spacing: 0.05rem;
    line-height: 3rem;
  }
}
#main .worry .worryLead {
  /* 上向きの吹き出し矢印で「悩み → 解決」へつなぐ */
}
#main .worry .worryLead::before {
  position: absolute;
  top: -4.4rem;
  left: 50%;
  width: 2.4rem;
  height: 2.4rem;
  content: "";
  border-right: 0.4rem solid #80ADDB;
  border-bottom: 0.4rem solid #80ADDB;
  transform: translateX(-50%) rotate(45deg);
}
@media all and (max-width: 896px) {
  #main .worry .worryLead::before {
    top: -4rem;
    width: 2rem;
    height: 2rem;
  }
}
#main .worry .worryLead strong {
  color: #5E91EE;
  background: linear-gradient(transparent 62%, #FAF0A6 62%);
}
#main {
  /* 3. 共有されること：導入文＋特長タグ */
}
#main .shared .sharedLead {
  margin-top: 2.4rem;
  color: #3A4458;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 3.2rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .shared .sharedLead {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
  }
}
#main .shared .sharedLead b {
  color: #1F3B7A;
  font-weight: 700;
  background: linear-gradient(transparent 62%, #FAF0A6 62%);
}
#main .shared .sharedGrid .num {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#main .shared .sharedGrid .benefit {
  padding: 0.3rem 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 1.6rem;
  border-radius: 10rem;
}
@media all and (max-width: 896px) {
  #main .shared .sharedGrid .benefit {
    padding: 0.2rem 0.8rem;
    font-size: 1.05rem;
  }
}
#main .shared .sharedGrid .benefit {
  /* MVの特長カードの円と同じ色で対応を示す */
}
#main .shared .sharedGrid .benefit.b01 {
  color: #2E7C80;
  background-color: #C4EBEC;
}
#main .shared .sharedGrid .benefit.b02 {
  color: #3F64B5;
  background-color: #CDDFF8;
}
#main .shared .sharedGrid .benefit.b03 {
  color: #2E7C80;
  background-color: #DDF3EF;
}
#main {
  /* 5. SPの見出しを小さく（40px → 32px） */
}
@media all and (max-width: 896px) {
  #main .comHead .ja {
    font-size: 3.2rem;
    letter-spacing: 0.16rem;
    line-height: 4.4rem;
  }
}
@media all and (max-width: 896px) {
  #main .voice .comHead .ja,
  #main .faq .comHead .ja {
    line-height: 4.4rem;
  }
}
#main {
  /* 6. 途中の参加ボタン */
}
#main .midCta {
  margin-top: 4.8rem;
}
@media all and (max-width: 896px) {
  #main .midCta {
    margin-top: 3.2rem;
  }
}
#main .midCta a {
  min-width: 48rem;
}
@media all and (max-width: 896px) {
  #main .midCta a {
    min-width: 0;
    justify-content: center;
    gap: 2rem;
  }
}
#main {
  /* なぜ：導入文の最後と下の枠の間隔（SP） */
}
@media all and (max-width: 896px) {
  #main .why .whyCard {
    margin-top: 4rem;
  }
}
#main {
  /* 本文の強調：太字＋マーカーでひと目でわかるように */
}
#main .why .hl {
  color: #1F3B7A;
  font-weight: 700;
  background: linear-gradient(transparent 60%, #FAF0A6 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/*------------------------------------------------------------
	プロフィール：経歴をタグ、著書をカードで見せる
------------------------------------------------------------*/
#main .organizer .profile .sTtl {
  position: relative;
  padding-left: 1.6rem;
  color: #1F3B7A;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  line-height: 3rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .sTtl {
    padding-left: 1.4rem;
    font-size: 1.8rem;
  }
}
#main .organizer .profile .sTtl::before {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: 0.4rem;
  content: "";
  border-radius: 0.2rem;
  background-color: #80ADDB;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .books .sTtl {
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
  }
}
#main .organizer .profile .career .txt {
  margin-top: 1.6rem;
  color: #3A4458;
}
#main .organizer .profile .career .txt ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
  white-space: normal;
}
#main .organizer .profile .career .txt li {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-left: 0;
  padding: 0.6rem 1.6rem 0.6rem 1.2rem;
  color: #1F3B7A;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.2rem;
  list-style: none;
  border-radius: 1.2rem;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career .txt li {
    margin-left: 0;
    padding: 0.5rem 1.4rem 0.5rem 1rem;
    font-size: 1.3rem;
    line-height: 2rem;
  }
}
#main .organizer .profile .career .txt li::before {
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.7rem;
  content: "";
  border-radius: 50%;
  background-color: #5E91EE;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .career .txt li::before {
    margin-top: 0.6rem;
  }
}
#main .organizer .profile .books {
  margin-top: 3.2rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .books {
    margin-top: 2.8rem;
  }
}
#main .organizer .profile .bookList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-top: 1.6rem;
}
@media all and (max-width: 896px) {
  #main .organizer .profile .bookList {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
#main .organizer .profile .bookList li {
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem;
  border-radius: 1.6rem;
  background-color: #fff;
  box-shadow: 0 0.6rem 2rem rgba(31, 59, 122, 0.12);
}
@media all and (max-width: 896px) {
  #main .organizer .profile .bookList li {
    padding: 1.4rem;
  }
}
#main .organizer .profile .bookList .img {
  flex-shrink: 0;
  width: 9rem;
  height: 12.8rem;
  overflow: hidden;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
}
@media all and (max-width: 896px) {
  #main .organizer .profile .bookList .img {
    width: 8rem;
    height: 11.4rem;
  }
}
#main .organizer .profile .bookList .img.noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem dashed #80ADDB;
  background-color: #EFF5FD;
  box-shadow: none;
}
#main .organizer .profile .bookList .img.noimg span {
  color: #80ADDB;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1.8rem;
  text-align: center;
}
#main .organizer .profile .bookList .info {
  min-width: 0;
}
#main .organizer .profile .bookList .tag {
  display: inline-block;
  padding: 0.2rem 1rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  line-height: 1.8rem;
  border-radius: 10rem;
  background-color: #5E91EE;
}
#main .organizer .profile .bookList .soon .tag {
  color: #5E91EE;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #5E91EE;
}
#main .organizer .profile .bookList .bTtl {
  margin-top: 0.8rem;
  color: #1F3B7A;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.6rem;
  text-align: left;
  white-space: normal;
}
#main .organizer .profile .bookList .year {
  margin-top: 0.4rem;
  color: #7A8499;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2rem;
  text-align: left;
  white-space: normal;
}

/*------------------------------------------------------------
	費用：月額11,000円（税込）
------------------------------------------------------------*/
#main .price .priceMain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 4rem;
}
@media all and (max-width: 896px) {
  #main .price .priceMain {
    gap: 0.8rem;
    margin-top: 2.8rem;
  }
}
#main .price .unit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  color: #80ADDB;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  border-radius: 50%;
  background-color: #F7F5C1;
}
@media all and (max-width: 896px) {
  #main .price .unit {
    width: 6rem;
    height: 6rem;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
  }
}
#main .price .amount {
  color: #1F3B7A;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#main .price .amount b {
  font-family: "Montserrat", sans-serif;
  font-size: 8.8rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
}
@media all and (max-width: 896px) {
  #main .price .amount b {
    font-size: 4.6rem;
    letter-spacing: 0.05rem;
  }
}
#main .price .amount .yen {
  margin-left: 0.4rem;
  font-size: 3.6rem;
}
@media all and (max-width: 896px) {
  #main .price .amount .yen {
    margin-left: 0.2rem;
    font-size: 2.2rem;
  }
}
#main .price .amount .tax {
  margin-left: 0.4rem;
  color: #3A4458;
  font-size: 1.8rem;
  font-weight: 500;
}
@media all and (max-width: 896px) {
  #main .price .amount .tax {
    margin-left: 0;
    font-size: 1.2rem;
  }
}
#main .price .priceInclude {
  width: 72.9rem;
  margin-top: 4rem;
  padding: 2.4rem 3.2rem 2.8rem;
  border-radius: 1.6rem;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .price .priceInclude {
    width: 100%;
    margin-top: 2.8rem;
    padding: 2rem 1.6rem 2.2rem;
  }
}
#main .price .priceInclude .incTtl {
  color: #1F3B7A;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.6rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .price .priceInclude .incTtl {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}
#main .price .priceInclude ul {
  margin-top: 1.6rem;
}
@media all and (max-width: 896px) {
  #main .price .priceInclude ul {
    margin-top: 1.2rem;
  }
}
#main .price .priceInclude li {
  position: relative;
  padding-left: 3.6rem;
  color: #3A4458;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.8rem;
}
@media all and (max-width: 896px) {
  #main .price .priceInclude li {
    padding-left: 3rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
#main .price .priceInclude li + li {
  margin-top: 1rem;
}
#main .price .priceInclude li {
  /* チェックアイコン（お悩みセクションと同じ形） */
}
#main .price .priceInclude li::before {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 2.4rem;
  height: 2.4rem;
  content: "";
  border-radius: 50%;
  background-color: #5E91EE;
}
@media all and (max-width: 896px) {
  #main .price .priceInclude li::before {
    top: 0.2rem;
    width: 2rem;
    height: 2rem;
  }
}
#main .price .priceInclude li::after {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  width: 0.7rem;
  height: 1.2rem;
  content: "";
  border-right: 0.25rem solid #fff;
  border-bottom: 0.25rem solid #fff;
  transform: rotate(45deg);
}
@media all and (max-width: 896px) {
  #main .price .priceInclude li::after {
    top: 0.6rem;
    left: 0.7rem;
    width: 0.6rem;
    height: 1rem;
  }
}
#main .price .priceBox > .txt {
  margin-top: 2rem;
  color: #7A8499;
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .price .priceBox > .txt {
    font-size: 1.2rem;
    line-height: 2rem;
    text-align: left;
  }
}

/*------------------------------------------------------------
	主宰者プロフィール：MV下端に重ねる・実績（3項目）
------------------------------------------------------------*/
#main .organizer .profileBox {
  margin-top: -5.6rem;
  box-shadow: 0 1.6rem 4rem rgba(31, 59, 122, 0.16);
}
@media all and (max-width: 896px) {
  #main .organizer .profileBox {
    margin-top: -3.2rem;
  }
}
#main .organizer .achieveList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.4rem;
  padding: 1.6rem 0;
  border-radius: 1.6rem;
  background-color: #EFF5FD;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList {
    margin-top: 1.6rem;
    padding: 1.2rem 0;
  }
}
#main .organizer .achieveList li {
  padding: 0 1.2rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList li {
    padding: 0 0.4rem;
  }
}
#main .organizer .achieveList li + li {
  border-left: 1px solid #DBE3F4;
}
#main .organizer .achieveList .label {
  color: #7090D4;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.2rem;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList .label {
    font-size: 1.15rem;
    line-height: 1.8rem;
  }
}
#main .organizer .achieveList .num {
  color: #5E91EE;
  font-size: 2rem;
  font-weight: 700;
  line-height: 5.2rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList .num {
    font-size: 1.4rem;
    line-height: 3.8rem;
  }
}
#main .organizer .achieveList .num b {
  display: inline-block;
  margin-right: 0.3rem;
  font-family: "Montserrat", sans-serif;
  font-size: 4.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1rem;
  vertical-align: bottom;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList .num b {
    margin-right: 0.1rem;
    font-size: 3.2rem;
    letter-spacing: 0;
  }
}
#main .organizer .achieveList .note {
  color: #3A4458;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
@media all and (max-width: 896px) {
  #main .organizer .achieveList .note {
    font-size: 1.05rem;
    line-height: 1.5rem;
  }
}