@charset "utf-8";


.pave-fv {
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sub-comment {
    margin-top: 60px;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 10px;
}
.sub-comment p {
    font-size: 17px;
}

@media (max-width: 815px) {

	.pave-fv {
		height: 200px;
	}
	.sub-comment {
		margin-top: 40px;
	}
	.sub-comment p {
		font-size: 12px;
	}

}

/*----------------------
service
-----------------------*/
.service-nav {
	padding: 60px;
	margin-bottom: 90px;
    border-radius: 10px;
    background: url("../img/pages/service_nav_bg.jpg") no-repeat center;
    background-size: cover;
}
.service-nav__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -4%;
}
.service-nav__list >li {
	width: 48%;
	margin: 4% 0 0 4%;
	border: solid 2px;
	border-radius: 1000px;
	overflow: hidden;
}
.service-nav__list >li.sd01 {
	border: solid 2px #5bcdb6;
}
.service-nav__list >li.sd02 {
	border: solid 2px #5bcdb6;
}
.service-nav__list >li.sd03 {
	border: solid 2px #8595c8;
}
.service-nav__list >li.sd04 {
	border: solid 2px #e9769f;
}
.service-nav__list >li.sd05 {
	border: solid 2px #e79042;
}
.service-nav__list >li.sd06 {
	border: solid 2px #656d6f;
}
.service-nav__list >li:nth-child(2n+1) {
	margin-left: 0;
}
.service-nav__list >li a {
	font-size: 19px;
	font-weight: 500;
	color: var(--base-color);
	display: flex;
	padding: 15px 60px 15px 70px;
	background: #fff;
	position: relative;
}
.service-nav__list >li a i {
    width: 60px;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    top: 0;
}
.service-nav__list >li.sd01 a i {
	background-image: url("../img/pages/icon_service01.png");
	background-size: 26px 33px;
}
.service-nav__list >li.sd02 a i {
	background-image: url("../img/pages/icon_service02.png");
	background-size: 27px 35px;
}
.service-nav__list >li.sd03 a i {
	background-image: url("../img/pages/icon_service03.png");
	background-size: 30px 23px;
}
.service-nav__list >li.sd04 a i {
	background-image: url("../img/pages/icon_service04.png");
	background-size: 35px 25px;
}
.service-nav__list >li.sd05 a i {
	background-image: url("../img/pages/icon_service05.png");
	background-size: 32px 27px;
}
.service-nav__list >li.sd06 a i {
	background-image: url("../img/pages/icon_service06.png");
	background-size: 35px 33px;
}
.service-nav__list >li a .text span {
	font-size: 14px;
}
.service-nav__list >li a .arrow {
	display: block;
	width: 55px;
	height: 100%;
	background: #e9f6f5;
	position: absolute;
	right: 0;
	top: 0;
}
.service-nav__list >li.sd03 a .arrow {
	background: #e9eff6;
}
.service-nav__list >li.sd04 a .arrow {
	background: #faebf1;
}
.service-nav__list >li.sd05 a .arrow {
	background: #f8ebe0;
}
.service-nav__list >li.sd06 a .arrow {
	background: #eef1f5;
}
.service-nav__list >li a .arrow:after {
    content: '';
	color: #5bcdb6;
    width: 8px;
    height: 8px;
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 6px);
}
.service-nav__list >li.sd03 a .arrow:after {
	color: #8595c8;
}
.service-nav__list >li.sd04 a .arrow:after {
	color: #e9769f;
}
.service-nav__list >li.sd05 a .arrow:after {
	color: #e79042;
}
.service-nav__list >li.sd06 a .arrow:after {
	color: #656d6f;
}

