@charset "UTF-8";
/* basic
---------------------------- */
summary {
  display: block;
  padding: 24px;
  transition: all .15s;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  opacity: .6;
}
.matome_top {
  margin: auto;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.matome_top * {
  box-sizing: border-box;
}
.matome_top img {
  width: 100%;
  max-width: 990px;
  height: auto;
}
.matome_top a {
  transition: all .15s;
  color: #17b3f0;
  text-decoration: none;
}
.matome_top a:hover {
  opacity: .6;
}
/* common
---------------------------- */
.matome_top .bold {
  font-weight: bold;
}
.matome_top .center {
  text-align: center
}
.matome_top .right {
  text-align: right
}
.matome_top .left {
  text-align: left
}
.matome_top .note {
  font-size: 14px;
}
.matome_top .blue {
  color: #16aae4;
}
.matome_top .cmoa_orange {
  color: #fd6411;
}
.matome_top .container {
  max-width: 750px;
  margin: auto;
  padding: 48px 0;
}
.matome_top .cta_box {
  margin: 24px auto;
  text-align: center;
}
.matome_top .cta_box .banner {
  display: block;
  max-width: 500px;
  margin: auto;
}
.matome_top .text_box {
  margin-top: 24px;
}
.matome_top .text_box_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.matome_top .section_title {
  font-size: 40px;
  line-height: 1;
  text-align: center;
}
.matome_top .list_note {
  margin-top: 12px;
}
.matome_top .list_note.indent > li {
  padding-left: 1em;
  font-size: 14px;
  text-indent: -1em;
}
.matome_top .pc_hidden {
  display: none;
}
/* 共通パーツ ボタン
---------------------------- */
.matome_top .btn {
  display: block;
  position: relative;
  width: 80%;
  max-width: 480px;
  margin: 16px auto;
  padding: 16px;
  border: 2px solid #17b3f0;
  border-radius: 4px;
  background: #fff;
  color: #17b3f0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-indent: -.5em;
}
.matome_top .btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #17b3f0;
  border-right: 2px solid #17b3f0;
}
.matome_top .btn.btn_light {
  border-color: #fb9622;
  color: #fb9622;
}
.matome_top .btn.btn_light::after {
  border-color: #fb9622;
}
.matome_top .btn.btn_cmoa {
  border-color: #fd8341;
  color: #fd8341;
}
.matome_top .btn.btn_cmoa::after {
  border-color: #fd8341;
}
/* 塗りつぶしボタン */
.matome_top .btn_fill {
  display: block;
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 16px auto;
  padding: 16px 12px 14px;
  border-radius: 4px;
  background: #17b3f0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-indent: -.5em;
}
.matome_top .btn_fill::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: auto;
  padding-top: 6px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.matome_top .btn_fill.btn_cmoa {
  background: #fd8341;
}
.matome_top .btn_fill.btn_regist_full,
.matome_top .btn_fill.btn_regist_light {
  width: 100%;
  box-shadow: 3px 3px 0 0 #d6d6d6;
  font-size: 24px;
  text-shadow: 2px 2px 0 rgba(15, 58, 157, 0.20);
}
.matome_top .btn_fill.btn_regist_full .yellow {
  color: #fff53c;
}
.matome_top .btn_fill.btn_regist_full .big {
  font-size: 1.333em;
}
.matome_top .btn_fill.btn_regist_light {
  background: #fb9622;
  font-size: 20px;
  text-shadow: none;
}
.matome_top .btn_fill.btn_regist_light .big {
  font-size: 1.14285em;
}
.matome_top .cta_box .btn_fill {
  margin-top: 8px;
}
.matome_top .btn_col_2 {
  display: flex;
}
.matome_top .btn_col_2 [class^="btn"] {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 45%;
  font-size: 18px;
}
/* 共通パーツ その他
---------------------------- */
/* 区切り線 */
.matome_top .kugiri {
  width: 40px;
  margin: 24px auto;
  border: none;
  border-top: 2px solid #c2c2c2;
}
/* 両サイドに斜めライン */
.matome_top .diagonal_line {
  margin-bottom: 8px;
  text-align: center;
}
.matome_top .diagonal_line p {
  display: inline-block;
  position: relative;
}
.matome_top .diagonal_line p::before,
.matome_top .diagonal_line p::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 90%;
  background: #17b3f0;
}
.matome_top .diagonal_line p::before {
  left: -1em;
  transform: translateY(-50%) rotate(-15deg)
}
.matome_top .diagonal_line p::after {
  right: -1em;
  transform: translateY(-50%) rotate(15deg)
}
.matome_top .diagonal_line.light p::before,
.matome_top .diagonal_line.light p::after {
  background: #fb9622;
}
.matome_top .diagonal_line.thin p::before,
.matome_top .diagonal_line.thin p::after {
  width: 1px
}
/* 無料適用日付カウント */
.matome_top .diagonal_line.freeday_count {
  position: relative;
  font-size: 24px;
  font-weight: bold;
}
.matome_top .diagonal_line.freeday_count .big {
  font-size: 1.333em;
}
.matome_top .diagonal_line.freeday_count .small {
  font-size: .875em;
}
/* バルーン */
.matome_top .baloon {
  position: relative;
  max-width: 448px;
  margin: 0 auto 16px;
  padding: 6px;
  border-radius: 40px;
  background: #fff;
  color: #17b3f0;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
.matome_top .baloon::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 12px;
  height: 13px;
  transform: translateX(-50%);
  background: #fff;
  clip-path: polygon(0 0, 100% 0%, 0 100%);
}
/* マーカー */
.matome_top .marker {
  background: linear-gradient(to top, #fff53c 0, #fff53c 5px, transparent 5px);
}
.matome_top .marker_thin {
  background: linear-gradient(to top, #fff53c 0, #fff53c 3px, transparent 3px);
}
/* 行頭飾り罫 */
.matome_top .line_left {
  position: relative;
  padding-left: .6em;
  font-size: 20px;
}
.matome_top .line_left::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 70%;
  transform: translateY(-50%);
  border-radius: 8px;
  background: #17b3f0;
}
.matome_top .line_left:not(:first-child) {
  margin-top: 4px;
}
/* details & summary */
.matome_top .summary_arrow {
  position: relative;
  padding-right: 1.8em;
}
.matome_top .summary_arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2px;
  width: 12px;
  height: 12px;
  transform: translateY(-75%) rotate(135deg);
  border-top: 2px solid #17b3f0;
  border-right: 2px solid #17b3f0;
}
.matome_top details[open] .summary_arrow::after {
  transform: translateY(-50%) rotate(-45deg);
}
/* kv
---------------------------- */
.kv_box {
  position: relative;
}
.kv_box .count_on_kv {
  position: absolute;
  right: 190px;
  bottom: 100px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #0f3a9d;
  border-radius: 4px;
  background: #fff;
  box-shadow: 2px 2px 0 0 #0f3a9d;
  color: #0f3a9d;
  font-size: 20px;
  line-height: 34px;
}
.kv_box .count_on_kv span {
  font-size: 1.2em;
}
/* intro_area
---------------------------- */
.intro_area .intro_box {
  position: relative;
  background: linear-gradient(180deg, #74d1f6 0, #74d1f6 80px, #d1f0fc 80px, #d1f0fc 100%);
}
.intro_area .intro_box .container {
  max-width: 612px;
}
.intro_area .intro_float {
  margin-top: -124px;
  padding: 24px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(23, 179, 240, 0.50);
  text-align: center;
}
.intro_area .intro_float .note {
  font-size: 20px;
}
.intro_area .banner_cp {
  background: url("/solmare/mobile/images/top_matome/2510/bg_cp_area.png") no-repeat center center / cover, #fffeeb;
}
.intro_area .banner_cp .baloon {
  background: #fb9622;
  color: #fff
}
.intro_area .banner_cp .baloon::after {
  background: #fb9622;
}
.intro_area .banner_cp .banner {
  display: block;
  max-width: 480px;
  margin: auto;
  text-align: center;
}
/* value_area
---------------------------- */
.value_area {
  background: #d1f0fc;
}
.value_area .container_pc {
  max-width: 750px;
  margin: 40px auto;
}
.value_area .section_title {
  box-sizing: content-box;
  padding: 24px 0;
  background: #45c2f3;
  color: #fff;
  line-height: 1;
}
.value_area .section_title .small {
  font-size: .8em;
}
.value_area .section_title .big {
  font-size: 1.2em
}
.value_area .value_box {
  padding: 24px 32px;
  background: #fff;
}
.value_box:not(:first-of-type) {
  margin-top: 24px;
  padding-top: 24px;
}
.value_box .value_title {
  display: flex;
  align-items: flex-start;
  font-size: 32px;
}
.value_box .value_title .middle {
  font-size: .8em;
}
.value_box .value_title .small {
  font-size: .7em;
}
.value_box .value_title img {
  max-width: 54px;
}
.value_box .value_title .value_title_text {
  padding-left: 8px;
}
.value_box .value_item {
  text-align: center;
}
.value_box.value_01 .text_box {
  display: flex;
  justify-content: center;
  margin: 32px auto 16px;
}
.value_box.value_01 .text_box .text_inner {
  position: relative;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}
.value_box.value_01 .text_box .text_inner::before,
.value_box.value_01 .text_box .text_inner::after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 26px;
  height: 56px;
}
.value_box.value_01 .text_box .text_inner::before {
  left: -36px;
  background: url("/solmare/mobile/images/top_matome/2510/deco_parts_01_pc.png") no-repeat 0 0;
}
.value_box.value_01 .text_box .text_inner::after {
  right: -36px;
  transform: scale(-1, 1);
  background: url("/solmare/mobile/images/top_matome/2510/deco_parts_01_pc.png") no-repeat 0 0;
}
.value_box.value_01 .text_box .bigger {
  font-size: 1.31em;
}
.value_box.value_02 .value_title .small {
  vertical-align: baseline;
}
.value_box.value_02 .text_box {
  margin: 24px auto 0;
  font-size: 24px;
}
.value_box.value_02 .text_box .small {
  font-size: .8333em;
}
.value_box.value_02 .text_box_under {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 24px auto 16px;
  font-size: 20px;
}
.value_box.value_02 .text_box_under::before,
.value_box.value_02 .text_box_under::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top : 0;
  width: 26px;
  height: 30px;
  background: url("/solmare/mobile/images/top_matome/2510/deco_parts_02.svg") no-repeat center center/ contain;
}
.value_box.value_02 .text_box_under::before {
  left: -40px;
}
.value_box.value_02 .text_box_under::after {
  right: -40px;
  transform: scale(-1, 1);
}
.value_box.value_02 .btn.full {
  font-size: 24px;
}
.value_area .title_box {
  display: flex;
  flex-wrap: wrap;
  max-width: 588px;
  margin: 24px auto 0;
}
.value_area .title_box .title_wrap {
  flex: 0 0 25%;
  padding: 0 4px 8px;
}
.value_area .title_box .title_wrap a {
  display: block;
}
.value_area .title_box .title_genre {
  margin-bottom: 8px;
  padding: 2px 0;
  border: 1px solid #5c5c5c;
  border-radius: 4px;
  color: #5c5c5c;
  font-size: 14px;
  text-align: center;
}
.value_box.value_03 .iframe_cmoa_logo {
  width: 100%;
  max-width: 574px;
  margin: 24px auto 0;
  border: none;
  vertical-align: middle;
}
.value_area .recommend_box {
  background: #a2e1f9
}
.value_area .list_check_icon {
  max-width: 600px;
  margin: auto;
  padding: 24px 32px;
  border-radius: 4px;
  background: #fff;
}
.value_area .list_check_icon > li {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding-left: 36px;
  background: url("/solmare/mobile/images/top_matome/2510/icon_check.svg") no-repeat center left / 28px 28px;
  font-size: 20px;
}
.value_area .list_check_icon > li:not(:first-child) {
  margin-top: 8px;
}
/* price_area
---------------------------- */
.price_area .card_box {
  position: relative;
  margin-top: 24px;
  padding: 24px 32px;
  border: 2px solid #17b3f0;
  border-radius: 4px;
}
.price_area .card_box.light {
  margin-top: 24px;
  padding: 0;
  border-color: #fb9622;
}
.card_box .course_title_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto 24px;
}
.card_box .course_title.light .course_title_inner {
  margin: 0 auto;
}
.card_box .course_title .course_logo {
  width: 29.813%;
  max-width: 190px;
}
.card_box .course_title .course_count {
  margin-bottom: 8px;
  padding: 2px 0;
  background: #e8f7fd;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
}
.card_box .course_title.light .course_price {
  max-width: 200px;
}
.card_box .course_title.light.summary_arrow::after {
  border-top: 2px solid #fb9622;
  border-right: 2px solid #fb9622;
}
.card_box .course_title.light .course_badge_light {
  width: 16.5517%;
  max-width: 65px;
}
.card_box .course_title.light .course_logo {
  width: 22.0689%;
  max-width: 104px;
}
.card_box .course_title.light .course_count {
  margin-bottom: 8px;
  background: #fff4e9;
}
.card_box.light .details_contents {
  padding: 0 24px 24px;
}
.card_box .genre_tag_box .btn_fill {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 4px 4px 0 0;
  background: #45c2f3;
}
.card_box .genre_tag_box .btn_fill:hover {
  color: #fff;
}
.card_box .genre_tag_box .btn_fill.btn_light {
  background: #fdc07a;
}
.card_box .genre_tag {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  background: #e8f7fd;
  gap: 8px 4px;
}
.card_box .genre_tag > li a {
  display: block;
  padding: 4px 20px;
  border: 1px solid #17b3f0;
  border-radius: 20px;
  background: #fff;
  color: #333;
}
.card_box.light .genre_tag {
  background: #fff4e9;
}
.card_box.light .genre_tag > li a {
  border-color: #fb9622;
}
/* course_info_area
------------------------- */
.course_info_area {
  background: #d1f0fc;
}
.course_info_area .container {
  padding-top: 0;
}
.course_info_area .section_title {
  color: #17b3f0;
  line-height: 1.5;
}
.course_info_area .section_title .small {
  font-size: .8em;
}
.course_info_area .content_box {
  margin: 24px auto;
  padding: 24px 32px;
  background: #fff;
}
.course_info_area .cta_box .icon_crown span {
  padding-left: 24px;
  background: url("/solmare/mobile/images/top_matome/2510/icon_crown.svg") no-repeat center left / 20px 18px;
}
.course_info_area .content_box .btn_light {
  width: 100%;
  margin: 24px auto;
}
.course_info_area .content_box .btn_light .big {
  font-size: 1.2em;
}
/* cmoa_area
------------------------- */
.cmoa_area .section_title {
  color: #fd6411;
  font-size: 32px;
}
.cmoa_area .card_box {
  position: relative;
  margin-top: 16px;
  border: 2px solid #fd8341;
  border-radius: 4px;
}
.cmoa_area .card_box .card_box_title {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  background: #fd8341;
}
.cmoa_area .card_box .card_box_title p {
  color: #fff;
}
.cmoa_area .card_box .card_box_title p:first-child {
  padding: 16px 16px 14px;
  border-radius: 40px;
  background: #fff;
  color: #fd8341;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}
.cmoa_area .card_box .card_box_title p .small {
  display: block;
  font-size: .8em;
}
.cmoa_area .card_box .card_box_title p:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 24px;
  font-size: 40px;
  line-height: 1;
}
.cmoa_area .card_box .card_box_title p:last-child .small {
  display: block;
  font-size: .5em;
  font-weight: normal;
}
.card_box_content {
  padding: 24px 16px;
  background: #fff1ea;
}
.card_box_content .text_box_center {
  margin-top: 0;
}
.card_box_content .line_left::before {
  background: #fd8341;
}
.card_box_content .line_left .big {
  font-size: 1.714em;
}
.card_box_content .diagonal_line > p::before,
.card_box_content .diagonal_line > p::after {
  background: #fd8341;
}
.card_box_content .diagonal_line > p::before {
  left: -1em;
}
.card_box_content .diagonal_line > p::after {
  right: -1em;
}
/* .card_box_content .btn_cmoa {
  margin: 24px auto 0;
  width: 92%;
  min-width: 288px;
} */
.card_box_content .btn_fill.btn_cmoa {
  width: 100%;
}
.card_box_content .btn.icon_btn_left {
  padding: 8px 16px;
  border-color: #FD6411;
  color: #FD6411;
  text-indent: 0;
}
.card_box_content .btn.icon_btn_left::before {
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  width: 28px;
  height: 32px;
  background: url("/solmare/mobile/images/icon/beginner_on.png") no-repeat center center / contain;
}
/* faq_area
------------------------- */
.faq_area details.faq_toggle {
  border-bottom: 1px solid #17b3f0;
}
.faq_area details.faq_toggle:first-of-type {
  margin-top: 24px;
  border-top: 1px solid #17b3f0;
}
.faq_area summary {
  padding: 24px 32px;
}
.faq_area .faq_q {
  padding-left: 24px;
  font-size: 16px;
  font-weight: bold;
}
.faq_area .faq_a {
  margin: 0 32px 16px;
  padding: 8px 16px;
  border-radius: 4px;
  background: #e8f7fd;
}
.faq_area .faq_a_inner {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
}
.faq_area .faq_q::before,
.faq_area .faq_a_inner::before {
  content: "Q";
  display: inline-block;
  color: #17b3f0;
  font-size: 18px;
  font-weight: bold;
  text-indent: -24px;
}
.faq_area .faq_a_inner::before {
  content: "A";
}
.faq_area .faq_a_inner a {
  text-decoration: underline
}
.faq_area .text_box {
  margin-top: 32px;
  font-size: 20px;
}
.faq_area .btn {
  font-size: 24px;
}