/*
Theme Name: TutorStarter Child
Version: 1.0
Template: tutorstarter
*/

/**********************
- ROOT
- BASE
- 親テーマ、プラグイン修正
- ダッシュボード
- ログインページ
- 講座ページ修正
- 404
- 講座用追加デザイン
- ブックマーク機能
- HEADER
- 講座内・追尾ボタン
- 制作の流れ無料講座
- RESPONSIVE
***********************/

/*********************
ROOT
**********************/
:root {
	--bg-main: #FFF;
	--bg-sub: #F9FCFE;
	--text-main: #2B546A;
	--text-sub: #5876A3;
	--text-light: #8491A5;
	--color-main: #79B3DD;
	--border-main: #BAC6D3;
	--border-sub: #E9EFF3;
	--border-light: #F0F0F4;
	--accent: #FFC528;

    --tutor-color-primary: var(--color-main);
    --tutor-body-color: var(--text-main);
    --tutor-border-color: var(--border-main);
    --heading-font: inherit;

    --shadow: 0 4px 4px rgb(0 0 0 / 1%), 0 12px 36px rgb(0 0 0 / 4%);
    --gradient: linear-gradient(70deg, #5DC5F7, #FA966B);
    --radius: 5px;

    --font-jp: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴシック', 'メイリオ', Meiryo, sans-serif;
    --font-en-1: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴシック', 'メイリオ', Meiryo, sans-serif;
    --font-en-2: 'futura-pt', 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴシック', 'メイリオ', Meiryo, sans-serif;
    --regular: 300;
	--light: 300;
    --normal: 400;
    --medium: 500;
    --bold: 700;
    --heavy: 900;

    --container: 1920px;
    --container-side: 3%;
    --container-p: calc(var(--container) + var(--container-side) * 2);

    /* 制作の流れ無料講座 */
	--bg-flow-1: #F8F9F9;

	--text-main-flow: #151515;;
	--text-sub-flow: #444;
	--text-light-flow: #707071;

	--gradient-flow: linear-gradient(to right, #E63BCB, #199CC5);
	--main-color-flow-1: #4072B3;
	--main-color-flow-2: #7B96B4;
	--main-color-flow-3: #B1BDC6;
	--sub-color-flow-1: #C4C4C4;
	--sub-color-flow-2: #E2E2E2;
	--sub-color-flow-3: #EBEBEB;
	--accent-color-flow-1: #FF496B;

	--font-en-3: futura-pt, 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

	--container-flow: calc(1920px + 7%);
	--container-flow-side: 3.5%;
	--container-flow-ll: calc(1100px + 7%);
	--container-flow-l: calc(1000px + 7%);
	--container-flow-m: calc(900px + 7%);
	--container-flow-s: calc(800px + 7%);
	--container-flow-ss: calc(700px + 7%);

}

/*********************
BASE
*********************/
body {
	background-color: var(--bg-sub);
	color: var(--text-main);
	font-family: var(--font-jp);
	font-weight: normal;
	letter-spacing: .02em;
	line-height: 1.7;
}

p {
	margin-bottom: 1em;
}

.wrapper {
  max-width: var(--container-p);
  padding-right: var(--container-side);
  padding-left: var(--container-side);
  margin-right: auto;
  margin-left: auto;
}

/*********************
親テーマ、プラグイン修正
*********************/
.site-footer {
  background-color: var(--bg-main);
}

.copyright {
  font-family: var(--font-en-2);
  font-weight: var(--medium);
  font-style: italic;
  font-size: .75rem;
}

.tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) {
	display: none;
}

.tutor-video-player-wrapper {
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

.tutor-course-topic-single-body ul li {
	margin: 0 0 0 1.2em;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-tab {
	padding-top: 0;
	padding-bottom: 50px;
}

.tutor-col-xl-8 > .tutor-fw-medium {
	display: none;
}

body .tutor-card:not(.tutor-no-border) {
  border: none;
}

body .tutor-color-secondary {
  color: var(--text-main);
}

body .tutor-color-secondary button:last-child {
	margin-top: 50px;
}

body .tutor-color-muted {
  color: var(--text-light);
}


/*********************
ダッシュボード
*********************/
.tutor-dashboard .tutor-frontend-dashboard-header:after {
  display: none;
}

.tutor-dashboard-header-greetings {
  display: none;
}

.tutor-dashboard-header-username {
  font-family: var(--font-en-1);
  font-size: 1.25rem;
}

.tutor-frontend-dashboard-maincontent {
  justify-content: space-between;
}

.tutor-dashboard-permalinks:before,
.tutor-dashboard-menu-divider {
  display: none;
}

.tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky,
.tutor-dashboard-menu-wishlist,
.tutor-dashboard-menu-my-quiz-attempts,
.tutor-dashboard-menu-purchase_history,
.tutor-dashboard-menu-question-answer,
.tutor-dashboard-profile-data .tutor-row:nth-child(7),
.tutor-dashboard-profile-data .tutor-row:nth-child(8),
.tutor-dashboard-setting-profile .tutor-row:nth-child(3),
.tutor-dashboard-setting-profile .tutor-row:nth-child(4),
.tutor-dashboard-setting-profile .tutor-row:nth-child(5) {
	display: none;
}

.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks .tutor-dashboard-menu-item:not(:last-child) {
  margin-bottom: 10px;
}

.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item .tutor-dashboard-menu-item-link {
  border-radius: 8px;
}

.tutor-icon-dashboard:before {
  font: var(--fa-font-solid);
  content: '\f58d';
}

.tutor-icon-user-bold:before {
  font: var(--fa-font-solid);
  content: '\f007';
}

.tutor-icon-mortarboard-o:before {
  font: var(--fa-font-solid);
  content: '\f02d';
}

.tutor-icon-gear:before {
  font: var(--fa-font-solid);
  content: '\f013';
}

.tutor-icon-signout:before {
  font: var(--fa-font-solid);
  content: '\f08b';
}

.tutor-frontend-dashboard-maincontent .tutor-col-lg-9 {
  width: 70%;
}

.tutor-dashboard-content .tutor-dashboard-title {
  display: none;
}

.tutor-icon-book-open:before {
  font: var(--fa-font-solid);
  content: '\f07a';
}

.tutor-icon-mortarboard-o:before {
  font: var(--fa-font-solid);
  content: '\f02d';
}

.tutor-icon-trophy:before {
  font: var(--fa-font-solid);
  content: '\f5a2';
}

.tutor-dashboard-content .tutor-card .tutor-fs-3 {
  font-family: var(--font-en-1);
}

.tutor-dashboard-content .tutor-card .tutor-color-secondary {
  color: var(--text-main);
}

.tutor-frontend-dashboard-course-progress>.tutor-capitalize-text {
  padding-top: 30px;
}

.page-id-15 .tutor-dashboard-content .tutor-mb-16.tutor-capitalize-text {
  display: none;
}

.tutor-container .enrolled-courses .tutor-nav {
  width: 100%;
}

.enrolled-courses .tutor-nav .tutor-nav-item {
  width: 33%;
}

.enrolled-courses .tutor-nav .tutor-nav-link {
  justify-content: center;
  font-weight: var(--medium);
}

.enrolled-courses .tutor-nav .tutor-nav-link.is-active {
  font-weight: var(--bold);
}

.enrolled-courses .tutor-card {
  box-shadow: 2px 4px 17px -4px rgba(160,166,179,25%);
}

.enrolled-courses .tutor-card .tutor-d-block::before {
	content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
}

.enrolled-courses .tutor-card .list-item-button {
	position: relative;
}

.tutor-ratings {
  display: none;
}

.tutor-btn.tutor-btn-outline-primary {
  color: var(--bg-main);
  background-color: var(--color-main);
  font-weight: var(--bold);
}

.tutor-btn.tutor-btn-outline-primary:hover {
  color: var(--color-main);
  background-color: var(--bg-main);
  border-color: var(--color-main);
}

.tutor-dashboard #tutor-dashboard-footer-mobile {
  display: none;
}

@media(max-width: 992px) {
  .tutor-frontend-dashboard-maincontent .tutor-col-md-4 {
    width: 50%;
  }
  
  .tutor-frontend-dashboard-maincontent .tutor-col-lg-9 {
    width: 100%;
  }
}

@media(max-width: 767px) {
  .tutor-screen-frontend-dashboard {
    padding-bottom: 0;
  }
  
  .tutor-dashboard:not(.is-sidebar-expanded) .tutor-dashboard-left-menu {
    display: block;
    width: 100%;
  }
  
  .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
    margin: 0;
  }
}

@media(max-width: 500px) {
  .navbar {
    justify-content: center;
  }
}


/*********************
ログインページ
*********************/
.tutor-login-wrap,
#tutor-registration-wrap {
  background-color: var(--bg-main);
  box-shadow: none;
}

