/* LESS Document */
@import 'reset.css';
/* box */
/* color */
/* BASE LAYOUT
----------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 62.5%;
}
body {
  padding-bottom: 4rem;
  background-color: #edeef0;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  position: relative;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
}
body.scrollfix {
  position: fixed;
  width: 100%;
  height: 100%;
}
body.isgnav {
  padding-bottom: 10rem;
}
.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.contents .inner {
  padding: 2rem 4% 4rem;
  position: relative;
}
.mgB0 {
  margin-bottom: 0 !important;
}
.mgB2 {
  margin-bottom: 2rem !important;
}
.mgB4 {
  margin-bottom: 4rem !important;
}
.mgT2 {
  margin-top: 2rem !important;
}
.taC {
  text-align: center;
}
/* HEADER
----------------------------------- */
header {
  height: 54px;
  padding: 0 4%;
  background-color: #8e1d1d;
  position: relative;
}
header .menuTrigger {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1300;
}
header .menuTrigger a {
  display: inline-block;
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
}
header .menuTrigger a span {
  display: inline-block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;
  right: 0;
  left: 0;
  transition: all 0.4s;
}
header .menuTrigger a span:nth-of-type(1) {
  top: 14px;
}
header .menuTrigger a span:nth-of-type(2) {
  top: 21px;
}
header .menuTrigger a span:nth-of-type(3) {
  bottom: 14px;
}
header .menuTrigger a.active span:nth-of-type(1) {
  transform: translateY(7px) rotate(-45deg);
  background-color: #333;
}
header .menuTrigger a.active span:nth-of-type(2) {
  left: 0%;
  opacity: 0;
  animation: active-menu 0.8s forwards;
}
@-webkit-keyframes active-menu {
  100% {
    height: 0;
  }
}
@keyframes active-menu {
  100% {
    height: 0;
  }
}
header .menuTrigger a.active span:nth-of-type(3) {
  transform: translateY(-7px) rotate(45deg);
  background-color: #333;
}
header .user {
  position: absolute;
  top: 8px;
  left: 60px;
}
header .user .image {
  float: left;
  width: 36px;
  height: 36px;
}
header .user .image img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
header .user .profile {
  padding-left: 48px;
  font-size: 1.2rem;
  color: #fff;
}
header .user .profile .info .position {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 1rem;
  line-height: 1;
}
header .link {
  text-align: right;
}
header .link a {
  line-height: 54px;
}
.mypage header {
  background-color: #8e1d1d;
}
.club header {
  background-color: #001132;
}
/* MENU
----------------------------------- */
.menu {
  width: 80%;
  height: 100vh;
  padding-top: 54px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: -80%;
  z-index: 1200;
  transition: all 0.5s;
  overflow-y: scroll;
}
.menu.active {
  left: 0;
}
.menu .fixbg {
  width: 80%;
  height: 54px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: -80%;
  z-index: 1200;
  transition: all 0.5s;
}
.menu .fixbg.active {
  left: 0;
}
.menu .hl_mypage {
  padding: 1rem 1.5rem;
  background-color: #8e1d1d;
  line-height: 1.2;
  color: #fff;
}
.menu .hl_club {
  padding: 1rem 1.5rem;
  background-color: #001132;
  line-height: 1.2;
  color: #fff;
}
.menu .menu_club {
  margin-bottom: 2rem;
}
.menu li {
  border-bottom: 1px solid #e6e6e6;
  line-height: 2;
}
.menu li a {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  position: relative;
}
.menu li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
}
.menu .btn_secondary {
  margin: 4rem 0 8rem;
}
.overlay {
  content: "";
  width: 0%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  opacity: 0;
  transition: opacity 1s;
}
.overlay.active {
  width: 100%;
  height: 100%;
  opacity: 1;
}
/* NAV
----------------------------------- */
.gnav {
  width: 92%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1000;
}
.gnav ul {
  display: flex;
  width: 100%;
  height: 60px;
}
.gnav ul li {
  width: 20%;
  /* Delete 2nd Phase */
  /* Delete 2nd Phase */
}
.gnav ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.gnav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.gnav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.gnav ul li .icon_svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 0.2rem;
  fill: #fff;
}
.gnav ul li.off {
  padding: 10px 0;
  background-color: #8e1d1d;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: 1rem;
  color: #bb7777;
  text-decoration: none;
  text-align: center;
}
.gnav ul li.off .icon_svg {
  fill: #bb7777;
}
.mypage .gnav li a {
  background-color: #8e1d1d;
}
.mypage .gnav li.active a {
  background-color: #a54a4a;
}
.club .gnav li a {
  background-color: #001132;
}
.club .gnav li.active a {
  background-color: #33415b;
}
/* LINK
----------------------------------- */
.link a {
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}
.link a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.5rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.backlink a {
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}
.backlink a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}
/* BTN
----------------------------------- */
.btn_primary {
  margin: 2rem 0;
  text-align: center;
}
.btn_primary a {
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  line-height: 4rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.btn_secondary {
  margin: 2rem 0;
  text-align: center;
}
.btn_secondary a {
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  font-weight: bold;
  line-height: 4rem;
  text-align: center;
  text-decoration: none;
}
.btn_primary.w50 a,
.btn_secondary.w50 a {
  width: 50%;
}
.btn_primary.w60 a,
.btn_secondary.w60 a {
  width: 60%;
}
.btn_secondary.w88 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.btn_secondary.w88 a {
  width: 88%;
}
.mypage .btn_primary a {
  background-color: #001132;
}
.mypage .btn_secondary a {
  border: 1px solid #001132;
  color: #001132;
}
.club .btn_primary a {
  background-color: #8e1d1d;
}
.club .btn_secondary a {
  border: 1px solid #8e1d1d;
  color: #8e1d1d;
}
.btn_feedback {
  margin: 2rem auto;
  text-align: center;
}
.btn_feedback.active a {
  display: inline-block;
  width: 88%;
  border-radius: 6px;
  border: 1px solid #001132;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 4rem;
  text-align: center;
  text-decoration: none;
  color: #001132;
}
.btn_feedback.active a span {
  display: inline-block;
  height: 18px;
  margin-left: 0.5em;
  padding: 0 0.8em;
  border-radius: 9px;
  background-color: #001132;
  font-size: 1rem;
  line-height: 18px;
  color: #fff;
}
.btn_feedback.inactive {
  width: 88%;
  border-radius: 6px;
  background-color: #ddd;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 4rem;
  text-align: center;
  text-decoration: none;
  color: #999999;
}
.btn_feedback.inactive span {
  display: inline-block;
  height: 18px;
  margin-left: 0.5em;
  padding: 0 0.8em;
  border-radius: 9px;
  background-color: #999999;
  font-size: 1rem;
  line-height: 18px;
  color: #DDD;
}
.slidebtn_prv,
.slidebtn_nxt {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  cursor: pointer;
}
.slidebtn_prv::after,
.slidebtn_nxt::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  margin: -5px -5px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.slidebtn_prv.off,
.slidebtn_nxt.off {
  background-color: #ccc !important;
}
.slidebtn_prv {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  left: 0;
}
.slidebtn_nxt {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  right: 0;
}
.slidebtn_nxt::after {
  transform: rotate(135deg);
}
.mypage .slidebtn_prv,
.mypage .slidebtn_nxt {
  background-color: #001132;
}
.club .slidebtn_prv,
.club .slidebtn_nxt {
  background-color: #8e1d1d;
}
.pager {
  margin: 3rem 0 0;
  text-align: center;
}
.pager ul {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.pager ul li {
  list-style: none;
}
.pager ul li a {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 0 0.2rem;
  border: 1px solid #8e1d1d;
  border-radius: 4px;
  font-size: 1.6rem;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  color: #8e1d1d;
}
.pager ul li.prev,
.pager ul li.next {
  position: relative;
}
.pager ul li.prev a::after,
.pager ul li.next a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: -8px -4px;
  border-top: 2px solid #8e1d1d;
  border-left: 2px solid #8e1d1d;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.pager ul li.next a::after {
  margin: -8px -6px;
  transform: rotate(135deg);
}
.pager ul li.active a {
  background-color: #8e1d1d;
  color: #fff;
}
/* TITLE & HEADLINE
----------------------------------- */
.title {
  position: relative;
  text-align: center;
}
.title h1 {
  padding: 2rem 0 3rem;
  font-size: 2rem;
  line-height: 1.2;
  color: #fff;
}
.title .backlink {
  position: absolute;
  top: 2rem;
  left: 4%;
}
.mypage .title {
  background-color: #8e1d1d;
}
.club .title {
  background-color: #001132;
}
.regist .title {
  background-color: #8e1d1d;
}
.regist .title h1 {
  padding: 3rem 0;
}
.regist .title .backlink {
  top: 3rem;
}
.contents .hl1 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: #333333;
}
.contents .hl1.icon span {
  vertical-align: middle;
}
.contents .hl1.icon .thumnail {
  width: 36px;
  height: 36px;
  margin-right: 0.8rem;
  border-radius: 18px;
  vertical-align: middle;
}
.contents .hl2 {
  margin: 0 0 0.5rem;
  font-weight: bold;
  color: #999999;
}
.contents .hl3 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  color: #333333;
}
.contents .hl4 {
  margin: 0 0 1rem;
  font-weight: bold;
}
.contents .hl_indent {
  padding: 0 4%;
}
.contents .blank_message {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.4;
  color: #999999;
}
/* LOGIN
----------------------------------- */
.login {
  background-color: #8e1d1d;
}
.login .lg_first,
.login .lg_normal {
  position: relative;
  text-align: center;
  color: #fff;
}
.login .lg_first .logo_suevoli,
.login .lg_normal .logo_suevoli {
  width: 70px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.login .lg_first .logo_vedialo,
.login .lg_normal .logo_vedialo {
  width: 25%;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.login .lg_first .lg_btnarea,
.login .lg_normal .lg_btnarea {
  display: flex;
  margin: 2rem 0;
  justify-content: space-between;
}
.login .lg_first .lg_btnarea p,
.login .lg_normal .lg_btnarea p {
  width: 48%;
}
.login .lg_first .lg_btnarea p a,
.login .lg_normal .lg_btnarea p a {
  color: #fff;
  border: 1px solid #fff;
}
.login .lg_first .btn_primary a,
.login .lg_normal .btn_primary a {
  background-color: #fff;
  color: #8e1d1d;
}
.login .lg_first .btn_primary.negative a,
.login .lg_normal .btn_primary.negative a {
  background-color: #999;
  color: #fff;
}
.login .lg_normal .logo_vedialo {
  width: 35%;
}
.login .lg_normal .btn_primary a {
  padding-left: 5rem;
  line-height: 5rem;
  text-align: left;
  color: #333333;
  position: relative;
}
.login .lg_normal .btn_primary a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1rem;
}
.login .lg_normal .btn_primary a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
}
.login .lg_normal .btn_primary.line a::before {
  background: url("../img/icon_line.png") no-repeat center center;
  background-size: 100% auto;
}
.login .lg_normal .btn_primary.google a::before {
  background: url("../img/icon_google.png") no-repeat center center;
  background-size: 100% auto;
}
.login .lg_normal .line_comm {
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #e8d2d2;
}
.login .lg_normal .line_comm strong {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.login .agreement .agr_hl {
  font-size: 12px;
  font-size: 1.2rem;
}
.login .agreement ol {
  margin-left: 1.5em;
}
.login .agreement ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
}
.login .agreement p {
  margin-bottom: 0.5rem;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
}
.login .togglebody {
  display: none;
  text-align: left;
}
.login .togglebtn {
  width: 40%;
  height: 3rem;
  margin: 1.5rem auto 4rem;
  border: 1px solid #e8d2d2;
  border-radius: 1.5rem;
  font-size: 1.2rem;
  line-height: 3rem;
  text-align: center;
  color: #e8d2d2;
  cursor: pointer;
}
.login .togglebtn::before {
  content: "\6CE8\610F\4E8B\9805";
  display: inline-block;
}
.login .togglebtn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  border-top: 2px solid #e8d2d2;
  border-right: 2px solid #e8d2d2;
  transform: rotate(135deg);
}
.login .togglebtn.open::before {
  content: "\9589\3058\308B";
}
.login .togglebtn.open::after {
  margin-top: 0.2rem;
  margin-bottom: 0;
  transform: rotate(-45deg);
}
/* TOPPAGE
----------------------------------- */
.topdata {
  padding-top: 10rem;
  position: relative;
}
.topdata::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 12rem;
  position: absolute;
  top: 0;
  left: 0;
}
.topdata .profile {
  position: absolute;
  top: 1.5rem;
  left: 4%;
  font-size: 1.2rem;
  color: #fff;
}
.topdata .profile .info .position {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 1rem;
  line-height: 1;
}
.topdata .profile .name {
  margin-top: 0.5rem;
}
.topdata .graph .image {
  width: 116px;
  height: 116px;
  margin: 7px auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.topdata .graph .image img {
  width: 100%;
  border: 5px solid #fff;
  border-radius: 58px;
}
.topdata .graph canvas {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.topdata .new_comment {
  position: absolute;
  top: 30px;
  right: 12%;
}
.topdata .new_comment svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #fff;
}
.topdata .new_comment .badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 0.4rem;
  border-radius: 9px;
  background-color: #64cca0;
  text-align: center;
  color: #8e1d1d;
  font-size: 1.2rem;
  line-height: 18px;
  position: absolute;
  top: -10px;
  left: 18px;
}
.topdata .achievement {
  width: 92%;
  margin: 0 auto 1rem;
  padding: 4rem 2rem 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}
