@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Nunito");
a:hover {
  text-decoration: none;
}

/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit;
  /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

html {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0 auto;
  background-color: #f4f6f9;
  line-height: 1.5;
  font-size: 100%;
  font-weight: normal;
  color: #231815;
  text-align: justify;
  word-wrap: break-word;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  background: #EEF4FF;
}

ul {
  list-style: none;
}

a {
  color: #231815;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

#loader-bg {
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: #999999;
}

/* -----------------------------------
common
----------------------------------- */
main {
  width: 100%;
  display: flex;
}

/* -----------------------------------
animation
----------------------------------- */
#loader-bg {
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

@keyframes logo_a {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes logo_b {
  0% {
    opacity: 0;
    transform: translateX(-40%);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes scales {
  0% {
    opacity: 1;
    transform: scale(1);
    overflow: hidden;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    visibility: hidden;
    z-index: -10;
    display: none;
  }
}
.loading {
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  background-color: #ffffff;
  animation: scales 1000ms ease-out 4500ms 1 normal forwards;
}
.loading .line_anima {
  width: 90%;
  max-width: 900px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.loading .line_anima #svg-animation {
  max-width: 100%;
  height: auto;
}
.loading .line_anima #svg-animation image {
  width: 100%;
}
.loading .line_anima #svg-animation .st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
}
.loading .logo_anima {
  width: 90%;
  max-width: 900px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading .logo_anima .logo_a {
  position: relative;
  z-index: 2;
  width: 31%;
  animation: logo_a 800ms ease-out 2200ms 1 normal both;
}
.loading .logo_anima .logo_b {
  position: relative;
  z-index: 1;
  width: 69%;
  animation: logo_b 1200ms cubic-bezier(0.97, 0.21, 0.9, 0.88) 2300ms 1 normal both;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

/* -----------------------------------
side-menu
----------------------------------- */
.side_wrap {
  width: 30%;
  height: 100vh;
  position: fixed;
  border-right: 1px solid white;
  padding: 20px 3%;
  top: 0;
  left: 0;
  box-shadow: 5px 0px 5px rgba(119, 138, 208, 0.4);
  overflow: scroll;
}
.side_wrap .logo {
  display: block;
  margin: 2vh auto 0 auto;
  width: 80%;
  max-width: 200px;
}
.side_wrap .side_menu {
  border-bottom: 2px solid #DEDDEB;
}
.side_wrap .side_menu a {
  display: flex;
  margin: 3vh 0;
  padding: 15px 8%;
  transition: 300ms;
  border-radius: 10px;
}
.side_wrap .side_menu a img {
  width: 20px;
  margin-right: 20px;
}
.side_wrap .side_menu a .icon_h {
  display: none;
}
.side_wrap .side_menu a p {
  color: #0037AA;
  font-size: 1rem;
  font-weight: 400;
}
.side_wrap .side_menu a:hover {
  background: #69a1ff;
  background-image: url(/image/gra_back.png);
  background-size: cover;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.side_wrap .side_menu a:hover .icon {
  display: none;
}
.side_wrap .side_menu a:hover .icon_h {
  display: block;
}
.side_wrap .side_menu a:hover p {
  color: #ffffff;
}
.side_wrap .side_menu_un {
  border-bottom: 0px solid #DEDDEB;
}
.side_wrap .side_menu_un a p {
  color: #5B80C0;
}
.side_wrap .side_menu_2 {
  margin-top: 40px;
}
.side_wrap .side_menu_2 a {
  display: block;
  margin: 1.6vh 0;
  padding: 15px 8%;
  transition: 300ms;
  position: relative;
}
.side_wrap .side_menu_2 a p {
  color: #5B80C0;
  font-size: 1rem;
  font-weight: 400;
}
.side_wrap .side_menu_2 a:before {
  content: "";
  display: none;
  width: 100%;
  height: 35px;
  background: url(/image/arrow_r2.svg) no-repeat;
  background-size: 60%;
  background-position: right bottom;
  position: absolute;
  right: -10px;
}
.side_wrap .side_menu_2 a:hover:before {
  display: block;
}

/* -----------------------------------
Dashboard
----------------------------------- */
.main_wrap {
  width: 70%;
  min-height: 100vh;
  margin-left: 30%;
  padding: 20px 3% 40px 3%;
  background-image: url(/image/main_back.png);
  background-size: cover;
  position: relative;
  z-index: 0;
  /*
  	&::before {
  		content: '';
  		position: absolute;
  		top: -5px;
  		bottom: -5px;
  		left: -5px;
  		right: -5px;
  		background: inherit;
  		filter: blur(50px);
  		z-index: -1;
  	}
  */
}
.main_wrap .page_tit {
  margin: 20px 0;
}
.main_wrap .page_tit h6 {
  color: #0037AA;
  font-weight: 300;
}
.main_wrap .page_tit h3 {
  font-size: 2.5rem;
  font-weight: 600;
}
.main_wrap .page_tit p {
  font-size: 0.9rem;
  margin-top: 15px;
  line-height: 1.8;
}
.main_wrap .card_flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.main_wrap .card_flex .card {
  display: block;
  width: 48%;
  background: #ffffff;
  border-radius: 20px;
  transition: box-shadow 0.3s;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
  padding: 30px;
  padding-bottom: 110px;
  position: relative;
}
.main_wrap .card_flex .card h4 {
  color: #0037AA;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.main_wrap .card_flex .card p {
  color: #8478AE;
  font-size: 0.9rem;
  line-height: 1.8;
  position: relative;
  z-index: 2;
}
.main_wrap .card_flex .card .card_back {
  position: absolute;
  width: 45%;
  right: 15px;
  bottom: 15px;
  z-index: 0;
}
.main_wrap .card_flex .card:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url(/image/arrow_r.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 20px;
  right: 20px;
}
.main_wrap .card_flex .card:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}
.main_wrap .under_flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.main_wrap .under_flex .mydeta {
  width: 48%;
  padding: 30px 15px;
}
.main_wrap .under_flex .mydeta .studytime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #dbddf7;
}
.main_wrap .under_flex .mydeta .studytime .st_tit {
  margin-right: 30px;
}
.main_wrap .under_flex .mydeta .studytime .st_tit h5 {
  color: #0037AA;
}
.main_wrap .under_flex .mydeta .studytime .st_txt .st_txt_con {
  display: flex;
  margin-bottom: 10px;
}
.main_wrap .under_flex .mydeta .studytime .st_txt .st_txt_con h6 {
  margin-right: 15px;
}
.main_wrap .under_flex .mydeta .studytime .st_txt .st_txt_con p {
  color: #0037AA;
}
.main_wrap .under_flex .mydeta .studytime .st_txt .st_txt_con p span {
  margin-left: 5px;
}
.main_wrap .under_flex .mydeta .ranking {
  border-bottom: 0px solid #dbddf7;
  padding-bottom: 0px;
}
.main_wrap .under_flex .mydeta .ranking .st_txt {
  width: 40%;
}
.main_wrap .under_flex .mydeta .ranking .st_txt .st_txt_con {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dbddf7;
  padding-bottom: 10px;
}
.main_wrap .under_flex .mydeta .ranking .st_txt .st_txt_con:last-child {
  border: 0px;
}
.main_wrap .under_flex .card_min {
  width: 48%;
}
.main_wrap .under_flex .card_min .active {
  margin-top: 30px;
}
.main_wrap .under_flex .card_min .card {
  display: block;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  transition: box-shadow 0.3s;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
  padding: 20px;
  margin-top: 20px;
  position: relative;
}
.main_wrap .under_flex .card_min .card h4 {
  color: #0037AA;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.main_wrap .under_flex .card_min .card p {
  color: #8478AE;
  font-size: 0.9rem;
  line-height: 1.8;
}
.main_wrap .under_flex .card_min .card .step {
  display: flex;
  justify-content: flex-end;
}
.main_wrap .under_flex .card_min .card .step p {
  font-weight: 600;
  margin-right: 10px;
}
.main_wrap .under_flex .card_min .card .step h5 {
  color: #ffffff;
  background-color: #0037AA;
  padding: 5px 15px;
  border-radius: 25px;
}
.main_wrap .under_flex .card_min .card:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url(/image/arrow_r.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 20px;
  right: 20px;
}
.main_wrap .under_flex .card_min .card:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}
.main_wrap .under_flex .card_min .card_min_flex {
  display: flex;
  justify-content: space-between;
}
.main_wrap .under_flex .card_min .card_min_flex .card {
  width: 48%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}
.main_wrap .under_flex .card_min .card_min_flex .card h4 {
  font-size: 1.1rem;
  margin-bottom: 0;
}
.main_wrap .under_flex .card_min .card_min_flex .card img {
  width: 20px;
}
.main_wrap .under_flex .card_min .card_min_flex .card:before {
  display: none;
}

/* -----------------------------------
1on1 Coaching
----------------------------------- */
.howto {
  margin-top: 30px;
  margin-bottom: 40px;
}
.howto h3 {
  color: #0037AA;
  border-bottom: 1px solid #0037AA;
  font-size: 1.4rem;
}
.howto .howto_img {
  width: 100%;
  margin-top: 30px;
}
.howto .howto_con {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
  padding: 20px;
  margin-top: 30px;
}
.howto .howto_con .calendar_con {
  width: 100%;
  background: #ececec;
  height: 400px;
  overflow: scroll;
}
.howto .howto_con .calendar_con .tg {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.howto .howto_con .calendar_con .tg thead .weekly {
  padding: 10px 15px;
  text-align: center;
}
.howto .howto_con .calendar_con .tg thead .next_week {
  cursor: pointer;
  margin: 0 30px;
  background-color: #e0ecff;
  background: linear-gradient(30deg, #a8cfff 0%, #ebeeff 49%, #d0cfff 100%);
}
.howto .howto_con .calendar_con .tg thead .prev_week {
  cursor: pointer;
  margin: 0 25px;
  background-color: #e0ecff;
  background: linear-gradient(30deg, #a8cfff 0%, #ebeeff 49%, #d0cfff 100%);
}
.howto .howto_con .calendar_con .tg .td, .howto .howto_con .calendar_con .tg .th {
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  font-weight: normal;
}
.howto .howto_con .calendar_con .tg .timeTable {
  width: 100px;
}
.howto .howto_con .calendar_con .tg .status, .howto .howto_con .calendar_con .tg .timeTable, .howto .howto_con .calendar_con .tg .date {
  border-color: #e5e5e9;
  color: #333333;
  text-align: center;
  vertical-align: top;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  overflow: hidden;
  padding: 5px 5px;
}
.howto .howto_con .calendar_con .tg .status, .howto .howto_con .calendar_con .tg .timeTable {
  background-color: #ffffff;
}
.howto .howto_con .calendar_con .tg .date {
  background-color: #f9fafc;
}
.howto .howto_con .calendar_con .tg .status a {
  display: block;
  text-align: center;
}
.howto .howto_con .point_con {
  padding: 30px 0;
}
.howto .howto_con .point_con p {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.howto .howto_con .point_con .reserve {
  display: block;
  margin: 30px auto;
  width: 90%;
  max-width: 500px;
  background: #D9F5FF;
  padding: 25px 10px;
}
.howto .howto_con .point_con .reserve h5 {
  text-align: center;
  font-size: 1.3rem;
}
.howto .howto_con .point_con .point {
  display: flex;
  justify-content: center;
  align-items: center;
}
.howto .howto_con .point_con .point p {
  font-size: 1.1rem;
  margin-right: 20px;
}
.howto .howto_con .point_con .point h4 {
  font-size: 1.1rem;
  background: #00BFFF;
  border-radius: 10px;
  color: #ffffff;
  padding: 5px 15px;
}
.howto .howto_con .point_con .reserve_btn {
  display: block;
  width: 150px;
  margin: 60px auto 0 auto;
  color: #ffffff;
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: #0037AA;
  text-align: center;
  padding: 10px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.8), -5px -5px 10px rgba(248, 253, 255, 0.9), inset 5px 5px 10px transparent, inset -5px -5px 5px transparent;
  transition: box-shadow 0.3s;
}
.howto .howto_con .point_con .reserve_btn:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}
.howto .howto_con .completion_con {
  padding: 30px 0;
}
.howto .howto_con .completion_con p {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.howto .howto_con .completion_con .point {
  width: 200px;
  display: block;
  margin: 30px auto 60px auto;
}
.howto .howto_con .completion_con .point h4 {
  text-align: center;
  font-size: 1rem;
  background: #00BFFF;
  border-radius: 10px;
  color: #ffffff;
  padding: 5px 15px;
}
.howto .howto_con .completion_con .reserve_btn {
  display: block;
  width: 150px;
  margin: 30px auto 0 auto;
  color: #ffffff;
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: #0037AA;
  text-align: center;
  padding: 10px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.8), -5px -5px 10px rgba(248, 253, 255, 0.9), inset 5px 5px 10px transparent, inset -5px -5px 5px transparent;
  transition: box-shadow 0.3s;
}
.howto .howto_con .completion_con .reserve_btn:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}

/* -----------------------------------
Will Knowledge
----------------------------------- */
.report {
  margin-top: 40px;
}
.report .report_tit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #0037AA;
}
.report .report_tit h3 {
  color: #0037AA;
  font-size: 1.4rem;
}
.report .report_tit p {
  color: #0037AA;
  font-size: 1.1rem;
  font-weight: 600;
}

.form {
  width: 100%;
  padding: 30px;
}
.form .form_select {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
@media screen and (max-width: 1300px) {
  .form .form_select {
    display: block;
  }
}
.form .form_select .division {
  display: flex;
  align-items: center;
  border-right: 1px solid #00BFFF;
  padding-right: 30px;
  margin-right: 20px;
}
@media screen and (max-width: 1300px) {
  .form .form_select .division {
    border-right: 0px solid #00BFFF;
  }
}
.form .form_select .division h4 {
  margin-right: 15px;
}
.form .form_select .study_time {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1300px) {
  .form .form_select .study_time {
    margin-top: 30px;
  }
}
.form .form_select .study_time .study_time_con {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.form .form_select .study_time .study_time_con h4 {
  margin-right: 15px;
}
.form .form_select .study_time .study_time_con .container {
  padding-right: 30px;
  margin-right: 20px;
}
.form .detail {
  display: flex;
  margin-top: 40px;
}
.form .detail h4 {
  margin-right: 15px;
  width: 80px;
}
.form .detail textarea {
  width: 100%;
  border: none;
  font-size: 0.9rem;
  border-radius: 20px;
  background-color: #ffffff;
  height: 260px;
  padding: 20px 20px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
}
.form .container {
  position: relative;
  width: 110px;
}
.form .container select {
  appearance: none;
  border: none;
  border-radius: 20px;
  height: 40px;
  padding-left: 20px;
  font-size: 0.9rem;
  width: 120px;
  background-color: #ffffff;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
}
.form .container select::-ms-expand {
  display: none;
}
.form .container::before {
  border-bottom: 4.5px solid red;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 9px;
  top: 10px;
  width: 0;
}
.form .container::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid red;
  content: "";
  position: absolute;
  right: 9px;
  top: 21px;
  width: 0;
}
.form .enter_btn {
  display: block;
  width: 150px;
  margin: 40px auto 0 auto;
  color: #ffffff;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: #0037AA;
  text-align: center;
  padding: 5px 10px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.8), -5px -5px 10px rgba(248, 253, 255, 0.9), inset 5px 5px 10px transparent, inset -5px -5px 5px transparent;
  transition: box-shadow 0.3s;
}
.form .enter_btn:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}
.form .list_btn {
  display: block;
  width: 180px;
  margin: 40px auto 0 auto;
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 2px;
  font-weight: 200;
  background: #00BFFF;
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.8), -5px -5px 10px rgba(248, 253, 255, 0.9), inset 5px 5px 10px transparent, inset -5px -5px 5px transparent;
  transition: box-shadow 0.3s;
}
.form .list_btn:hover {
  box-shadow: 5px 5px 10px transparent, -5px -5px 10px transparent, inset 5px 5px 10px rgba(148, 163, 215, 0.5), inset -5px -5px 10px rgba(248, 253, 255, 0.8);
}