.tutor-login-form-wrapper,
#tutor-registration-form {
  padding-right: 48px;
  padding-left: 48px;
}

#tutor-login-form .tutor-d-flex {
  display: block!important;
  margin-bottom: 20px;
}

#tutor-login-form .tutor-form-check {
  display: block;
  text-align: center;
}

.tutor-form-check input.tutor-form-check-input {
  vertical-align: middle;
}

#tutor-login-form .tutor-form-check label {
  color: var(--text-light);
  font-weight: var(--normal);
}

#tutor-login-form .tutor-btn-ghost {
  color: var(--text-light);
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#tutor-login-form .tutor-mt-20 {
  padding-top: 30px;
  margin-top: 30px;
  border-top: solid 2px var(--border-sub);
}

#tutor-login-form .tutor-btn-link {
  display: block;
  width: 30%;
  margin: 10px auto 0;
}

#tutor-login-form .tutor-btn-link::after {
  display: none;
}

#tutor-registration-wrap .tutor-form-group label {
  color: var(--text-main);
}

form.tutor-ResetPassword.lost_reset_password {
  padding: 80px 15px!important;
}

#tutor-registration-form .tutor-form-row:first-of-type {
	display: flex;
	flex-direction: column;
}

#tutor-registration-form .tutor-form-row:first-of-type .tutor-form-col-6:first-child {
	order: 1;
}

#tutor-registration-form .tutor-form-row:first-of-type .tutor-form-col-6:last-child {
	order: 0;
}

/*********************
講座ページ修正
*********************/
.single-courses .site-content {
	padding-top: 0;
}

.tutor-course-topic-single-body a {
	/*color: var(--tutor-color-primary);*/
	transition: all 0.3s;
}

.tutor-course-topic-single-body h1,
.tutor-course-topic-single-body h2,
.tutor-course-topic-single-body h3,
.tutor-course-topic-single-body h4 {
	letter-spacing: .03em;
	line-height: 1.6;
	margin-bottom: .5em;
}

.tutor-course-topic-single-body h1 {
	font-size: 2rem;
	margin-top: 0;
}

.tutor-course-topic-single-body h2 {
	font-size: 1.5em;
	margin-top: 2.5em;
	border-bottom: solid 2px #EBEBEB;
	padding-bottom: 10px;
}

.tutor-course-topic-single-body h3 {
	font-size: 1.3em;
	margin-top: 1.75em;
}

.tutor-course-topic-single-body h4 {
	font-size: 1.1em;
	margin-top: 1.25em;
}

.tutor-course-topic-single-body h2:first-child {
	margin-top: 0;
}

.tutor-course-topic-single-body ol,
.tutor-course-topic-single-body ul {
	margin: 2em 0;
	padding: 0;
}

.tutor-course-topic-single-body ol li {
	margin: 0 0 .5em 1.5em;
}

.tutor-course-topic-single-body ul li {
	margin: 0 0 .5em 1.2em;
}

.tutor-course-details-top {
  display: none;
}

#tutor-course-details-tab-info h2,
#tutor-course-details-tab-info h3 {
  padding-left: .8em;
  position: relative;
}

#tutor-course-details-tab-info h2::before,
#tutor-course-details-tab-info h3::before {
  content: '';
  display: block;
  width: 5px;
  height: 100%;
  background-color: var(--text-main);
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
}

#tutor-course-details-tab-info .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-list {
  display: block;
}

.tutor-accordion .tutor-accordion-item {
  border: none;
}

.tutor-accordion-item .tutor-accordion-item-header {
  background-color: var(--bg-main);
}

.tutor-accordion-item .tutor-accordion-item-header.is-active {
  color: inherit;
  background-color: #D6EDFF;
}

.tutor-accordion-item .tutor-accordion-item-header::after {
  color: var(--text-main);
}

.tutor-accordion-item .tutor-accordion-item-body-content {
  border: none;
}

.tutor-accordion-item .tutor-course-content-list-item {
  color: var(--text-light);
  padding: 10px 20px;
}

.tutor-course-content-list-item:not(:last-of-type) {
  border-bottom: solid 2px var(--border-light);
}

.tutor-course-content-list-item .tutor-course-content-list-item-icon {
  color: inherit;
}

.tutor-course-content-list-item-duration,
.tutor-course-content-list-item-status {
  display: none;
}


.tutor-wrap .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body {
  background-color: #FFF;
}

.tutor-single-course-sidebar .tutor-alert {
  display: none;
}

.tutor-card-body .tutor-icon-purchase-mark {
  color: inherit;
}

.tutor-card-body .tutor-icon-purchase-mark:before {
  font: var(--fa-font-solid);
  content: '\f07a';
}

.tutor-card-body .tutor-enrolled-info-date {
  color: inherit;
}

.tutor-wrap .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-footer {
  border-top: 2px solid var(--border-sub);
}

.tutor-wrap .tutor-single-course-sidebar .tutor-single-course-sidebar-more .tutor-course-details-widget {
  border: none;
  background-color: #FFF;
}

.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper,
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-title,
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
  background-color: var(--bg-sub);
}

.tutor-course-single-sidebar-wrapper {
	border-right: 2px solid var(--border-sub);
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: scroll;
}

.tutor-course-single-sidebar-title>.tutor-d-xl-none {
  position: absolute;
  right: 16px;
}

.tutor-course-single-sidebar-title>.tutor-d-xl-none .tutor-iconic-btn {
  color: var(--text-main);
}

