@charset "UTF-8";
/*serif

*/
body {
  color: #222222;
  background-color: #ffffff;
}

a {
  color: #888888;
}

.l-account_trial {
  border: 1px solid #868686;
}
.l-account_trial__attention {
  background-color: #ffff99;
  color: #EE6479;
}

.l-account_faq__q {
  background-color: #90B4FF;
}
.l-account_faq__q:before {
  color: #ffffff;
  background-color: #D29EDF;
}

.l-account_unit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.l-account_unit__det {
  background-color: #D29EDF;
  color: #ffffff;
}

.l-delete_privacy {
  color: #888888;
}

.l-caution__title {
  color: #EE6479;
}

.l-info_device {
  border: 1px solid #868686;
}

.l-regist_trial {
  background-color: #D29EDF;
  color: #ffffff;
}

.l-trial_caution {
  border: 1px solid #222222;
}

.l-pay_describe {
  background-color: #ededed;
}

.l-dgft_mark {
  background-color: #ffffff;
}

.l-regist_course__trial-bonus {
  background-color: #D29EDF;
  color: #ffffff;
}
.l-regist_course__point-det {
  margin-bottom: 0.5rem;
}
.l-regist_course__unit-det {
  background-color: #D29EDF;
  color: #ffffff;
}

.l-contents {
  background-color: #ffffff;
  box-shadow: 0 0 20px #cccccc;
}

.l-overlay {
  background-color: rgba(210, 158, 223, 0.9);
}

.l-footer__topback {
  background-color: #90B4FF;
  color: #EDEDED;
}
.l-footer__tb-link {
  color: #EDEDED;
}

.l-modal__wrapper {
  background-color: #ffffff;
  color: #222222;
}

.l-form__input {
  border: 1px solid #ebebeb;
}
.l-form__input:focus {
  border: 2px solid #2563EB;
}
.l-form__input--error {
  border: 2px solid #B80000;
}
.l-form__text_area {
  border: 1px solid #ebebeb;
}
.l-form__error_text {
  color: #B80000;
}
.l-form__radio_label {
  background-color: #ededed;
}
.l-form__radio_label:before {
  background-color: #D29EDF;
}
.l-form__radio_label:after {
  border: 2px solid #868686;
}
.l-form__select_item {
  border: 1px solid #ebebeb;
}
.l-form__select_item select {
  color: #868686;
}
.l-form__select_item:before {
  border-top: 6px solid #868686;
}

.c-title_h1 {
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
  color: #ffffff;
}

.c-title_h2 {
  background-color: #D29EDF;
  color: #ffffff;
}

.c-title_h3 {
  border-color: #D29EDF;
}

.c-title_h4 {
  border-bottom: 1px solid #D29EDF;
}

.c-modal_title_h4 {
  background-color: #90B4FF;
}

.c-btn {
  background-color: #D29EDF;
  color: #ffffff;
}
.c-btn a {
  color: #ffffff;
}
.c-btn--revers {
  background-color: #ffffff;
  color: #D29EDF;
  border: 1px solid #D29EDF;
}

.c-pay_btn {
  display: block;
  width: 90%;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  margin: 0.5rem auto;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 0.5rem 0;
  font-weight: bold;
}
.c-pay_btn--edit_card {
  border: 1px solid #868686;
}
.c-pay_btn--edit_card::before {
  font-family: "Material Symbols Outlined";
  content: "\e870";
  display: inline-block;
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  font-weight: 100;
  vertical-align: -3px;
  margin-right: 0.5rem;
}
.c-pay_btn--account {
  border: 1px solid #868686;
}
.c-pay_btn--account::before {
  font-family: "Material Symbols Outlined";
  content: "\e7fd";
  display: inline-block;
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  font-weight: 100;
  vertical-align: -3px;
  margin-right: 0.5rem;
}

.u-text--accent {
  color: #ffff99;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.p-header,
.p-modal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 768px;
  min-width: 320px;
  padding: 10px 0;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  z-index: 999;
  align-items: center;
  background-color: #fff;
  box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.1411764706);
  opacity: 0.9;
}
.p-header__logo,
.p-modal_header__logo {
  width: 15%;
  padding-left: 1rem;
}
.p-header__btn,
.p-modal_header__btn {
  display: flex;
  width: 30%;
  justify-content: space-between;
  align-items: center;
  padding: 0 5% 0 0;
}
.p-header--member,
.p-modal_header--member {
  align-items: center;
  background-color: #fff;
  box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.1411764706);
}
.p-header .p-btn,
.p-modal_header .p-btn {
  width: 40%;
}

.p-header__member_btn,
.p-modal_header__member_btn {
  display: flex;
  width: 30%;
  justify-content: space-between;
  align-items: center;
  padding: 0 5% 0 0;
}
.p-header__fav, .p-header__menu,
.p-modal_header__fav,
.p-modal_header__menu {
  height: 100%;
  margin: 0 0 0 10%;
}
.p-header__fav img, .p-header__menu img,
.p-modal_header__fav img,
.p-modal_header__menu img {
  height: auto;
  width: auto;
}

.p-contents--top {
  padding: 0 0 8rem 0;
}
.p-contents--top .p-header {
  position: absolute;
  background: none;
  box-shadow: none;
  height: 15%;
}
@media screen and (min-width: 768px) {
  .p-contents--top .p-header {
    height: 210px;
  }
}
.p-contents--top .p-header__logo {
  width: 25%;
  margin-left: 2rem;
}
.p-contents--top .p-header__btn {
  display: block;
  width: 13%;
  margin-right: 2rem;
  padding: 1%;
  border-radius: 10px;
  background: #fff;
  opacity: 0.8;
}
.p-contents--top .p-header__btn img {
  width: 100%;
}

.p-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
}
.p-modal__menuwrapper {
  height: 100vh;
  overflow: auto;
}
.p-modal__overlay {
  width: 100%;
  height: 100vh;
  background: #D29EDF;
  opacity: 0.95;
}
.p-modal__menu {
  position: absolute;
  background-color: transparent;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  max-width: 768px;
  min-width: 320px;
  height: auto;
}
.p-modal__link_wrapper {
  padding-top: 18%;
}
@media screen and (min-width: 768px) {
  .p-modal__link_wrapper {
    padding-top: 120px;
  }
}
.p-modal__mainmenu {
  margin: 0 auto;
}
.p-modal__mainmenu li {
  font-size: 1.6rem;
  padding: 2% 5%;
  border-bottom: 1px solid #fff;
}
.p-modal__mainmenu li a {
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.p-modal__mainmenu li a .material-symbols-outlined {
  font-size: 1.6rem;
  line-height: 1.6;
}
.p-modal__menulist {
  width: 90%;
  margin: 4% auto 0;
}
.p-modal__textmenu {
  margin-bottom: 0.5rem;
}
.p-modal__textmenu a {
  color: #fff;
}

.p-top_menu {
  display: flex;
}
.p-top_menu__item {
  width: 25%;
}

.p-page-top {
  position: fixed;
  right: 0;
  bottom: 15%;
  width: 8%;
}
@media screen and (min-width: 768px) {
  .p-page-top {
    width: auto;
  }
}

.p-site-content {
  padding-top: 18%;
}
@media screen and (min-width: 768px) {
  .p-site-content {
    padding-top: 120px;
  }
}

.fav_button {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-left: auto;
  width: 15%;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  background-image: url(../image/site/fav_off.png);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: 0.3s;
  outline: none;
}
.fav_button img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
}
.fav_button.off {
  background-image: url(../image/site/fav_off.png) !important;
}
.fav_button.on {
  background-image: url(../image/site/fav_on.png) !important;
}