.topdata .achievement .inner {
  display: flex;
  margin-bottom: 1rem;
}
.topdata .achievement .achieve_rate {
  width: 50%;
  border-right: 1px solid #e6e6e6;
}
.topdata .achievement .step_rate {
  width: 50%;
}
.topdata .achievement h1 {
  color: #999999;
}
.topdata .achievement .status {
  color: #999999;
}
.topdata .achievement .status strong {
  margin-right: 0.5rem;
  font-size: 2.8rem;
  color: #333333;
  line-height: 1.2;
}
.topdata .achievement .btn_primary {
  margin: 0;
}
.topdata .achievement .date {
  text-align: right;
  font-size: 1rem;
  color: #999999;
  line-height: 1.2;
  position: absolute;
  top: 1em;
  right: 1em;
}
.mypage .topdata::before {
  background-color: #8e1d1d;
}
.club .topdata::before {
  background-color: #001132;
}
.club .topdata .profile .name {
  margin-top: 1rem;
  font-size: 1.6rem;
}
/* MYPAGE
----------------------------------- */
.kf_item {
  width: 100%;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.kf_item a {
  text-decoration: none;
  position: relative;
}
.kf_item .kf_stats {
  display: flex;
  padding: 1.8rem;
  /*margin-bottom: 2.0rem;*/
}
.kf_item .kf_stats .name {
  width: 65%;
  padding-right: 2rem;
}
.kf_item .kf_stats .name h3 {
  color: #333333;
  line-height: 1.4;
}
.kf_item .kf_stats .level {
  width: 35%;
}
.kf_item .kf_comment {
  padding: 1.8rem 1.8rem 0;
  background-color: #F2F2F2;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.kf_item .kf_comment .q_title {
  margin-bottom: 1.5rem;
  padding-left: 35px;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #333333;
  position: relative;
}
.kf_item .kf_comment .q_title::before {
  content: "?";
  display: block;
  width: 22px;
  height: 22px;
  background-color: #999999;
  border-radius: 11px;
  text-align: center;
  line-height: 22px;
  color: #fff;
  position: absolute;
  top: -2px;
  left: 5px;
}
.kf_item.unread {
  position: relative;
}
.kf_item.unread::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-color: #64cca0;
  border-radius: 7.5px;
  position: absolute;
  top: -7.5px;
  left: -7.5px;
}
.kf_item .ganbaru {
  display: none;
  width: 34px;
  height: 30px;
  background: url(../img/icon_ganbaru.svg) no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: -10px;
  left: -10px;
}
.kf_item.focus .ganbaru {
  display: block;
}
.kf_item.focus .kf_path {
  padding-left: 2rem;
}
.level {
  height: 5rem;
  background-color: #e6e6e6;
  border-radius: 6px;
  position: relative;
}
.level span {
  display: block;
  width: 1px;
  height: 5rem;
  background-color: #fff;
  position: absolute;
  top: 0;
  opacity: 0.6;
  z-index: 100;
}
.level span:nth-child(1) {
  left: 25%;
}
.level span:nth-child(2) {
  left: 50%;
}
.level span:nth-child(3) {
  left: 75%;
}
.level .bar {
  height: 5rem;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  transition: all 1s;
}
.level .new {
  display: none;
  width: 32px;
  padding: 0.4rem 0;
  background-color: #8e1d1d;
  border-radius: 2px;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: -1rem;
  z-index: 110;
}
.level .new::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 4px 2.5px 0 2.5px;
  border-color: #8e1d1d transparent transparent transparent;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.5px;
}
.level .achivedate,
.level .schedule {
  margin: auto;
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 100;
  font-size: 1.3rem;
  text-align: center;
  color: #fff;
  line-height: 1.2;
}
.level .schedule {
  color: #999999;
}
.before .level {
  background-color: #fff;
  border: 1px solid #cccccc;
}
.level_0 .level .bar {
  width: 0%;
}
.level_0 .level .new {
  display: none;
}
.level_1 .level .bar {
  width: 25%;
  background-color: #f46969;
}
.level_1 .level .new {
  left: 12.5%;
  transform: translateX(-15px);
}
.level_1 .level .new::before {
  content: attr(data-item);
}
.level_2 .level .bar {
  width: 50%;
  background-color: #efbe70;
}
.level_2 .level .new {
  left: 37.5%;
  transform: translateX(-15px);
}
.level_2 .level .new::before {
  content: attr(data-item);
}
.level_3 .level .bar {
  width: 75%;
  background-color: #e8e481;
}
.level_3 .level .new {
  left: 62.5%;
  transform: translateX(-15px);
}
.level_3 .level .new::before {
  content: attr(data-item);
}
.level_4 {
  background-color: #f0fff5;
}
.level_4 .kf_path .element::after {
  border-color: transparent transparent transparent #f0fff5;
}
.level_4 .level .bar {
  width: 100%;
  background-color: #64cca0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.level_4 .level .new {
  left: 87.5%;
  transform: translateX(-15px);
}
.level_4 .level .new::before {
  content: "\7FD2\5F97";
  /*習得!*/
}
.level_4 .level .achivedate {
  display: block;
}
.update .level .new {
  display: block;
}
.kf_path {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  font-size: 1rem;
  color: #999999;
}
.kf_path span {
  display: inline-block;
}
.kf_path span.element,
.kf_path span.action {
  max-width: 50%;
  max-height: 25px;
  padding: 0.5rem 1rem;
  overflow: hidden;
}
.kf_path span.element {
  padding-right: 2rem;
  position: relative;
}
.kf_path span.element::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: -2rem;
  border-style: solid;
  border-width: 2rem 0 2rem 1rem;
  border-color: transparent transparent transparent #e6e6e6;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
}
.kf_path span.element::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: -2rem;
  border-style: solid;
  border-width: 2rem 0 2rem 1rem;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  top: 50%;
  right: 1px;
  z-index: 0;
}
.kf_path span.action {
  padding-left: 1.5rem;
}
/* GOAL */
.tab ul {
  display: flex;
  background-color: #fff;
}
.tab ul li {
  width: 50%;
  list-style: none;
}
.tab ul li a {
  display: block;
  width: 100%;
  padding: 1.5rem 1rem;
  border-bottom: 2px solid #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: #999999;
}
.tab ul li.select a {
  border-bottom: 2px solid #8e1d1d;
  color: #333333;
}
.tab ul li.current {
  padding: 1.5rem 1rem;
  border-bottom: 2px solid #8e1d1d;
  text-align: center;
  font-weight: bold;
  color: #333333;
}
.tab ul.nobg {
  background-color: transparent;
}
.tab ul.nobg li a {
  border-bottom: 2px solid #cccccc;
}
.tab ul.nobg li.select a,
.tab ul.nobg li.current {
  border-bottom: 2px solid #8e1d1d;
}
.tab_contents {
  width: 92%;
  padding-bottom: 10rem;
  position: absolute;
  top: 2rem;
}
.tab_contents .divider {
  width: 100%;
  padding: 2rem 0;
  position: relative;
}
.tab_contents .divider span {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 0 7px 10px 7px;
  border-color: transparent transparent #cccccc transparent;
}
.tab_contents .divider::before,
.tab_contents .divider::after {
  content: "";
  display: inline-block;
  width: 45%;
  height: 1px;
  background-color: #cccccc;
  position: absolute;
  top: 50%;
}
.tab_contents .divider::before {
  left: 0;
}
.tab_contents .divider::after {
  right: 0;
}
#thisweek,
#lastweek,
#tab_dream,
#tab_threeyears {
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}
#thisweek.select,
#lastweek.select,
#tab_dream.select,
#tab_threeyears.select {
  opacity: 1;
  pointer-events: auto;
}
/* METHOD */
.elmnt_icon {
  margin: 4rem 0;
  position: relative;
}
.elmnt_icon .diamond {
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
  background: #e6e6e6;
  transform: rotate(45deg) skew(calc((90deg - 75deg) / 2), calc((90deg - 75deg) / 2));
}
.elmnt_icon .elmnt_ctgry {
  width: 4.5rem;
  height: 5.8rem;
  margin-left: 3rem;
  position: absolute;
  left: 50%;
  bottom: -3rem;
}
.elmnt_icon .icon_svg {
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  fill: #bb7777;
  position: absolute;
  top: 50%;
  left: 50%;
}
.elmnt_name {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  letter-spacing: -0.08rem;
}
.elmnt_name span {
  display: block;
  font-size: 1.4rem;
}
.achivedate {
  display: none;
  font-size: 1.3rem;
  color: #999999;
}
.elmnt_list {
  display: flex;
  flex-wrap: wrap;
}
.elmnt_list li {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 2rem;
  list-style: none;
  text-align: center;
}
.elmnt_list li:nth-child(3n) {
  margin-right: 0;
}
.elmnt_list li a {
  text-decoration: none;
}
.elmnt_list li .elmnt_icon {
  margin: 3rem 0;
  position: relative;
}
.elmnt_list li .elmnt_icon .diamond {
  width: 6rem;
  height: 6rem;
}
.elmnt_list li .elmnt_icon .elmnt_ctgry {
  width: 2.4rem;
  height: 3rem;
  margin-left: 1.6rem;
  position: absolute;
  left: 50%;
  bottom: -2rem;
}
.elmnt_list li .elmnt_icon .ganbaru {
  display: none;
  width: 34px;
  height: 30px;
  margin-right: 1.5rem;
  background: url(../img/icon_ganbaru.svg) no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  right: 50%;
  top: -1.5rem;
}
.elmnt_list li .elmnt_icon .icon_svg {
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
}
.elmnt_list li .progress {
  width: 40%;
  height: 5px;
  margin: 10px auto;
  border-radius: 2.5px;
  background-color: #ddd;
}
.elmnt_list li .progress .bar {
  width: 0;
  height: 5px;
  border-radius: 2.5px;
  transition: all 0.5s;
}
.elmnt_list li .progress .bar.rank1 {
  background: linear-gradient(to bottom, #BB7777, #8E1D1D);
}
.elmnt_list li .progress .bar.rank2 {
  background: linear-gradient(to bottom, #C1A28F, #955631);
}
.elmnt_list li .progress .bar.rank3 {
  background: linear-gradient(to bottom, #B1B9C1, #4F6174);
}
.elmnt_list li .progress .bar.rank4 {
  background: linear-gradient(to bottom, #C9BE81, #7E6F46);
}
.elmnt_list li .elmnt_name {
  font-size: 1.3rem;
}
.elmnt_list li .elmnt_name span {
  font-size: 1rem;
}
.elmnt_list li .achivedate {
  font-size: 1rem;
}
.elmnt_list li.focus .ganbaru {
  display: block;
}
.elmnt_detail {
  padding-bottom: 2rem;
  border-bottom: 1px solid #cccccc;
  text-align: center;
}
.elmnt_detail .progress {
  width: 60%;
  height: 5px;
  margin: 10px auto;
  border-radius: 2.5px;
  background-color: #ddd;
}
.elmnt_detail .progress .bar {
  width: 0;
  height: 5px;
  border-radius: 2.5px;
  transition: all 0.5s;
}
.elmnt_detail .progress .bar.rank1 {
  background: linear-gradient(to bottom, #BB7777, #8E1D1D);
}
.elmnt_detail .progress .bar.rank2 {
  background: linear-gradient(to bottom, #C1A28F, #955631);
}
.elmnt_detail .progress .bar.rank3 {
  background: linear-gradient(to bottom, #B1B9C1, #4F6174);
}
.elmnt_detail .progress .bar.rank4 {
  background: linear-gradient(to bottom, #C9BE81, #7E6F46);
}
.elmnt_detail .elmnt_status {
  display: flex;
  margin: 1.5rem 0;
}
.elmnt_detail .elmnt_status .elmnt_rate,
.elmnt_detail .elmnt_status .step_rate {
  width: 50%;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #999999;
}
.elmnt_detail .elmnt_status .elmnt_rate span,
.elmnt_detail .elmnt_status .step_rate span {
  margin-right: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: #333333;
}
.elmnt_detail .elmnt_status .elmnt_rate {
  border-right: 1px solid #cccccc;
}
.elmnt_detail .elmnt_rank {
  font-size: 1.3rem;
  line-height: 1.4;
  color: #999999;
}
.elmnt_detail .elmnt_rank span {
  margin-top: 0.4rem;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333333;
}
.elmnt_about {
  margin: 2rem 0;
  text-align: center;
}
.elmnt_about h3 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}
.elmnt_about .togglebody {
  display: none;
  text-align: left;
}
.elmnt_about .togglebtn {
  width: 40%;
  height: 3rem;
  margin: 1.5rem auto;
  border: 1px solid #cccccc;
  border-radius: 1.5rem;
  font-size: 1.2rem;
  line-height: 3rem;
  text-align: center;
  color: #999999;
  cursor: pointer;
}
.elmnt_about .togglebtn::before {
  content: "\3082\3063\3068\898B\308B";
  display: inline-block;
}
.elmnt_about .togglebtn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(135deg);
}
.elmnt_about .togglebtn.open::before {
  content: "\9589\3058\308B";
}
.elmnt_about .togglebtn.open::after {
  margin-top: 0.2rem;
  margin-bottom: 0;
  transform: rotate(-45deg);
}
.elmnt_list li.rank1,
.elmnt_detail.rank1 {
  /* BRONZ */
}
.elmnt_list li.rank1 .diamond,
.elmnt_detail.rank1 .diamond {
  background: linear-gradient(135deg, #c1a28f 0%, #955631 100%);
}
.elmnt_list li.rank1 .icon_svg,
.elmnt_detail.rank1 .icon_svg {
  fill: #fff;
}
.elmnt_list li.rank2,
.elmnt_detail.rank2 {
  /* SILVER */
}
.elmnt_list li.rank2 .diamond,
.elmnt_detail.rank2 .diamond {
  background: linear-gradient(135deg, #b1b9c1 0%, #4f6174 100%);
}
.elmnt_list li.rank2 .icon_svg,
.elmnt_detail.rank2 .icon_svg {
  fill: #fff;
}
.elmnt_list li.rank3,
.elmnt_detail.rank3 {
  /* GOLD */
}
.elmnt_list li.rank3 .diamond,
.elmnt_detail.rank3 .diamond {
  background: linear-gradient(135deg, #c9be81 0%, #7e6f46 100%);
}
.elmnt_list li.rank3 .icon_svg,
.elmnt_detail.rank3 .icon_svg {
  fill: #fff;
}
.elmnt_list li.rank3 .achivedate,
.elmnt_detail.rank3 .achivedate {
  display: block;
}
.elmnt_list li.cat_spirit,
.elmnt_detail.cat_spirit {
  /* 心 */
}
.elmnt_list li.cat_spirit .elmnt_ctgry,
.elmnt_detail.cat_spirit .elmnt_ctgry {
  background: url("../img/element_cat_spirit.svg") no-repeat left top;
  background-size: 100% auto;
}
.elmnt_list li.cat_tech,
.elmnt_detail.cat_tech {
  /* 技 */
}
.elmnt_list li.cat_tech .elmnt_ctgry,
.elmnt_detail.cat_tech .elmnt_ctgry {
  background: url("../img/element_cat_tech.svg") no-repeat left top;
  background-size: 100% auto;
}
.elmnt_list li.cat_body,
.elmnt_detail.cat_body {
  /* 体 */
}
.elmnt_list li.cat_body .elmnt_ctgry,
.elmnt_detail.cat_body .elmnt_ctgry {
  background: url("../img/element_cat_body.svg") no-repeat left top;
  background-size: 100% auto;
}
.elmnt_list li.cat_game,
.elmnt_detail.cat_game {
  /* 戦 */
}
.elmnt_list li.cat_game .elmnt_ctgry,
.elmnt_detail.cat_game .elmnt_ctgry {
  background: url("../img/element_cat_game.svg") no-repeat left top;
  background-size: 100% auto;
}
.actn_item {
  width: 100%;
  padding: 4%;
  background-color: #fff;
  position: relative;
}
.actn_item .actn_togglebtn .actn_name {
  padding: 0 2rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
}
.actn_item .actn_togglebtn .actn_name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(135deg);
  position: absolute;
  top: 0.5rem;
  left: 0;
  transition: all 0.5s;
}
.actn_item .actn_togglebtn.open .actn_name::before {
  top: 0.8rem;
  transform: rotate(-45deg);
}
.actn_item .actn_togglebtn .achivedate {
  padding: 0 2rem;
}
.actn_item .actn_togglebody {
  display: none;
  padding-top: 1rem;
}
.actn_item.complete::after {
  content: "";
  display: block;
  width: 32px;
  height: 36px;
  background: url("../img/icon_actn_comp.svg") no-repeat left top;
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
}
.actn_item.complete .achivedate {
  display: block;
}
.kf_path_l {
  background-color: #fff;
  border-bottom: none;
}
.kf_path_l span {
  max-height: inherit!important;
  line-height: 1.4;
}
.kf_path_l span.element {
  max-width: 52%;
  padding: 0.8rem 2.5rem 0.8rem 1rem;
}
.kf_path_l span.element::before {
  margin-top: -5rem;
  border-width: 5rem 0 5rem 2.5rem;
  top: 50%;
}
.kf_path_l span.element::after {
  margin-top: -5rem;
  border-width: 5rem 0 5rem 2.5rem;
  top: 50%;
}
.kf_path_l span.action {
  max-width: 48%;
  padding: 0.8rem 1.5rem;
}
.kf_path_l b {
  display: block;
  font-size: 1.3rem;
  color: #333333;
}
.kf_detail {
  margin-bottom: 3rem;
}
.kf_detail h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 1.4;
}
.kf_detail ul {
  display: flex;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.kf_detail ul li {
  width: 25%;
  list-style: none;
  line-height: 1.4;
  text-align: center;
}
.kf_detail ul.achivedate li {
  display: none;
}
.kf_detail .level {
  display: flex;
  width: 100%;
  height: 7rem;
  margin-bottom: 1rem;
}
.kf_detail .level span {
  height: 7rem;
}
.kf_detail .level .bar {
  height: 7rem;
}
.kf_detail.level_1 .achivedate li:nth-child(1) {
  display: block;
}
.kf_detail.level_2 .achivedate li:nth-child(1),
.kf_detail.level_2 .achivedate li:nth-child(2) {
  display: block;
}
.kf_detail.level_3 .achivedate li:nth-child(1),
.kf_detail.level_3 .achivedate li:nth-child(2),
.kf_detail.level_3 .achivedate li:nth-child(3) {
  display: block;
}
.kf_detail.level_4 {
  background-color: transparent;
}
.kf_detail.level_4 .achivedate li {
  display: block;
}
.kf_detail.before .level {
  border: none;
}
.kf_detail.before .schedule {
  top: 2.5rem;
}
.kf_explanation {
  margin-bottom: 4rem;
}
.kf_movie {
  margin-bottom: 4rem;
}
.kf_movie .vimeo {
  width: 100%;
  padding-top: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  background: #000;
  position: relative;
  overflow: hidden;
}
.kf_movie .vimeo iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.kf_movie .vimeo .btn_play {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
}
.kf_movie .vimeo .btn_play::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: url("../img/video_play.svg") no-repeat center / 61px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 16;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.kf_movie .vimeo .btn_play:hover::before {
  background-color: rgba(0, 0, 0, 0.3);
}
.kf_movie .vimeo .thumb_img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.kf_comment .btn_primary {
  margin: 1rem 0;
}
.kf_comment .question_list {
  margin-bottom: 6rem;
  border-bottom: 1px solid #e6e6e6;
}
.kf_comment .question_list li {
  list-style: none;
}
.kf_comment .question_list .question_togglebtn {
  width: 100%;
  padding: 0.8rem 3.5rem 0.8rem 1.5rem;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  line-height: 1.6;
  position: relative;
}
.kf_comment .question_list .question_togglebtn::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  transition: all 0.5s;
}
.kf_comment .question_list .question_togglebtn .q_date {
  font-size: 1.1rem;
  font-weight: normal;
  color: #999999;
}
.kf_comment .question_list .question_togglebtn.open::after {
  transform: rotate(-45deg);
}
.kf_comment .question_list .question_togglebody {
  display: none;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 4%;
}
.kf_comment .question_list .question_togglebody .btn_secondary {
  margin: 1rem 0;
}
.kf_comment .timeline .coach,
.kf_comment .timeline .player,
.kf_comment .timeline .myself {
  position: relative;
  font-size: 0;
}
.kf_comment .timeline .coach .thumnail,
.kf_comment .timeline .player .thumnail,
.kf_comment .timeline .myself .thumnail {
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.kf_comment .timeline .coach .thumnail img,
.kf_comment .timeline .player .thumnail img,
.kf_comment .timeline .myself .thumnail img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
.kf_comment .timeline .coach .comment,
.kf_comment .timeline .player .comment,
.kf_comment .timeline .myself .comment {
  display: inline-block;
  max-width: 80%;
  margin-bottom: 2rem;
  padding-left: 50px;
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}
.kf_comment .timeline .coach .comment .name,
.kf_comment .timeline .player .comment .name,
.kf_comment .timeline .myself .comment .name {
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: #999999;
}
.kf_comment .timeline .coach .comment .balloon,
.kf_comment .timeline .player .comment .balloon,
.kf_comment .timeline .myself .comment .balloon {
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  border-top-left-radius: 0;
  font-size: 1.3rem;
  color: #333333;
}
.kf_comment .timeline .coach .time,
.kf_comment .timeline .player .time,
.kf_comment .timeline .myself .time {
  display: inline-block;
  margin-top: 2rem;
  padding-left: 0.8rem;
  font-size: 1rem;
  color: #999999;
  line-height: 1.4;
  vertical-align: top;
}
.kf_comment .timeline .myself {
  text-align: right;
}
.kf_comment .timeline .myself .thumnail {
  right: 0;
  left: auto;
}
.kf_comment .timeline .myself .comment {
  max-width: 70%;
  padding-left: 0;
}
.kf_comment .timeline .myself .comment .balloon {
  background-color: #001132;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
}
.kf_comment .timeline .myself .time {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0.8rem;
  text-align: right;
}
.kf_comment .timeline .latest .comment {
  max-width: 100%;
}
.kf_comment .timeline .latest .comment .comment_info {
  display: flex;
  justify-content: space-between;
}
.kf_comment .timeline .latest .comment .comment_info .name {
  width: 70%;
  display: inline-block;
}
.kf_comment .timeline .latest .comment .comment_info .time {
  width: 30%;
  margin-top: 0;
  padding: 0;
  text-align: right;
}
.kf_comment .timeline .latest .comment .balloon {
  width: 100%;
}
.kf_comment .timeline .latest.myself .comment {
  padding-left: 0;
  padding-right: 50px;
}
/* LOADMAP */
.slide_head {
  padding: 1.5rem 1rem;
  background-color: #fff;
  position: relative;
  font-size: 2rem;
  text-align: center;
}
.slide_head.fixed {
  width: 100%;
  position: fixed;
  top: 0 ;
  left: 0;
  z-index: 1000;
}
.slide_body {
  width: 100%;
  overflow-x: scroll;
}
.slide_body .slide_year {
  display: flex;
  width: 600%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.slide_body .slide_year .slide_month {
  width: 100%;
  border-right: 1px solid #cccccc;
  text-align: center;
  white-space: normal;
}
.slide_body .slide_year .slide_month .month {
  width: 100%;
  padding: 0.8rem;
  background-color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
}
.slide_body .slide_year .slide_month .actn_list {
  padding: 0.8rem 0.8rem 0;
}
.slide_body .slide_year .slide_month .actn_list li {
  width: 100%;
  margin-bottom: 0.8rem;
  border-radius: 6px;
  list-style: none;
  font-size: 1.2rem;
  text-align: left;
  line-height: 1.4;
}
.slide_body .slide_year .slide_month .actn_list li a {
  display: block;
  width: 100%;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  color: #fff;
}
.slide_body .slide_year .slide_month .actn_list li a p {
  display: block;
  min-height: calc(2rem * 1.4);
  overflow: hidden;
  line-height: 16px;
}
@supports (-webkit-line-clamp: 2) {
  .slide_body .slide_year .slide_month .actn_list li a p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.slide_body .slide_year .slide_month .actn_list li.complete {
  opacity: 0.8;
}
.slide_body .slide_year .slide_month .actn_list li.complete a::after {
  content: "";
  display: block;
  width: 24px;
  height: 27px;
  background: url("../img/icon_actn_comp.svg") no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}
.slide_body .slide_year .slide_month .actn_list li.ctgry_group {
  background-color: #204489;
}
.slide_body .slide_year .slide_month .actn_list li.ctgry_fp {
  background-color: #28a780;
}
.slide_body .slide_year .slide_month .actn_list li.ctgry_gk {
  background-color: #de7853;
}
/* MENTORING */
.mntrng_message {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  position: relative;
}
.mntrng_message::before,
.mntrng_message::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5rem;
  background-color: #999999;
  position: absolute;
  top: 0;
}
.mntrng_message::before {
  left: 2rem;
  transform: rotate(-30deg);
}
.mntrng_message::after {
  right: 2rem;
  transform: rotate(30deg);
}
.mntrng_btn {
  margin: 2rem 0;
}
.mntrng_btn a {
  display: inline-block;
  width: 100%;
  padding: 3.5rem 2rem 3.5rem 9rem;
  background-color: #001132;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6em;
  color: #fff;
  text-align: left;
  text-decoration: none;
  position: relative;
}
.mntrng_btn a span {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1em;
  color: #999999;
}
.mntrng_btn a::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 42px;
  margin: auto;
  background: url("../img/icon_mntrng_pr.svg") no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3rem;
}
.mntrng_link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;
  list-style: none;
}
.mntrng_link li {
  width: 47%;
  height: 60px;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mntrng_link li:nth-of-type(1) a,
.mntrng_link li:nth-of-type(2) a {
  padding-top: 1rem;
}
.mntrng_link li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 1.8rem 1.5rem 0;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.6em;
  color: #333333;
  text-align: center;
  text-decoration: none;
}
.mntrng_link li a span {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.6em;
  color: #999999;
}
.mntrng_ctg_item {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #cccccc;
}
.mntrng_policy_list > li {
  list-style: none;
  border-bottom: 1px solid #e6e6e6;
  line-height: 2;
}
.mntrng_policy_list > li:last-child {
  border-bottom: none;
}
.mntrng_policy_list > li .plcy_togglebtn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  background-color: #fff;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  line-height: 3;
  position: relative;
}
.mntrng_policy_list > li .plcy_togglebtn::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  transition: all 0.5s;
}
.mntrng_policy_list > li .plcy_togglebtn span {
  padding-left: 1rem;
  font-size: 1.2rem;
  font-weight: normal;
}
.mntrng_policy_list > li .plcy_togglebtn::after {
  transform: rotate(135deg);
}
.mntrng_policy_list > li .plcy_togglebtn.open::after {
  transform: rotate(-45deg);
}
.mntrng_policy_list > li .plcy_togglebody {
  display: none;
  padding: 2rem 4% 4rem;
}
.mntrng_policy_list .mntrng_target .target_body {
  padding: 0 1.5rem 2rem;
  border-top: none;
}
.mntrng_policy_list .mntrng_target .target_body .target_result {
  margin-top: 0;
}
.mntrng_target {
  width: 100%;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mntrng_target .target_title {
  padding: 1.5rem 1.5rem 1.5rem 4.5rem;
  font-weight: bold;
  line-height: 1.7em;
  position: relative;
}
.mntrng_target .target_title span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #8e1d1d;
  position: absolute;
  top: 1.8rem;
  left: 1.5rem;
  font-size: 1.2rem;
  line-height: 20px;
  color: #fff;
  text-align: center;
}
.mntrng_target .target_body {
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid #e6e6e6;
  line-height: 1.7em;
}
.mntrng_target .target_body .time {
  margin-top: 1.1rem;
  font-size: 1.2rem;
  line-height: 1;
  color: #999999;
}
.mntrng_target .target_body .time::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.6em;
  background: url("../img/icon_clock.svg") no-repeat left top;
  background-size: 100% auto;
  vertical-align: text-top;
}
.mntrng_target .target_body .target_result {
  margin-top: 2rem;
}
.mntrng_target .target_body .target_result .level {
  height: 7rem;
}
.mntrng_target .target_body .target_result .level span,
.mntrng_target .target_body .target_result .level .bar {
  height: 7rem;
}
.mntrng_target .target_body .target_result .level_comment {
  display: flex;
  margin-top: 1rem;
  font-size: 1rem;
  list-style: none;
}
.mntrng_target .target_body .target_result .level_comment li {
  width: 25%;
  list-style: none;
  line-height: 1.4;
  text-align: center;
}
.mntrng_target + .btn_secondary {
  margin-top: 3rem;
}
.mntrng_comment .coach {
  position: relative;
}
.mntrng_comment .coach .thumnail {
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.mntrng_comment .coach .thumnail img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
.mntrng_comment .coach .comment {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 2rem;
  padding-left: 50px;
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}
.mntrng_comment .coach .comment .name {
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: #999999;
}
.mntrng_comment .coach .comment .balloon {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  border-top-left-radius: 0;
  font-size: 1.3rem;
  color: #333333;
}
/* PERFORMANCE */
.record_head {
  padding: 1.5rem;
  font-size: 1.6rem;
  text-align: center;
}
.record_head .slect_record {
  display: flex;
  padding: 1.5rem 0;
  justify-content: space-between;
}
.record_head .slect_record .select_year,
.record_head .slect_record .select_month {
  position: relative;
  width: 38%;
}
.record_head .slect_record .select_year select,
.record_head .slect_record .select_month select {
  margin: 0;
  border: 1px solid #cccccc;
  line-height: 2rem;
}
.record_head .slect_record .select_year::after,
.record_head .slect_record .select_month::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto 0;
  border-top: 2px solid #e8d2d2;
  border-right: 2px solid #e8d2d2;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
}
.record_head .slect_record .select_month {
  width: 28%;
}
.record_head .slect_record .btn_primary {
  width: 28%;
  margin: 0;
}
.record_data {
  width: 92%;
  margin: 0 auto 1.0rem;
  text-align: center;
  position: relative;
}
.record_data .inner {
  display: flex;
  margin-bottom: 1.0rem;
}
.record_data .achieve_rate {
  width: 50%;
  border-right: 1px solid #cccccc;
}
.record_data .step_rate {
  width: 50%;
}
.record_data .status {
  color: #999999;
}
.record_data .status strong {
  margin-right: 0.5rem;
  font-size: 2.8rem;
  color: #333333;
  line-height: 1.2;
}
.menu_record {
  margin-bottom: 3rem;
}
.menu_record li {
  list-style: none;
  border-bottom: 1px solid #e6e6e6;
}
.menu_record li:last-child {
  border-bottom: none;
}
.menu_record .record_togglebtn,
.menu_record .record_list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 7rem;
  padding: 0 3.5rem 0 1.5rem;
  background-color: #fff;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  position: relative;
}
.menu_record .record_togglebtn::after,
.menu_record .record_list::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  transition: all 0.5s;
}
.menu_record .record_togglebtn.open::after,
.menu_record .record_list.open::after {
  transform: rotate(-45deg);
}
.menu_record .record_togglebtn .elmnt_icon,
.menu_record .record_list .elmnt_icon {
  width: 10%;
  margin: auto 0;
}
.menu_record .record_togglebtn .elmnt_icon .diamond,
.menu_record .record_list .elmnt_icon .diamond {
  width: 3rem;
  height: 3rem;
}
.menu_record .record_togglebtn .elmnt_icon .icon_svg,
.menu_record .record_list .elmnt_icon .icon_svg {
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  fill: #bb7777;
}
.menu_record .record_togglebtn .elmnt_icon.rank1,
.menu_record .record_list .elmnt_icon.rank1 {
  /* BRONZ */
}
.menu_record .record_togglebtn .elmnt_icon.rank1 .diamond,
.menu_record .record_list .elmnt_icon.rank1 .diamond {
  background: linear-gradient(135deg, #c1a28f 0%, #955631 100%);
}
.menu_record .record_togglebtn .elmnt_icon.rank1 .icon_svg,
.menu_record .record_list .elmnt_icon.rank1 .icon_svg {
  fill: #fff;
}
.menu_record .record_togglebtn .elmnt_icon.rank2,
.menu_record .record_list .elmnt_icon.rank2 {
  /* SILVER */
}
.menu_record .record_togglebtn .elmnt_icon.rank2 .diamond,
.menu_record .record_list .elmnt_icon.rank2 .diamond {
  background: linear-gradient(135deg, #b1b9c1 0%, #4f6174 100%);
}
.menu_record .record_togglebtn .elmnt_icon.rank2 .icon_svg,
.menu_record .record_list .elmnt_icon.rank2 .icon_svg {
  fill: #fff;
}
.menu_record .record_togglebtn .elmnt_icon.rank3,
.menu_record .record_list .elmnt_icon.rank3 {
  /* GOLD */
}
.menu_record .record_togglebtn .elmnt_icon.rank3 .diamond,
.menu_record .record_list .elmnt_icon.rank3 .diamond {
  background: linear-gradient(135deg, #c9be81 0%, #7e6f46 100%);
}
.menu_record .record_togglebtn .elmnt_icon.rank3 .icon_svg,
.menu_record .record_list .elmnt_icon.rank3 .icon_svg {
  fill: #fff;
}
.menu_record .record_togglebtn .elmnt_name,
.menu_record .record_list .elmnt_name {
  width: 70%;
  margin: auto 0 auto 5%;
  font-size: 1.4rem;
  position: relative;
}
.menu_record .record_togglebtn .elmnt_name span,
.menu_record .record_list .elmnt_name span {
  font-size: 1rem;
}
.menu_record .record_togglebtn .elmnt_name .ganbaru,
.menu_record .record_list .elmnt_name .ganbaru {
  display: none;
  width: 34px;
  height: 30px;
  margin: auto 0;
  background: url("../img/icon_ganbaru.svg") no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5%;
}
.menu_record .record_togglebtn .upcount,
.menu_record .record_list .upcount {
  width: 15%;
  margin: auto 0;
}
.menu_record .record_togglebtn .upcount img,
.menu_record .record_list .upcount img {
  width: 12px;
  height: auto;
  margin-right: 0.5rem;
}
.menu_record .record_togglebtn.focus .elmnt_name .ganbaru,
.menu_record .record_list.focus .elmnt_name .ganbaru {
  /* がんばるアイコン表示　*/
  display: block;
}
.menu_record .record_list {
  padding: 0 1.5rem 0 1.5rem;
}
.menu_record .record_list::after {
  content: none;
}
.menu_record .record_list .elmnt_name {
  width: 85%;
}
.menu_record .record_list.focus {
  background-color: #FED9D9;
}
.menu_record .checkbox_wrap .record_list .check {
  width: 10%;
  position: relative;
}
.menu_record .checkbox_wrap .record_list .check input {
  display: none;
}
.menu_record .checkbox_wrap .record_list .check input:checked + .checkmark::after {
  display: block;
}
.menu_record .checkbox_wrap .record_list .check .checkmark {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto 0;
  border: 1px solid #e6e6e6;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.menu_record .checkbox_wrap .record_list .check .checkmark::after {
  content: "";
  display: none;
  width: 15px;
  height: 10px;
  margin-left: 4px;
  border-left: 4px solid #8e1d1d;
  border-bottom: 4px solid #8e1d1d;
  transform: rotate(-45deg);
}
.menu_record .checkbox_wrap .record_list .elmnt_name {
  width: 75%;
}
.menu_record .rec_arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.5rem;
  background: url("../img/rec_arrow_up.svg") no-repeat center top;
  background-size: 100%;
}
.menu_record .record_togglebody {
  display: none;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 4%;
}
.menu_record .record_togglebody .kf_item {
  /* キーファクターの矢印表示 */
}
.menu_record .record_togglebody .kf_item.uplv1 .rec_arrow.lv1,
.menu_record .record_togglebody .kf_item.dwnlv1 .rec_arrow.lv1,
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow.lv1 {
  display: block;
}
.menu_record .record_togglebody .kf_item.uplv2 .rec_arrow.lv2,
.menu_record .record_togglebody .kf_item.dwnlv2 .rec_arrow.lv2,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow.lv2 {
  display: block;
}
.menu_record .record_togglebody .kf_item.uplv3 .rec_arrow.lv3,
.menu_record .record_togglebody .kf_item.dwnlv3 .rec_arrow.lv3,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow.lv3 {
  display: block;
}
.menu_record .record_togglebody .kf_item.uplv4 .rec_arrow.lv4,
.menu_record .record_togglebody .kf_item.dwnlv4 .rec_arrow.lv4,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow.lv4 {
  display: block;
}
.menu_record .record_togglebody .kf_item.dwnlv1 .rec_arrow,
.menu_record .record_togglebody .kf_item.dwnlv2 .rec_arrow,
.menu_record .record_togglebody .kf_item.dwnlv3 .rec_arrow,
.menu_record .record_togglebody .kf_item.dwnlv4 .rec_arrow {
  background: url("../img/rec_arrow_down.svg") no-repeat center top;
}
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow {
  width: 24px !important;
  background: url("../img/rec_arrow_keep.svg") no-repeat center top;
}
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow.lv1,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow.lv1,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow.lv1,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow.lv1 {
  left: calc(12.5% - 12px) !important;
}
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow.lv2,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow.lv2,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow.lv2,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow.lv2 {
  left: calc(37.5% - 12px) !important;
}
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow.lv3,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow.lv3,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow.lv3,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow.lv3 {
  left: calc(62.5% - 12px) !important;
}
.menu_record .record_togglebody .kf_item.keep1 .rec_arrow.lv4,
.menu_record .record_togglebody .kf_item.keep2 .rec_arrow.lv4,
.menu_record .record_togglebody .kf_item.keep3 .rec_arrow.lv4,
.menu_record .record_togglebody .kf_item.keep4 .rec_arrow.lv4 {
  left: calc(87.5% - 12px) !important;
}
.menu_record .record_togglebody .kf_item .level .rec_arrow {
  display: none;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -7px;
  z-index: 100;
}
.menu_record .record_togglebody .kf_item .level .rec_arrow.lv1 {
  left: calc(12.5% - 7.5px);
}
.menu_record .record_togglebody .kf_item .level .rec_arrow.lv2 {
  left: calc(37.5% - 7.5px);
}
.menu_record .record_togglebody .kf_item .level .rec_arrow.lv3 {
  left: calc(62.5% - 7.5px);
}
.menu_record .record_togglebody .kf_item .level .rec_arrow.lv4 {
  left: calc(87.5% - 7.5px);
}
/* PROFILE */
.prfl_list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #cccccc;
}
.prfl_list dt {
  width: 30%;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-top: 1px solid #cccccc;
  line-height: 1.4;
  color: #999999;
}
.prfl_list dd {
  width: 70%;
  padding: 1.5rem;
  border-top: 1px solid #cccccc;
  line-height: 1.4;
  font-weight: bold;
}
/* OTHER */
.chart {
  padding: 3rem 1rem 1rem;
}
.thanks {
  padding: 3rem 0;
}
/* LESS Document */
.contents input[type='text'],
.contents textarea,
.contents select {
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 2px solid #fff;
  border-radius: 8px;
  background-color: #fff;
  font-size: 1.6rem;
  font-family: inherit;
  resize: vertical;
  -webkit-appearance: none;
  color: #333333;
}
.contents input[type='text']:focus,
.contents textarea:focus,
.contents select:focus {
  border: 2px solid #8e1d1d;
  outline: 0;
}
.contents input[type='text'],
.contents select {
  margin-bottom: 2rem;
  font-size: 1.6rem;
}
.contents select.w30 {
  width: 30%;
}
.contents select.w20 {
  width: 20%;
}
.contents select + select {
  margin-left: 1rem;
}
.contents button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.contents button.btn_primary {
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #001132;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 4rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.contents button.btn_secondary {
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #001132;
  font-weight: bold;
  line-height: 4rem;
  color: #001132;
  text-align: center;
  text-decoration: none;
}
.contents button.w50 {
  width: 50%;
}
.contents .radiobtn {
  display: flex;
  margin-bottom: 2rem;
  border-radius: 6px;
  border: 1px solid #cccccc;
  overflow: hidden;
}
.contents .radiobtn div {
  position: relative;
  flex: 1;
}
.contents .radiobtn input {
  width: 100%;
  height: 5rem;
  margin: 0;
  opacity: 0;
}
.contents .radiobtn label {
  display: flex;
  width: 100%;
  height: 100%;
  border-right: 1px solid #cccccc;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 1.4;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.contents .radiobtn div:last-child label {
  border-right: 0;
}
.contents .radiobtn input:checked + label {
  background-color: #8e1d1d;
  color: #fff;
}
.contents .q_group {
  margin: 0 0 4rem;
}
.contents .frm_btnarea {
  display: flex;
  width: 92%;
  margin: 0 auto;
  justify-content: space-between;
}
.contents .frm_btnarea .btn_primary {
  width: 68%;
}
.contents .frm_btnarea .btn_secondary {
  width: 28%;
}
::placeholder {
  color: #ddd;
}
::-ms-input-placeholder {
  color: #ddd;
}
:-ms-input-placeholder {
  color: #ddd;
}
/* CLUB
----------------------------------- */
.blg_item {
  width: 100%;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.blg_item a {
  display: inline-block;
  display: flex;
  text-decoration: none;
  position: relative;
}
.blg_item a .blg_image {
  width: 35%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-size: cover;
  background-position: center center;
}
.blg_item a .blg_info {
  width: 65%;
  padding: 1rem 1.5rem;
}
.blg_item a .blg_info .blg_title {
  margin-bottom: 0.5rem;
  font-weight: bold;
  line-height: 1.4;
  color: #333333;
}
.blg_item a .blg_info .blg_date,
.blg_item a .blg_info .blg_category {
  font-size: 1.2rem;
  color: #999999;
}
.blg_item.update .corner_new {
  display: block;
}
.corner_new {
  display: none;
  padding: 0.3rem 1.2rem;
  background-color: #8e1d1d;
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2rem;
  color: #fff;
}
/* PHILOSOPHY */
.ph_item {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #cccccc;
}
/* PLAYMODEL */
.playmodel {
  margin: 2rem 0;
}
.playmodel svg {
  width: 100%;
  height: auto;
}
/* MOVIE */
.menu_movie {
  background-color: #fff;
}
.menu_movie li {
  list-style: none;
  border-bottom: 1px solid #e6e6e6;
  line-height: 2;
}
.menu_movie li:last-child {
  border-bottom: none;
}
.menu_movie li a,
.menu_movie li div {
  display: block;
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  line-height: 3;
  position: relative;
}
.menu_movie li a::after,
.menu_movie li div::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  transition: all 0.5s;
}
.menu_movie li a span,
.menu_movie li div span {
  padding-left: 1rem;
  font-size: 1.2rem;
  font-weight: normal;
  color: #999999;
}
.menu_movie li a .new,
.menu_movie li div .new {
  display: inline-block;
  width: 32px;
  margin-left: 1rem;
  padding: 0.4rem 0;
  background-color: #8e1d1d;
  border-radius: 2px;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1;
  text-align: center;
}
.menu_movie li .mv_togglebtn::after {
  transform: rotate(135deg);
}
.menu_movie li .mv_togglebtn.open::after {
  transform: rotate(-45deg);
}
.menu_movie li .mv_togglebody {
  display: none;
}
.menu_movie li .submenu {
  background-color: #edeef0;
}
.menu_movie li .thirdmenu {
  background-color: #dcdee2;
}
.menu_movie li .thirdmenu li {
  border-bottom: 1px solid #d0d0d0;
}
.menu_movie li .thirdmenu li:last-child {
  border-bottom: none;
}
.mv_item {
  width: 100%;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}
.mv_item .vimeo {
  width: 100%;
  padding-top: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  background: #000;
  position: relative;
  overflow: hidden;
}
.mv_item .vimeo iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mv_item .vimeo .btn_play {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
}
.mv_item .vimeo .btn_play::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: url("../img/video_play.svg") no-repeat center / 61px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 16;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.mv_item .vimeo .btn_play:hover::before {
  background-color: rgba(0, 0, 0, 0.3);
}
.mv_item .vimeo .thumb_img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.mv_item .mv_info {
  padding: 1.5rem;
}
.mv_item .mv_info .mv_title {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.mv_item .mv_info .mv_date {
  font-size: 1.2rem;
  color: #999999;
}
.mv_item.update .corner_new {
  display: block;
}
/* BLOG */
.blg_tag {
  padding: 2rem 4%;
  background-color: #fff;
}
.blg_tag .tag {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
  border: 1px solid #8e1d1d;
  border-radius: 6px;
  font-size: 1.2rem;
  text-decoration: none;
  color: #8e1d1d;
}
.blg_tag .tag.select {
  background-color: #8e1d1d;
  color: #fff;
}
.blg_tag .btn_primary {
  margin-top: 1rem;
}
.pst_date,
.pst_cat {
  margin-right: 1rem;
  font-size: 1.2rem;
  color: #999999;
}
.pst_eyecatch {
  margin: 2rem 0;
}
.pst_eyecatch img {
  width: 100%;
  border-radius: 8px;
}
/* terms */
.terms_li {
  margin-bottom: 2rem;
  margin-left: 1.5em;
}
.terms_li li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
/* coach */
.menu_coach {
  background-color: #fff;
}
.menu_coach li {
  list-style: none;
  border-bottom: 1px solid #e6e6e6;
  line-height: 2;
}
.menu_coach li:last-child {
  border-bottom: none;
}
.menu_coach li a {
  display: block;
  width: 100%;
  padding: 1rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  color: #333333;
  line-height: 3;
  position: relative;
}
.menu_coach li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  transition: all 0.5s;
}
.menu_coach li a .image {
  float: left;
  width: 36px;
  height: 36px;
}
.menu_coach li a .image img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
.menu_coach li a .profile {
  padding-left: 48px;
}
.menu_coach li a .profile .info {
  font-size: 1.2rem;
  font-weight: normal;
  color: #999999;
}
.menu_coach li a .profile p {
  margin-bottom: 0.5em;
  line-height: 1.2;
}
.coach_icon {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 1rem;
  line-height: 1;
}
.coach_photo {
  width: 150px;
  height: 150px;
  margin: 4rem auto 2rem;
}
.coach_photo img {
  width: 150px;
  height: 150px;
  border-radius: 75px;
}
.coach_head {
  margin: 0 auto 4rem;
  font-size: 2rem;
  text-align: center;
}
.coach_head .coach_name span {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  color: #999999;
}
.coach_head .coach_name::after {
  content: "\A";
  white-space: pre;
}
.coach_head .coach_icon {
  margin-left: 0;
}
/* MODAL
----------------------------------- */
.modal_contents {
  display: none;
  width: 92%;
  position: fixed;
  z-index: 1600;
}
.modal_contents .inner {
  max-height: 400px;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  overflow: scroll;
  position: relative;
}
.modal_contents .modal_title {
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1.4;
}
.modal_contents .modal_title p {
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.modal_contents .modal_title h3 {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.modal_contents .modal_title.activity p,
.modal_contents .modal_title.activity h3 {
  color: #8e1d1d;
}
.modal_contents .modal_title.tactics p,
.modal_contents .modal_title.tactics h3 {
  color: #001132;
}
.modal_contents li {
  list-style: none;
  margin-bottom: 1rem;
}
.modal_contents .modal_close {
  width: 44px;
  height: 44px;
  position: absolute;
  top: -44px;
  right: -10px;
}
.modal_contents .modal_close::before,
.modal_contents .modal_close::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background-color: #cccccc;
  border-radius: 1px;
  position: absolute;
  right: 0;
  left: 0;
}
.modal_contents .modal_close::before {
  top: 14px;
  transform: translateY(7px) rotate(-45deg);
}
.modal_contents .modal_close::after {
  bottom: 14px;
  transform: translateY(-7px) rotate(45deg);
}
.modal_overlay {
  content: "";
  width: 0%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  transition: opacity 1s;
}
.modal_overlay.active {
  width: 100%;
  height: 100%;
  opacity: 1;
}
/* FOOT
----------------------------------- */
.footer {
  margin-top: 3rem;
  margin-bottom: 10rem;
  padding-top: 2rem;
  border-top: 1px solid #ccc;
  text-align: center;
}
.footer p {
  font-size: 1.2rem;
}
.footer p .logo_suevoli {
  width: 70px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Form errors */
form .error {
    background: #FFDACC;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
}
form .error-message {
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    border: none;
    background: none;
    margin: 0;
    padding-left: 4px;
    padding-right: 0;
}
form .error,
form .error-message {
    color: #9E2424;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}