.tutor-course-single-content-wrapper .tutor-course-single-sidebar-title {
  justify-content: center!important;
  border-bottom: solid 2px var(--border-light);
  margin-bottom: 30px;
  position: sticky;
  top: 0;
  z-index: 999;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
	padding-top: 0;
	padding-bottom: 0;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a {
	padding-top: 12px;
	padding-bottom: 12px;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic {
  padding: 4px 30px;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
  border: none;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active:after {
  color: var(--text-main);
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header .tutor-course-topic-summary {
  color: var(--text-main);
  font-size: 14px;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:after {
  color: var(--text-main);
  font-size: 16px;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a {
  background-color: #D6EDFF;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item-icon,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item-title {
  color: var(--text-light);
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-icon,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
  color: var(--text-main);
}

.tutor-accordion-item-body .tutor-course-topic-item:not(:last-of-type) {
  border-bottom: solid 2px var(--bg-sub);
}

/*
.tutor-course-topic-item-duration {
  display: none;
}
*/

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-form-check-circle[checked] {
  border-color: var(--accent);
  background-color: var(--accent);
}

.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn {
  color: var(--text-main);
}

#tutor-single-entry-content {
  background-color: var(--bg-main);
}

.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header {
  color: var(--text-main);
  background-color: var(--bg-main);
  border-bottom: solid 2px var(--border-light);
  position: sticky;
  top: 0;
  z-index: 999;
}

.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn-secondary {
	display: none!important;
  color: var(--text-main);
  background-color: transparent;
}

.tutor-course-topic-single-header-title {
  font-weight: var(--bold);
}

.tutor-course-topic-single-header .tutor-fw-bold {
  font-weight: inherit;
}

.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn {
  color: var(--bg-main);
  background-color: var(--color-main);
  border-color: var(--color-main);
}

.tutor-course-topic-single-header .tutor-iconic-btn:hover,
.tutor-course-topic-single-header .tutor-iconic-btn:focus,
.tutor-course-topic-single-header .tutor-iconic-btn:active {
  border: none;
}

.tutor-course-topic-single-header .tutor-icon-times,
.tutor-course-topic-single-header .tutor-icon-previous {
  width: 100%;
  height: 100%;
}

.tutor-course-topic-single-header .tutor-icon-times:before,
.tutor-course-topic-single-header .tutor-icon-previous:before {
  color: var(--text-main);
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: url(../../uploads/icon-home-bk.svg);
  mask: url(../../uploads/icon-home-bk.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--text-main);
  transition: all .3s;
}

.tutor-course-topic-single-header .tutor-iconic-btn:hover .tutor-icon-times:before,
.tutor-course-topic-single-header .tutor-iconic-btn:focus .tutor-icon-times:before,
.tutor-course-topic-single-header .tutor-iconic-btn:active .tutor-icon-times:before {
  background-color: var(--color-main);
}

.tutor-course-topic-single-body {
  width: 80%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.tutor-course-topic-single-body .tutor-video-player-wrapper,
.tutor-course-topic-single-body .tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs),
.tutor-course-topic-single-body #tutor-course-spotlight-overview .tutor-container,
.tutor-course-topic-single-body #tutor-course-spotlight-overview .tutor-container .tutor-col-xl-8 {
  width: 100%;
  max-width: unset;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav .tutor-nav-item {
  margin-bottom: 0;
}

.tutor-course-spotlight-wrapper .tutor-nav-item .tutor-icon-document-text:before {
  font: var(--fa-font-solid);
  content: '\f02d';
}

.tutor-course-spotlight-wrapper .tutor-nav-item .tutor-icon-comment:before {
  font: var(--fa-font-solid);
  content: '\f4ad';
}

.tutor-single-course-lesson-comments .tutor-fs-5.tutor-fw-medium {
  font-weight: var(--bold);
  font-size: 1.5rem;
}

.tutor-conversation .tutor-comments-list.tutor-parent-comment {
  padding-top: 40px;
  border-top: solid 2px var(--border-light);
}

.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list.tutor-parent-comment .tutor-child-comment:before,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list.tutor-parent-comment .tutor-child-comment:after,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list.tutor-parent-comment .tutor-comment-line,
.tutor-single-comment .tutor-comment-line {
  display: none;
}

.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comment-textarea:after,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-actual-comment:after {
  height: 14px;
  width: 11px;
  top: 16px;
}

.tutor-comment-textarea .tutor-form-control {
  border: none!important;
}

.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment .tutor-comment-author span:first-child {
  color: var(--text-main);
  display: inline-block;
  margin-right: 1em;
}

.tutor-comment-submit-btn .tutor-btn {
  font-size: 1rem;
  font-weight: var(--medium);
}

.tutor-single-comment .tutor-comment-actions {
  display: none;
}

.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-footer {
  background-color: var(--bg-main);
  border-top: solid 2px var(--border-light);
}

.tutor-course-topic-single-footer .tutor-btn-sm {
  color: var(--text-main);
  background-color: var(--bg-sub);
  border: none;
}

.tutor-course-topic-single-footer .tutor-btn-secondary[disabled] {
  color: #91949d;
}

.wp-caption {
	border: none;
}

.wp-caption img {
	border:1px solid #eaf1f8;
	border-radius: 6px;
}

figcaption {
	font-style: italic;
	font-size: .9em;
}

.tutor-spotlight-mobile-progress-complete {
  display: none!important;
}

@media(max-width: 1199.98px) {
  .tutor-course-single-sidebar-wrapper {
    position: fixed;
  }
  
  .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open .tutor-course-single-sidebar-wrapper {
    padding-bottom: 40px;
  }
  
  .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header::after {
    transform: translateY(-50%) rotate(90deg);
  }
  
  .single-lesson .tutor-course-topic-single-header>.tutor-d-none.tutor-d-xl-flex {
    display: block!important;
  }
  
  .single-lesson .tutor-course-topic-single-header>.tutor-d-none.tutor-d-xl-flex>.tutor-fs-7.tutor-mr-20,
  .single-lesson .tutor-course-topic-single-header>.tutor-d-none.tutor-d-xl-flex>.tutor-iconic-btn {
    display: none;
  }
  
  .single-lesson .tutor-course-topic-single-header>.tutor-d-block.tutor-d-xl-none {
    margin-left: 0;
  }
  
  .tutor-course-topic-single-footer .tutor-btn-sm {
    font-size: 17px;
    padding: 7px 20px;
  }
  
}

@media(max-width: 992px) {
  .tutor-course-details-widget-col-2 ul>li {
    width: 100%;
  }
}

@media(max-width: 767px) {
  .tutor-course-topic-single-body {
    width: 100%;
  }
  
  .tutor-course-topic-single-body h1 {
    font-size: 1.8rem;
  }
  
  .tutor-accordion-item-header .tooltip-wrap.tooltip-icon {
    display: none;
  }
  
  .single-lesson .tutor-course-topic-single-header>.tutor-d-block.tutor-d-xl-none {
    margin-left: auto;
  }
  
  .single-lesson .tutor-course-topic-single-header>.tutor-d-none.tutor-d-xl-flex {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
  }
  
  .tutor-topbar-complete-btn {
    width: 100%;
    margin: 0;
  }
  
  .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn {
    width: 100%;
    justify-content: center;
    border-radius: 0;
  }
  
  .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-footer {
    padding-bottom: 60px;
  }
}


/*********************
404
*********************/
.content-404 {
  max-width: 600px;
  margin: 40px auto;
  background-color: var(--bg-main);
  padding: 50px;
  border-radius: 5px;
  text-align: center;
}

.content-404 h2 {
  font-family: var(--font-en-1);
  font-size: 72px;
  line-height: 1;
}

.content-404 h3 {
  font-family: var(--font-en-1);
  font-size: 1.4em;
  line-height: 1.6;
}

.content-404 img {
  display: block;
  margin: 30px 0;
}


/*********************
講座用追加デザイン
*********************/
.margin-content {
	margin-bottom: 70px;
}

.margin-box {
	margin-bottom: 30px;
}

.box {
	border-radius: 6px;
	padding: 3em 2em;
	text-align: center;
}

.box-notion {
	background-color: #F5F5F5;
	color: #121212;
}

.box-figma {
	background-color: #FEF9FC;
	color: #290625;
}

.box-wptheme {
	background-color: #f0f7fd;
	color: #101517;
}

.box-chapter {
	background-color: #fafafa;
	padding: 2em;
}

.box h3 {
	margin-top: 0;
}

.box ul {
	margin-top: 0;
	text-align: left;
}

.box>*:last-child {
	margin-bottom: 0;
}

.tutor-course-topic-single-body a.btn {
	color: #fff;
	border-radius: 6px;
	display: inline-block;
	margin-top: 1em;
}

.btn-notion {
	background-color: #121212;
}

.btn-figma {
	background-color: #DD79C7;
}

.btn-wptheme {
	background-color: #3987cb;
}

.tutor-course-topic-single-body a.link-ex {
	color: var(--tutor-color-primary);
	padding-right: 1.2em;
	padding-bottom: 3px;
	position: relative;
}

.tutor-course-topic-single-body a.link-ex::before {
	content: "";
	background-color: var(--tutor-color-primary);
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
}

.tutor-course-topic-single-body a.link-ex::after {
	content: "";
	background: center / contain no-repeat url(../../uploads/icon-link-ex.svg);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 1em;
	width: 1em;
}

.video-add-wrap {
	position: relative;
	width: 100%;
  padding-top: 56.2%;
}

.video-add-wrap>video {
	position: absolute;
	height:100%;
	width: 100%;
	top: 0;
	left: 0;
	color: #fff;
	border: none;
}


/*********************
ブックマーク機能
*********************/
.simplefavorite-button {
	border-radius: 4px;
	border-width: 1.5px;
	border-style: solid;
	font-size: 14px;
	font-weight: bold;
	padding: 7px 15px;
}

.simplefavorite-button i {
	margin-right: 5px;
}

.simplefavorite-button.active {
	opacity: 1!important;
}


/*********************
HEADER
*********************/
.header {
	background-color: #fff;
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 100;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container);
  padding: 15px var(--container-side);
	margin: 0 auto;
}

.header-title {
	margin: 0;
}

.header-title img {
	width: 196px;
	max-width: 100%;
}

#drawer-input {
   display: none;
}

.menu-item {
   list-style: none;
}

.menu-item a {
	color: var(--tutor-color-primary);
   display: block;
	font-size: 15px;
	font-weight: bold;
   position: relative;
   text-decoration: none;
	line-height: 1;
}


@media only screen and (min-width: 1081px) {
   .header-nav-list {
      display: flex;
	   column-gap: 15px;
      margin: 0;
      padding: 0;
   }
	
	.menu-item a {
	background-color: #fff;
	border: 2px solid var(--tutor-color-primary);
	border-radius: 5px;
	padding: .7em 1em;
}

#menu-item-3512 a {
	color: #fff;
	background-color: var(--tutor-color-primary);
	border: 2px solid var(--tutor-color-primary);
}
}

@media only screen and (max-width: 1080px) {
   .header {
      padding: 10px;
   }
	
	.header-inner {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
   #drawer-content {
		background: #fff;
		opacity: 0;
		visibility: hidden;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		transition: 0.3s ease-in-out;
		height: 100%;
		width: 100%;
		z-index: -1;
   }
	
	#drawer-content .header-title {
		padding: 15px calc(10px + 3%);
	}
	
   #drawer-open {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      right: 10px;
      height: 25px;
      width: 25px;
      outline: none;
      z-index: 1000;
      transform: translateY(-50%);
   }
	
   #drawer-open span {
      content: '';
      background-color: #222;
	   border-radius: 15px;
      display: block;
      height: 1.5px;
      width: 22px;
      position: absolute;
      transition: 0.3s ease-in-out;
      transform-origin: right;
   }
	
   #drawer-open span.top {
      top: 8px;
   }
	
   #drawer-open span.bottom {
      bottom: 8px;
   }
	
   #drawer-input:checked ~ #drawer-open span.top {
      top: 4px;
      transform: rotate(-45deg);
   }
	
   #drawer-input:checked ~ #drawer-open span.bottom {
      bottom: 4px;
      transform: rotate(45deg);
   }
	
   #drawer-input:checked ~ #drawer-content {
		opacity: 1;
		visibility: visible;
		z-index: 999;
   }
	
   .header-nav-list {
      margin: 0;
      padding: 10px 0 0;
   }
	
   .menu-item {
      border-bottom: solid 2px var(--border-light);
   }
	
	#menu-item-3512 {
		border-top: solid 2px var(--border-light);
	}
	
   .menu-item a {
	   color: var(--text-main);
	   padding: 2em 1em;
	   position: relative;
      width: 100%;
   }
	
	.menu-item a::after {
		content: "\f105";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		top: 50%;
		right: 1em;
		transform: translate3d(0, -50%, 0);
		height: 15px;
		width: 15px;
	}
}



