@charset "UTF-8";
/*serif

*/
body {
  color: #666666;
}

a {
  color: #888888;
}

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

.l-account_faq__q {
  background-color: #FBF5E7;
}
.l-account_faq__q:before {
  color: #ffffff;
  background-color: #FFA755;
}

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

.l-delete_privacy {
  color: #888888;
}

.l-caution__title {
  color: #EE6479;
}

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

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

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

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

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

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

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

.l-overlay {
  background-color: rgba(255, 167, 85, 0.9);
}

.l-footer__topback {
  background-color: #FBF5E7;
  color: #666666;
}
.l-footer__tb-link {
  color: #666666;
}

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

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

.c-title_h1 {
  background: #FFA755;
  color: #ffffff;
}

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

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

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

.c-modal_title_h4 {
  background-color: #FBF5E7;
}

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

.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: #FDFB68;
}

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

.p-header,
.p-modal_header {
  backdrop-filter: blur(0.2rem); /*背景をぼかす*/
  -webkit-backdrop-filter: blur(0.2rem);
  background-color: rgba(255, 255, 255, 0.7);
  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;
}
.p-header__menu,
.p-modal_header__menu {
  position: absolute;
  width: 9%;
  top: 25%;
  left: 5%;
}
.p-header__menu img,
.p-modal_header__menu img {
  height: auto;
  width: auto;
}
.p-header__logo,
.p-modal_header__logo {
  width: 15%;
  margin-left: 43%;
}
.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_btn,
.p-modal_header__member_btn {
  display: flex;
  width: 30%;
  justify-content: space-between;
  align-items: center;
  padding: 0 5% 0 0;
}
.p-header__catgory, .p-header__fav,
.p-modal_header__catgory,
.p-modal_header__fav {
  height: 100%;
  margin: 0 0 0 10%;
}
.p-header__catgory img, .p-header__fav img,
.p-modal_header__catgory img,
.p-modal_header__fav img {
  height: auto;
  width: auto;
}
.p-header .p-categorynav,
.p-modal_header .p-categorynav {
  display: none;
  position: absolute;
  top: 98%;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.p-header .p-categorynav ul,
.p-modal_header .p-categorynav ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
  background: #FBF5E7;
  border-bottom: 4px solid #FFA755;
}
.p-header .p-categorynav ul li,
.p-modal_header .p-categorynav ul li {
  width: 100%;
  padding: 2% 0;
}
.p-header .p-categorynav ul li a,
.p-modal_header .p-categorynav ul li a {
  display: block;
}
.p-header--member,
.p-modal_header--member {
  align-items: center;
}
.p-header .p-btn,
.p-modal_header .p-btn {
  width: 40%;
}

.p-contents--top .p-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
  display: block;
}
.p-contents--top .p-header__btn {
  display: block;
  float: right;
  width: 13%;
  margin-right: 5%;
  padding: 0;
}
.p-contents--top .p-header__btn img {
  width: 100%;
}
.p-contents--home .p-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
}
.p-contents--category .p-header__member_btn {
  display: block;
  width: 19%;
}
.p-contents--category .p-header .p-categorynav-open {
  display: none;
}

