.wrapper{
	background: url("../img/common/back_dot.png") left top repeat;
	position: relative;
	overflow: hidden;
	margin: auto;
	padding: 0;
}
.wrapper .backl{
	width: 35%;
	position: absolute;
	left: -20%;
	top: 10%;
}
.wrapper .backr{
	width: 35%;
	position: absolute;
	right: -20%;
	bottom: 10%;
}
.wrapper .marur{
	width: 65%;
	position: absolute;
	right: -10%;
	top: 10%;
  animation:20s linear infinite rotation1;
}
.wrapper .marul{
	width: 65%;
	position: absolute;
	left: -20%;
	bottom: 0%;
  animation:20s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg);}
}

/* CSS Document */
/*スライドショー*/


.top-image{
	width: 100%;
	position: relative;
	z-index: 6!important;
	margin:0px 0 0;
}
.top-image .slider{
	margin: auto;
	width: 100%;
}
.top-image .slider-img{
	position: relative;
}
.top-image .slider-img .photo img {
  height: auto;
  width: 100%;
}
.top-image .Catchb{
	position: absolute;
	left: 2%;
	bottom: 15%;
	width: 70%;
	max-width: 800px;
	z-index: 10;
}
.top-image .Catch{
	position: absolute;
	left: 2%;
	bottom: 10%;
	width: 70%;
	max-width: 800px;
	z-index: 10;
}
.top-image .bana{
	position: absolute;
	right: 70px;
	bottom: 11%;
	width: 20%;
	max-width: 250px;
	z-index: 2;
}
.top-image .photo img,
.top-image .main_ov img{
	width: 100%;
	height: auto;
}

@media print , screen and (min-width:1px) and (max-width:1200px) {

.top-image{
	width: 100%;
	position: relative;
	z-index: 6!important;
	margin:60px 0 0;
}
}

@media print , screen and (min-width:1px) and (max-width: 768px) {

	
.top-image .Catch{
	position: absolute;
	left: 2%;
	bottom: 8%;
	width: 70%;
	max-width: 800px;
	z-index: 2;
}
.top-image .bana{
	position: absolute;
	right: 12%;
	bottom: 15px;
	width: 19%;
	max-width: 100px;
	z-index: 2;
}
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

}

.topnews{
	width: 80%;
	max-width: 800px;
	margin: -5% 0 3% auto;
	background: #fff;
	border-radius: 30px 0 0 30px;
	border-left: 2px solid #143180;
	border-top: 2px solid #143180;
	border-bottom: 2px solid #143180;
	position: relative;
	z-index: 10;
	padding: 30px 30px 10px 30px;
}
.topnews .newst{
	width: 25%;
	max-width: 120px;
	display: flex;
	position: relative;
	align-items: center; /* 横線を上下中央 */
}


.topnews .icox a{
	position: absolute;
	right: 5%;
	top: 20px;
	font-size: clamp(13px, 1.5vw, 15px);
	border-radius: 30px;
	border: 2px solid #143180;
	padding: 2px 10px;
	color: #333;
}
.topnews .icox a:hover{
	background: #c2dcf3;
}
.topnews .icox img{
	width: 35px;
	margin: 0 5px;
	display: inline-block;
}
.topnews .newst::after{
  background-color: #143180;
  content: "";
  flex-grow: 1;
  height: 1px;
  margin-left: 15px;
}

.topnews dl{
	margin: 20px auto;
	display: flex;
	flex-wrap: wrap;
	font-size: clamp(14px, 1.6vw, 16px);
}
.topnews dl dt{
	width: 15%;
	padding: 5px 10px;
	color: #143180;
}
.topnews dl dd{
	width: 85%;
	padding: 5px 10px;
}
.topnews dl dd a{
	color: #111;
}
.topnews .btn{
	text-align: center;
	line-height: 1.5em;
}
.topnews .btn a{
	background: #143180;
	display: inline-block;
	margin: 0px 10px 20px;
	padding: 5px 20px;
	border-radius: 5px;
	color: #fff;
	font-size: clamp(14px, 1.5vw, 15px);
}