/*********************
講座内・追尾ボタン
*********************/
.single-lesson header#header,
.single-lesson footer#colophon,
#button-guidebook {
  display: none;
}

.single-lesson #content {
	position: relative;
}

.single-lesson #button-guidebook {
	background-color: var(--accent);
	border-radius: 30px;
	box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, .2);
	position: fixed;
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	bottom: 15px;
	right: 15px;	
	z-index: 999;
	text-decoration: none;
	padding: .75em 1.5em;
	line-height: 1;
}

.single-lesson #button-guidebook i {
	font-size: 18px;
	margin-right: 5px;
}

/*********************
制作の流れ無料講座
*********************/

/*--- flow GENERAL ---*/

/*FONT*/
.font-en {
	font-family: var(--font-en-2);
}

.small {
	font-size: .85em;
}

.large {
	font-size: 1.2em;
}

.strong {
	color: var(--text-main-flow);
}

.uppercase {
	text-transform: uppercase;
}

.line-heighter,
.line-heighter * {
	line-height: 2;
}

.contents-free .p-sub {
	color: var(--text-light-flow);
}


/*ALIGN*/
.center {
	text-align: center;
}

.center > * {
	margin-left: auto;
	margin-right: auto;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}


/*IMAGE*/
.img-circle {
	border-radius: 50%;
}

.img-radius {
	border-radius: 30px;
}

.img-object {
	padding-top: 66%;
	position: relative;
	overflow: hidden;
}

.img-object>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


/*FLEX*/
.display-block {
	display:block!important;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flex-reverse {
	flex-direction: row-reverse;
}

.flex-column {
	flex-direction: column;
}

.nowrap {
	flex-wrap: nowrap;
}

.space-around {
	justify-content: space-around;
}

.justify-start {
	justify-content: flex-start;
}

.justify-center {
	justify-content: center;
}

.justify-end {
	justify-content: flex-end;
}

.items-center {
	align-items: center;
}

.cell {
	position: relative;
}

.cell img {
	display: block;
	width: 100%;
}

.cell > *:last-child {
	margin-bottom: 0;
}

.cell--1-2-l {
	width: 50%;
}

.cell--1-2-m {
	width: 48.5%;
}

.cell--1-2-s {
	width: 41%;
}

.cell--1-3-l {
	width: 32%;
}

.cell--1-3-m {
	width: 30%;
}

.cell--1-3-s {
	width: 28%;
}

.cell--1-4 {
	width: 23%;
}

.cell--2-3 {
	width: 60%;
}

.cell--3-4 {
	width: 73%;
}


@media only screen and (max-width: 560px) {

	.cell--1-2-l,
	.cell--1-2-m,
	.cell--1-2-s,
	.cell--1-3-l,
	.cell--1-3-m,
	.cell--1-3-s,
	.cell--2-3,
	.cell--3-4{
		width: 100%;
	}

	.cell--1-4 {
		width: 48%;
	}

	.order0 {
		order: 0;
	}

	.order1 {
		order: 1;
	}
}


/*LIST*/
.list-none {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.list-dot li {
	list-style: none;
	padding-left: 1em;
	text-indent: -1em;
	margin: 0 0 1em;
}

.list-dot li::before {
	content: '';
	background-color: var(--main-color-flow-2);
	border-radius: 50%;
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: .5em;
}


/*OTHER*/
.relative {
	position: relative;
}

.block {
	display: block;
}

.shadow {
	box-shadow: 0 0 1.8rem -1rem rgb(0 0 0 / 27%);
}

.marker {
	background:linear-gradient(transparent 60%, var(--sub-color-flow-2) 60%);
}

.radius {
	border-radius: var(--radius);
}

.box-section {
	background-color: #FFF;
	border-radius: var(--radius);
	padding: 70px 50px 60px;
}

.contents-free .box-point {
	background-color: var(--bg-flow-1);
	border-radius: var(--radius);
}

.contents-free .box-border {
	border: solid 2px var(--sub-color-flow-3);
	border-radius: var(--radius-s);
	padding: 30px;
}

.contents-free　.box-section>*:last-child,
.contents-free　.box-point>*:last-child,
.contents-free　.box-border>*:last-child {
	margin-bottom: 0;
}

.box-card {
	border-radius: var(--radius);
	padding: 40px 30px 30px;
	margin-bottom: 30px;
}

.box-card img {
	display: block;
	width: auto;
	height: 120px;
	object-fit: contain;
	margin: auto;
}

.box-card .title-card {
	text-align: center;
	line-height: 1.5;
	margin: 1.5em 0 0;
}


@media only screen and (max-width: 1080px) {
	.box-section {
		padding: 60px 40px 50px;
	}

	.box-card {
		padding: 40px 20px 30px;
	}

	.box-card .title-card {
		font-size: 1.6rem;
	}
}

@media only screen and (max-width: 560px) {  
	.box-section {
		padding: 50px 4% 40px;
	}

	.box-card {
		padding: 30px 10px 20px;
		margin-bottom: 20px;
	}

	.box-card img {
		height: 85px;
	}

}
/*--- flow GENERAL end ---*/

/*--- flow CONTAINER ---*/
.section-wrap {
	padding-top: 110px;
	padding-bottom: 110px;
	position: relative;
}

.container-free {
	max-width: var(--container-flow);
	padding-right: var(--container-flow-side);
	padding-left:  var(--container-flow-side);
	position: relative;
	margin: 0 auto;
	width: 100%;
}

.container-flow-ll {
	max-width: var(--container-flow-ll);
	margin: 0 auto;
}

.container-flow-l {
	max-width: var(--container-flow-l);
	margin: 0 auto;
}

.container-flow-m {
	max-width: var(--container-flow-m);
	margin: 0 auto;
}

.container-flow-s {
	max-width: var(--container-flow-s);
	margin: 0 auto;
}

.container-flow-ss {
	max-width: var(--container-flow-ss);
	margin: 0 auto;
}

.iframe-wrap {
	position: relative;
}

.iframe-wrap::before {
	content: "";
	display: block;
	padding-top: 53%;
}

.iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}


@media only screen and (max-width: 560px) {
	.section-wrap {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.container-free {
		padding-right: 5%;
		padding-left: 5%;
	}
}

/*--- flow CONTAINER end ---*/

/*--- flow ARCHIVE end ---*/
/*card*/
.archive-wrap {
	column-gap: 3%;
	row-gap: 40px;
}

.archive-wrap a {
	text-decoration: none;
}

.archive-wrap a:hover {
	opacity: 1;
}

.archive-card {
	background-color: #FFFFFF;
	border-radius: var(--radius);
}

.main-archive-blog .archive-card:nth-of-type(3n) {
	margin-right: 0;
}

.archive-card>a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}

.archive-card>a:hover {
	box-shadow: var(--shadow);
}

.image-archive {
	width: 100%;
	padding-top: 56%;
	background-color: #F5F5F5;
	position: relative;
	overflow: hidden;
}

.image-archive>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s;
}