.service-detail {
    margin-bottom: 100px;
}
.service-detail-title {
	font-size: 22px;
    background: #e9f6f5;
	padding: 15px 15px 15px 70px;
	margin-bottom: 50px;
	position: relative;
}
.service-detail-title i {
    width: 60px;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 5px;
    top: 0;
}
.service-detail-title i.sd01-icon {
	background-image: url("../img/pages/icon_service01.png");
	background-size: 26px 33px;
}
.service-detail-title i.sd02-icon {
	background-image: url("../img/pages/icon_service02.png");
	background-size: 27px 35px;
}
.service-detail-title i.sd03-icon {
	background-image: url("../img/pages/icon_service03.png");
	background-size: 30px 23px;
}
.service-detail-title i.sd04-icon {
	background-image: url("../img/pages/icon_service04.png");
	background-size: 35px 25px;
}
.service-detail-title i.sd05-icon {
	background-image: url("../img/pages/icon_service05.png");
	background-size: 32px 27px;
}
.service-detail-title i.sd06-icon {
	background-image: url("../img/pages/icon_service06.png");
	background-size: 35px 33px;
}
.service-detail-title span {
	font-size: 20px;
	font-weight: 400;
}

.service-detail p {
    font-size: 17px;
    line-height: 2;
}
.service-detail p.font-s {
    font-size: 14px;
    margin-top: 30px;
}

.service-detail .need {
    margin-top: 50px;
    border: solid 1px #5ac8b2;
    border-radius: 10px;
    overflow: hidden;
}
.service-detail .need h4 {
    font-size: 18px;
    color: #5ac8b2;
    background: #e9f6f5;
    padding: 10px 20px;
}
.service-detail .need__list {
    padding: 20px;
}
.service-detail .need__list >li {
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}
.service-detail .need__list >li:before {
    content: '□';
    color: #5bb6cd;
    position: absolute;
    left: 0;
}

.service-detail-in {
    display: flex;
    justify-content: space-between;
}
.service-detail-info {
    width: 48%;
}
.service-detail-img {
    width: 48%;
}

.service-detail-sub {
    margin-top: 100px;
    border: solid 1px #5ac8b2;
    border-radius: 10px;
    overflow: hidden;
}
.service-detail-sub h3 {
    font-size: 20px;
    background: #e9f6f5;
    padding: 20px;
    text-align: center;
}
.service-detail-sub-in {
    padding: 60px 50px;
}
.service-detail-sub__list >li {
    display: flex;
    justify-content: space-between;
	margin-bottom: 70px;
}
.service-detail-sub__list .img {
	width: 40%;
}
.service-detail-sub__list .info {
	width: 55%;
}
.service-detail-sub__list .info .info-title {
    font-size: 20px;
    padding-left: 15px;
    margin-bottom: 35px;
    border-left: solid 5px #5bb6cd;
    position: relative;
}
.service-detail-sub__list .info .info-title:after {
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: dotted 1px #5bb6cd;
    position: absolute;
    left: 0;
    bottom: -10px;
}
.service-detail-sub__list .more-info {
    font-size: 18px;
    cursor: pointer;
    color: #5bb6cd;
    margin-top: 20px;
}
.service-detail-sub__list .more-info:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg);
    vertical-align: 2px;
    margin-left: 10px;
}


.more-info-box {
    margin-top: 50px;
}
.more-info-box h4 {
    font-size: 20px;
    padding-left: 15px;
    margin-bottom: 35px;
    border-left: solid 5px #5bb6cd;
    position: relative;
}
.more-info-box h4:after {
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: dotted 1px #5bb6cd;
    position: absolute;
    left: 0;
    bottom: -10px;
}
.more-info-box h5 {
    color: #5bb6cd;
    font-size: 20px;
    padding: 10px 0;
    margin-bottom: 20px;
    border-top: dotted 1px;
    border-bottom: dotted 1px;
}
.more-info__list >li {
    margin-bottom: 20px;
}
.more-info__list >li h6 {
    font-size: 17px;
    margin-bottom: 5px;
}
.more-info__sublist {
	margin-bottom: 30px;
}
.more-info__sublist >li {
	font-size: 17px;
	font-weight: 500;
    margin-bottom: 10px;
	padding-left: 25px;
	position: relative;
}
.more-info__sublist >li:before {
    content: '□';
    color: #8595c8;
    position: absolute;
    left: 0;
}

