@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);


body{
	background-color: #f2eee9 !important;
	font-family: 'Noto Sans JP', sans-serif !important;
}

.text-bln-light{color: #e4d5c3 !important;}
.bg-bln-light{background-color: #e4d5c3 !important;}

.text-bln-dark{color: #b68c5a !important;}
.bg-bln-dark{background-color: #b68c5a !important;}

.text-grn-light{color: #2a4e24 !important;}
.bg-grn-light{background-color: #2a4e24 !important;}

.text-grn-dark{color: #061e02 !important;}
.bg-grn-dark{background-color: #061e02 !important;}

.btn-primary{
	background-color: #2ab1f7 !important;
	color: #fff !important;
	border-radius: 30px;
}


.sp-only { display: block!important; }
.pc-only { display: none!important; }
@media  (min-width: 1140px) {
    .sp-only { display: none!important; }
    .pc-only { display: block!important; }
}


#c01{
	background-image: url("../images/grn_bg.jpg");
	background-size:2000px;
	background-position: center top;
	background-repeat: no-repeat;
}
.fv{
position: relative;
	z-index: 1000;
}
#c02{
	background-image: url("../images/brn_bg.jpg");
	background-size:2000px;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	margin-top: -50px;
}

.blue-bg{
	background-image: url("../images/blue_bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.cle{
	position: absolute;
}

.c-left{
	width: 30%;
	position: relative;
	z-index: 10000;
	margin-top: 350px;
	margin-left: -10%;
	float: left;
}

.c-right{
	width: 25%;
	right: 0px;
	position: relative;
	z-index: 10000;
	margin-right: -20%;
	margin-top: 700px;
	float: right;
}

.c-free{
	width: 13%;
	right: 0px;
	position: relative;
	z-index: 10000;
	margin-right: -15%;
	margin-top: 130px;
	clear: both;
	float: right;
}
@media (max-width:1200px){
.c-free{
margin-right:0;
margin-top:160px;
}
.c-right{
margin-right:-10%;
margin-top:520px;
}

}

.blue-bg .ttname img{
	height: 60px !important;
}

.blue-bg ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
	line-height: 1.8em;
	font-weight: 500;
}


.grn-bg{
	background-image: url("../images/form_bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}


.textbox {
	display: block !important;
	width: 80%;
	margin: auto;
	text-align: center;
}


.cv-btn{
	width: 70%;
	margin: auto;
}

.policy{
	height: 100px;
	overflow-y: auto;
	background-color: #fff;
	width: auto;
	max-width: 950px;
}

.bg-white{
	border-top: 10px solid #2a4e24;
	position: relative;
	z-index: 1000;
}

.arrow{
	max-width: 60px;
	width: 10%;
	margin: auto;
}

.arrow img{
	width: 100%;
}


.lesson .col-lg-4 {
	border-right: 1px solid #b68c5a;
}

.lesson .col-lg-4 img{
	border: 1px solid #b68c5a;
}


.lesson .col-lg-4 p{
	text-align: center;
	font-size: 80%;
}


div.hr{
	background-color: #b68c5a !important;
	height: 1px !important;
}

h6.text-grn-dark:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 20px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #b68c5a !important;
}

.topics h2 ,.gtg h2 {
	font-size: 200%;
	color: #061e02;
	font-weight: 700;
	padding-left: 20px;
	background-image: url("../images/title-head.jpg");	
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}


.topics .col-12 img{
	width: 100%;
}

.topics .col-12.w70 img{
	width: 70%;
}

footer{color:#fff;font-size:12px;padding:50px 0;text-align:center;background-color:#000}footer ul{margin-bottom:15px;padding-left:0;}footer ul li{display:inline-block;padding-right:10px;padding-left:10px;border-right:1px solid}footer ul li:first-child{padding-left:0}footer ul li:last-child{border:none;padding-right:0}footer ul li a:hover{color:#244CCC;transition:0.2s all ease-in-out}footer>a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}footer>ul li>a:link{color:#fff}

@media  (max-width: 1139px) {
.blue-bg.p-5{
	padding:30px 10px 0px 10px !important;
}
	.thr-sp{
		position: relative;
		top: -40px;
	}
	
	.thr-text{
		padding-bottom: 40px;
	}
	
	.thr-text h3{
		font-size: 140%;
	}
	
	.thr-text ul li{
		font-size: 70%;
		line-height: 1.8;
	}
	
	.grn-bg p{
		font-size: 80%;
	}
	
	.policy{
		margin: 0px 10px 20px;
		font-size: 60%;
		height: 70px;
	}
	
	
	#c01{
		margin: 0px !important;
		padding: 0px 0px 0px !important ;
		width: 99.999%;
		overflow: hidden !important;
	}
	
	
	#c02{
		margin: 0px !important;
		padding: 10px 10px 0px !important ;
		width: 99.999%;
		overflow: hidden !important;
	}
	
	#c02 h3 span{
		display: inline-block;
		font-size: 60% !important;
	}
	
	#c02 h6{
		font-size: 80% !important;
	}
	
	.contents{
		width: 99.999%;
		overflow: hidden !important;
		padding: 40px 10px;
	}
	
	.lesson{
		padding: 10px !important;
		margin: 0px !important;
	}
	
	.lesson .col-lg-4{
		border: 0px;
		border-bottom: 1px solid #b68c5a !important ;
		margin-bottom: 40px;
		padding-bottom: 40px;
	}
	
	.lesson .hr{
		border: 0px;
		border-bottom: 1px solid #b68c5a;
		margin-top: 0px !important;
	}
	
	.contents h3.text-bln-dark{
		font-size: 100%;
	}
	
	.contents .topics{
		padding: 0px 10px !important;
	}
	
	.contents .topics h2 ,.contents .gtg h2{
		font-size: 120%;
	}
	
	.contents .topics .w70 img {
		width: 100% !important;
	}
	
	.contents .topics img {
		margin-bottom: 20px;
	}
	
	.contents .topics p {
		font-size: 90%;
	}
	
	.bg-bln-dark h2.col-12{
		font-size: 120%;
	}
	
	.grn-bg.p-4{
		padding: 10px !important;
	}
	
	.gtg p{
		padding: 0px 20px 20px !important;
		margin: 0px !important;
		font-size: 90%;
	}
	
	.gtg.p-5{
		padding: 20px !important;
	}
	
	.gtg .title{
		padding: 0px !important;
		margin: 20px 0px 0px !important;
	}
.gtg .col-lg-6{
		margin: 0px 0px 20px !important;
	padding: 0px 0px 20px 0px;
	border-bottom: 1px solid #b68c5a;
	}
	
	.lesson h3.text-bln-dark{
		font-size: 100%;
	}
	.lesson h6{
		font-size: 90%;
	}
	
	.cv-btn{
	width: 100% !important;
	margin: auto;
}
	
	.lesson .col-lg-4 {
		padding: 0px;
		margin: 0px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	
	.lesson .col-lg-4 a.vimg{
		float: left;
		width: 35%;
		margin: 0px !important;
	}
	
	.lesson .col-lg-4 a.vimg img{
		margin: 0px !important;
	}
	
	.lesson .col-lg-4 .vtext{
		float: right;
		width: 60%;
		text-align: left;
	}
	
	.textbox {
	width: 90%;
	font-size: 90%;
}
	


footer ul{margin-bottom:15px}footer ul li{display:inline-block;padding-right:10px;padding-left:10px;border-right:1px solid}footer ul li:first-child{padding-left:0}footer ul li:last-child{border:none;padding-right:0}footer ul li a:hover{color:#244CCC;transition:0.2s all ease-in-out}footer>a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}footer>ul li>a:link{color:#fff}
}


/*================
20230529追加
================*/
.lesson_container{
        display: flex;
        justify-content: space-around;
            align-items: center;
            width: 95%;
            margin: 0 auto;
            }
          .spnone{
              display: none;
          }
          @media (min-width:768px){
            .lesson_container img{
                width:calc(33% - 10px)
            }
              .spnone{
                  display: block;
              }
          }
div.hr2 {
    background-color: #b68c5a !important;
    height: 1px !important;
              margin-top: 6rem;
}
          @media (min-width:1140px){
              .pro_mt{
                  margin-top:4rem;
              }
          }
.caution{
font-size:90%;
}