@media print , screen and (min-width:1px) and (max-width: 768px) {

.topnews{
	width: 95%;
	margin: 20px 0 3% auto;
	background: #fff;
	border-radius: 20px 0 0 20px;
	border-left: 2px solid #143180;
	border-top: 2px solid #143180;
	border-bottom: 2px solid #143180;
	position: relative;
	z-index: 10;
	padding: 30px 30px 10px 30px;
}

.topnews .icox img{
	width: 25px;
	margin: 0 5px;
	display: inline-block;
}/*
.topnews .icox{
	position: absolute;
	right: 15%;
	top: 20px;
	border-radius: 30px;
	border: 2px solid #143180;
	padding: 2px 10px;
}*/
.topnews dl dt{
	width: 100%;
	padding: 0 10px;
	line-height: 1.5em;
}
.topnews dl dd{
	width: 100%;
	padding: 5px 10px;
	line-height: 1.5em;
	border-bottom: 1px solid #143180;
}

}



.advantage h3{
	width: 70%;
	margin: 0 auto 5% 0;
}

.advantage .pointbox{
	width: 33.3333%;
	padding: 20px;
}
.advantage .pointbox img{
	width: 100%;
	height: auto;
}
.advantage .pointbox.point2,
.advantage .pointbox.point5{
	margin-top: -5%;
}
.advantage .pointbox.point3,
.advantage .pointbox.point6{
	margin-top: -10%;
}
.advantage .readmore{
	width: 60%;
	margin: -5% 20px 5% auto;
	max-width: 200px;
}
.advantage .readmore a{
	display: block;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.advantage .readmore a:hover{
	transform: translateX(10px);
	opacity: 0.7;
}

@media print , screen and (min-width:1px) and (max-width: 960px) {

.advantage .pointbox{
	width: 33.3333%;
	padding: 10px;
}
}
@media print , screen and (min-width:1px) and (max-width: 530px) {

.advantage h3{
	width: 90%;
	margin: 0 auto 5% 0;
}
.advantage .pointbox{
	width: 50%;
	padding: 10px;
}
.advantage .pointbox.point2,
.advantage .pointbox.point4,
.advantage .pointbox.point6{
	margin-top: -5%;
}
.advantage .pointbox.point3,
.advantage .pointbox.point5{
	margin-top: 0%;
}
.advantage .readmore{
	width: 60%;
	margin: 10px 20px 5% auto;
	max-width: 200px;
}
}

.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 50s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 2 - 10px);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}


.lesson{
	background: #fff;
	border-radius: 0 30px 30px 0;
	border-right: 2px solid #143180;
	border-top: 2px solid #143180;
	border-bottom: 2px solid #143180;
	position: relative;
	z-index: 10;
	padding: 30px;
	width: 90%;
	margin: 3% auto 3% 0;
}
.lesson h3{
	max-width: 220px;
	margin: 3% auto;
	width: 50%;
}
.lesson .Flexbox{
	max-width: 1000px;
	margin: auto;
}
.lesson .illust{
	position: absolute;
	right: 10%;
	top: -60px;
	width: 18%;
}
.lesson .lessonbox{
	width: 50%;
	padding: 20px;
}
.lesson .lessonbox img{
	width: 100%;
	height: auto;
}
.lesson .lessonbox a{
	display: block;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.lesson .lessonbox a:hover{
	transform: translateX(10px);
	opacity: 0.7;
}
@media print , screen and (min-width:1px) and (max-width: 960px) {

.lesson .lessonbox{
	width: 50%;
	padding: 10px;
}
}
@media print , screen and (min-width:1px) and (max-width: 530px) {
.lesson .lessonbox{
	width: 100%;
	padding: 10px;
}
.lesson .illust{
	position: absolute;
	right: 0%;
	top: -50px;
	width: 25%;
}
}

.other{
	margin: 5% auto;
}
.other .otherbox{
	width: 33.3333%;
	padding: 5px;
}
.other .otherbox a{
	display: block;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.other .otherbox a:hover{
	transform: translateY(-10px);
	opacity: 0.7;
}

@media print , screen and (min-width:1px) and (max-width: 768px) {
.other .otherbox{
	width: 33.3333%;
	padding: 0px;
}
}
@media print , screen and (min-width:1px) and (max-width: 530px) {
.other .otherbox{
	width: 100%;
	padding: 10px 0;
}
	
}