.study_times {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.study_times .st_con {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  border-radius: 30px;
  background: #ffffff;
  margin-left: 20px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
}
.study_times .st_con p {
  font-size: 1rem;
  margin-right: 20px;
}
.study_times .st_con h5 {
  color: #0037AA;
  font-weight: 600;
}

.will_list {
  padding: 30px 40px 20px 40px;
  border-radius: 30px;
  background: #ffffff;
  margin-top: 40px;
  box-shadow: 5px 5px 10px rgba(148, 163, 215, 0.5), -5px -5px 10px rgba(248, 253, 255, 0.8), inset 10px 10px 30px transparent, inset -5px -5px 5px transparent;
  position: relative;
}
.will_list .list_day {
  position: absolute;
  top: 15px;
  right: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
.will_list .list_day h6 {
  color: #F15A24;
  margin-right: 20px;
  font-size: 1.1rem;
}
.will_list .list_day h5 {
  color: #2E3192;
  font-size: 1.1rem;
}
.will_list .list_day h5 span {
  font-size: 1.4rem;
}
.will_list table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}
.will_list table td, .will_list table th {
  padding: 15px;
}
.will_list table th {
  color: #333333;
  border-bottom: 1px solid #5681cb;
}
.will_list table td {
  font-size: 1rem;
  font-weight: 600;
  color: #2E3192;
  border-bottom: 1px solid #80DFFF;
}
.will_list table td:last-child {
  width: 170px;
}
.will_list table td a {
  font-size: 0.8rem;
  background: #0037AA;
  color: #ffffff;
  padding: 7px 10px;
  border-radius: 20px;
  margin: 0 5px;
}
.will_list table td a:last-child {
  background: #00BFFF;
}
.will_list table tr:last-child td {
  border-bottom: 0px solid #80DFFF;
}

/* -----------------------------------
Curriculum
----------------------------------- */
.curriculum_tit {
  display: flex;
  justify-content: space-between;
}
.curriculum_tit .cur_btns {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5%;
}
.curriculum_tit .cur_btns a {
  color: #0051C0;
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 5px 15px;
  border-radius: 20px;
  background: #ffffff;
  margin: 10px 5px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.curriculum_tit .cur_btns a:hover {
  box-shadow: 3px 3px 5px transparent, -3px -3px 5px transparent, inset 3px 3px 5px rgba(148, 163, 215, 0.5), inset -3px -3px 5px rgba(248, 253, 255, 0.8);
}

.step_con {
  padding: 20px 50px 15px 50px;
  border-radius: 20px;
  background: #ffffff;
  margin-top: 70px;
  position: relative;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
  /*
  	.rotate {
  		transform: rotateX( 180deg);
  	}
  */
}
.step_con .step_txt {
  width: 100px;
  text-align: center;
  background: #0051C0;
  color: #ffffff;
  padding: 5px 10px;
  position: absolute;
  top: -20px;
  left: 0;
  border-radius: 20px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
}
.step_con .clock {
  display: flex;
  justify-content: flex-end;
}
.step_con .clock img {
  width: 15px;
}
.step_con .clock p {
  margin-left: 10px;
  color: #8478AE;
}
.step_con .cur_txt h4 {
  color: #2E3192;
  font-size: 1.8rem;
  border-bottom: 1px solid #808fa6;
  padding-bottom: 10px;
  margin-bottom: 20px;
  position: relative;
}
.step_con .cur_txt h4 span {
  display: none;
  color: #b2ecff;
  position: absolute;
  right: -10px;
  top: -10px;
  font-weight: 600;
  font-size: 2.5rem;
  transform: rotate(5deg);
}
.step_con .cur_txt p {
  line-height: 1.8;
}
.step_con .dropdown {
  display: block;
  width: 35px;
  margin: 20px auto 0 auto;
  cursor: pointer;
}
.step_con .dropdown_menu {
  width: 100%;
  display: none;
}
.step_con .dropdown_menu .enter_btn {
  display: block;
  width: 170px;
  margin: 5px auto 30px auto;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: linear-gradient(180deg, #ff81a5 0%, #ff0432 35%);
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 7px rgba(255, 129, 165, 0.8), -3px -3px 7px rgba(248, 253, 255, 0.9), inset 3px 3px 7px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.step_con .dropdown_menu .enter_btn:hover {
  box-shadow: 3px 3px 7px transparent, -3px -3px 7px transparent, inset 3px 3px 7px rgba(255, 129, 165, 0.5), inset -3px -3px 7px rgba(248, 253, 255, 0.8);
}
.step_con .step_btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 25px 0 10px 0;
}
.step_con .step_btns .step_btn {
  width: 48%;
  display: flex;
  align-items: center;
  background-color: #D9F5FF;
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 40px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.step_con .step_btns .step_btn:hover {
  box-shadow: 3px 3px 5px transparent, -3px -3px 5px transparent, inset 3px 3px 5px rgba(148, 163, 215, 0.5), inset -3px -3px 5px rgba(248, 253, 255, 0.8);
}
.step_con .step_btns .step_btn h5 {
  width: 60px;
  background: #0051C0;
  color: #ffffff;
  font-size: 0.9rem;
  text-align: center;
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
}
.step_con .step_btns .step_btn h4 {
  font-size: 1.1rem;
  margin-left: 20px;
}
.step_con .step_btns .cleared {
  background: url(/image/cleared.png) no-repeat;
  background-size: cover;
  border: 1px solid #FF4B00;
}

.clear_flg .cur_txt h4 span {
  display: block;
}

.cur_tit {
  padding: 50px 10px 20px 10px;
}
.cur_tit .step_txt {
  width: 110px;
  text-align: center;
  background: #0051C0;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
}
.cur_tit .cur_txt {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 15px;
}
.cur_tit .cur_txt h4 {
  color: #2E3192;
  font-size: 1.6rem;
}
.cur_tit .cur_txt .clock {
  display: flex;
  justify-content: flex-end;
}
.cur_tit .cur_txt .clock img {
  width: 15px;
}
.cur_tit .cur_txt .clock p {
  margin-left: 10px;
  color: #8478AE;
}

.specification {
  margin-bottom: 60px;
}
.specification p {
  text-align: center;
  margin-bottom: 20px;
  line-height: 2;
}
.specification .enter_btn {
  display: block;
  width: 160px;
  margin: 5px auto 30px auto;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: linear-gradient(180deg, #2fb874 0%, #0d9642 35%);
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 7px rgba(47, 184, 116, 0.8), -3px -3px 7px rgba(248, 253, 255, 0.9), inset 3px 3px 7px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.specification .enter_btn:hover {
  box-shadow: 3px 3px 7px transparent, -3px -3px 7px transparent, inset 3px 3px 7px rgba(47, 184, 116, 0.5), inset -3px -3px 7px rgba(248, 253, 255, 0.8);
}

.cur_clear {
  margin-top: 60px;
}
.cur_clear p {
  text-align: center;
  margin-bottom: 30px;
  line-height: 2;
}
.cur_clear .enter_btn {
  display: block;
  width: 170px;
  margin: 5px auto 30px auto;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: linear-gradient(180deg, #ff81a5 0%, #ff0432 35%);
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 7px rgba(255, 129, 165, 0.8), -3px -3px 7px rgba(248, 253, 255, 0.9), inset 3px 3px 7px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.cur_clear .enter_btn:hover {
  box-shadow: 3px 3px 7px transparent, -3px -3px 7px transparent, inset 3px 3px 7px rgba(255, 129, 165, 0.5), inset -3px -3px 7px rgba(248, 253, 255, 0.8);
}

.cur_review {
  margin-top: 60px;
}
.cur_review p {
  text-align: center;
  margin-bottom: 30px;
  line-height: 2;
}
.cur_review .enter_btn {
  display: block;
  width: 280px;
  margin: 5px auto 30px auto;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 2px;
  font-weight: 600;
  background: linear-gradient(180deg, #ff81a5 0%, #ff0432 35%);
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  box-shadow: 3px 3px 7px rgba(255, 129, 165, 0.8), -3px -3px 7px rgba(248, 253, 255, 0.9), inset 3px 3px 7px transparent, inset -3px -3px 5px transparent;
  transition: box-shadow 0.3s;
}
.cur_review .enter_btn:hover {
  box-shadow: 3px 3px 7px transparent, -3px -3px 7px transparent, inset 3px 3px 7px rgba(255, 129, 165, 0.5), inset -3px -3px 7px rgba(248, 253, 255, 0.8);
}

.cur_con {
  padding: 40px 40px;
  border-radius: 20px;
  background: #ffffff;
  position: relative;
  margin-bottom: 40px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
}
.cur_con h4 {
  font-size: 1.2rem;
  margin-bottom: 25px;
}
.cur_con p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.tips {
  position: relative;
  padding: 55px 40px 30px 40px;
  border: 1px solid white;
  border-radius: 20px;
  background: inherit;
  position: relative;
  margin-bottom: 40px;
  box-shadow: 3px 3px 5px rgba(148, 163, 215, 0.5), -3px -3px 5px rgba(248, 253, 255, 0.8), inset 3px 3px 5px transparent, inset -3px -3px 5px transparent;
}
.tips .tips_icon {
  display: flex;
  align-items: center;
  position: absolute;
  top: 15px;
  left: 20px;
}
.tips .tips_icon img {
  width: 25px;
}
.tips .tips_icon p {
  color: #F15A24;
  font-weight: 600;
  font-size: 1rem;
  margin-left: 10px;
}
.tips p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Modal_チャット */
.chat_btn {
  position: fixed;
  z-index: 9;
  top: 30px;
  right: 4%;
}
.chat_btn a {
  display: flex;
}
.chat_btn a img {
  width: 25px;
  margin-right: 10px;
}
.chat_btn a .unread {
  width: 7px;
  height: 7px;
  background-color: #ff0000;
  position: absolute;
  top: 0;
  right: -10px;
  border-radius: 7px;
}
.chat_btn a p {
  color: #0037AA;
  font-size: 1rem;
  font-weight: 400;
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 20;
  overscroll-behavior: contain;
  overflow-y: scroll;
}
.modal img {
  width: 100%;
}
.modal .modal_bg {
  background: rgba(255, 255, 255, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.modal .nonScroll {
  height: calc(100vh + 1px);
  width: 1px;
  background-color: transparent;
}
.modal .modal_content {
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 1080px;
  height: 80%;
  max-height: 780px;
  border-radius: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  filter: drop-shadow(5px 5px 10px rgba(0, 21, 83, 0.2));
}
.modal .modal_content .chat_wrap {
  height: 100%;
}
.modal .modal_content .chat_wrap .chat_con {
  display: flex;
  height: 100%;
  border-radius: 15px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu {
  width: 25%;
  min-width: 240px;
  background-color: #f5f5fa;
  padding: 20px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu h2 {
  padding: 15px 0 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal .modal_content .chat_wrap .chat_con .side_menu h2 .chats_logo {
  width: 70px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu h2 .chats_icon {
  width: 30px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab {
  position: relative;
  padding: 10px 10px;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  filter: drop-shadow(5px 5px 5px rgba(0, 21, 83, 0.1));
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab:hover {
  filter: drop-shadow(5px 5px 10px rgba(0, 21, 83, 0.2));
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab .tab_icon {
  background-color: #f5f5fa;
  margin-right: 10px;
  border-radius: 20px;
  padding: 0px 9px 4px 9px;
  filter: drop-shadow(2px 2px 1px rgba(0, 21, 83, 0.15));
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab .tab_icon img {
  width: 10px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab p {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .tab .notice {
  position: absolute;
  right: -5px;
  top: -5px;
  background: linear-gradient(90deg, #ffb152 0%, #e951ce 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 15px;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .is-active {
  background-color: #666675;
}
.modal .modal_content .chat_wrap .chat_con .side_menu .is-active p {
  color: #ffffff;
}
.modal .modal_content .chat_wrap .chat_con .main_con {
  width: 75%;
  background-image: url(/image/icon/chat_back.png);
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel {
  position: relative;
  height: 100%;
  padding-bottom: 150px;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .input_area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area {
  width: 100%;
  height: 100%;
  padding: 0 30px;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left {
  /* 左のトークボックス */
  position: relative;
  margin-top: 60px;
  display: block;
  max-width: 90%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap {
  position: relative;
  filter: drop-shadow(3px 3px 3px rgba(0, 21, 83, 0.15));
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap .name_round {
  width: 100px;
  position: relative;
  z-index: 2;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap .name_icon {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 5px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap .name_icon img {
  position: absolute;
  width: 50%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap .name {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 90px;
  background-color: #7fc5ff;
  border-top-right-radius: 20px;
  height: 30px;
  padding: 0 25px 0 0;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .name_wrap .name span {
  width: 100%;
  color: #ffffff;
  line-height: 30px;
  font-size: 12px;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .message {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-left: 20px;
  padding: 14px 30px 14px 80px;
  border-radius: 25px;
  background-color: #f9fcff;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap .message p {
  font-size: 14px;
  color: #545454;
  margin: 0;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_left .message_wrap h6 {
  font-size: 12px;
  margin: 10px 0 0 10px;
  color: #989898;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right {
  /* 右のトークボックス */
  position: relative;
  margin-top: 60px;
  display: block;
  margin-left: auto;
  max-width: 90%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap {
  position: relative;
  filter: drop-shadow(3px 3px 3px rgba(0, 21, 83, 0.15));
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap {
  position: absolute;
  top: -30px;
  right: 10px;
  width: 100%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap .name_round {
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap .name_icon {
  position: absolute;
  z-index: 3;
  top: 5px;
  right: 5px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap .name_icon img {
  position: absolute;
  width: 100%;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap .name {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 90px;
  background-color: #ffa258;
  border-top-left-radius: 20px;
  height: 30px;
  padding: 0 10px 0 20px;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .name_wrap .name span {
  width: 100%;
  color: #ffffff;
  line-height: 30px;
  font-size: 12px;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .message {
  display: block;
  position: relative;
  right: 0;
  z-index: 1;
  margin-right: 20px;
  padding: 14px 80px 14px 30px;
  border-radius: 25px;
  background-color: #f9fcff;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap .message p {
  font-size: 14px;
  color: #545454;
  margin: 0;
}
.modal .modal_content .chat_wrap .chat_con .main_con .panel .talk_area .chat_all .talk_right .message_wrap h6 {
  font-size: 12px;
  margin: 10px 20px 0 0;
  color: #989898;
  text-align: right;
}
.modal .modal_content .chat_wrap .chat_con .main_con .support_area {
  padding-bottom: 105px;
}
.modal .modal_content .panel {
  display: none;
}
.modal .modal_content .panel.is-show {
  display: block;
}
.modal .modal_content .tab.is-active {
  transition: all 0.2s ease-out;
}
.modal .modal_content .close {
  position: absolute;
  top: -20px;
  right: 0;
  cursor: pointer;
}
.modal .modal_content .close span {
  width: 20px;
  height: 1px;
  background-color: #4d4d4d;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.modal .modal_content .close span:nth-child(1) {
  transform: rotate(45deg);
}
.modal .modal_content .close span:nth-child(2) {
  transform: rotate(-45deg);
}

.engin_txt_wrap .switch_wrap {
  display: flex;
}
.engin_txt_wrap .switch_wrap .switch {
  cursor: pointer;
  width: 50%;
  display: block;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.engin_txt_wrap .switch_wrap .switch p {
  text-align: center;
  color: #ffffff;
}
.engin_txt_wrap .switch_wrap .question {
  background: #7fc5ff;
}
.engin_txt_wrap .switch_wrap .filing {
  background: #ffa258;
}
.engin_txt_wrap .switch_area {
  display: none;
  padding: 10px;
  width: 100%;
}
.engin_txt_wrap .switch_area.active {
  display: block;
}
.engin_txt_wrap .switch_area_q {
  background: #7fc5ff;
}
.engin_txt_wrap .switch_area_f {
  background: #ffa258;
}

.txt_wrap {
  width: 100%;
}
.txt_wrap .ql-toolbar {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #ffffff;
  border: 0;
  border-bottom: 1px solid #ccc;
}
.txt_wrap .ql-toolbar .ql-formats {
  margin-right: 5px;
}
.txt_wrap .ql-toolbar .ql-formats .ql-header, .txt_wrap .ql-toolbar .ql-formats .ql-font, .txt_wrap .ql-toolbar .ql-formats .ql-image {
  display: none;
}
.txt_wrap .ql-container {
  border: 0;
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.txt_wrap .zoom_area {
  height: 50vh;
}

.chat_btns .filelabel {
  position: absolute;
  right: 115px;
  top: 58px;
  width: 20px;
  margin: 0;
}
.chat_btns .fileinput {
  display: none;
}
.chat_btns .zoom_btn {
  position: absolute;
  right: 22px;
  top: 60px;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  border: 2px solid #ffffff;
  padding: 3px 9px;
  border-radius: 20px;
}
.chat_btns .zoom_btn img {
  width: 15px;
}
.chat_btns .zoom_btn p {
  font-size: 12px;
  margin-left: 7px;
  font-weight: 600;
}
.chat_btns .zoom_on {
  border: 2px solid #ffc79b;
}
.chat_btns .sumbit_send {
  position: absolute;
  right: 22px;
  bottom: 19px;
  border: none;
  width: 25px;
  background: none;
  padding: 0;
}

.support_txt_wrap {
  padding: 10px;
  background-color: #f5f5fa;
}
.support_txt_wrap .txt_wrap {
  filter: drop-shadow(5px 5px 5px rgba(0, 21, 83, 0.1));
}

.chat_btns_sp .filelabel {
  position: absolute;
  right: 115px;
  top: 14px;
  width: 20px;
  margin: 0;
}
.chat_btns_sp .fileinput {
  display: none;
}
.chat_btns_sp .zoom_btn {
  position: absolute;
  right: 22px;
  top: 17px;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  border: 2px solid #ffffff;
  padding: 3px 9px;
  border-radius: 20px;
}
.chat_btns_sp .zoom_btn img {
  width: 15px;
}
.chat_btns_sp .zoom_btn p {
  font-size: 12px;
  margin-left: 7px;
  font-weight: 600;
}
.chat_btns_sp .zoom_on {
  border: 2px solid #ffc79b;
}
.chat_btns_sp .sumbit_send {
  position: absolute;
  right: 22px;
  bottom: 19px;
  border: none;
  width: 25px;
  background: none;
  padding: 0;
}