.p-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 98;
}
.p-modal__menuwrapper {
  height: 100vh;
  overflow: auto;
}
.p-modal__menuwrapper .p-subnav {
  display: none;
  border-bottom: 1px solid #666;
}
.p-modal__menuwrapper .p-subnav:last-of-type {
  border-bottom: 0;
}
.p-modal__menuwrapper .p-subnav li {
  font-size: 1.4rem;
  margin-left: 8%;
  padding: 1% 4% 0;
  border: 0;
}
.p-modal__menuwrapper .p-subnav__open {
  position: relative;
  padding-left: 12%;
}
.p-modal__menuwrapper .p-subnav__open::before { /* 閉じている時 */
  content: "＞";
  position: absolute;
  left: 5%;
  color: #FF5700;
}
.p-modal__menuwrapper .p-subnav__open ul {
  border-top: 1px solid #666;
}
.p-modal__menuwrapper .p-subnav__open.active::before { /* 開いている時 */
  content: "＞";
  transform: rotate(90deg);
}
.p-modal__overlay {
  width: 100%;
  height: 100vh;
  background: #FBF5E7;
  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: 30%;
}
@media screen and (min-width: 768px) {
  .p-modal__link_wrapper {
    padding-top: 180px;
  }
}
.p-modal__mainmenu {
  width: 90%;
  margin: 0 auto;
}
.p-modal__mainmenu li {
  padding: 2% 5%;
  border-bottom: 1px solid #666;
}
.p-modal__mainmenu li a {
  display: flex;
  justify-content: space-between;
  color: #666;
}
.p-modal__mainmenu li a .material-symbols-outlined {
  font-size: 1.6rem;
  line-height: 1.6;
}
.p-modal .p-info_menulist {
  width: 90%;
  margin: 5% auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.p-modal .p-info_menulist li {
  font-size: 1.2rem;
  margin-right: 1rem;
}

.p-categorytab {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
}
.p-categorytab__overlay {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 17%;
  background: #FBF5E7;
  opacity: 0.95;
  border-bottom: 3px solid #FFA755;
}
.p-categorytab__overlay li {
  width: 25%;
  height: 50px;
}
.p-categorytab__overlay li a {
  display: block;
}
.p-categorytab__overlay li a:hover {
  color: #fff;
  background: #FFA755;
}

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

/*打ち消し*/
.l-footer_link {
  justify-content: center;
}
.l-footer_link__item {
  width: auto;
}
.l-footer_link__link {
  padding: 0;
}

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

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

.p-page__heading {
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  padding: 0.5rem;
  background: #FFA755;
}
.p-page__subheading {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  padding: 0 35px;
}
.p-page__subheading:before, .p-page__subheading:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 1px;
  background: #666;
}
.p-page__subheading:before {
  left: 0;
}
.p-page__subheading:after {
  right: 0;
}
.p-page__iroha {
  width: 90%;
  margin: 15% auto 0;
}