.archive-card:hover .image-archive>img {
	transform: scale(1.05);
}

.text-archive {
	padding: 1.5em 1em 3.5em;
}

.title-archive {
	color: var(--text-main-flow);
	font-size: 1.7rem;
	line-height: 1.6;
}


@media only screen and (max-width: 560px) {
	.archive-list:last-child {
		margin-bottom: 1.5em;
	}

	.archive-list .time-archive {
		margin-right: 0;
		margin-bottom: .5em;
	}

	.archive-list .time-archive,
	.archive-list .title-archive {
		width: 100%;
	}
}
/*--- flow ARCHIVE end ---*/

/*--- flow heading ---*/
.main-page-form h1 {
	font-size: 3rem;
	font-weight: var(--bold);
	margin-bottom: 1em;
}

.contents-free .heading-en {
	color: var(--sub-color-flow-1);
	font-family: var(--font-en-2);
	font-weight: var(--bold);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .2em;
	line-height: 1;
	margin-bottom: .5em;
	display: block;
}

.h1-page {
	color: var(--text-main-flow);
	font-size: 1.2rem;
	letter-spacing: .2em;
	line-height: 1.4;
	margin: 0;
}

.h1-page-inner {
	color: var(--text-main-flow);
	font-size: 1.2rem;
}

.h1-page .heading-en {
	font-size: 1.6rem;
	text-transform: inherit;
	font-variant-caps: small-caps;
	font-weight: var(--normal);
}

.h1-page p {
	font-size: 2.4rem;
	font-weight: var(--bold);
	margin-bottom: .5em;
}

.h2-top {
	color: var(--text-main-flow);
	font-size: 1.4rem;
	font-weight: var(--bold);
	letter-spacing: .1em;
	line-height: 1;
	margin-bottom: 1.5em;
}

.h2-top-inner {
	color: var(--text-main-flow);
	font-size: 1.4rem;
	font-weight: var(--bold);
}

.contents-free .h2-page {
	color: var(--text-main-flow);
	font-size: 24px;
	font-weight: var(--bold);
	letter-spacing: .1em;
	line-height: 1.6;
	margin-bottom: 1.3em;
}

.h2-page-inner {
	color: var(--text-main-flow);
	font-size: 2.4rem;
	font-weight: var(--bold);
}


.contents-free .h3-page {
	color: var(--text-main-flow);
	font-size: 20px;
	font-weight: var(--normal);
	line-height: 1.6;
	margin: 0;
}

.header-page-noimg {
	padding-top: 140px;
	padding-bottom: 140px;
	background-color: #FFF;
}

.container-flow-text {
	font-weight: var(--light);
	max-width: 550px;
	letter-spacing: .12em;
	line-height: 1.8;
	color: #3A3A3A;
}



@media only screen and (max-width: 1080px) {
	.header-page-noimg {
		padding-top: 120px;
		padding-bottom: 120px;
	}
}

@media only screen and (max-width: 560px) {

	.contents-free .h2-page {
		font-size:20px;
	}

	.h2-page-inner {
		font-size: 2rem;
	}

	.h3-page {
		font-size: 1.8rem;
	}

	.header-page-noimg {
		padding-bottom: 100px;
	}
}
/*--- flow heading end ---*/

/*--- flow button end ---*/
.btn-wrap {
	margin-top: 3em;
	width: 100%;
}

.btn {
	color: var(--text-main-flow);
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.btn-main,
.btn-exlink {
	font-family: var(--font-en-2);
	text-align: center;
	letter-spacing: .2em;
	padding: .7em 1em .6em;
	min-width: 180px;
}

.btn-main {
	color: #FFF;
	background-color: var(--text-light-flow);
	border: solid 1px var(--text-light-flow);
}

.btn-exlink {
	color: var(--text-main-flow);
	background-color: #FFF;
	border: solid 1px var(--text-main-flow);
}

.btn-main::before,
.btn-exlink::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform: scaleX(0);
	transform-origin: left;
	z-index: -1;
	transition: all .3s;
}

.btn-main::before {
	background-color: #FFF;
}

.btn-exlink::before {
	background-color: var(--text-light-flow);;
}

.btn-exlink::after {
	content: "\e14d";
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	margin-left: 5px;
	transform: translateY(1px);
}

.btn-cv {
	font-size: 1.5rem;
	background: var(--gradient-flow);
	color: #fff;
	border-radius: 35px;
	padding: .7em 3.5em .7em 1.5em;
	line-height: 1;
	letter-spacing: .1em;
	text-decoration: none;
	display: inline-block;
	position: relative;
}

.btn-cv::before,
.btn-cv::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all .3s ease-out;
}

.btn-cv::before {
	background: center / contain no-repeat url(../../uploads/icon-arrow.svg);
	height: 12px;
	width: 12px;
	right: calc(1em + 5.5px); 
	z-index: 1;
}

.btn-cv::after {
	content: "";
	height: 23px;
	width: 23px;
	right: 1em;
	border: solid 1px #fff;
	border-radius: 50%;
}

.btn-cv-transparent {
	background: transparent;
	border: 1px solid #fff;
}


@media only screen and (min-width: 1081px) {
	.btn:hover,
	.btn-cv:hover {
		opacity: 1;
	}

	.btn-main:hover {
		color: var(--text-light-flow);
	}

	.btn-exlink:hover {
		color: #FFF;
	}

	.btn-main:hover::before,
	.btn-exlink:hover::before {
		transform: scaleX(1);
	}

	.btn-cv-wrap a {
		background: var(--gradient-flow);
		color: #fff;
		border-radius: 35px;
		padding: 1rem 6rem 1rem 3rem;
		line-height: 1;
		letter-spacing: .1em;
		text-decoration: none;
		display: inline-block;
		position: relative;
	}

	.btn-cv-wrap a::before,
	.btn-cv-wrap a::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: all .3s ease-out;
	}

	.btn-cv-wrap a::before {
		background: center / contain no-repeat url(../../uploads/icon-arrow.svg);
		height: 12px;
		width: 12px;
		right: calc(1em + 5.5px); 
		z-index: 1;
	}

	.btn-cv-wrap a::after {
		content: "";
		height: 23px;
		width: 23px;
		right: 1em;
		border: solid 1px #fff;
		border-radius: 50%;
	}

	.btn-cv:hover::after,
	.btn-cv a:hover::after {
		right: 1.5rem;
	}
}
/*--- flow button end ---*/