.p-login_fv {
  position: absolute;
}
.p-login_fv__text {
  position: absolute;
  top: 30%;
  z-index: 2;
}
.p-login_fv__deco {
  position: absolute;
  bottom: 0;
  z-index: 3;
}

.p-top_trial {
  border: dashed 1px;
  width: 90%;
  margin: 1rem auto 2rem auto;
  padding: 1rem;
  border-radius: 1rem;
}
.p-top_trial a {
  text-decoration: none;
}

.p-login_mslider__item {
  padding: 0 1rem;
}

.p-top_threelist {
  width: 95%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.p-top_threelist__item {
  list-style-type: none;
}

.p-top_bnr {
  width: 95%;
  margin: 0 auto;
}
.p-top_bnr__item {
  margin-bottom: 1rem;
}

.p-top_ftbtb {
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  max-width: 768px;
  line-height: 1.2;
  font-size: 2.5rem;
  text-align: center;
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: -o-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
  opacity: 0.9;
  display: none;
  padding: 1rem 0;
}
.p-top_ftbtb a {
  display: block;
  color: #fff;
}
.p-top_ftbtb a span {
  font-size: 1.8rem;
}

.p-info_box,
.p-content_box {
  padding-top: 18%;
}
@media screen and (min-width: 768px) {
  .p-info_box,
.p-content_box {
    padding-top: 120px;
  }
}

.p-trigger {
  position: relative;
}
.p-trigger__heading {
  position: absolute;
  left: 5%;
  bottom: 22%;
  width: 95%;
  font-size: 2rem;
}
.p-trigger__heading span {
  line-height: 2.2;
  padding: 2%;
  background-color: rgba(255, 255, 255, 0.9);
}
.p-trigger__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  font-size: 1.8rem;
  margin: auto;
}

.p-desire {
  position: relative;
  background: url("../image/site/img02.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20%;
}
.p-desire__heading {
  position: absolute;
  top: 28%;
  right: 5%;
  width: 100%;
  line-height: 2.2;
  text-align: right;
  font-size: 2rem;
}
.p-desire__heading img {
  width: 7%;
  vertical-align: baseline;
}
.p-desire__heading span {
  padding: 2%;
  background-color: rgba(225, 255, 0, 0.9);
}
.p-desire__photo {
  display: block;
  width: 90%;
  margin: 70% auto 0;
}

.p-point {
  background: url("../image/site/img03.png") no-repeat;
  background-size: cover;
  height: 100%;
  padding: 10% 5% 0;
}
.p-point__heading {
  line-height: 2;
  font-size: 2rem;
}
.p-point__heading span {
  padding: 2%;
  background-color: rgba(225, 255, 0, 0.9);
}
.p-point .p-point-box {
  margin: 5% 0 0;
  padding: 5%;
  background-color: rgba(255, 255, 255, 0.9);
}
.p-point .p-point-box__title {
  position: relative;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  padding: 2%;
  background: #E1FF00;
}
.p-point .p-point-box__title:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 48%;
  border: 10px solid transparent;
  border-top: 15px solid #E1FF00;
  width: 0;
  height: 0;
}
.p-point .p-point-box__text {
  font-weight: bold;
  line-height: 1.5;
  margin: 5% 0 0;
}
.p-point .p-point-box__text .material-symbols-outlined {
  float: left;
  font-size: 2.6rem;
  border-radius: 50%;
  color: #fff;
  margin-right: 10px;
  padding: 3%;
  background: #D29EDF;
}

.p-top_contents {
  padding-top: 60px;
}
@media screen and (min-width: 768px) {
  .p-top_contents {
    height: 120px;
  }
}

/*スクロールダウン全体の場所*/
.p-login_fv__slider {
  position: relative;
  width: 100%;
  z-index: 1;
  background-position: center bottom;
  /*下からの距離が変化して全体が下→上→下に動く*/
}
.p-login_fv__slider .scrolldown {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 1%;
  right: 50%;
  z-index: 2;
  /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}
.p-login_fv__slider .scrolldown span {
  /*描画位置*/
  position: absolute;
  left: -20px;
  bottom: 5px;
  /*テキストの形状*/
  color: #222222;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.p-login_fv__slider .scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #222222;
  transform: skewX(-31deg);
}
.p-login_fv__slider .scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: 0;
  /*矢印の形状*/
  width: 1px;
  height: 40px;
  background: #222222;
}
@keyframes arrowmove {
  0% {
    bottom: 1%;
  }
  50% {
    bottom: 3%;
  }
  100% {
    bottom: 1%;
  }
}

