@charset "utf-8";
/* CSS Document */


/*---------------メインイメージ--------------------*/
#main-image{position: relative;}
#main-image a:hover{opacity: 1;}
@media screen and (min-width: 641px){
	#main-image{background:linear-gradient(90deg, #d2eaee 40%, #addddf 60%);height:680px; overflow: hidden;}
	#main-image img{height:680px; width:auto; position: absolute; top:0px;left: 50%; transform: translate(-50%,0);margin: 0;}
}
@media screen and (max-width: 640px){ 
	#main-image img{max-width:none;width: 100%;}
}


/*---------------固定イメージ--------------------*/
.topimg{background: url("../img/top/topimg.jpg") repeat-y top center;background-attachment: fixed;}
@media (min-width: 641px) {
.topimg{width: 100%; height: 500px;background-size:100%; }
}
@media (max-width: 640px) {
.topimg{width: 100%; height: 300px; background-size:auto 100%;}
}

/*---------------メッセージ--------------------*/

.greetings .flex_box02 > div{position: relative;}

.greetings .greet_bot {text-align: center;}
.greetings .greet_bot a em span.material-icons{font-size: 14px; opacity: 0.4; margin-left: -15px;}
.greetings .greet_bot a em{border-bottom: 3px solid #ccc;display: block; padding: 2px 0 9px; font-style: normal;border-image: linear-gradient(to right, rgba(177,161,119,0.50) 0%, rgba(122,102,58,0.50) 100%);border-image-slice: 1;}
.greetings .greet_bot a.bot01{background-color:#b2a07a;color:#fff;}
.greetings .greet_bot a.bot02{border: 1px solid rgba(122,102,58,0.50);color:#333; background-color: rgba(255,255,255,0.8);}
@media (min-width: 641px) {
	main .greetings .flex_box02 > div:nth-child(odd){ margin-right: 5%}
	.greetings .flex_box02 > div:first-child{padding-top:76px;width: 55%;}
	.greetings .flex_box02 > div:last-child{padding-top:200px;width: 39%;}
	.greetings .flex_box02 > div .gtext{position: absolute;width: 150px;top: -30px;left:130px;}
	.greetings .flex_box02 > div .geng{position: absolute;width:100%;top:30px;left:0;}
	.greetings .greet_bot{padding: 50px 0 30px;}
	.greetings .greet_bot a{width: 360px;display:inline-block;font-size: 21px;padding:26px 26px; }
	.greetings .greet_bot a.bot01{ margin-right: 52px;}
}
@media (max-width: 640px) {
	.greetings .flex_box02 > div:first-child{padding-top:40px;}
	.greetings .flex_box02 > div .gtext{position: absolute;width: 100px;top: -30px;left:50px;}
	.greetings .flex_box02 p{display:inline-block;margin-bottom: 30px;}
	.greetings .flex_box02 > div .geng{margin-bottom: 30px;}
	.greetings .greet_bot a{width:90%; margin:30px auto 0;display:block;font-size:17px; padding:20px 26px;  }
}

/*---------------ニュース--------------------*/

ul.news_list {width:100%;list-style: none; margin:0px 0 60px auto;}
.news_list li p{display: block;}
.news_list li{margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #CCC;}
@media (min-width: 641px) {
	.news_box{padding: 0 0 0 20%;margin: -140px 0 0 0;        z-index: 1;
        position: relative;}
	.news_list li{ display: flex;}
	.news_list li .postday{width: 25%;text-align: center;}
	.news_list li .posttitle{width: 72%;}
	main .news .bot{margin:70px 0 10px auto;}
}
@media (max-width: 640px) {
	.news_list li{ display:block;}
.news_list li .postday{width:100%;text-align:left;}
}



/*---------------ピックアップ--------------------*/

.pickup .flex_box03 div .icon{position: relative;text-align: left;padding: 20px 0;}
.pickup .flex_box03 div .icon span{display:inline-block; background-color: rgba(0,0,0,0.80); color: rgba(255,255,255,1.00);text-align: center;font-family:'メイリオ', 'Meiryo', sans-serif;width:40%;font-size: 11px; line-height: 14px; padding: 5px;}
.pickup .flex_box03 div .icon img{width: 30px;position: absolute;top: 30%;right:0;opacity: 0.4;}
@media (min-width: 641px) {
	.pickup .flex_box03{margin-bottom: 0;}
	.pickup .flex_box03 > div:nth-child(1),
	.pickup .flex_box03 > div:nth-child(2),
	.pickup .flex_box03 > div:nth-child(3){padding-bottom: 50px;}
	.pickup .flex_box03 div .icon{}
	.pickup .flex_box03 div p{font-size: 16px; line-height: 30px;}
}
@media (max-width: 640px) {
	.pickup .flex_box03 div p{font-size: 14px; line-height: 26px;}
}


/*---------------ピックアップ--------------------*/

.page03 .lesson .title02 .subtitle{color: rgba(0,0,0,0.3);}
.lesson .flex_box03 > div{ background: rgba(255,255,255,0.9);border-radius: 10px; position: relative;}
.lesson .flex_box03 > div h3{text-align: center;}
.lesson .flex_box03 > div p{color:rgb(138 106 109);text-align: center;}
.lesson .flex_box03 > div img{width: 35%; position: absolute; top: -30px; left: 30px;}
.lesson .flex_box03 > div .botmini{margin:10px auto 0; border: rgb(138 106 109) 1px solid; width: 90%;}
.lesson .koza div{color: rgba(255,255,255,1.00);}
	.lesson .koza > div:first-child{background:#554343; } 
	.lesson .koza > div:last-child{background-color: #896c6e;} 
.lesson .koza > div h3{border-bottom: 1px dotted rgba(255,255,255,0.4);position: relative;margin-bottom: 20px;text-align: left;}
.lesson .koza > div h3 a{color: rgba(255,255,255,1.00);}
.lesson .koza > div h3 img{position: absolute;opacity: 0.6;top:50%;right: 0%; transform: translate(0%,-50%);width:34px;filter: brightness(0) invert(1);}
@media (min-width: 641px) {
	.lesson{ background:rgba(138,106,109,0.05) url("/img/top/lesson_bg_pc.webp") no-repeat top; background-size: 100%;}
	.lesson .flex_box03{margin: 0 0 30px 0;}
	.lesson .flex_box03 > div{padding:50px 30px 40px;}
	.lesson .flex_box03 > div h3{font-size: 30px; line-height: 46px; margin-bottom: 0;}

	.lesson .koza{display:flex;justify-content: center;align-content: center;}
	.lesson .koza > div{width: 50%;}
	.lesson .koza > div div{width: 450px;}
	.lesson .koza > div:first-child div{margin:90px 90px 90px auto;} 
	.lesson .koza > div:last-child div{margin:90px auto 90px 90px;} 
	.lesson .koza > div h3{}
}
@media (max-width: 640px) {
	.lesson{ background:rgba(138,106,109,0.05) url("/img/top/lesson_bg_sp.webp") no-repeat top; background-size:auto 100%;}
	.lesson .flex_box03 > div{padding:40px 30px 30px;}
	.lesson .flex_box03 > div h3{font-size: 26px; line-height: 40px; margin-bottom: 0;}
	.lesson .koza > div{padding:50px 20px; }
}


/*---------------カルーセル--------------------*/

.carousel{vertical-align: bottom;position: relative;z-index: 2;
background: url("../img/top/carousel.jpg") repeat-x 0 0;
background-size: auto 100%;
width: 100%;
overflow: hidden;
-moz-animation: loop 800s linear infinite;
  animation: loop 800s linear infinite;
}
/*アニメーション*/
@keyframes loop {
  0% {background-position: 0 0; }
  100% {background-position: -13276px 0;}
}
@media screen and (min-width:641px){ /*PC*/
	.carousel{height:410px;}
}
@media screen and (max-width: 640px){ /*SP*/
	.carousel{height: 250px;}
}


/*---------------kosodetv--------------------*/

.kosodetv .ytlink {position: relative;}
.kosodetv .ytlink .play-btn{width: 25%; position: absolute; top:50%;left: 50%; transform: translate(-50%,-50%);filter: brightness(0) invert(1);}
.kosodetv ul li a{color: rgba(0,0,0,1.00);}
.kosodetv ul li p{display: block;}
.kosodetv ul li p span{font-size: 70%; opacity: 70%; margin-right: 10px;}

@media screen and (min-width:641px){ /*PC*/
	.kosodetv .set01{display:flex; padding-bottom:60px;}
	.kosodetv .set01 p{display: block; margin:11px 0; width: 70%; padding: 0;}
	main .kosodetv .set01 .botmini{margin: 0;}
	main .kosodetv .cont{width:75%; margin: -190px 0 0 25%; padding: 0; z-index: 2;position: relative;}
	.kosodetv ul{display: flex;}
	.kosodetv ul li{width: 30%;line-height: 25px;}
	.kosodetv ul li:nth-child(2){width:40%; padding: 0 5%; }
	.kosodetv ul li p{padding: 20px 0 0;}
}
@media screen and (max-width: 640px){ /*SP*/
	main .kosodetv .cont{padding: 0;}
	.kosodetv ul li{padding-top: 40px;}
	.kosodetv ul li img{margin-bottom: 0; padding-bottom: 0;}
	main .kosodetv ul li p{padding:12px 0 0px 0;}
}