/*--- flow page-top ---*/
.page-template-page-flow,
.parent-pageid-36 {
	background-color: var(--bg-flow);
}

.contents-free .text-flow-feature {
	display: flex;
	align-items: center;
	padding: 0;
}

.img-flow-feature {
	position: relative;
}

.img-flow-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-flow-feature-1 {
	aspect-ratio:900 / 432;
	margin-bottom: 20px;
}

.img-flow-feature-inner {
	display: flex;
	justify-content: space-between;
}

.img-flow-feature-2 {
	width: 48%;
	margin-top:45px;
}

.case-flow-item {
	padding: 20px 25px;
	margin-bottom: 50px;
	position: relative;
}

.case-flow-item.medium {
	justify-content: center;
	column-gap: 2%;
}

.case-flow-item:last-of-type {
	margin-bottom: 0;
}

.case-flow-item:not(:last-of-type)::after {
	content: '';
	display: block;
	width: 24px;
	height: 20px;
	background-image: url(../../uploads/icon-down-flow.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 35px);
}

.case-flow-item .box-card {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 0;
}

.flex-case-flow-item {
	display: flex;
}

.case-flow-item .box-card img {
	margin-bottom: 2rem;
}

.contents-free .img-case-flow {
	width: 130px;
}

.contents-free .text-case-flow {
	max-width: calc(100% - 130px);
	padding-left: 50px;
}

.contents-free .num-case-flow {
	color: var(--main-color-flow-2);
	font-family: var(--font-en-2);
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 1;
	display: inline-block;
	padding-bottom: .2em;
	position: relative;
	margin-bottom:1em;
}

.contents-free .num-case-flow::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	position: absolute;
	left: 0;
	bottom: 0;
}

.title-case-flow {
	color: var(--text-main-flow);
	font-weight: var(--normal);
	margin: .5em 0 0;
}

.text-case-flow .btn-wrap,
.text-case-flow-card .btn-wrap {
	margin-top: .7em;
}

.case-flow-wrap .p-sub {
	margin-top: 1em;
}

.main-archive-blog .flex-case-flow-item {
	column-gap: 50px;
	padding: 30px;
}

.main-archive-blog .text-case-flow {
	padding-left: 0;
}

.main-archive-blog .flex-case-flow-item .h2-page {
	font-size: 2rem;
}

.box-comparison {
	padding: 30px 20px;
}

.box-comparison .h3-page {
	font-size: 1.8rem;
	margin-bottom: 1em;
}

.contents-free .list-comparison {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.contents-free .list-comparison li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	border-radius: 30px;
	padding: 5px 10px;
	margin: 0 10px 10px 0;
	color: #151515;
	font-weight: var(--medium);
}

.contents-free .list-comparison.lexa li {
	background-color: #FFF;
}

.contents-free .list-comparison.client li {
	color: #FFF;
	background-color: var(--main-color-flow-2);
}

.flow-detail {
	align-items: flex-start;
}

.cell-left-flow {
	width: 27%;
	position: sticky;
	top: 140px;
}

.li-service-flow {
	margin-bottom: 1.5em;
}

.li-service-flow a {
	color: var(--sub-color-flow-1);
	font-weight: var(--normal);
	text-decoration: none;
	padding-left: 20px;
	position: relative;
}

.li-service-flow a.current {
	color: var(--text-main-flow);
	font-weight: var(--bold);
	font-size: 2rem;
}

.li-service-flow a::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 10px;
	background-color: var(--main-color-flow-3);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.li-service-flow a.current::before {
	background-color: var(--main-color-flow-1);
}

.cell-right-flow {
	width: 68%;
}

.cell-right-flow .flow-wrap {
	padding-bottom: 100px;
}

.cell-right-flow .flow-wrap:last-of-type {
	padding-bottom: 0;
}

.wrap-number-0 {
	counter-reset: count -1;
}

.wrap-number-1 {
	counter-reset: count 0;
}

.contents-free .h2-flow {
	font-size:26px;
	margin-bottom: 40px;
}

.contents-free .h2-flow-number {
	padding-left: 2em;
	position: relative;
}

.contents-free .h2-flow-number::before {
	color: var(--main-color-flow-2);
	content: counter(count, decimal-leading-zero);
	counter-increment: count;
	font-family: var(--font-en-2);
	font-size: 28px;
	border-bottom: solid 2px currentColor;
	position: absolute;
	left: 0;
	top: -2px;
	letter-spacing: .1em;
}

/* .contents-free .h2-flow-number.number02::before {
	content: '02';
}
.contents-free .h2-flow-number.number03::before {
	content: '03';
}
.contents-free .h2-flow-number.number04::before {
	content: '04';
}
.contents-free .h2-flow-number.number05::before {
	content: '05';
}
.contents-free .h2-flow-number.number06::before {
	content: '06';
} */


.contents-free .flow-detail .img-case-flow {
	width: 100px;
}

.contents-free .flow-detail .text-case-flow {
	width: calc(100% - 150px);
	padding: 0;
}

.contents-free .box-title {
	margin-top:0;
	margin-bottom: 1em;
	border:none;
	padding-bottom:0;
}

.contents-free .img-flow-content {
	border-radius: var(--radius);
	margin: 40px 0;
}

.contents-free .data-service-flow {
	padding: 20px 30px;
}

.title-data {
	color: var(--main-color-flow-3);
	font-family: var(--font-en-2);
	font-weight: var(--bold);
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1;
	margin-bottom: 1em;
}

