:root {
    --main-theme-color: #313131;
    --sub-theme-color: #D9D5BE;
    --bg-color: #F8F4EA;
    --main-active-color: #FD9494;
}
.sp {
    display: none;
}
.pc {
    display: inline;
}
.key-box {
	padding: 161px 0 50px;
	/*background-color: var(--sub-theme-color);*/
	background-color: #E6F0FF;
	background-image: url("../img/dog/bg.svg");
	background-position: bottom;
	background-size: cover;
}
/*.hirahira {
	height: 60px;
	background-color: #E6F0FF;
	background-image: url("../img/key-hirahira.svg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: auto;
}*/

.key-box h1, .key-box .fukidashi {
	color: #3B352D;
	text-align: center;
}

.key-box .fukidashi {
	font-size: 32px;
	line-height: 43px;
}

.fukidashi:before {
	content: '';
	width: 20px;
	height: 43px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url("../img/dog/fukidashi_l.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	display: inline-block;
}
.fukidashi:after {
	content: '';
	width: 20px;
	height: 43px;
	padding-right: 65px;
	vertical-align: middle;
	background-image: url("../img/dog/fukidashi_r.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	display: inline-block;
}

.key-box h1 {
	font-size: 56px;
}

.top-search-box {
    border: 2px solid var(--main-theme-color);
    border-radius: 50px;
    width: 626px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    color: var(--sub-theme-color);
    background-color: #ffffff;
    padding: 0;
}

.top-search-box .row {
	justify-content: space-evenly;
}

.top-search-box .top-s-btn {
	/*width: 420px;*/
	height: 134px;
	color: var(--sub-theme-color);
	background-color: #E6F0FF;
	border: 3px solid var(--sub-theme-color);
	border-radius: 67px;
	justify-content: space-evenly;
	align-items: center;
}

.top-search-box .top-s-btn:after {
	content: '';
	width: 30px;
	height: 30px;
	padding-right: 30px;
	vertical-align: middle;
	background-image: url("../img/search_arrow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	display: inline-block;
}

.top-search-box .top-s-btn .img-box {
	width: 20%;
	margin-right: 15px;
}

.top-search-box .top-s-btn h2 {
	font-size: 24px;
	margin-right: 10px;
}

.top-search-box .icon {
	margin-bottom: 0;
	font-size: 32px;
	font-weight: 600;
}

.top-search-box .explain {
	text-align: center;
	font-weight: 600;
}

.dog-image {
    margin: 50px auto 0;
    width: 1166px;
}
.dog-image img {
    height: auto;
    max-width: 100%;
}

.key-search {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
}
.key-search label, .key-search button {
    height: 100%;
    margin: 0;
}
.key-search label {
    margin: 8px 0;
    position: relative;
    width: 25%;
}
.key-search label[for="city"] {
    width: 26%;
}
.key-search label[for="ward"] {
    width: 23%;
}
.key-search label[for="classroom"] {
    width: 26%;
}
.key-search label::after {
    background: var(--main-theme-color);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
}
.key-search label::before {
    background: url("../img/dog/triangle.svg") no-repeat;
    background-size: contain;
    background-position: center;
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15px;
    margin: auto;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    width: 23px;
}
.key-search label[for="classroom"]::after {
    display: none;
}
.key-search label select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: 0;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 20px;
    outline: none;
    padding: 20px;
    width: 100%;
}
.key-search label[for="city"] select {
    padding: 20px 20px 20px 30px;
}
.btn-wrap {
    border-left: 2px solid var(--main-theme-color);
    width: 25%;
}
.key-search button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--main-active-color);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 24px;
    height: 100%;
    outline: none;
    padding: 28px 0;
    width: 100%;
}
.key-search button::after {
    background: url("../img/dog/search-w.svg") no-repeat;
    background-size: contain;
    background-position: center;
    content: "";
    height: 26px;
    margin-left: 10px;
    width: 26px;
}
.key-search button:hover {
    opacity: 0.5;
}
.left-menu {
	width: 320px;
	margin-right: 45px;
	margin-bottom: 96px;
}
.right-main {
	width: 830px;
}






.color-yellow {
	color: #FCEE21;
}