.more-info-box.-hidden {
	display: none;
}
.more-info-box.-flex {
	display: flex;
	justify-content: space-between;
}
.more-info-box.-flex .box {
	width: 48%;
}

.service-caution {
    padding: 20px;
    margin-top: 50px;
    border: solid 1px;
}
.service-caution__list >li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
.service-caution__list >li:before {
    content: '※';
    position: absolute;
    left: 0;
}


/* sd03 */
#sd03 .service-detail-title {
	background: #e9eff6;
}

/* sd04 */
#sd04 .service-detail-title {
	background: #faebf1;
}
#sd04 .need {
	border: solid 1px #e9769f;
	margin-bottom: 50px;
}
#sd04 .need h4 {
	color: #e9769f;
	background: #faebf1;
}

/* sd05 */
#sd05 .service-detail-title {
	background: #f8ebe0;
}
#sd05 .service-detail-sub {
	border: solid 1px #e79042;
}
#sd05 .service-detail-sub__list .info .info-title {
	border-left: solid 5px #e79042;
}
.psychological__list {
    margin-bottom: 20px;
}
.psychological__list >li {
    font-size: 17px;
    font-weight: 500;
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}
.psychological__list >li:before {
    content: '■';
    color: #e79042;
    position: absolute;
    left: 0;
}

/* sd06 */
#sd06 .service-detail-title {
	background: #eef1f5;
}





@media (max-width: 815px) {

	.service-nav {
		padding: 30px 20px;
		margin-bottom: 50px;
	}
	.service-nav__list >li {
		border-radius: 10px;
	}
	.service-nav__list >li a {
		font-size: 12px;
		height: 100%;
		display: block;
		padding: 0 10px 40px;
		text-align: center;
	}
	.service-nav__list >li a i {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0 auto;
		position: relative;
		left: auto;
		top: 0;
	}
	.service-nav__list >li a .text {
		display: block;
		min-height: 3em;
	}
	.service-nav__list >li a .text span {
		font-size: 11px;
	}
	.service-nav__list >li a .arrow {
		width: 100%;
		height: 30px;
		right: 0;
		top: auto;
		bottom: 0;
	}
	.service-nav__list >li a .arrow:after {
		transform: rotate(135deg);
		left: calc(50% - 6px);
	}

	.service-detail {
		margin-bottom: 60px;
	}
	.service-detail p {
		font-size: 14px;
	}
	.service-detail p.font-s {
		font-size: 12px;
		margin-top: 20px;
	}

	.service-detail .need {
		margin-top: 30px;
	}
	.service-detail .need h4 {
		font-size: 14px;
		padding: 10px;
		text-align: center;
	}
	.service-detail .need__list >li {
		font-size: 12px;
		margin-bottom: 5px;
		padding-left: 20px;
	}


	.service-detail-title {
		font-size: 18px;
		margin-bottom: 30px;
	}	
	.service-detail-title span {
		font-size: 14px;
		display: block;
	}
	.service-detail-in {
		display: block;
	}
	.service-detail-info {
		width: 100%;
		margin-bottom: 30px;
	}
	.service-detail-img {
		width: 100%;
	}

	.service-detail-sub {
		margin-top: 40px;
	}
	.service-detail-sub h3 {
		font-size: 16px;
		padding: 10px;
	}
	.service-detail-sub-in {
		padding: 30px 20px;
	}
	.service-detail-sub__list >li {
		display: block;
		margin-bottom: 40px;
	}
	.service-detail-sub__list .img {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	.service-detail-sub__list .info {
		width: 100%;
	}
	.service-detail-sub__list .info .info-title {
		font-size: 16px;
	}
	.service-detail-sub__list .more-info {
		font-size: 16px;
	}

	.more-info-box h4 {
		font-size: 16px;
	}
	.more-info-box h5 {
		font-size: 16px;
	}
	.more-info__list >li h6 {
		font-size: 14px;
	}
	.more-info__sublist >li {
		font-size: 12px;
		padding-left: 20px;
		margin-bottom: 5px;
	}

	.more-info-box.-flex {
		display: block;
	}
	.more-info-box.-flex .box {
		width: 100%;
		margin-bottom: 50px;
	}

	#sd04 .need {
		margin: 30px 0;
	}

	.psychological__list >li {
		font-size: 12px;
		padding-left: 20px;
		margin-bottom: 5px;
	}
	
	
}