.item-table-data {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.item-table-data:not(:last-of-type) {
	margin-bottom: 15px;
}

.item-table-data dt {
	width: 100px;
	color: var(--text-main-flow);
	font-weight: var(--bold);
	font-size: 1.4rem;
	margin-top: .5rem;
}

.item-table-data:first-of-type dt {
	margin-top: .2rem;
}

.item-table-data dd {
	width: calc(100% - 120px);
	line-height: 1.5;
	margin-top: .4rem;
}

.list-job-data,
.list-tool-data {
	row-gap: 15px;
	margin: 0;
}

.contents-free .item-job-data {
	color: #FFF;
	font-size: 14px;
	list-style: none;
	padding: .25em 1.2em;
	border-radius: 30px;
	margin: 0 10px 0 0;
	margin:0;
	margin-right:10px;
	font-weight: var(--medium);
}

.item-job-data.director {
	background-color: #7DAFBE;
}

.item-job-data.designer {
	background-color: #D09696;
}

.item-job-data.writer {
	background-color: #89BF84;
}

.item-job-data.engineer {
	background-color: #D6B26C;
}

.contents-free .item-tool-data {
	color: var(--text-main-flow);
	font-family: var(--font-en-2);
	font-weight: var(--normal);
	line-height: 1.3;
	list-style: none;
	padding-left: 32px;
/* 	margin: 0 20px 0 0; */
	position: relative;
	margin:0;
	margin-right:10px;
}

.item-tool-data::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.item-tool-data.xd::before {
	background-image: url(../../uploads/icon-xd.svg);
}

.item-tool-data.figma::before {
	background-image: url(../../uploads/icon-figma.svg);
}

.item-tool-data.dreamweaver::before {
	background-image: url(https://lms.non-designschool.com/wp-content/uploads/icon-dreamweaver.svg);
}

.item-tool-data.notion::before {
	background-image: url(../../uploads/icon-notion.svg);
}

.item-tool-data.dropbox::before {
	background-image: url(https://lms.non-designschool.com/wp-content/uploads/icon-dropbox.svg);
}

.large-data {
	color: var(--text-main-flow);
	font-family: var(--font-en-2);
	font-weight: var(--bold);
	font-size: 2rem;
	letter-spacing: .1em;
	display: inline-block;
	margin-right: .2em;
}

.contents-free .box-scope {
	position: relative;
}

.contents-free .box-scope::before {
	content: '';
	display: block;
	width: 2px;
	height: 100%;
	background-color: var(--sub-color-flow-3);
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: -1;
}

.flex-title-flow {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}

.cell-scope {
	width: calc(50% - 20px);
}

.contents-free .item-scope-wrap {
	margin-bottom: 36px;
	position: relative;
}

.contents-free .item-scope-wrap:last-of-type {
	margin-bottom: 0;
}

.contents-free .item-scope-wrap::after {
	content: '';
	display: block;
	width: 14px;
	height: 8px;
	background-image: url(https://lms.non-designschool.com/wp-content/uploads/icon-down.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	left: 22%;
	bottom: -22px;
}

.contents-free .item-scope-wrap:last-of-type::after {
	display: none;
}

.contents-free .item-scope {
	font-size: 15px;
	font-weight: var(--normal);
	text-align: center;
	border-radius: var(--radius);
	padding: 10.5px 18px;
}

.contents-free .item-scope.lexa {
	width: calc(50% - 20px);
	background-color: var(--sub-color-flow-3);
	color: #151515;
	font-weight: var(--medium);
}

.contents-free .item-scope.both {
	color: var(--main-color-flow-2);
	background-color: #FFF;
	border: solid 2px currentColor;
	font-weight: var(--medium);
}

.container-flow {
	max-width: var(--container-flow);
	padding-right: var(--container-flow-side);
	padding-left: var(--container-flow-side);
	position: relative;
	margin: 0 auto;
	width: 100%;
}

.box-flow-support:first-of-type,
.box-flow-support:nth-of-type(2) {
	margin-bottom: 30px;
}

.box-flow-support img {
	height: 120px;
	margin-bottom: 30px;
}

.box-flow-support .h3-page {
	margin-bottom: .5em;
}

@media only screen and (max-width: 1080px) {
	.page-template-page-flow,
	.parent-pageid-36 {
		background-color: #FFF;
	}

	.flow-feature {
		padding: 0 5%;
	}

	.container-flow {
		padding: 0;
	}

	.cell-left-flow {
		display: none;
	}

	.cell-right-flow {
		width: 100%;
		padding: 100px 5%;
		border-radius: 0;
	}

	.cell-right-flow .flow-wrap {
		padding-left: 30px;
	}

	.cell-right-flow .flow-wrap::before {
		content: '';
		display: block;
		width: 2px;
		height: 100%;
		background-color: var(--sub-color-flow-2);
		position: absolute;
		left: -5px;
		bottom: -12px;
	}

	.cell-right-flow .flow-wrap::after {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: var(--main-color-flow-3);
		position: absolute;
		left: -14px;
		top: 1em;
		transform: translateY(-4px);
	}

	.box-comparison {
		padding: 30px 15px;
		margin-bottom: 15px;
	}

	.contents-free .list-comparison li {
		font-size: 11px;
		padding:5.5px 11px;
	}
}

@media only screen and (max-width: 560px) {
	.text-flow-feature {
		padding: 50px 40px 40px;
	}

	.case-flow-item {
		padding: 20px 15px;
	}

	.img-case-flow {
		width: 100px;
	}

	.contents-free .case-flow-wrap .text-case-flow {
		max-width: calc(100% - 100px);
		padding-left: 30px;
	}

	.main-archive-blog .flex-case-flow-item {
		flex-direction: column;
		row-gap: 15px;
	}

	.main-archive-blog .text-case-flow {
		padding-left: 0;
		width: 90%;
		max-width: none;
	}

	.case-flow-item .box-card {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.case-flow-item .box-card:not(:last-of-type) {
		margin-bottom: 15px;
	}

	.case-flow-item .box-card img {
		width: 80px;
		margin: 0;
	}

	.text-case-flow-card {
		text-align: left;
		width: min(240px, calc(100% - 80px));
		padding-left: 25px;
		margin: 0;
	}

	.text-case-flow-card .btn-wrap {
		text-align: left;
	}

	.text-case-flow .btn,
	.text-case-flow-card .btn {
		width: 100%;
	}
	
	.contents-free .h2-flow {
		font-size:20px;
		margin-bottom: 26px;
	}

	.contents-free .h2-flow-number::before {
		font-size: 22px;
	}

	.flow-detail .img-case-flow {
		margin: auto;
	}

	.flow-detail .text-case-flow {
		width: 100%;
		max-width: unset;
	}

	.flow-detail .title-case-flow {
		text-align: center;
	}

	.data-service-flow {
		padding: 20px;
	}

	.list-job-data,
	.list-tool-data {
		row-gap: 8px;
	}

	.item-tool-data {
		padding-left: 28px;
	}

	.item-tool-data::before {
		width: 20px;
		height: 20px;
	}

	.item-table-data {
		align-items: flex-start;
	}

	.contents-free .box-scope {
		padding: 30px 10px;
	}

	.contents-free .item-scope {
		font-size: 12px;
		padding: 6px 12px;
	}

	.item-scope.lexa {
		width: calc(50% - 10px); 
	}

	.text-flow-feature {
		padding: 40px 30px 40px;
	}

	.cell-right-flow .flow-wrap {
		padding-left: 24px;
	}

	.cell-right-flow .flow-wrap::before {
		left: 0;
	}

	.cell-right-flow .flow-wrap::after {
		width: 15px;
		height: 15px;
		left: -7px;
		top: 1em;
	}
}
/*--- flow page-top end ---*/

/*--- flow page-single end ---*/
.single-wrap {
	margin-top: 140px;
}

.flex-single-blog {
	align-items: flex-start;
}

.content-single-blog {
	width: calc(100% - 340px);
}

.index-single {
	width: 280px;
	position: sticky;
	top: 140px;
}

.index-single-inner {
	background-color: #FFF;
	padding: 2em 20px 30px;
	border: solid 2px var(--sub-color-flow-3);
	border-radius: var(--radius);
	max-height: calc(100vh - 180px);
	overflow-y: scroll;
}

.title-index-single {
	margin: 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-60%);
}

.title-index-single::before {
	content: '';
	display: block;
	width: 140%;
	height: 2.2rem;
	background-color: #FFF;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: -1;
}

.title-index-single .heading-en {
	margin: 0;
}

.item-index-single {
	margin-bottom: 1rem;
	line-height: 1.6;
	padding-left: 2.4rem;
	position: relative;
}

.item-index-single.index-lvh2 {
	color: var(--text-main-flow);
	font-weight: var(--normal);
}

.item-index-single.index-lvh2::before {
	content: '';
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--main-color-flow-3);
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: .7rem;
}

.item-index-single.index-lvh3 {
	color: var(--text-sub-flow);
	font-size: 1.4rem;
}

.item-index-single.index-lvh3::before {
	content: '';
	display: block;
	width: .8rem;
	height: 1px;
	background-color: currentColor;
	position: absolute;
	left: 1rem;
	top: 1rem;
}

.item-index-single.index-lvh3+.item-index-single.index-lvh2 {
	margin-top: 3rem;
}

.item-index-single a {
	color: inherit;
	text-decoration: none;
}

.contents-free .h1-flow {
	font-size: 36px;
	font-weight: var(--bold);
	letter-spacing: .1em;
	padding-bottom: 36px;
	margin-bottom: 54px;
	position: relative;
	color:#151515;
}

.contents-free .h1-flow::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: var(--sub-color-flow-2);
	position: absolute;
	left: 0;
	bottom: 0;
}

.contents-free .h1-flow-inner {
	font-size: 36px;
	font-weight: var(--bold);
}

.contents-free .h1-flow .heading-en {
	margin: 0!important;
}

.abstract-flow-single {
	padding-bottom: 120px;
	margin-bottom: 120px;
	border-bottom: solid 3px var(--sub-color-flow-2);
}

.data-abstract-flow .h2-page {
	margin-bottom: .8em;
}

.contents-free .head-data-abstract-flow {
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: solid 2px var(--sub-color-flow-3);
	margin-top: 0;
}

.head-data-abstract-flow.tool {
	padding-bottom: 20px;
}

.item-days-data {
	font-weight: var(--normal);
}

.contents-free .item-days-data .large-data {
	font-size: 24px;
	margin-left: 2px;
}

.point-flow-single {
	padding: 30px;
	margin-top: 20px;
}

.contents-free .point-flow-single:first-of-type {
	margin-top: 40px;
}

.contents-free .num-title-box {
	color: var(--main-color-flow-2);
	font-family: var(--font-en-2);
	font-size: 24px;
	font-weight: var(--bold);
	border-bottom: solid 2px currentColor;
	display: inline-block;
	margin-right: 6px;
}

.contents-free .h4-flow-single.h3-page {
	padding-bottom: 8px;
	margin-bottom: 20px;
	position: relative;
}

.contents-free .h4-flow-single::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background-color: var(--sub-color-flow-3);
	position: absolute;
	left: 0;
	bottom: 0;
}

.title-box-other {
	font-size: 2.2rem;
	padding-bottom: .5em;
	position: relative;
	margin-bottom: 2em;
}

.title-box-other::after {
	content: '';
	display: block;
	width: 70px;
	height: 2px;
	background-color: var(--main-color-flow-2);
	position: absolute;
	left: 0;
	bottom: 0;
}

.relate-content {
	margin-bottom: 3em;
}

.other-single .archive-card {
	margin-right: 0;
}

.img-relate-flow {
	background-color: #EFEFEF;
}

.img-relate-flow img {
	object-fit: contain;
}

.text-relate-flow {
	padding-bottom: 2em;
}

.step-relate-flow {
	color: var(--main-color-flow-2);
	font-weight: var(--normal);
	line-height: 1;
	display: inline-block;
	position: relative;
}

.step-relate-flow.prev {
	padding-left: 1.5em;
}

.step-relate-flow.next {
	padding-right: 1.5em;
}

.step-relate-flow::after {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: .05em;
}

.step-relate-flow.prev::after {
	background-image: url(../../uploads/icon-left-sky.svg);
	left: 0;
}

.step-relate-flow.next::after {
	background-image: url(../../uploads/icon-right-sky.svg);
	right: 0;
}

.text-relate-flow .title-archive {
	font-size: 2rem;
	font-weight: var(--normal);
	padding-left: 2em;
	position: relative;
}

.text-relate-flow .title-archive span {
	color: var(--text-light-flow);
	font-family: var(--font-en-2);
	font-weight: var(--bold);
	border-bottom: solid 2px currentColor;
	position: absolute;
	left: 0;
	top: 0;
	letter-spacing: .1em;
}

@media only screen and (max-width: 1080px) {
	.content-single-blog {
		width: 100%;
	}

	.contents-free .h1-flow,
	.contents-free .h1-flow-inner {
		font-size: 28px;
	}

	.index-single {
		display: none;
	}

	.point-flow-single {
		padding: 20px;
	}

	.contents-free .num-title-box {
		font-size: 20px;
	}

	.main-flow-single #content-single,
	.other-single {
		padding-right: var(--container-flow-side);
		padding-left: var(--container-flow-side);
	}

	.other-single .text-archive {
		background-color: var(--bg-flow);
	}
}

@media only screen and (max-width: 560px) {
	.contents-free .h1-flow,
	.contents-free .h1-flow-inner {
		font-size: 24px;
	}

	.other-single .archive-works-card:first-of-type {
		margin-bottom: 50px;
	}
	
	.contents-free .h4-flow-single.h3-page {
		font-size: 18px;
	}
}
/*--- flow page-single end ---*/

/*--- flow COLOR ---*/
.bg-main-color-flow-1 {
	background-color: var(--main-color-flow-1);
}

.bg-accent-color-flow-1 {
	background-color: var(--accent-color-flow-1);
}

.color-base-flow {
	color: var(--bg-flow);
}

.color-main-flow-1 {
	color: var(--main-color-flow-1);
}

.color-accent-flow-1 {
	color: var(--accent-color-flow-1);
}
/*--- flow COLOR end ---*/

/*--- flow MARGIN end ---*/
.margin-1 {
	margin-bottom: 180px;
}
.margin-2 {
	margin-bottom: 140px;
}
.margin-3 {
	margin-bottom: 120px;
}
.margin-4 {
	margin-bottom: 100px;
}
.margin-5 {
	margin-bottom: 80px;
}
.margin-6 {
	margin-bottom: 60px;
}
.margin-h {
	margin-bottom: 20px;
}



@media only screen and (max-width: 1080px) {
	.margin-1{
		margin-bottom: 140px;
	}
	.margin-2 {
		margin-bottom: 120px;
	}
	.margin-3{
		margin-bottom: 100px;
	}
	.margin-4{
		margin-bottom: 80px;
	}
	.margin-5{
		margin-bottom: 60px;
	}
	.margin-6{
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 560px) {
	.margin-1{
		margin-bottom: 120px;
	}
	.margin-2 {
		margin-bottom: 90px;
	}
	.margin-3{
		margin-bottom: 80px;
	}
	.margin-4{
		margin-bottom: 60px;
	}
	.margin-5{
		margin-bottom: 50px;
	}
	.margin-6{
		margin-bottom: 40px;
	}
}
/*--- flow MARGIN end ---*/

/*--- flow page 追加内容 ---*/
.contents-free {
	max-width:900px;
	margin: 0 auto;
	font-family: var(--font-jp);
    letter-spacing: .1em;
}

.contents-free .h2-page {
	font-size:24px;
	border:none;
	padding-bottom: 0;
	font-weight: var(--bold);	
}

.contents-free .h3-page {
	color: var(--text-main-flow);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	border:none;
	padding-bottom:0;
}

.contents-free p,
.contents-free li
{
	font-size:16px;
	color: #151515;
	font-weight: var(--medium);
	line-height:1.7;
}

.contents-free ul {
	margin-top: 16px;
	margin-bottom: 16px;
}

.contents-free .small {
	font-size:13.5px;
}

.free-heading {
	font-weight: var(--bold);
    border: 1px solid currentColor;
    background: #fff;
    padding: 5px 7px 5px 7px;
	text-align:center;
	font-size:16px;
	min-width:180px;
	color:#707071;
}

@media only screen and (max-width: 768px) {
	.contents-free {
		padding:0 var(--container-side);
	}
	.free-heading {
		font-size:14px;
		min-width:120px;
	}
}

@media only screen and (max-width: 560px) {
	.contents-free {
		padding:0;
	}
	
	.contents-free .h2-page {
		font-size:20px;
	}
	
	.contents-free p {
		font-size:15px;
		font-weight: var(--normal);
	}
	
	.contents-free .small {
		font-size:12.75px;
	}
	

	.contents-free .text-case-flow {
		max-width:100%;
		margin-top:15px;
		padding-left:0;
	}
	.contents-free .img-case-flow {
		margin:0 auto;
	}
		.contents-free .img-case-flow {
		margin:0;
	}
	.contents-free  .text-case-flow .p-sub {
		margin-bottom:0;
		max-width:fit-content;
		margin-left:auto;
		margin-right:auto;
	}
	.contents-free .title-case-flow {
		margin-bottom:10px;
		text-align:center;
	}
}


/*********************
RESPONSIVE
*********************/
@media only screen and (min-width: 1081px) {
   .tb_only { display: none !important; }
   .sp_only { display: none !important; }
   .sp_tb { display: none !important; }
}

@media only screen and (min-width: 561px) and (max-width: 1080px) {
   .pc_only { display: none !important; }
   .sp_only { display: none !important; }
   .sp_pc { display: none !important; }
}

@media only screen and (max-width: 560px) {
   .pc_only { display: none !important; }
   .tb_only { display: none !important; }
   .tb_pc { display:none!important; }
}

@media only screen and (max-width: 320px) {
   html { font-size: .58em; }
}

/* youtube アスペクト比調整用 */
.youtube-ratio iframe {
  width: 100%;
	height:100%;
  aspect-ratio: 16 / 9;
}