.marker {
	background: linear-gradient(transparent 45%, #FCEE21 45%);
}

.border-radius {
	border-radius: 15px;
}

.box-shadow {
	box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
}

button.blue-button,
a.blue-button {
	width: 272px;
	height: 50px;
	margin: 50px auto 0;
	color: #ffffff;
	font-weight: 600;
	background-color: var(--main-active-color);
	background-image:  url(../img/dog/slider-next.svg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: right 15px bottom 50%;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	border: none;
}




.main {
	padding-top: 135px;
	background-color: var(--bg-color);
}






.left-menu .search-box, .left-menu .recommended-column {
	padding: 30px 24px;
	background-color: #ffffff;
}

.left-menu .l_title {
	margin-bottom: 20px;
	color: var(--main-theme-color);
	font-size: 20px;
	font-weight: 600;
}

.left-menu .search-box .l_title:before {
	content: '';
	width: 27px;
	height: 27px;
	padding-left: 45px;
	vertical-align: middle;
	background-image: url(../img/dog/icon_l_kensaku.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.left-menu .kensaku input::placeholder {
  color: #8EAFE0;
}

.left-menu .kensaku .search-area {
    color: #909090;
	width: calc(100% - 50px);
	height: 50px;
	margin-bottom: 30px;
	padding: 10px 20px;
	background-color: var(--bg-color);
	border: none;
}
.left-menu .kensaku .search-area::placeholder {
    color: #909090;
}

.left-menu input {
}

.left-menu input[type="text"]:focus,
.left-menu input[type="submit"]:focus {
	outline: 0;
	padding-left: 18px;
	border: 2px solid var(--sub-theme-color);
}

.left-menu .kensaku .search-button {
	width: 50px;
	height: 50px;
	background-color: var(--sub-theme-color);
	background-image: url(../img/dog/icon_l_search_b.svg);
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
}




.left-menu .cls-box {
	padding-bottom: 14px;
	border-bottom: 1px solid #E6F0FF;
}

.left-menu .dtl-box {
	margin-top: 20px;
}


.left-menu .conditions {
	margin-bottom: 15px;
	color: #909090;
	font-size: 16px;
	font-weight: 600;
}




.left-menu .slct {
	margin-bottom: 12px;
	padding-left: 30px;
	color: #606060;
	font-size: 14px;
}

.left-menu .slct div {
	margin: 0 6px;
	display: inline-block;
}

.left-menu .slct div::before,
.left-menu .slct div::after {
	content: '';
	display: block;
	position: absolute;
	pointer-events: none;

	/*triangle set up*/
	border: 1px solid transparent;
	width: 0;
	height: 0;
	right: 7px;
}

/*top arrow*/
.left-menu .slct div::before {
	bottom: 57%;
	border-width: 0 5.5px 5px 5.5px;
	border-bottom-color: var(--sub-theme-color);
}
/*bottom arrow*/
.left-menu .slct div::after {
	border-width: 5px 5.5px 0 5.5px;
	border-top-color: var(--sub-theme-color);
	top: 57%;
}

.left-menu .slct select {
	padding: 5px 29px 5px 16px;
	color: #606060;
	font-size: 16px;
	font-weight: 600;
	background-color: var(--bg-color);
	border: none;
	border-radius: 5px;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.left-menu .slct select:focus {
	outline: none;
}







@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: var(--main-active-color);
    --active-inner: #fff;
    --focus: 2px var(--bg-color);
    --border: var(--sub-theme-color);
    --border-hover: var(--sub-theme-color);
    --background: #D7E7FF;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc, var(--border));
    background: var(--b, var(--bg-color));
    -webkit-transition: background .3s, border-color .3s, box-shadow .2s;
    transition: background .3s, border-color .3s, box-shadow .2s;
  }
  input[type='checkbox']:after,
  input[type='radio']:after {
    content: '';
    display: block;
    left: -1px;
    top: -1px;
    position: absolute;
    -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
  }
  input[type='checkbox']:checked,
  input[type='radio']:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  input[type='checkbox']:disabled,
  input[type='radio']:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: .9;
  }
  input[type='checkbox']:disabled:checked,
  input[type='radio']:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type='checkbox']:disabled + label,
  input[type='radio']:disabled + label {
    cursor: not-allowed;
  }
  input[type='checkbox']:hover:not(:checked):not(:disabled) {
  	background-color: var(--bg-color);
  }
  input[type='radio']:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type='checkbox']:focus,
  input[type='radio']:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type='checkbox'],
  input[type='radio'] {
    width: 21px;
  }
  input[type='checkbox']:not(.switch):after,
  input[type='radio']:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type='checkbox']:not(.switch):checked,
  input[type='radio']:not(.switch):checked {
    --o: 1;
  }
  input[type='checkbox'] + label,
  input[type='radio'] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  input[type='checkbox'] {
    border-radius: 4px;
  }
  input[type='checkbox']:not(.switch):after {
    width: 9px;
    height: 12px;
    border: 3px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 4px;
    top: 1px;
    -webkit-transform: rotate(var(--r, 20deg));
            transform: rotate(var(--r, 20deg));
  }
  input[type='checkbox']:checked {
    --r: 43deg;
  }

  input[type='radio'] {
    border-radius: 50%;
  }
  input[type='radio']:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    -webkit-transform: scale(var(--s, 0.7));
            transform: scale(var(--s, 0.7));
  }
  input[type='radio']:checked {
    --s: .5;
  }
}