.p-item {
  width: 90%;
  margin: 0 auto;
  padding: 8% 0;
  border-top: 1px solid #666;
}
.p-item:first-of-type {
  border-top: 0;
}
.p-item a {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.p-item__image {
  position: relative;
  width: 38%;
}
.p-item__text {
  position: relative;
  width: 57%;
}
.p-item__type {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: right;
  font-size: 1.4rem;
}
.p-item__new {
  font-size: 1.2rem;
  color: #fff;
}
.p-item__new span {
  padding: 1% 4%;
  background: #FF5700;
}
.p-item__icon {
  position: relative;
  width: 15%;
  display: inline-flex;
  vertical-align: middle;
}
.p-item__icon img {
  position: absolute;
  top: -15px;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  .p-item__icon img {
    top: -30px;
  }
}
.p-item__title {
  line-height: 1.2;
}

.fav_button {
  position: absolute;
  right: -13%;
  bottom: -5%;
  margin-left: auto;
  width: 25%;
  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-pagination {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 5% auto 0;
}
.p-pagination__prev, .p-pagination__next {
  width: 25%;
}

.p-login__video {
  position: relative;
  line-height: 0;
}
.p-login__video video {
  z-index: 1;
}
.p-login__video .p-videotxt {
  position: absolute;
  top: 2%;
  left: 10%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.1rem;
  color: #fff;
  line-height: 1.5;
  font-size: 1.4rem;
  text-shadow: 2px 2px 5px #333;
  z-index: 30;
}
@media screen and (min-width: 375px) {
  .p-login__video .p-videotxt {
    letter-spacing: 0.2rem;
    font-size: 1.6rem;
  }
}
.p-login__symbolarea {
  background: #FBF5E7;
}
.p-login__lineup {
  margin-top: -10%;
  z-index: 10;
  transform: translateZ(0);
}
.p-login__toplogo {
  width: 40%;
  margin: -20% auto 0;
  z-index: 30;
  transform: translateZ(2px);
}
.p-login__regist {
  width: 90%;
  margin: 4% auto 3%;
}
.p-login__regist--btn {
  width: 70%;
  text-align: center;
  margin: auto auto 5%;
  border-radius: 50px;
  background: #FF6609;
}
.p-login__regist--btn a {
  display: block;
  color: #fff;
  padding: 10% 0;
}
.p-login__regist--lastbtn {
  width: 70%;
  text-align: center;
  margin: auto auto 5%;
  border-radius: 50px;
  background: #FF6609;
}
.p-login__regist--lastbtn a {
  display: block;
  color: #fff;
  padding: 4% 0;
}
.p-login__slide .p-slide__ttl {
  width: 90%;
  margin: 5% auto;
}
.p-login__slide .p-infinite-slider__list {
  margin: 5px;
}
.p-login__point {
  width: 90%;
  margin: 0 auto;
}
.p-login__point .p-point__ttl {
  width: 70%;
  margin: 5% auto;
}
.p-login__point .p-point__txt li {
  padding: 5px;
  border-top: 1px dotted #FFA460;
}
.p-login__point .p-point__txt li:last-child {
  border-bottom: 1px dotted #FFA460;
}
.p-login__point .p-point__txt .material-symbols-outlined {
  vertical-align: middle;
  font-size: 1.6rem;
  color: #FFA460;
}
.p-login__point .p-point__edge {
  text-stroke: 1px #666;
  -webkit-text-stroke: 1px #666;
  color: #fff;
  line-height: 1.2rem;
  font-size: 1.8rem;
}
.p-login__teacher {
  margin-top: 10%;
}
.p-login__classlesson .p-classlesson__ttl {
  width: 90%;
  margin: 0 auto;
}
.p-login__classlesson .p-classlesson__question {
  position: relative;
}
.p-login__classlesson .p-classlesson__question dt {
  width: 50%;
  margin: 15% auto 0;
}
.p-login__classlesson .p-classlesson__question dd {
  width: 70%;
  position: absolute;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  margin: -5% auto 0;
  padding: 5px 10px;
  border-radius: 30px;
  background: #FFA460;
}
.p-login__iroha {
  margin-top: 10%;
}
.p-login__makehappy {
  margin-top: 5%;
}
.p-login__lastcatch {
  margin-top: 10%;
}

/*
.p-top_contents {
  padding-top: 60px;
  @include var.mq(md) {
      height: 120px;
  }
}
*/
.p-home .home_fv {
  position: relative;
  text-align: center;
}
.p-home .home_fv img {
  width: 90%;
  border-radius: 10%;
}
.p-home .swiper-wrapper {
  margin-top: 17%;
  padding-bottom: 18%;
  z-index: 2;
}
.p-home__new {
  position: absolute;
  top: -2%;
  left: 36%;
  width: 30%;
  z-index: 6;
}
.p-home .p-catchcopy {
  position: absolute;
  color: #666;
  bottom: 10%;
  left: 5%;
  text-align: left;
  opacity: 0.9;
}
.p-home .p-catchcopy__classroom {
  font-size: 1.6rem;
}
.p-home .p-catchcopy__classroom span {
  box-sizing: border-box;
  padding: 4px 5px;
  background: #FDFB68;
  border: 1px solid #666;
}
@media screen and (min-width: 768px) {
  .p-home .p-catchcopy__classroom span {
    padding: 8px 5px;
  }
}
.p-home .p-catchcopy__menutitle {
  box-sizing: border-box;
  font-size: 1.8rem;
  padding: 2px 5px;
  background: #fff;
  border: 1px solid #666;
}
.p-home__flyreturn {
  position: absolute;
  top: -10%;
  left: -8%;
  width: 50%;
  z-index: 3;
}
.p-home__egg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: 1;
}
.p-home__frypan {
  position: absolute;
  bottom: 4%;
  right: -10%;
  width: 60%;
  z-index: 4;
}
.p-home__heading {
  font-size: 2.5rem;
  line-height: 1.2;
  text-align: center;
}
.p-home__heading span {
  display: block;
  font-family: "mrsheffield-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #FF5700;
}
.p-home__classroom {
  width: 90%;
  margin: 0 auto;
}
.p-home__classroom ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.p-home__classroom ul li {
  width: 48%;
  margin-top: 2%;
}
.p-home__iroha {
  width: 90%;
  margin: 15% auto 0;
}
.p-home__iroha ul {
  display: flex;
  justify-content: space-between;
}
.p-home__iroha ul li {
  width: 46%;
}

/*
.p-page-content {
  width: 90%;
  margin: 0 auto;
}
*/
/*
.p-favorite,
.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-mylist-movie--none {
  width: 90%;
  margin: 5% auto 0;
  padding: 5%;
  background: #FBF5E7;
}
.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 .p-mylist-movie--none .p-mylist-nonebox__image {
  width: 38%;
  margin: 5% auto;
}

.p-classroom__heading {
  text-align: center;
  font-size: 2.5rem;
  margin: 3% auto;
}
.p-classroom .p-item:first-of-type {
  padding-top: 0;
}
.p-classroom__profile {
  width: 90%;
  text-align: center;
  margin: 6% auto 0;
  padding: 5%;
  background: #FBF5E7;
  /*----------more----------*/
}
.p-classroom__profile__heading {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  padding: 0 35px;
}
.p-classroom__profile__heading:before, .p-classroom__profile__heading:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 1px;
  background: #666;
}
.p-classroom__profile__heading:before {
  left: 0;
}
.p-classroom__profile__heading:after {
  right: 0;
}
.p-classroom__profile .p-profile__heading {
  color: #fff;
  text-align: left;
  margin: 8% auto 2%;
  padding: 2%;
  background: #FFA755;
}
.p-classroom__profile .p-profile__name {
  text-align: left;
  font-size: 1.8rem;
  margin-top: 4%;
}
.p-classroom__profile .p-profile__name span {
  font-size: 1.4rem;
}
.p-classroom__profile .p-profile__text {
  text-align: left;
  font-size: 1.5rem;
}
.p-classroom__profile .p-profile__text li {
  text-align: left;
  list-style: disc;
  margin-left: 2rem;
}
.p-classroom__profile .p-profile__hplink {
  text-align: left;
  text-decoration: underline;
  font-size: 1.5rem;
}
.p-classroom__profile .p-profile__attention {
  box-sizing: border-box;
  text-align: left;
  font-size: 1.4rem;
  margin-top: 3%;
  padding: 5%;
  background: #fff;
  border: 2px solid #FF5700;
}
.p-classroom__profile .p-profile__attention a {
  text-decoration: underline;
}
.p-classroom__profile .p-profile__attention span {
  color: #FF5700;
}
.p-classroom__profile .p-history {
  margin: 4% auto 10%;
}
.p-classroom__profile .p-history__profile {
  display: flex;
  align-items: center;
  margin: 2rem auto 1.5rem auto;
}
.p-classroom__profile .p-history__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-classroom__profile .p-history__name a {
  text-decoration: none;
}
.p-classroom__profile .p-history__det {
  position: relative;
}
.p-classroom__profile .p-history__det .grad-btn {
  z-index: 2;
  position: absolute;
  right: 30%;
  bottom: 5px;
  width: 40%;
  margin: auto;
  padding: 0.2rem;
  border-radius: 30px;
  background: #FFA755;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}
.p-classroom__profile .p-history__item {
  position: relative;
  overflow: hidden;
  text-align: left;
}
.p-classroom__profile .p-history__item.gr_disp::before {
  display: none !important;
}
.p-classroom__profile .p-history__item.gr_height {
  height: 80px;
}
.p-classroom__profile .p-history__item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(251, 245, 231, 0) 0%, rgba(251, 245, 231, 0.9) 50%, rgba(251, 245, 231, 0.9) 50%, #F7F5F2 100%);
  background: linear-gradient(top, rgba(251, 245, 231, 0) 0%, rgba(251, 245, 231, 0.9) 50%, rgba(251, 245, 231, 0.9) 50%, #F7F5F2 100%);
  content: "";
}
.p-classroom__profile .p-history .p-history__trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.p-classroom__profile .p-history .p-history__trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.p-classroom__profile .p-history .p-history__trigger:checked ~ .p-history__item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.p-classroom__profile .p-history .p-history__trigger:checked ~ .p-history__item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.p-category__list {
  display: flex;
  justify-content: space-between;
  background: #FBF5E7;
  border-bottom: 4px solid #FFA755;
  cursor: pointer; /* カーソルポインターに */
}
.p-category__list li {
  width: 25%;
  text-align: center;
}
.p-category__list li a {
  display: block;
  padding: 8% 0;
}
.p-category__list li a:hover {
  color: #fff;
  background: #FFA755;
}
.p-category__list li a.selected {
  color: #fff;
  background: #FFA755;
}
.p-category__contents {
  width: 90%;
  text-align: center;
  margin: 15% auto 0;
}
.p-category__contents:first-of-type {
  margin-top: 5%;
}

.p-category-basic__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: left;
}
.p-category-basic__list a {
  width: 48%;
  margin-top: 5%;
}
.p-category-basic__contents {
  width: 90%;
  text-align: center;
  margin: 15% auto 0;
}
.p-category-basic__contents:first-of-type {
  margin-top: 5%;
}
.p-category-basic .p-page__subheading {
  margin-top: 15%;
}
.p-category-basic .p-page__subheading:first-child {
  margin-top: 0;
}

