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

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {ffont-family: 'Raleway', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgRD {background-color: #E6002D;}
.bgGR {background-color: #009944;}
.txtWH {color: #FFF;}
.txtBR {color: #85754E;}
.txtGR {color: #104432;}
.txtRD {color: #CC0000;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#bg {background: #C0DEDE; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;}
#bg .bgObj {position: absolute; max-width: 1680px; width: 100%; height: 100%; top: 0; left: 0; right: 0; margin: 0 auto;}
#bg .bgObj li:first-child {margin-bottom: 70px;}
#bg .head {width: 100%;}
#bg .grad {height: 1460px; background: #C0DEDE; background: linear-gradient(0deg, rgba(192, 222, 222, 1) 0%, rgba(255, 255, 255, 1) 100%);}

.spImg {display: none;}
#header {position: relative; width: 100%; background: url("../img/cmn/head_pc_bg.png") no-repeat center top 47px; padding-top: 47px;}
#header .notice {position: absolute; width: 100%; top: 0; z-index: 3;}
#header .headObj {position: absolute; width: 33.4%; bottom: -380px; left: 62%;}
#header h1 {max-width: 1410px; width: 100%; margin: 0 auto; position: relative; z-index: 1;}
#cmnbtm {padding: 50px 0 30px; border-top: 5px solid #009944;}
#cmnbtm li {width: calc(25% - 30px); margin-bottom: 20px;}
#cmnbtm li a:hover {opacity: .6;}
footer {padding: 25px 0;}
@media screen and (max-width: 1410px) {
	#header {background: none;}
	#header .pcImg {display: none;}
	#header .spImg {display: block;}
}
@media screen and (max-width: 1205px) {
	#header .notice .txt40 {font-size: 3.2vw;}
	#header .notice .txt30 {font-size: 2.5vw;}
}
@media screen and (max-width: 896px) {
	#cmnbtm li {width: calc(50% - 10px);}
}
@media screen and (max-width: 580px) {
	#header .notice {padding: 20px 10px;}
	#header {padding-top: 135px;}
	#header .notice .spbr {display: block;}
	#header .notice .txt40 {font-size: 24px;}
	#header .notice .txt30 {font-size: 18px;}
}
@media screen and (max-width: 568px) {
	.spImg {display: block;}
	.pcImg {display: none;}
	footer {padding: 10px 0;}
	footer span {display: block;}
}
@media screen and (max-width: 400px) {
	#cmnbtm li {width: 100%;}
}

.container {width: 100%; max-width: 1212px; padding-left: 0; padding-right: 0;}
.mlr,.container {margin-left: auto; margin-right: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.w200 {max-width: 200px; width: 100%;}
.full {width: 100%;}
.half {width: 50%;}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
  .w46 {width: calc(46% - 30px);}
  .w54 {width: calc(54% - 30px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  .mlr5 {margin-left: 5px; margin-right: 5px;}
  .box4 {width: calc(50% - 20px); margin-left: 10px; margin-right: 10px;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.dot li {line-height: 1.5;}
ul.num {list-style: decimal; margin-left: 1.5em;}
ul.asterisk {margin-left: 1em;}
ul.asterisk li {list-style-type: none; text-indent: -1em;}
ul.asterisk li:before {display: inline; content: "※";}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFFBDE;}
table tr:nth-child(even) {background-color: #FFF;}
table th,table td {padding: 8px 10px; line-height: 1.7; border: 1px solid #008129; font-weight: 400; vertical-align: middle;}
table th {text-align: center; background: #B8D8BD;}
table .w120 {width: 120px;}

.notice {padding: 30px 20px;}
#course {position: relative; z-index: 1;}
.col3.wp20 {width: calc(50% - 20px); margin-left: 20px; margin-right: 0;}
#top01 {border: 10px solid #00A770; border-radius: 50%;}
#top01::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; }
#top01 .ttl {width: 100%; padding: 39px 9% 44px 3.4%; z-index: 1; background: url("../img/top/01-02.svg") no-repeat top center; background-size: 100% auto;}
#top01 .img01 {margin: -68px 0 0 -10px; position: relative; z-index: 1; width: calc(100% + 40px);}
#top01 .img01 .inner {/*max-width: 206px;*/ width: 36.4%; position: absolute; top: 22px; left: 46px;}
.ttlCourse {padding: 0 27px; position: relative;}
.ttlCourse::before {position: absolute; content: ''; width: 100%; height: calc(100% - 18px); top: 8px; left: 0; border-radius: 20px 20px 0 0;}
.ttlCourse img {position: relative; z-index: 1;}
.innerBox {border-radius: 0 0 20px 20px; border-style: solid; border-width: 10px; border-top: none; margin-top: -10px; padding: 20px 20px 20px;}
#top02 {margin-top: -57px; margin-right: 20px; position: relative; z-index: 2;}
#top02 .ttlCourse::before {background: #910782;}
#top02 .innerBox {border-color: #910782;}
#top02 .img02 {width: calc(100% + 10px); margin-left: -10px;}
#top03 {margin-bottom: 20px;}
#top03 .ttlCourse::before {background: #E4006E;}
#top03 .innerBox {border-color: #E4006E;}
#top04 .ttlCourse::before {background: #EF821D;}
#top04 .innerBox {border-color: #EF821D;}
#top04 {margin-bottom: 10px;}
#top05 .ribbonObj {position: absolute; width: 33.4%; bottom: -70px; left: 62%;}
#top05 .container {position: relative; z-index: 1;}
.ttlGR {padding: 10px 30px; border-radius: 20px 20px 0 0;}
.boxGR {border: 10px solid #009944; border-top: none; background: #FFF; border-radius: 0 0 20px 20px; padding: 20px;}
.arrow {display: inline-block;}
.arrow li {padding-left: 40px; background: url("../img/top/05-01.svg") no-repeat left top 8px; line-height: 1.5; position: relative; margin-bottom: 10px;}
.arrow li .balloon {display: block; position: absolute; width: 213px; right: -125px; top: -10px;}
.idImg {width: 100%; margin: -110px auto 30px;}
#top06 .boxGR {padding: 20px 30px; background: #FFF url("../img/top/06-11.png") no-repeat right bottom; background-size: auto 100%;}
.item {width: calc(20% - 24px); margin-bottom: 10px;}
.tblw {width: calc(50% - 15px); margin-top: 10px;}
.spbr1 {margin-left: .5em;}
#top06 span.blk {margin-left: 1em;}
#top07 .boxGR {border: 6px solid #009944; border-radius: 20px; background: url("../img/top/07-01.png") no-repeat center; background-size: cover; padding: 40px 7.5%;}
#top07 .img01 {position: absolute; width: 7.2%; left: 0; top: 10px;}
#top07 .logo {max-width: 634px; width: calc(100% - 230px); margin-right: 30px; position: relative; z-index: 1;}
#top07 .w200 {position: relative; z-index: 1;}
#top07 .btn {display: block; width: 100%; padding: 1px 20px; border-radius: 20px; background: #104432; border: 2px solid #104432; color: #FFF; text-align: center;}
#top07 .btn span {padding-right: 22px; background: url("../img/top/07-05.svg") no-repeat right center;}
#top07 .btn:hover {background: #FFF; color: #104432;}
#top07 .btn:hover span {background: url("../img/top/07-06.svg") no-repeat right center;}
#top07 .img02 {position: absolute; width: 6.6%; right: 0; bottom: 0;}
@media screen and (max-width: 1190px) {
	#top01 .ttl {padding-top: 30px; padding-bottom: 34px;}
	#top01 .img01 {margin-top: -55px;}
	#top01 .img01 .inner {top: 3%;}
}
@media screen and (max-width: 1050px) {
	#top01 .ttl {padding-top: 15px;}
	#top01 .img01 {margin-top: -35px;}
	#top01 .img01 .inner {top: -2%;}
	#top02 {margin-top: -37px;}
}
@media screen and (max-width: 950px) {
	.arrow li .balloon {width: 40%; top: 0; right: -85px;}
	.idImg {margin-top: -90px;}
}
@media screen and (max-width: 896px) {
	.col3.wp20 {width: calc(50% - 15px); margin-left: 15px; margin-right: 0;}
	#top01 {border-width: 5px; margin-bottom: 15px;}
	#top01 .ttl {padding: 8px 10% 20px 6.4%;}
	#top01 .img01 {margin-top: -35px; margin-left: -15px; width: calc(100% + 40px);}
	#course .pcImg {display: none;}
	#course .spImg {display: block;}
	#top01 .img01 .inner {top: 2%;}
	.ttlCourse {padding: 0 15px;}
	.ttlCourse::before {border-radius: 15px 15px 0 0; height: calc(100% - 10px); top: 5px;}
	.innerBox {border-radius: 0 0 15px 15px; border-width: 5px; padding: 20px 15px 20px;}
	#top02 {margin-top: 0; margin-right: 15px;}
	#top02 .img02 {width: 100%; margin-left: 0;}
	.ttlGR {padding: 10px 20px; border-radius: 15px 15px 0 0;}
	#top05 .ttlGR {text-align: center;}
	.boxGR {border: 5px solid #009944; border-top: none; background: #FFF; border-radius: 0 0 15px 15px; padding: 15px 15px 20px;}
	#top06 .boxGR {padding: 15px 15px 20px;}
	.item {width: calc(100%/3 - 5px); margin-bottom: 0;}
	.tblw {width: 100%; margin-top: 20px;}
	.tblw.mtm {margin-top: -1px;}
	.tblw.mtm .spnone {display: none;}
	#top07 .boxGR {border-width: 5px; border-radius: 15px; padding: 25px 7.5% 15px;}
	#top07 .btn {font-size: 20px;}
	#top07 .logo {margin: 0 0 15px; width: 100%;}
}
@media screen and (max-width: 770px) {
	#top05 .txt24 span.txt16 {display: block;}
	#top05 .txt24 span.txt16 > span {display: none;}
	#top05 .txt24 span.txt16 .spbr {display: block;}
	.arrow li {background-position: left top 4px; padding-left: 35px;}
	.arrow li .pcbr {display: none;}
	.arrow li .balloon {display: none;}
	.idImg {margin-top: 0;}
	.idImg .pcImg {display: none;}
	.idImg .spImg {display: block;}
}
@media screen and (max-width: 568px) {
	.col3.wp20 {width: calc(100% - 30px); margin-left: 15px; margin-right: 15px;}
	#top01 .ttl {padding: 13px 12% 20px 9.4%;}
	#top01 .img01 {margin-left: -5.5%; width: calc(100% + 10%);}
	#top01 .img01 .inner {top: 1%; left: 14%; width: 32.4%;}
	.innerBox {padding: 30px 15px 20px;}
	#top02 {margin-right: 0; margin-bottom: 20px;}
	table th,table td {padding: 8px 5px; vertical-align: middle;}
	table .w120 {width: 91px;}
	.spbr1 {display: block; margin-left: 1em;}
	#top07 .img01 {width: 20.4%; top: 20px;}
	#top07 .img02 {width: 22.7%;}
}