.left-menu .diagnosis {
	padding: 24px;
	color: #ffffff;
	line-height: 1.1;
	background-color: var(--sub-theme-color);
	background-image: url(../img/banner_bg.svg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}

.left-menu .diagnosis span.middle {
	font-size: 32px;
	font-weight: 600;
}

.left-menu .diagnosis span.bottom {
	font-size: 54px;
	font-weight: 600;
}






.left-menu .recommended-column .l_title:before {
	content: '';
	width: 27px;
	height: 27px;
	padding-left: 52px;
	vertical-align: middle;
	background-image: url(../img/icon_l_col.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.left-menu .recommended-column ul {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E6F0FF;
}

.left-menu .recommended-column li {
	margin-bottom: 5px;
}

.left-menu .recommended-column .img-box img {
	width: 128px;
	height: 83px;
}

.left-menu .recommended-column p {
	width: calc(100% - 128px);
	padding: 5px 0 5px 9px;
	font-size: 14px;
}

.left-menu .recommended-column .category a {
	margin-bottom: 10px;
	color: var(--sub-theme-color);
	text-decoration: underline;
	display: block;
}

.left-menu .banner {
	padding: 45px;
	color: #ffffff;
	font-size: 20px;
	text-align: center;
	background-color: #58758E;
}




.sec01 h3 {
	color: var(--main-theme-color);
	font-weight: 600;
    text-align: center;
}

.sec01 h3:before {
	content: '';
	width: 20px;
	height: 43px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url("../img/dog/fukidashi_l_w.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	display: inline-block;
}
.sec01 h3:after {
	content: '';
	width: 20px;
	height: 43px;
	padding-right: 65px;
	vertical-align: middle;
	background-image: url("../img/dog/fukidashi_r_w.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	display: inline-block;
}



.point {
	justify-content: space-between;
}

.point li {
	width: 30%;
	padding: 20px;
	background-color: #ffffff;
}

.point li .title {
    margin-top: 20px;
    color: var(--main-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    height: 60px;
    text-align: center;
}

.point li .num {
	margin-top: -70px;
}

.point li .num img {
	height: 100px;
}

.point li .visual {
	margin: 30px 0;
	padding: 0 25px;
}

.point li .visual img {
	height: 113px;
}

.bg_color {
	padding: 40px;
	background-color: #ecdec7;
}





.icon {
	width: fit-content;
	margin: 0 auto 45px;
	color: #7d7c76;
	font-weight: 600;
	line-height: 55px;
	display: block;
}

.icon-search:before {
	content: '';
	width: 55px;
	height: 55px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url(../img/icon-search.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.icon-new:before {
	content: '';
	width: 55px;
	height: 55px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url(../img/icon-new.svg);
    filter: sepia(100%);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.icon-ranking:before {
	content: '';
	width: 55px;
	height: 55px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url(../img/icon-ranking.svg);
    filter: sepia(100%);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.icon-reviews:before {
	content: '';
	width: 55px;
	height: 55px;
	padding-left: 65px;
	vertical-align: middle;
	background-image: url(../img/icon-reviews.svg);
    filter: sepia(100%);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.sec02 {
	margin: 70px 0;
}

.sec04 {
	margin-bottom: 96px;
}





/*slick setting*/
.slick-next, .slick-prev {
	width: 45px!important;
	height: 45px!important;
	background-color: #FCEE21!important;
	border-radius: 22.5px!important;
}

.slick-prev:before,
.slick-next:before {
	content:'';
    opacity: 1!important;
}

.prev-arrow,
.next-arrow {
	top: 41%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	position: absolute;
}

.prev-arrow { left: -20px; }
.next-arrow { right: -20px; }




.slider-new {
	width: 100%;
	padding: 0 5%;
}

.slider-new li {
	width: calc(100% - 18px)!important;
	margin: 0 18px 18px 0;
	padding: 18px;
	background-color: #ffffff;
}


.slider-new .logo_area {
	/*height: 100px;*/
	margin-bottom: 18px;
	padding: 20px;
	/*background-color: #E6F0FF;*/
	display: flex;
}
.school-list h1{
    font-size: 24px;
}
.school-list h2{
    font-size: 18px;
    font-weight: bold;
}
.school-list .tag {
    display: inline-block;
    padding: 10px;
    line-height: 1em;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #695a44;
    font-size: 15px;
    color: #fff;
}
.school-list .slider-new {
    padding: 0;
}
.school-list .slider-new li {
	width: 100% !important;
	margin: 0 0px 18px 0;
	display: flex;
	flex-wrap:wrap;
}

.school-list .slider-new li .logo_area{
 width:140px;
 margin-bottom:0px;
 /*height: 120px;*/
}
.school-list .slider-new li .info{
 width:calc(100% - 164px);
 padding-left:20px;
}

.school-list .slider-new li .info .price {
	display: flex;
	flex-wrap: wrap;
	flex-direction :row-reverse;
}
.school-list .slider-new li .info .price .item{
	width: 33.3333%;
	background-color: #f6f5f1;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
}
.school-list .slider-new li .info .price .item .price-value{

}
.school-list .slider-new li .info .price .item .price-value span{
	 color: red;
    font-size: 18px;
}

.star img {
	display: inline-block!important;

}

.star span {
	margin-left: 10px;
	color: var(--sub-theme-color);
	font-size: 18px;
	font-weight: 600;
	vertical-align: middle;
}






.sec03 .list {
}

.sec03 .list li {
	width: 31%;
	margin: 0 3% 20px 0;
}

@media (min-width: 769px) {
	.sec03 .list li:nth-child(3n) {
		margin-right: 0;
	}
}

.sec03 .list li a {
	padding: 25px;
	color: #ffffff;
	display: block;
	background-color: #898469;
	background-image:  url(../img/slider-next.svg);
	background-size: 26px;
	background-repeat: no-repeat;
	background-position: right 10px bottom 50%;
}

.sec03 .list li h5 {
	margin: 0;
	font-size: 15px;
}



.sec03 .middle-title {
    margin: 15px 0;
    color: #756a29;
    font-size: 18px;
    font-weight: bold;
}


.sec03 .rank li {
	margin-bottom: 20px;
	padding: 24px 17px;
	background-color: #ffffff;
	align-items: center;
}

.sec03 .rank li:last-child {
}

.sec03 .rank .logo_area {
	width: 150px;
	margin: 0 20px 0 15px;
	padding: 25px;
	background-color: #E6F0FF;
	display: flex;
}

.sec03 .rank p {
	color: #909090;
	font-size: 14px;
}

.tag {
	color: #b9a742;
}

.tag a {
	text-decoration: underline;
}







.reviews li {
	width: 32%;
	margin: 0 2% 20px 0;
	padding: 20px;
	background-color: #ffffff;
}

.reviews li:nth-child(3n) {
	margin-right: 0;
}

.reviews li .title {
	font-size: 20px;
}

.reviews li .title:before {
	content: '';
	width: 14px;
	height: 14px;
	padding-left: 20px;
	vertical-align: middle;
	background-image: url(../img/icon-man.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
    filter: sepia(100%);
}

.reviews li p {
	font-size: 14px;
}

.reviews.reviews-list li {
	width: 100%;
	margin: 0 20px 0;
	padding: 20px;
	background-color: #ffffff;
	display: flex;
	flex-wrap: wrap;
}

.reviews.reviews-list li .info {
	width: calc(100% - 300px);
}

.reviews.reviews-list li .graph {
	width: 300px;
}

a.blue-button.cnt-color{
	margin-top: 20px;
	background-color: #c60000;
}