.page-forum {
  background: #fff
}
.page-konnatoki-wrapper {
  background: #fff;
  margin-top: 100px;
  overflow: hidden;
  padding-bottom: 0
}
.page-konnatoki-wrapper .c-topicpath {
  background: #fff;
  border-bottom: none;
  margin-bottom: 0
}
.konnatoki-container {
  background-image: url(../../assets/images/konnatoki/bg_pc.webp);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #79695e;
  font-family: Kosugi Maru, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  padding: 50px 0
}
.konnatoki-container .konnatoki-page-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  aspect-ratio: 1442/400;
  background: url(../../assets/images/konnatoki/page_bg.webp) no-repeat;
  background-position: top;
  background-size: 100%;
  background-size: contain;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 1442px;
  min-height: 0;
  text-align: center;
  width: 100%
}
.konnatoki-container .konnatoki-page-title h1 {
  margin: 0 auto;
  max-width: 50%;
  width: 100%
}
.konnatoki-container .konnatoki-page-title h1 img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%
}
.konnatoki-container .intro-lead {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Zen Maru Gothic, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  margin: 30px auto 40px;
  padding: 0 15px;
  text-align: center
}
.konnatoki-card-list {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px
}
.konnatoki-card-list .card {
  margin-bottom: 100px
}
.konnatoki-card-list .card:last-child {
  margin-bottom: 0
}
.konnatoki-card-list .card .konnatoki-content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center
}
.konnatoki-card-list .card .konnatoki-content.is-text-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 100px
}
.konnatoki-card-list .card .konnatoki-content.is-text-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  gap: 50px
}
.konnatoki-card-list .card .konnatoki-content .konnatoki-txt {
  color: #79695e;
  font-size: 1.6rem;
  padding: 10px 0 20px
}
.konnatoki-card-list .card .konnatoki-content .konnatoki-txt img {
  width: 100%
}
.konnatoki-card-list .card .konnatoki-content .konnatoki-img {
  max-width: 580px
}
.konnatoki-title {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin: 0 auto;
  padding: 0;
  text-align: center
}
.konnatoki-title img {
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%
}
:is(.card-01, .page01) .konnatoki-title {
  width: 328px
}
:is(.card-02, .page02) .konnatoki-title {
  width: 460px
}
:is(.card-03, .page03) .konnatoki-title {
  width: 296px
}
:is(.card-04, .page04) .konnatoki-title {
  width: 460px
}
:is(.card-05, .page05) .konnatoki-title {
  width: 300px
}
:is(.card-06, .page06) .konnatoki-title {
  width: 320px
}
:is(.card-07, .page07) .konnatoki-title {
  width: 328px
}
:is(.card-08, .page08) .konnatoki-title {
  width: 400px
}
:is(.card-09, .page09) .konnatoki-title {
  width: 416px
}
:is(.card-10, .page10) .konnatoki-title {
  width: 320px
}
:is(.card-11, .page11) .konnatoki-title {
  width: 280px
}
.modal-card {
  background-color: initial;
  border: 1px solid #79695e;
  border-radius: 50px;
  color: #231815;
  display: inline-block;
  font-family: Noto Sans JP, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 1.4rem;
  font-weight: 700;
  padding: 8px 40px 8px 25px;
  position: relative
}
.modal-card:hover {
  opacity: .7
}
.modal-card:after, .modal-card:before {
  aspect-ratio: 1/1;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
  width: 1.3em
}
.modal-card:before {
  background: #fff;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  right: 8px
}
.modal-card:after {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #0000;
  content: "chevron_right";
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: Material Symbols Outlined;
  font-size: 1em;
  font-variation-settings: "FILL"0, "wght"600, "GRAD"0, "opsz"48;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none;
  right: 7px
}
.card-01 .modal-card {
  background-color: #9cd5db
}
.card-01 .modal-card:after {
  color: #9cd5db
}
.card-02 .modal-card {
  background-color: #c394c1
}
.card-02 .modal-card:after {
  color: #c394c1
}
.card-03 .modal-card {
  background-color: #9bcf9c
}
.card-03 .modal-card:after {
  color: #9bcf9c
}
.card-04 .modal-card {
  background-color: #f6af72
}
.card-04 .modal-card:after {
  color: #f6af72
}
.card-05 .modal-card {
  background-color: #6faf7a
}
.card-05 .modal-card:after {
  color: #6faf7a
}
.card-06 .modal-card {
  background-color: #8ab2be;
  background-color: #9aabd0
}
.card-06 .modal-card:after {
  color: #9aabd0
}
.card-07 .modal-card {
  background-color: #d4bd84
}
.card-07 .modal-card:after {
  color: #d4bd84
}
.card-08 .modal-card {
  background-color: #f6af72
}
.card-08 .modal-card:after {
  color: #f6af72
}
.card-09 .modal-card {
  background-color: #ebaea8
}
.card-09 .modal-card:after {
  color: #ebaea8
}
.card-10 .modal-card {
  background-color: #8ab2be
}
.card-10 .modal-card:after {
  color: #8ab2be
}
.card-11 .modal-card {
  background-color: #adb687
}
.card-11 .modal-card:after {
  color: #adb687
}
.modal-wrapper {
  display: none
}
.modaal-inline .modaal-outer-wrapper .modaal-inner-wrapper .modaal-container {
  background: #0000;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 960px
}
.card-modal-content {
  background: #fff;
  border-radius: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #79695e;
  font-family: Kosugi Maru, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  overflow: hidden;
  padding: 40px 80px;
  position: relative
}
.card-modal-content.page01 .konnatoki-title {
  width: 328px
}
.card-modal-content.page01 .body p {
  background-color: #ebf7f8;
  -webkit-box-shadow: 0 0 10px 9px #ebf7f8;
  box-shadow: 0 0 10px 9px #ebf7f8
}
.card-modal-content.page02 .konnatoki-title {
  width: 460px
}
.card-modal-content.page02 .body p {
  background-color: #f3e9f3;
  -webkit-box-shadow: 0 0 10px 9px #f3e9f3;
  box-shadow: 0 0 10px 9px #f3e9f3
}
.card-modal-content.page03 .konnatoki-title {
  width: 560px
}
.card-modal-content.page03 .body p {
  background-color: #ebf5eb;
  -webkit-box-shadow: 0 0 10px 9px #ebf5eb;
  box-shadow: 0 0 10px 9px #ebf5eb
}
.card-modal-content.page04 .konnatoki-title {
  width: 460px
}
.card-modal-content.page04 .body p {
  background-color: #fdefe3;
  -webkit-box-shadow: 0 0 10px 9px #fdefe3;
  box-shadow: 0 0 10px 9px #fdefe3
}
.card-modal-content.page05 .konnatoki-title {
  width: 300px
}
.card-modal-content.page05 .body p {
  background-color: #e2efe4;
  -webkit-box-shadow: 0 0 10px 9px #e2efe4;
  box-shadow: 0 0 10px 9px #e2efe4
}
.card-modal-content.page06 .konnatoki-title {
  width: 576px
}
.card-modal-content.page06 .body p {
  background-color: #ebeef6;
  -webkit-box-shadow: 0 0 10px 9px #ebeef6;
  box-shadow: 0 0 10px 9px #ebeef6
}
.card-modal-content.page07 .konnatoki-title {
  width: 624px
}
.card-modal-content.page07 .body p {
  background-color: #f6f2e6;
  -webkit-box-shadow: 0 0 10px 9px #f6f2e6;
  box-shadow: 0 0 10px 9px #f6f2e6
}
.card-modal-content.page08 .konnatoki-title {
  width: 400px
}
.card-modal-content.page08 .body p {
  background-color: #fdefe3;
  -webkit-box-shadow: 0 0 10px 9px #fdefe3;
  box-shadow: 0 0 10px 9px #fdefe3
}
.card-modal-content.page09 .konnatoki-title {
  width: 320px
}
.card-modal-content.page09 .body p {
  background-color: #fbefee;
  -webkit-box-shadow: 0 0 10px 9px #fbefee;
  box-shadow: 0 0 10px 9px #fbefee
}
.card-modal-content.page10 .konnatoki-title {
  width: 280px
}
.card-modal-content.page10 .body p {
  background-color: #e8f0f2;
  -webkit-box-shadow: 0 0 10px 9px #e8f0f2;
  box-shadow: 0 0 10px 9px #e8f0f2
}
.card-modal-content.page11 .konnatoki-title {
  width: 210px
}
.card-modal-content.page11 .body p {
  background-color: #eff0e7;
  -webkit-box-shadow: 0 0 10px 9px #eff0e7;
  box-shadow: 0 0 10px 9px #eff0e7
}
.card-modal-content .ph {
  text-align: center
}
.card-modal-content .ph .konnatoki-title {
  margin: 0 auto 20px
}
.card-modal-content .body {
  margin-top: 40px
}
.card-modal-content .body p {
  background-color: initial;
  border-radius: 30px;
  -webkit-box-shadow: 0 0 10px 9px #fff;
  box-shadow: 0 0 10px 9px #fff;
  color: #79695e;
  font-size: clamp(1.6rem, 1.4636363636rem + .3636363636vw, 1.9rem);
  overflow: hidden;
  padding: 30px 60px;
  position: relative;
  text-align: justify
}
.card-modal-content .body p .textlink {
  border-bottom: 1px solid #1a50b7;
  color: #1a50b7
}
.card-modal-content .link-btn {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 50px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  justify-self: center;
  margin-top: 40px
}
.card-modal-content .link-btn div {
  margin: 0;
  text-align: center
}
.card-modal-content .link-btn p {
  background-color: #6eafb2;
  border-radius: 15px 15px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding: 2px 26px;
  text-align: center
}
.card-modal-content .link-btn p img {
  vertical-align: middle;
  width: 110px
}
.card-modal-content .link-btn a {
  background: #fff;
  border-radius: 50px;
  -webkit-box-shadow: 0 9px 10px -10px #000c;
  box-shadow: 0 9px 10px -10px #000c;
  color: #231815;
  display: block;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 auto;
  max-width: 290px;
  padding: 15px 30px;
  position: relative;
  text-align: center;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  width: 290px
}
.card-modal-content .link-btn a:hover {
  cursor: pointer;
  opacity: .8
}
.card-modal-content .link-btn .theme01 p {
  background-color: #f38942
}
.card-modal-content .link-btn .theme01 a {
  background: #f6af72;
  border: 2px solid #f38942
}
.card-modal-content .link-btn .theme02 p {
  background-color: #b29a64
}
.card-modal-content .link-btn .theme02 a {
  background: #d4bd84;
  border: 2px solid #b29a64
}
.card-modal-content .link-btn .theme03 p {
  background-color: #6eafb2
}
.card-modal-content .link-btn .theme03 a {
  background: #9cd5db;
  border: 2px solid #6eafb2
}
.card-modal-content .link-btn .theme04 p {
  background-color: #608db0
}
.card-modal-content .link-btn .theme04 a {
  background: #8ab2be;
  border: 2px solid #608db0
}
.card-modal-content .link-btn .theme05 p {
  background-color: #7bb76e
}
.card-modal-content .link-btn .theme05 a {
  background: #9bcf9c;
  border: 2px solid #7bb76e
}
.card-modal-content .link-btn .theme06 p {
  background-color: #629c67
}
.card-modal-content .link-btn .theme06 a {
  background: #6faf7a;
  border: 2px solid #629c67
}
.card-modal-content .link-btn .theme07 p {
  background-color: #7b92c3
}
.card-modal-content .link-btn .theme07 a {
  background: #9aabd0;
  border: 2px solid #7b92c3
}
.card-modal-content .link-btn .theme08 p {
  background-color: #ae77a6
}
.card-modal-content .link-btn .theme08 a {
  background: #c394c1;
  border: 2px solid #ae77a6
}
.card-modal-content .link-btn .theme09 p {
  background-color: #e88c86
}
.card-modal-content .link-btn .theme09 a {
  background: #ebaea8;
  border: 2px solid #e88c86
}
.card-modal-content .link-btn .theme10 p {
  background-color: #9aa272
}
.card-modal-content .link-btn .theme10 a, .card-modal-content .link-btn .theme11 a {
  background: #adb687;
  border: 2px solid #9aa272
}
.card-modal-content .link-btn .theme11 a {
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.8rem;
  max-width: 360px;
  min-height: 60px;
  padding: 15px 30px 15px 15px;
  width: 360px
}
.card-modal-content .link-btn .theme11 a:after, .card-modal-content .link-btn .theme11 a:before {
  aspect-ratio: 1/1;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
  width: 20px
}
.card-modal-content .link-btn .theme11 a:before {
  background: #fff;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  right: 8px
}
.card-modal-content .link-btn .theme11 a:after {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #9aa272;
  content: "chevron_right";
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: Material Symbols Outlined;
  font-size: 1em;
  font-variation-settings: "FILL"0, "wght"600, "GRAD"0, "opsz"48;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none;
  right: 7px
}
.card-modal-content .modal-close {
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 48px
}
@media only screen and (max-width:1000px) {
  .konnatoki-card-list {
    margin: 40px auto 0;
    padding-bottom: 80px
  }
  .konnatoki-card-list .card .konnatoki-content {
    gap: 20px
  }
  .konnatoki-card-list .card :is(.konnatoki-content.is-text-left, .konnatoki-content.is-text-right) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 0
  }
  .konnatoki-card-list .card .konnatoki-content .konnatoki-img {
    width: 100%
  }
  :is(.card-01, .page01) .konnatoki-title {
    max-width: 246px;
    width: 100%
  }
  :is(.card-02, .page02) .konnatoki-title, :is(.card-03, .page03) .konnatoki-title {
    max-width: 222px;
    width: 100%
  }
  :is(.card-04, .page04) .konnatoki-title {
    max-width: 183px;
    width: 100%
  }
  :is(.card-05, .page05) .konnatoki-title {
    max-width: 225px;
    width: 100%
  }
  :is(.card-06, .page06) .konnatoki-title {
    max-width: 240px;
    width: 100%
  }
  :is(.card-07, .page07) .konnatoki-title {
    max-width: 246px;
    width: 100%
  }
  :is(.card-08, .page08) .konnatoki-title {
    max-width: 300px;
    width: 100%
  }
  :is(.card-09, .page09) .konnatoki-title {
    max-width: 213px;
    width: 100%
  }
  :is(.card-10, .page10) .konnatoki-title {
    max-width: 240px;
    width: 100%
  }
  :is(.card-11, .page11) .konnatoki-title {
    max-width: 210px;
    width: 100%
  }
  .modaal-inline .modaal-outer-wrapper .modaal-inner-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0
  }
  .modaal-inline .modaal-outer-wrapper .modaal-inner-wrapper .modaal-container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    width: calc(100% - 40px)
  }
  .modaal-inline .modaal-outer-wrapper .modaal-inner-wrapper .modaal-container .modaal-content .modaal-content-container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0
  }
  .card-modal-content .body {
    margin-top: 20px
  }
  .card-modal-content .body p {
    padding: 20px
  }
  .card-modal-content .link-btn {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
    margin: 50px auto 15px;
    width: 100%
  }
}
@media only screen and (max-width:640px) {
  .konnatoki-container {
    background-image: url(../../assets/images/konnatoki/bg_sp.webp);
    padding: 0
  }
  .konnatoki-container .konnatoki-page-title {
    aspect-ratio: auto;
    background: none;
    display: block
  }
  .konnatoki-container .konnatoki-page-title h1 {
    max-width: 100%
  }
  .konnatoki-container .intro-lead {
    margin: 0 auto 30px;
    padding: 0 20px;
    text-align: left;
    text-align: justify;
    text-justify: inter-character
  }
}
@media only screen and (max-width:520px) {
  .page-konnatoki-wrapper {
    margin-top: 65px
  }
  .konnatoki-card-list .card {
    margin-bottom: 60px;
    padding-top: 20px
  }
  .card-modal-content {
    border-radius: 30px;
    padding: 50px 30px 30px
  }
  .card-modal-content .link-btn p {
    max-width: 290px
  }
  .card-modal-content .link-btn a {
    -ms-flex-item-align: auto;
    align-self: auto;
    display: block;
    font-size: clamp(1.6rem, 1.4636363636rem + .3636363636vw, 1.9rem);
    max-width: 290px;
    width: 100%
  }
  .card-modal-content .link-btn .theme11 a {
    border-radius: 30px;
    max-width: 290px;
    width: 100%
  }
  .card-modal-content .modal-close {
    right: 10px;
    top: 10px;
    width: 40px
  }
}