.p-loginbtn_fv {
  color: #ffffff;
  padding: 1rem 0;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-loginbtn_fv a {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #ffffff;
}
.p-loginbtn_fv a span {
  font-size: 1.8rem;
}

.p-lesson,
.p-program,
.p-trainer,
.p-ranking {
  padding: 15% 0 0;
  background: #F7F5F2;
}
.p-lesson__title,
.p-program__title,
.p-trainer__title,
.p-ranking__title {
  position: relative;
  width: 60%;
  margin: 0 auto;
}
.p-lesson__title img,
.p-program__title img,
.p-trainer__title img,
.p-ranking__title img {
  width: 100%;
}
.p-lesson__subtitle,
.p-program__subtitle,
.p-trainer__subtitle,
.p-ranking__subtitle {
  width: 90%;
  margin: 0 auto;
}
.p-lesson__subtitle img,
.p-program__subtitle img,
.p-trainer__subtitle img,
.p-ranking__subtitle img {
  width: 100%;
}

.p-lesson__title span {
  position: absolute;
  top: 0;
  left: -12%;
  width: 28%;
}
.p-lesson__subtitle {
  margin-bottom: 5%;
}
.p-lesson__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.p-lesson__category .p-category-box {
  position: relative;
  box-sizing: border-box;
  width: 48%;
  margin: 5% 0 0;
}
.p-lesson__category .p-category-box__lesson {
  position: absolute;
  bottom: 14%;
  left: 5%;
  color: #fff;
  font-family: "Helvetica Neue";
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.p-lesson__category .p-category-box__title {
  position: absolute;
  bottom: 4%;
  left: 5%;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 2%;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}

.p-program__title span {
  position: absolute;
  top: -17%;
  left: -25%;
  width: 28%;
}
.p-program__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.p-program__category .p-beside,
.p-program__category .p-vertical {
  position: relative;
  margin: 10% 0 0 0;
}
.p-program__category .p-beside a,
.p-program__category .p-vertical a {
  color: #222;
}
.p-program__category .p-beside__title,
.p-program__category .p-vertical__title {
  position: absolute;
  bottom: -8%;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 3% 2%;
  background-color: rgba(225, 255, 0, 0.9);
}
.p-program__category .p-beside__title .material-symbols-outlined,
.p-program__category .p-vertical__title .material-symbols-outlined {
  font-size: 1.6rem;
  vertical-align: text-top;
}
.p-program__category .p-beside__title {
  width: 90%;
  left: 5%;
}
.p-program__category .p-vertical {
  width: 48%;
}
.p-program__category .p-vertical__title {
  right: 0;
}
.p-program__caption {
  width: 90%;
  text-align: center;
  font-size: 1.2rem;
  color: #FF699D;
  margin: 0 auto;
  padding-top: 5%;
}

.p-trainer {
  padding-bottom: 15%;
}
.p-trainer__title span {
  position: absolute;
  top: 0;
  left: -10%;
  width: 28%;
}
.p-trainer .p-main-trainer .p-person {
  margin: 10% 0 0 0;
}
.p-trainer .p-main-trainer .p-person a {
  text-decoration: none;
  color: #222;
}
.p-trainer .p-main-trainer .p-person__name {
  width: 90%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  margin: 0 auto;
  padding: 2%;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-trainer .p-main-trainer .p-person__text {
  width: 90%;
  margin: 10px auto 0;
}
.p-trainer .p-sub-trainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 5% auto 0;
}
.p-trainer .p-sub-trainer .p-person {
  box-sizing: border-box;
  width: 48%;
  margin: 4% 0 0;
  padding: 5%;
  background: #fff;
}
.p-trainer .p-sub-trainer .p-person a {
  text-decoration: none;
  color: #222;
}
.p-trainer .p-sub-trainer .p-person__class {
  font-weight: bold;
  font-size: 1rem;
  margin: 10px 0 0;
}
.p-trainer .p-sub-trainer .p-person__name {
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  margin: 2px 0 0;
  padding: 2% 5%;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-trainer .p-sub-trainer .p-person__text {
  font-size: 1.4rem;
  margin: 10px 0 0;
}

.p-login__catch {
  width: 90%;
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
}
.p-login__btn {
  width: 90%;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  border-radius: 3rem;
  margin: 5% auto 10%;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-login__btn a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  padding: 2rem 0;
}
.p-login__ftbtn {
  position: fixed;
  z-index: 20;
  color: #ffffff;
  padding: 2rem 0;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
  opacity: 0.9;
}
.p-login__ftbtn a {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #ffffff;
}
.p-login__ftbtn a span {
  font-size: 1.5rem;
}

/*-------------------------------------home-------------------------------------*/
.p-home-news {
  display: flex;
  box-sizing: border-box;
  width: 90%;
  font-size: 1.2rem;
  margin: 1rem auto;
  border: 1px solid #222;
}
.p-home-news dt {
  width: 30%;
  text-align: center;
  padding: 0.2rem;
  background: #E1FF00;
  border-right: 1px solid #222;
}
.p-home-news dt span {
  font-size: 1.5rem;
  vertical-align: sub;
}
.p-home-news dd {
  padding: 0.2rem 0.5rem;
}

.swiper-pagination {
  position: static !important;
}

.swiper-pagination-bullet {
  width: 10% !important;
  height: 2px !important;
  border-radius: 0 !important;
}

.swiper-pagination-bullet-active {
  height: 2px !important;
  background: #D29EDF !important;
}

.swiper-pagination-bullets {
  bottom: 1vh;
}

.p-subnav {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  font-size: 1.2rem;
  margin: 5% auto 4%;
}
@media screen and (min-width: 768px) {
  .p-subnav {
    font-size: 1.6rem;
  }
}
.p-subnav li {
  display: flex;
  justify-content: center;
  width: 33%;
  border-right: 1px solid #ccc;
}
.p-subnav li:last-child {
  border-right: none;
}
.p-subnav a {
  color: #222;
}
.p-subnav .material-symbols-outlined {
  font-size: 1.6rem;
  vertical-align: middle;
}

.p-tag {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto 5%;
}
.p-tag__text {
  color: #fff;
  line-height: 1.2;
  font-size: 1.2rem;
  text-align: center;
  margin: 1% 1% 0 0;
  padding: 0.5rem;
  background: #90B4FF;
  border-radius: 5px;
}
.p-tag__text a {
  display: block;
  color: #fff;
}

.p-ranking {
  padding-bottom: 15%;
  background: -moz-linear-gradient(left, #D29EDF, #90B4FF);
  background: -webkit-linear-gradient(left, #D29EDF, #90B4FF);
  background: linear-gradient(to right, #D29EDF, #90B4FF);
}
.p-ranking__title span {
  position: absolute;
  top: -28%;
  left: -14%;
  width: 28%;
}
.p-ranking__subtitle {
  margin-bottom: 5%;
}
.p-ranking__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.p-ranking__list .p-ranking-box {
  position: relative;
  box-sizing: border-box;
  width: 48%;
  margin: 5% 0 0;
}
.p-ranking__list .p-ranking-box__image {
  position: relative;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 1.1rem;
  background: #222;
}
.p-ranking__list .p-ranking-box__time {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 1.1rem;
  padding: 0.2rem 0.5rem;
  background: #222;
}
.p-ranking__list .p-ranking-box__rank {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding: 0.5rem 1rem;
  background: #222;
}
.p-ranking__list .p-ranking-box__title {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #fff;
}
.p-ranking__list .p-ranking-box__class {
  position: absolute;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  color: #D29EDF;
  margin-top: 0.5%;
  padding: 0.2rem 0.5rem;
  background: #fff;
}
.p-ranking__list .p-ranking-box__name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 16%;
}

.p-page-content {
  width: 90%;
  margin: 0 auto;
}

.p-favorite .l-copyright,
.p-history .l-copyright {
  display: none;
}

.p-copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 333;
}

.p-mylist .p-page-title {
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
  color: #ffffff;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-mylist .p-mylist-movie--none {
  background: #F7F5F2;
  padding: 5%;
}
.p-mylist .p-mylist-movie--none .p-mylist-nonebox__title {
  font-weight: bold;
  text-align: center;
  color: #D29EDF;
}
.p-mylist .p-mylist-movie--none .p-mylist-nonebox__text {
  margin: 2% 0 0;
}

.p-mylist-btncontainer {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.p-mylist-btncontainer::-webkit-scrollbar {
  height: 5px;
}
.p-mylist-btncontainer::-webkit-scrollbar-track {
  background: #222;
}
.p-mylist-btncontainer::-webkit-scrollbar-thumb {
  background: #222;
}
.p-mylist-btncontainer .p-mylist-btn {
  display: flex;
  column-gap: 2%;
  justify-content: space-between;
}
.p-mylist-btncontainer .p-mylist-btn__button2 {
  display: table-cell;
  width: 48%;
  color: #D29EDF;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #D29EDF;
  background: #fff;
}
.p-mylist-btncontainer .p-mylist-btn__button3 {
  display: table-cell;
  width: 32%;
  color: #D29EDF;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #D29EDF;
  background: #fff;
}
.p-mylist-btncontainer .p-mylist-btn__button2 a, .p-mylist-btncontainer .p-mylist-btn__button3 a {
  padding: 0.5rem;
  color: #D29EDF;
  display: block;
  text-decoration: none;
  font-size: 1.4rem;
}
.p-mylist-btncontainer .p-mylist-btn__button2.active, .p-mylist-btncontainer .p-mylist-btn__button3.active {
  color: #fff;
  background: #D29EDF;
}
.p-mylist-btncontainer .p-mylist-btn__button2.active a, .p-mylist-btncontainer .p-mylist-btn__button3.active a {
  color: #fff;
}

.p-mylist-contents__box {
  width: 100%;
}
.p-mylist-contents .p-mylist-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10%;
}
.p-mylist-contents .p-mylist-item .p-item-image {
  position: relative;
  width: 48%;
}
.p-mylist-contents .p-mylist-item .p-item-image span {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 1.1rem;
  padding: 0.2rem 0.5rem;
  background: #222;
}
.p-mylist-contents .p-mylist-item .p-item-text {
  width: 50%;
  position: relative;
  color: #222;
}
.p-mylist-contents .p-mylist-item .p-item-text__title {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: bold;
  line-height: 1.5;
}
.p-mylist-contents .p-mylist-item .p-item-text__class {
  position: absolute;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 0.5%;
  padding: 0.2rem 0.5rem;
  background: #D29EDF;
}
.p-mylist-contents .p-mylist-item .p-item-text__name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.5rem;
  margin-top: 15%;
}

.p-page-content {
  width: 90%;
  margin: 0 auto;
}

.p-search .p-page-title {
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
  color: #ffffff;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-search--lesson__fv {
  position: relative;
  margin-top: 5%;
}
.p-search--lesson .p-page-title {
  color: #222222;
  position: absolute;
  bottom: 0.5rem;
  left: 1.5rem;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.2;
  padding-bottom: 0;
  background: none;
}
.p-search--lesson .p-page-title__lesson {
  position: absolute;
  bottom: 2.5rem;
  left: 0.5rem;
  z-index: 2;
}
.p-search--lesson .p-page-title__name {
  display: block;
  font-size: 1.8rem;
  margin: -0.5rem 0 0 -0.5rem;
  padding: 0.5rem 1rem;
  background: #E1FF00;
  opacity: 0.9;
}
.p-search--program {
  margin-bottom: 5%;
}
.p-search--instructor {
  margin-bottom: 5%;
}
.p-search--instructor__fv {
  position: relative;
}
.p-search--instructor .p-page-title {
  color: #222222;
  position: absolute;
  bottom: 0.5rem;
  left: 1rem;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.2;
  text-align: left;
  padding: 0;
  background: none;
}
.p-search--instructor .p-page-title span {
  display: block;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  background: #E1FF00;
  opacity: 0.9;
}
.p-search .p-lesson,
.p-search .p-program,
.p-search .p-instructor {
  padding: 0;
  background: none;
}
.p-search .p-lesson__title {
  position: relative;
  width: 100%;
}
.p-search .p-lesson__title span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  width: 90%;
  font-size: 1.8rem;
}
.p-search .p-lesson__category {
  width: 100%;
  margin-bottom: 10%;
}
.p-search .p-program {
  width: 100%;
}
.p-search .p-program__category {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5% !important;
}
.p-search .p-program__category li {
  width: 48%;
  margin-bottom: 4%;
}
.p-search .p-instructor {
  margin: 0 auto;
}
.p-search .p-instructor .p-sub-instructor {
  width: 100%;
  margin: 0 auto;
}
.p-search .p-hashtag {
  width: 100%;
}
.p-search .p-hashtag__tagname {
  float: left;
  text-align: center;
  line-height: 1.2;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 2% 2% 0;
  padding: 0.5rem;
  border-radius: 5px;
  background: #90B4FF;
}
.p-search .p-hashtag__tagname a {
  display: block;
  color: #fff;
}

.p-search-tabcontainer {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.p-search-tabcontainer::-webkit-scrollbar {
  height: 5px;
}
.p-search-tabcontainer::-webkit-scrollbar-track {
  background: #222;
}
.p-search-tabcontainer::-webkit-scrollbar-thumb {
  background: #222;
}
.p-search-tabcontainer .p-search-tab {
  display: flex;
  justify-content: space-between;
}
.p-search-tabcontainer .p-search-tab__button {
  display: table-cell;
  min-width: 25%;
  color: #222;
  text-align: center;
  vertical-align: middle;
  background: #F7F5F2;
  border-bottom: 4px solid #E1FF00;
}
.p-search-tabcontainer .p-search-tab__button a {
  padding: 0.5rem;
  color: #222;
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
}
.p-search-tabcontainer .p-search-tab__button.active {
  background: #E1FF00;
}

.p-category {
  /*----------more----------*/
}
.p-category--program .p-page-title {
  width: 90%;
  font-weight: bold;
  font-size: 1.75rem;
  margin: 4% auto 0;
}
.p-category--lesson__fv {
  position: relative;
}
.p-category--lesson .p-page-title {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.2;
}
.p-category--lesson .p-page-title__lesson {
  position: absolute;
  bottom: 2.5rem;
  left: 0.5rem;
  z-index: 2;
}
.p-category--lesson .p-page-title__name {
  display: block;
  font-size: 1.8rem;
  margin: -0.5rem 0 0 -0.5rem;
  padding: 0.5rem 1rem;
  background: #E1FF00;
  opacity: 0.9;
}
.p-category--instructor__fv {
  position: relative;
}
.p-category--instructor .p-page-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.2;
  padding: 0;
}
.p-category--instructor .p-page-title span {
  display: block;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  background: #E1FF00;
  opacity: 0.9;
}
.p-category .movie_creator {
  margin: 4% auto 10%;
}
.p-category .movie_creator__profile {
  display: flex;
  align-items: center;
  margin: 2rem auto 1.5rem auto;
}
.p-category .movie_creator__img {
  width: 15%;
  margin-right: 5%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.1411764706);
}
.p-category .movie_creator__name a {
  text-decoration: none;
}
.p-category .movie_creator__det {
  position: relative;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 1rem;
  background-color: #F7F5F2;
}
.p-category .movie_creator__det .grad-btn {
  z-index: 2;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20%;
  margin: auto;
  padding: 0.2rem;
  border-radius: 30px;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}
.p-category .movie_creator__item {
  position: relative;
  overflow: hidden;
}
.p-category .movie_creator__item.gr_disp::before {
  display: none !important;
}
.p-category .movie_creator__item.gr_height {
  height: 80px;
}
.p-category .movie_creator__item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(247, 245, 242, 0) 0%, rgba(247, 245, 242, 0.9) 50%, rgba(247, 245, 242, 0.9) 50%, #F7F5F2 100%);
  background: linear-gradient(top, rgba(247, 245, 242, 0) 0%, rgba(247, 245, 242, 0.9) 50%, rgba(247, 245, 242, 0.9) 50%, #F7F5F2 100%);
  content: "";
}
.p-category .movie_creator .movie_creator__trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.p-category .movie_creator .movie_creator__trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.p-category .movie_creator .movie_creator__trigger:checked ~ .movie_creator__item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.p-category .movie_creator .movie_creator__trigger:checked ~ .movie_creator__item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
.p-category .p-program {
  width: 100%;
  padding: 0;
  background: none;
}
.p-category .p-program__title {
  position: relative;
  width: 100%;
}
.p-category .p-program__title span {
  width: 90%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.8rem;
}
.p-category .p-program__category {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5%;
}
.p-category .p-program__category li {
  width: 48%;
  margin-bottom: 4%;
}

/*-----------------直接診断LP-----------------*/
.loader {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}
.loader::after {
  animation: loader 0.5s linear infinite;
  border: 1px solid orange;
  border-radius: 50%;
  border-right: 1px solid rgba(255, 165, 0, 0.2);
  border-top: 1px solid rgba(255, 165, 0, 0.2);
  content: "";
  height: 70px;
  width: 70px;
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.p-diagnose-request {
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 3% 5% 4%;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-diagnose-request__text {
  color: #fff;
}
.p-diagnose-request__button {
  width: 80%;
  color: #D29EDF;
  margin: 5px auto 0;
  border-radius: 40px;
  background: #fff;
}
.p-diagnose-request__button a {
  display: block;
  color: #D29EDF;
  padding: 2%;
}

.p-diagnose-what {
  margin-bottom: 5%;
}

.p-diagnose-worries {
  background: url("/image/site/lp3Back.png");
  background-size: cover;
  padding: 5%;
}
.p-diagnose-worries__list li {
  line-height: 1.4;
  margin-top: 20px;
}
.p-diagnose-worries__list li span {
  font-weight: bold;
}
.p-diagnose-worries__list li .material-symbols-outlined {
  float: left;
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.6;
  margin-right: 5px;
}

.p-diagnose-advisor {
  margin: 5% auto;
}
.p-diagnose-advisor__text {
  width: 90%;
  margin: 0 auto;
}
.p-diagnose-advisor__text span {
  font-weight: bold;
}

.p-diagnose-resultlist {
  padding: 5%;
  background: #F7F5F2;
}
.p-diagnose-resultlist__title {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
.p-diagnose-resultlist__title span {
  display: block;
  font-size: 1.8rem;
}
.p-diagnose-resultlist .p-result-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.p-diagnose-resultlist .p-result-list .p-result-box {
  box-sizing: border-box;
  width: 32%;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
  margin-top: 2%;
  padding: 2%;
  border-radius: 10px;
  border: 2px solid #E1FF00;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .p-diagnose-resultlist .p-result-list .p-result-box {
    font-size: 1.2rem;
    padding: 4%;
  }
}
.p-diagnose-resultlist .p-result-list .p-result-box__image {
  width: 80%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-diagnose-resultlist .p-result-list .p-result-box__image {
    width: 100%;
  }
}
.p-diagnose-resultlist .p-result-list .p-result-box__text {
  padding-top: 10px;
}
.p-diagnose-resultlist .p-result-list .p-result-box:last-child {
  width: 100%;
}
.p-diagnose-resultlist .p-result-list .p-result-box:last-child .p-result-box__image {
  width: 20%;
  margin: 0 auto;
}
.p-diagnose-resultlist .p-result-list .p-result-box:last-child .p-result-box__text {
  width: 80%;
  margin: 0 auto;
}

.p-diagnosis-request-box {
  width: 90%;
  margin: 5% auto;
}
.p-diagnosis-request-box__text {
  padding: 3%;
  box-sizing: border-box;
  border: 3px solid;
}
@media screen and (min-width: 768px) {
  .p-diagnosis-request-box__text {
    border: 6px solid;
  }
}
.p-diagnosis-request-box__title {
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}
.p-diagnosis-request-box__list li {
  line-height: 1.2;
  margin: 10px 0 0 1.6rem;
  list-style: disc;
}
.p-diagnosis-request-box__schedule {
  color: #fff;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  padding: 3% 5%;
  background: #222;
}
.p-diagnosis-request-box__schedule dd {
  margin: 3% auto 0;
  padding: 0.5rem;
  color: #90B4FF;
  border-radius: 30px;
  background: #fff;
}
.p-diagnosis-request-box__button {
  width: 85%;
  text-align: center;
  font-weight: bold;
  margin: 5% auto 0;
  border-radius: 40px;
  color: #fff;
  background: #ccc;
}
.p-diagnosis-request-box__button a {
  display: block;
  color: #fff;
  padding: 2%;
}
.p-diagnosis-request-box--nowon .p-diagnosis-request-box__title {
  color: #FF699D;
}
.p-diagnosis-request-box--nowon .p-diagnosis-request-box__text {
  border-color: #FF699D;
}
.p-diagnosis-request-box--nowon .p-diagnosis-request-box__button {
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-diagnosis-request-box--close .p-diagnosis-request-box__title {
  color: #222;
}
.p-diagnosis-request-box--close .p-diagnosis-request-box__text {
  border-color: #222;
}
.p-diagnosis-request-box--proceed .p-diagnosis-request-box__title {
  color: #90B4FF;
}
.p-diagnosis-request-box--proceed .p-diagnosis-request-box__text {
  border-color: #90B4FF;
}
.p-diagnosis-request-box--proceed .p-diagnosis-request-box__schedule {
  background: #90B4FF;
}
.p-diagnosis-request-box--proceed .p-diagnosis-request-box__button {
  background: #90B4FF;
}
.p-diagnosis-request-box--finished .p-diagnosis-request-box__title {
  color: #222;
}
.p-diagnosis-request-box--finished .p-diagnosis-request-box__text {
  border-color: #222;
}

.p-result-history {
  width: 90%;
  margin: 5% auto;
}
.p-result-history__title {
  font-weight: bold;
  font-size: 1.8rem;
}
.p-result-history__list li {
  border-bottom: 1px solid #666;
}
.p-result-history__list li:first-child {
  border-top: 1px solid #666;
}
.p-result-history__list li a {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.p-result-history__list li a .material-symbols-outlined {
  font-size: 1.6rem;
  line-height: 1.6;
}
.p-result-history__list li a .history_new {
  position: absolute;
  right: 10%;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 2px 10px;
  background: #E1FF00;
}

/*-----------------診断フォーム / 送信内容確認含-----------------*/
.p-diagnose .p-diagnosis-error-box {
  margin: 5% auto 10%;
}
.p-diagnose .p-diagnosis-error-box__text {
  padding: 5%;
  box-sizing: border-box;
  border: 3px solid #FF699D;
}
@media screen and (min-width: 768px) {
  .p-diagnose .p-diagnosis-error-box__text {
    border: 6px solid #FF699D;
  }
}
.p-diagnose .p-diagnosis-error-box__title {
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #FF699D;
}
.p-diagnose .p-diagnosis-error-box__attention {
  line-height: 1.5;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #FF699D;
}
.p-diagnose .p-diagnosis-error-box__reason {
  line-height: 1.5;
  margin-top: 1rem;
}
.p-diagnose .p-diagnosis-error-box__button {
  width: 85%;
  text-align: center;
  font-weight: bold;
  margin: 5% auto 0;
  padding: 2%;
  border-radius: 40px;
  color: #fff;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}
.p-diagnose .p-diagnosis-error-box__button a {
  display: block;
  color: #fff;
}
.p-diagnose .p-page-title {
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
}

.p-diagnose-formbox {
  margin-top: 5%;
}
.p-diagnose-formbox dd {
  line-height: 1.5;
}
.p-diagnose-formbox__label {
  font-size: 1.4rem;
  margin: 10% 0 2%;
}
.p-diagnose-formbox__label span {
  font-size: 1.2rem;
  font-weight: normal;
}
.p-diagnose-formbox__label .p-label--required {
  margin-right: 5px;
  padding: 5px 10px;
  background: #E1FF00;
}
.p-diagnose-formbox__label .p-label--optional {
  margin-right: 5px;
  padding: 5px 10px;
  color: #fff;
  background: #ACACAC;
}
.p-diagnose-formbox__label:first-child {
  margin-top: 0;
}
.p-diagnose-formbox__text-box {
  border: 1px solid #ccc;
}
.p-diagnose-formbox__text-box input {
  width: 100%;
  padding: 5px 10px;
}
.p-diagnose-formbox__text-box ::-webkit-input-placeholder {
  color: #cccccc !important;
}
.p-diagnose-formbox__list-box {
  border: 1px solid #ccc;
}
.p-diagnose-formbox__list-box select {
  width: 100%;
  padding: 5px 10px;
}
.p-diagnose-formbox__radio input {
  display: initial;
  transform: scale(1);
  margin: 0 0.5rem 0;
  border: solid 1px #ACACAC;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}
@media screen and (min-width: 768px) {
  .p-diagnose-formbox__radio input {
    transform: scale(2);
  }
}
.p-diagnose-formbox__radio input:focus {
  border: solid 1px #ACACAC;
}
.p-diagnose-formbox__radio input:checked {
  border: solid 1px #ACACAC;
}
.p-diagnose-formbox__radio input:checked::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D29EDF;
}
.p-diagnose-formbox .p-data-photo {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.p-diagnose-formbox .p-data-photo__face, .p-diagnose-formbox .p-data-photo__sample {
  width: 48%;
}
.p-diagnose-formbox .p-data-storage {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.p-diagnose-formbox .p-data-storage span {
  width: 48%;
  text-align: center;
  transform: translateY(35%);
}
.p-diagnose-formbox .p-data-storage label {
  width: 50%;
  background: url("../../image/site/photoImg.png") no-repeat;
  background-size: contain;
}
.p-diagnose-formbox .p-data-storage label img {
  width: 100%;
  border: 1px solid #ccc;
}
.p-diagnose-formbox__error-text {
  font-size: 1.2rem;
  color: #FF699D;
  margin-top: 1rem;
}

.p-diagnose-infobox {
  margin-top: 5%;
  padding: 5%;
  background: #F7F5F2;
}
.p-diagnose-infobox--privacy {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  padding: 2%;
  border-radius: 40px;
  background: #90B4FF;
}
.p-diagnose-infobox--privacy a {
  display: block;
  color: #fff;
}
.p-diagnose-infobox label {
  display: block;
}
.p-diagnose-infobox label input {
  display: initial;
  border: 1px solid #acacac;
  width: 18px;
  height: 18px;
}
.p-diagnose-infobox .p-balloon {
  width: 80%;
  text-align: center;
  margin: 4% auto;
  color: #90B4FF;
  padding: 2%;
  border-radius: 40px;
  background: #fff;
  box-sizing: border-box;
  border: 3px solid #90B4FF;
}
.p-diagnose-infobox .p-balloon--open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.p-diagnose-infobox .p-balloon__overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}
.p-diagnose-infobox .p-balloon__window {
  width: 80%;
  height: 80%;
  background: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5%;
}
@media screen and (min-width: 768px) {
  .p-diagnose-infobox .p-balloon__window {
    max-width: 568px;
    min-width: 320px;
  }
}
.p-diagnose-infobox .p-balloon__window .p-balloon__box {
  overflow: scroll;
  height: -webkit-fill-available;
  color: #222;
  margin-top: 10px;
}
.p-diagnose-infobox .p-balloon__window .p-balloon__box__title {
  font-size: 2rem;
}
.p-diagnose-infobox .p-balloon__window .p-balloon__box p {
  line-height: 1.5;
  text-align: left;
}
.p-diagnose-infobox .p-balloon__window .p-balloon__box__text {
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 5%;
}
.p-diagnose-infobox .p-balloon__window .p-balloon__box__text li {
  list-style: disc;
  margin: 1rem 0 0 1.4rem;
}
.p-diagnose-infobox .p-balloon--close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0.5rem;
  line-height: 1.5rem;
  font-size: 3rem;
}
.p-diagnose-infobox .p-balloon #p-balloon__pop-up {
  display: none; /* label でコントロールするので input は非表示に */
}
.p-diagnose-infobox .p-balloon #p-balloon__pop-up:checked + .p-balloon__overlay {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #D29EDF;
  opacity: 0.95;
  color: #222;
}
.p-diagnose-infobox__check {
  font-size: 1.2rem;
  line-height: 1.2;
}

.p-diagnose-reactionbox--open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.p-diagnose-reactionbox__overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}
.p-diagnose-reactionbox__window {
  width: 80%;
  text-align: center;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5%;
}
@media screen and (min-width: 768px) {
  .p-diagnose-reactionbox__window {
    max-width: 568px;
    min-width: 320px;
  }
}
.p-diagnose-reactionbox__text {
  line-height: 1.2;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.p-diagnose-reactionbox__button {
  font-size: 1.2rem;
  color: #fff;
  padding: 0.5rem 1rem;
  background: #222222;
}
.p-diagnose-reactionbox #p-diagnose-reactionbox__pop-up {
  display: none; /* label でコントロールするので input は非表示に */
}
.p-diagnose-reactionbox #p-diagnose-reactionbox__pop-up:checked + .p-diagnose-reactionbox__overlay {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #D29EDF;
  opacity: 0.95;
  color: #222;
}

.p-diagnose-sendbutton {
  width: 80%;
  color: #fff;
  text-align: center;
  margin: 5% auto 0;
  padding: 0.5rem;
  border-radius: 40px;
  background: -moz-linear-gradient(left, #90B4FF, #D29EDF);
  background: -webkit-linear-gradient(left, #90B4FF, #D29EDF);
  background: linear-gradient(to right, #90B4FF, #D29EDF);
}

/*-----------------診断結果-----------------*/
.p-diagnose-result .p-page-title {
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
  margin: 1.5rem 0;
}
.p-diagnose-result .p-diagnose-confirm-button {
  width: 50%;
  color: #fff;
  text-align: center;
  margin: 0 auto 5%;
  padding: 0.5rem;
  border-radius: 40px;
  background: #90B4FF;
}
.p-diagnose-result .p-diagnose-confirm-button a {
  color: #fff;
}
.p-diagnose-result .p-diagnose-result-content {
  padding: 5%;
}
.p-diagnose-result__matrix {
  background: #fff;
}
.p-diagnose-result__title {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 10% 0 0 0;
}
.p-diagnose-result__box {
  text-align: center;
  margin: 5px auto 0;
  padding: 5%;
  background: #fff;
}
.p-diagnose-result__box p {
  text-align: left;
  margin-top: 5%;
}
.p-diagnose-result__keyword {
  text-align: left;
  line-height: 1.5;
  font-size: 1.4rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #F7F5F2;
  border-radius: 5px;
}
.p-diagnose-result__keyword li {
  display: inline-block;
  margin-right: 1rem;
}
.p-diagnose-result .p-diagnose-result-hairbox--female {
  display: flex;
  justify-content: space-between;
}
.p-diagnose-result .p-diagnose-result-hairbox--female li {
  width: 32%;
}
.p-diagnose-result .p-diagnose-result-hairbox--male {
  display: flex;
  justify-content: space-between;
}
.p-diagnose-result .p-diagnose-result-hairbox--male li {
  width: 48%;
}
.p-diagnose-result__celebrity p {
  margin-top: 0;
}
.p-diagnose-result__feature img, .p-diagnose-result__taste img {
  width: 30%;
}
.p-diagnose-result__voice img {
  margin-top: 5px;
}
.p-diagnose-result__voice audio {
  width: 100%;
  margin-top: 5px;
}
.p-diagnose-result__onlinebanner {
  margin: 10% auto 0;
}
.p-diagnose-result__caption {
  text-align: right;
  font-size: 1.2rem;
  color: #FF699D;
}
.p-diagnose-result__caption span {
  font-size: 1.4rem;
  vertical-align: middle;
}
.p-diagnose-result--type1 {
  background: #fcefd9;
}
.p-diagnose-result--type2 {
  background: #f2d3b1;
}
.p-diagnose-result--type3 {
  background: #DDF0EB;
}
.p-diagnose-result--type4 {
  background: #cdd6c8;
}
.p-diagnose-result--type5 {
  background: #f9d2db;
}
.p-diagnose-result--type6 {
  background: #f2daf7;
}
.p-diagnose-result--type7 {
  background: #DDCDE6;
}
.p-diagnose-result--type8 {
  background: #BED2DD;
}
.p-diagnose-result--type9 {
  background: #d6e3ea;
}
.p-diagnose-result--type10 {
  background: #f2e2c2;
}
.p-diagnose-result--type11 {
  background: #b9c0cd;
}
.p-diagnose-result--type12 {
  background: #dec0c9;
}

.p-movie_content {
  max-width: 768px;
  min-width: 320px;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  background: #222;
}
.p-movie_content .p-incamera {
  width: 100%;
  margin: auto;
  text-align: center;
  position: relative;
  /* === ボタンを表示するエリア ============================== */
  /* === チェックボックス ==================================== */
  /* === チェックボックスのラベル（標準） ==================== */
  /* === チェックボックスのラベル（ONのとき） ================ */
  /* === 表示する文字（標準） ================================ */
  /* === 表示する文字（ONのとき） ============================ */
  /* === 丸部分のSTYLE（標準） =============================== */
  /* === 丸部分のSTYLE（ONのとき） =========================== */
}
.p-movie_content .p-incamera__menu {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 auto;
  padding: 3% 15% 3% 0;
  background: #D29EDF;
}
.p-movie_content .p-incamera__menutitle {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  text-align: left;
  color: #fff;
  font-size: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera__menutitle {
    font-size: 1.8rem;
  }
}
.p-movie_content .p-incamera .p-switch {
  width: 40%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.p-movie_content .p-incamera .p-switchArea {
  position: relative; /* 親要素が基点       */
  width: 100px; /* ボタンの横幅       */
  line-height: 36px; /* 1行の高さ          */
  letter-spacing: 0; /* 文字間             */
  text-align: center; /* 文字位置は中央     */
  font-size: 16px; /* 文字サイズ         */
  margin: auto 0 auto auto; /* 右寄せ           */
  background: #fff; /* デフォルト背景色   */
  border-radius: 20px; /* 角丸               */
}
.p-movie_content .p-incamera .p-switchArea input[type=checkbox] {
  display: none; /* チェックボックス非表示 */
}
.p-movie_content .p-incamera .p-switchArea label {
  display: block; /* ボックス要素に変更 */
  box-sizing: border-box; /* 枠線を含んだサイズ */
  height: 40px; /* ボタンの高さ       */
  border: 2px solid #999999; /* 未選択タブのの枠線 */
  border-radius: 20px; /* 角丸               */
}
.p-movie_content .p-incamera .p-switchArea input[type=checkbox]:checked + label {
  border-color: #90B4FF; /* 選択タブの枠線     */
}
.p-movie_content .p-incamera .p-switchArea label span:after {
  content: "OFF"; /* 表示する文字       */
  padding: 0 0 0 36px; /* 表示する位置       */
  color: #999999; /* 文字色             */
}
.p-movie_content .p-incamera .p-switchArea input[type=checkbox]:checked + label span:after {
  content: "ON"; /* 表示する文字       */
  padding: 0 36px 0 0; /* 表示する位置       */
  color: #90B4FF; /* 文字色             */
}
.p-movie_content .p-incamera .p-switchArea #swImg {
  position: absolute; /* 親要素からの相対位置*/
  width: 32px; /* 丸の横幅           */
  height: 32px; /* 丸の高さ           */
  background: #999999; /* カーソルタブの背景 */
  top: 4px; /* 親要素からの位置   */
  left: 4px; /* 親要素からの位置   */
  border-radius: 26px; /* 角丸               */
  transition: 0.2s; /* 滑らか変化         */
}
.p-movie_content .p-incamera .p-switchArea input[type=checkbox]:checked ~ #swImg {
  transform: translateX(60px); /* 丸も右へ移動       */
  background: #90B4FF; /* カーソルタブの背景 */
}
.p-movie_content .p-incamera .p-balloon {
  width: 13%;
  max-height: 100px;
  margin-left: 3%;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera .p-balloon {
    width: 8%;
  }
}
.p-movie_content .p-incamera .p-balloon--open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.p-movie_content .p-incamera .p-balloon__overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}
.p-movie_content .p-incamera .p-balloon .p-balloon__window {
  width: 80%;
  height: auto;
  background-color: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera .p-balloon .p-balloon__window {
    max-width: 568px;
    min-width: 320px;
  }
}
.p-movie_content .p-incamera .p-balloon .p-balloon__window .p-balloon__box {
  margin-top: 10px;
}
.p-movie_content .p-incamera .p-balloon .p-balloon__window .p-balloon__box__image {
  width: 50%;
}
.p-movie_content .p-incamera .p-balloon .p-balloon__window .p-balloon__box__text {
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 10px;
}
.p-movie_content .p-incamera .p-balloon .p-balloon__window .p-balloon__box__textimage {
  width: 17%;
}
.p-movie_content .p-incamera .p-balloon--close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0.5rem;
  line-height: 3rem;
  font-size: 4rem;
}
.p-movie_content .p-incamera .p-balloon #p-balloon__pop-up {
  display: none; /* label でコントロールするので input は非表示に */
}
.p-movie_content .p-incamera .p-balloon #p-balloon__pop-up:checked + .p-balloon__overlay {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #D29EDF;
  opacity: 0.95;
}
.p-movie_content .p-incamera .p-hamburger-menu {
  position: relative;
}
.p-movie_content .p-incamera .menu-btn {
  position: absolute;
  top: 56%;
  right: -2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.p-movie_content .p-incamera .menu-btn span,
.p-movie_content .p-incamera .menu-btn span:before,
.p-movie_content .p-incamera .menu-btn span:after {
  content: "";
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 3px;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera .menu-btn span,
.p-movie_content .p-incamera .menu-btn span:before,
.p-movie_content .p-incamera .menu-btn span:after {
    height: 50px;
    width: 50px;
  }
}
.p-movie_content .p-incamera .menu-btn span:before {
  background: url("../image/site/menu_wh_on.png");
  background-size: cover;
}
.p-movie_content .p-incamera #menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
.p-movie_content .p-incamera #menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  display: none;
}
.p-movie_content .p-incamera #menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  background: url("../image/site/menu_wh_off.png");
  background-size: cover;
}
.p-movie_content .p-incamera #menu-btn-check {
  /*display: none;*/
}
.p-movie_content .p-incamera #menu-btn-check:checked ~ .p-moviemenu {
  left: 0; /*メニューを画面内へ*/
}
.p-movie_content .p-incamera .p-moviemenu {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #D29EDF;
  opacity: 0.95;
}
.p-movie_content .p-incamera .p-moviemenu--main {
  max-width: 768px;
  min-width: 320px;
  margin: 5% auto 0;
  padding: 11% 2% 0;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera .p-moviemenu--main {
    margin-top: 0;
    padding-top: 10%;
  }
}
.p-movie_content .p-incamera .p-moviemenu--main li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.p-movie_content .p-incamera .p-moviemenu--main li:first-child {
  border-top: 1px solid #fff;
}
.p-movie_content .p-incamera .p-moviemenu--main li a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #ffffff;
  padding: 1% 2%;
}
.p-movie_content .p-incamera .p-moviemenu--main .material-symbols-outlined {
  font-size: 1.6rem;
  line-height: 1.6;
}
.p-movie_content .p-incamera .p-moviemenu--submenu {
  max-width: 768px;
  min-width: 320px;
  margin: 2% auto;
  padding: 0 4%;
}
.p-movie_content .p-incamera .p-moviemenu--submenu li {
  text-align: left;
  margin-bottom: 0.2rem;
}
.p-movie_content .p-incamera .p-moviemenu--submenu li a {
  color: #ffffff;
}
.p-movie_content .p-incamera #video_local input:placeholder-shown {
  display: none;
}
.p-movie_content .p-incamera .p-header__member_btn {
  width: 20%;
  margin: 0;
  padding: 0;
}
.p-movie_content .p-incamera__camera {
  width: 100% !important;
  height: auto;
}
.p-movie_content .p-incamera__movie {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 10px;
  z-index: 5;
  width: 80%;
}
@media screen and (min-width: 768px) {
  .p-movie_content .p-incamera__movie {
    max-width: 568px;
    min-width: 320px;
  }
}
.p-movie_content .p-incamera__movie video {
  width: 100% !important;
}
.p-movie_content .p-incamera__caption {
  position: relative;
  color: #fff;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 20px;
}
.p-movie_content .p-incamera__title {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.p-movie_content .p-incamera__outline {
  display: flex;
}
.p-movie_content .p-incamera__outline dl {
  width: 63%;
  margin-left: 2%;
}
.p-movie_content .p-incamera__image {
  width: 15%;
}
.p-movie_content .p-incamera__class {
  position: absolute;
  text-align: center;
  font-size: 1.4rem;
  padding: 0.2rem 0.5rem;
  background: #D29EDF;
}
.p-movie_content .p-incamera__name {
  font-size: 1.4rem;
  margin-top: 2.4rem;
}
.p-movie_content .p-incamera .fav_button {
  width: 10%;
}

/*# sourceMappingURL=site.css.map */