/*----------------------
reserve
-----------------------*/
.reserve-step {
    margin-top: 80px;
}
.reserve-step-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px;
}
.reserve-step-title span {
    display: block;
    font-size: 80%;
    font-weight: 400;
    margin-top: 5px;
    color: #dd0000;
}
.cal-wrap {
	position: relative;
}
.loadingWrap.white {
	background: rgba(255,255,255,0.8);
}

#change-week {
    display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.change-week-btn {
	cursor: pointer;
}
.prev-week {
    margin-right: auto;
}
.next-week {
    margin-left: auto;
}

.saturday {
	color: #73ccdc;
}
.sunday {
	color: #dc7373;
}
.holiday {
	color: #dc7373;
}

table.time-schedule__list {
    width: 100%;
    table-layout: fixed;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-collapse: collapse;
    margin-top: 50px;
}
table.time-schedule__list tr.sp-mode {
    display: none;
}
table.time-schedule__list th {
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    padding: 5px;
}
table.time-schedule__list td {
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 5px;
}
td.time-detail.ok {
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
td.time-detail.ok:hover {
    color: #fff;
    background: var(--main-color);
}
td.time-detail.close {
    color: #fff;
    background: #888;
}


#reserve-form {
	display: none;
    width: 100%;
    height: 100%;
	padding: 20px;
	overflow: auto;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}
.reserve-form-in {
    max-width: 800px;
    background: #fff;
    position: relative;
    margin: 100px auto;
    border-radius: 10px;
    padding: 50px;
}
.reserve-form-box h3 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}
.reserve-form-item {
    margin-bottom: 30px;
}
.reserve-form__caution {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 40px;
}
.reserve-form__course {
    margin-bottom: 30px;
}
.reserve-form-date,
.reserve-form-time {
    font-size: 20px;
    font-weight: 500;
}

.cmn-input,
.cmn-input-s,
.cmn-input-m,
.cmn-select,
.cmn-select-s,
.cmn-textarea {
	font-size: 16px;
}
.cmn-label {
    display: inline-block;
    margin: 5px 10px 5px 0;
}
.cmn-input {
    width: 100%;
    height: 50px;
    border: solid 1px #eee;
	background: #f1f1f1;
    text-indent: 10px;
}
.cmn-input-s {
    width: 25%;
    height: 50px;
    border: solid 1px #eee;
	background: #f1f1f1;
    text-indent: 10px;
}
.cmn-input-m {
    width: 60%;
    height: 50px;
    border: solid 1px #f1f1f1;
	background: #fff;
    text-indent: 10px;
}
.cmn-select {
    width: 100%;
    height: 50px;
    border: solid 1px #eee;
	background: #f1f1f1;
}
.cmn-select-s {
    width: 100px;
    height: 50px;
    border: solid 1px #eee;
	background: #f1f1f1;
}
.cmn-textarea {
    width: 100%;
    height: 100px;
    border: solid 1px #eee;
	background: #fff;
}
.contact-form ::placeholder{
  color:#ccc
}

#btn-send {
    cursor: pointer;
    display: block;
    font-size: 20px;
    font-weight: 500;
    max-width: 300px;
    width: 100%;
    text-align: center;
    line-height: 1;
    padding: 20px 0;
    margin: 30px auto 0;
    color: var(--main-color);
    border: solid 2px;
    background: #fff;
    border-radius: 100px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#btn-send i {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: var(--main-color);
    border-radius: 10000px;
    position: relative;
    vertical-align: -5px;
    margin-left: 10px;
}
#btn-send i:after {
    content: '';
    color: #fff;
    display: block;
    width: 6px;
    height: 6px;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(45deg);
    position: absolute;
    top: 9px;
    left: 7px;
}
#btn-send:hover {
	color: #fff;
	background: var(--main-color);
}