.p-faq {
  width: 90%;
  text-align: center;
  margin: 15% auto 0;
}
.p-faq:first-of-type {
  margin-top: 5%;
}
.p-faq__list {
  text-align: left;
}
.p-faq--navopen {
  position: relative;
  color: #fff;
  margin-top: 5%;
  padding: 5% 12% 5% 15%;
  background: #FFA755;
}
.p-faq--navopen::before { /* 閉じている時 */
  content: "＋";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
}
.p-faq--navopen.active::before { /* 開いている時 */
  content: "－";
}
.p-faq--nav {
  display: none;
  font-size: 1.4rem;
  text-align: left;
  padding: 4%;
  background: #FBF5E7;
}
.p-faq__icon {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  font-weight: normal;
}

.p-movie_content video {
  width: 100% !important;
  max-width: 768px;
  min-width: 320px;
  position: fixed;
  z-index: 12;
}
.p-movie_content--lesson, .p-movie_content--basic {
  width: 90%;
  margin: 60% auto 0;
}
.p-movie_content--lesson .p-item__icon img, .p-movie_content--basic .p-item__icon img {
  top: -25px;
}
@media screen and (min-width: 768px) {
  .p-movie_content--lesson .p-item__icon img, .p-movie_content--basic .p-item__icon img {
    top: -50px;
  }
}
.p-movie_content--lesson .p-page__iroha, .p-movie_content--basic .p-page__iroha {
  width: 100%;
}
.p-movie_content__heading {
  font-size: 2.5rem;
}
.p-movie_content__name {
  text-align: right;
  margin-top: 2%;
}
.p-movie_content__description {
  margin-top: 2%;
  padding: 5%;
  background: #FBF5E7;
}
.p-movie_content__subheading {
  position: relative;
  font-size: 2rem;
  margin-top: 10%;
  border-bottom: 1px solid #666;
}
.p-movie_content__subheading .material-symbols-outlined {
  color: #FF5700;
  vertical-align: middle;
}
.p-movie_content__subheading__servings, .p-movie_content__subheading__cookingtime {
  position: absolute;
  top: 0;
  right: 0;
}
.p-movie_content__ingredients table {
  width: 100%;
}
.p-movie_content__ingredients table th {
  display: none;
}
.p-movie_content__ingredients table tr {
  line-height: 2;
}
.p-movie_content__steps ol {
  list-style: decimal;
  list-style-position: inside;
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
}
.p-movie_content__steps ol li {
  position: relative;
  width: 100%;
  padding: 5% 0;
  border-bottom: 1px dotted #707070;
}
.p-movie_content__steps ol li:last-of-type {
  border-bottom: none;
}
.p-movie_content__steps ol li p {
  font-size: 1.5rem;
  float: right;
  width: 90%;
}
.p-movie_content__point, .p-movie_content__related {
  margin-top: 5%;
  padding: 5%;
  background: #FBF5E7;
}
.p-movie_content__point a, .p-movie_content__related a {
  text-decoration: underline;
}
.p-movie_content__point__boxheading, .p-movie_content__related__boxheading {
  font-size: 1.8rem;
  color: #FF5700;
  padding-bottom: 2%;
  border-bottom: 1px solid #FF5700;
}
.p-movie_content__point p, .p-movie_content__point ul, .p-movie_content__related p, .p-movie_content__related ul {
  margin-top: 2%;
}
.p-movie_content__point li, .p-movie_content__related li {
  display: inline;
  margin-right: 1rem;
}
.p-movie_content__btn {
  margin: 12% auto 0;
}
.p-movie_content__btn li {
  width: 70%;
  text-align: center;
  color: #fff;
  margin: 0 auto 5%;
  padding: 5% 0;
  border-radius: 50px;
  background: #FFA755;
}
.p-movie_content__btn li:last-child {
  margin-bottom: 0;
}
.p-movie_content__btn li a {
  display: block;
  color: #fff;
}
.p-movie_content .fav_button {
  position: static;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url(../image/site/fav_wh_off.png);
  background-size: 12% !important;
  background-position: 18% 50% !important;
}
.p-movie_content .fav_button:after {
  content: "に登録";
}
.p-movie_content .fav_button.off {
  background-image: url(../image/site/fav_wh_off.png) !important;
  background-repeat: no-repeat !important;
}
.p-movie_content .fav_button.off:after {
  content: "に登録";
}
.p-movie_content .fav_button.on {
  background-image: url(../image/site/fav_wh_on.png) !important;
  background-repeat: no-repeat !important;
  background: #FF5700;
}
.p-movie_content .fav_button.on:after {
  content: "を解除";
}

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