.send-msg {
    display: none;	
    border: solid 1px;
    padding: 10px;
}
.send-msg.send_no {
	color: red;
}

#reserve-form__close {
    color: #fff;
    font-size: 50px;
    line-height: 1;
	cursor: pointer;
    position: absolute;
    right: 0;
    top: -50px;
}

.reserve-materials {
    margin-top: 100px;
    padding: 50px 30px;
    line-height: 2;
    background: #f7f4ee;
    border-radius: 10px;
}
.reserve-materials h3 {
    font-size: 20px;
    padding-left: 15px;
    margin-bottom: 35px;
    border-left: solid 5px #5bb6cd;
    position: relative;
}
.reserve-materials h3:after {
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: dotted 1px #5bb6cd;
    position: absolute;
    left: 0;
    bottom: -10px;
}
.reserve-materials__list {
    display: flex;
	justify-content: space-between;
    margin-top: 30px;
}
.reserve-materials__list >li {
    width: 48%;
}
.reserve-materials__list >li a {
    display: flex;
    align-items: center;
    padding: 10px 30px;
    height: 100%;
    color: var(--main-color);
    line-height: 1.6;
    background: #fff;
	border:solid 1px var(--main-color);
    border-radius: 10000px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.reserve-materials__list >li a i {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url("../img/cmn/icon_pdf.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.reserve-materials__list >li a span {
    width: calc(100% - 40px);
}

.reserve-materials__list >li a:hover {
	color: #fff;
	background: var(--main-color);
}
.reserve-materials__list >li a:hover i {
	background-image: url("../img/cmn/icon_pdf_w.png");
}




@media (max-width: 815px) {

	#reserve-schedule {
		overflow-x: scroll;
		width: calc(100% + 20px);
	}
	table.time-schedule__list {
		width: 800px;
	}
	table.time-schedule__list tr.sp-mode {
		display: table-row;
	}

	.reserve-form-in {
		padding: 50px 20px;
	}
	table.time-schedule__list th.sticky-column {
		padding-left: 1px;
		position: sticky;
		left: 0;
		background-color: #fff;
		z-index: 1;
	}
	
	.reserve-materials {
		margin-top: 50px;
		padding: 30px 20px;
	}
	.reserve-materials h3 {
		font-size: 16px;
	}
	.reserve-materials__list {
		display: block;
	}	
	.reserve-materials__list >li {
		width: 100%;
		margin-bottom: 15px;
	}


}


@keyframes tickerfadeOut {
  0% {
     opacity: 0;
  }
  10% {
     opacity: 1;
  }
  90% {
     opacity: 1;
  }
  100% {
     opacity: 0;
  }
}
@keyframes tickerMove {
  0% {
     transform: translateX(-10px);
  }
  20% {
     transform: translateX(10px);
  }
  40% {
     transform: translateX(-10px);
  }
  60% {
     transform: translateX(10px);
  }
  80% {
     transform: translateX(-10px);
  }
  100% {
     transform: translateX(10px);
  }
}

.e-g-slide-ticker {
    width: 150px;
    height: 80px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 220px;
    left: calc(50% - 75px);
    z-index: 1;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.e-g-slide-ticker:after {
	content: '';
	display:block;
	width: 50px;
	height: 48px;
	background: url("../img/cmn/icon_scroll_w.png") no-repeat center;
	background-size: contain;
	position: absolute;
	top: calc(50% - 24px);
	left: calc(50% - 24px);
}
.e-g-slide-ticker.animated {
	animation: tickerfadeOut 4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.e-g-slide-ticker.animated:after {
	animation: tickerMove 4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}