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

body, html {
	font-size: 6.25%;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
	scroll-behavior: smooth;
}
body {background: #fff;}

div.content-inner {width: 96%; max-width: 1260px; margin: 0 auto;}
a {text-decoration: none; transition: 0.3s}
a:hover {opacity: 0.5}
p {line-height: 1.6; font-size: 16rem;}
img {max-width: 100%}
hr {display: block; border-bottom: 1px solid #ccc; margin: 60px auto}
sup {font-size: 80%; vertical-align: super}

a.pdflink::before { content: 'PDF'; display: inline-block; font-size: 11rem; color: #fff; background-color: #C71471; padding: 2px 5px;; margin-right: 5px; font-weight: normal;}
a.btn-white { display: inline-block; background-color: #fff; border: 2px solid #03b0f0; border-radius: 10px; padding: 15px; color: #333; font-weight: bold; font-size: 16rem; text-align: center; box-sizing: border-box; line-height: 1.2}
a.btn-pink { display: inline-block; background-color: #fe679b; border-radius: 10px; padding: 15px; color: #fff; font-weight: bold; font-size: 16rem; text-align: center; box-sizing: border-box; line-height: 1.2}
a.btn-green { display: inline-block; background-color: #0e8971; border-radius: 10px; padding: 15px; color: #fff; font-weight: bold; font-size: 16rem; text-align: center; box-sizing: border-box; line-height: 1.2}

.pc_show{display: inline}
.sp_show{display: none}
@media screen and (max-width: 1023px) {
	div.content-inner {width: 94%;}
	p {font-size: 14rem;}
	.pc_show{display: none}
	.sp_show{display: inline}
}

/* Header */
.header {position: fixed; background: rgba(255,255,255,0.8); width: 100%; display: flex; top:0; left: 0; justify-content: space-between; 
	padding: 0 10rem; box-sizing: border-box; height: 64px; z-index: 999999; transition: 0.5s}

.head-left a {display: flex; align-items: center; height: 36px; margin-top: 15px; padding: 0 10px; box-sizing: border-box; }
.head-left a img {display: block; height: 80%; width: auto;}
.head-right a { display: block; font-size: 17rem; font-weight: bold; color: #fff; background-color:#00aeef;  margin-top: 10px; padding: 10px 20px; border-radius: 6px; box-sizing: border-box; text-align: center; }
.head-right a::after { content: '▼'; display: inline-block; margin-left: 10px}


@media screen and (max-width: 1023px) {
    .header {height: 40px; padding: 0; }
	.head-left {height: auto; width: 70% }
	.head-left a {height: auto; width: 100%; }
	.head-left a img {height: auto; width: 100%;}
	.head-right { width: 28%; }
	.head-right a { font-size: 13rem; margin: 5px 5px 0 0; padding: 5px 3px;}
	.head-right a::after { margin-left: 5px}
}

/* Main */
#main { display: block; padding-top: 64px; max-height: 85vh; text-align: center;}
#main img { display: block; height: 100%; max-height: 85vh; width: auto; margin: 0 auto}

@media screen and (max-width: 1023px) {
	#main { padding-top: 40px; height: auto; width: 100%;}
	#main img { height: auto; width: 100%;}
}

/* overview */
.overview { padding: 60px 0 }
.overview .content-inner { display: flex; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap;}

.overview-right {width: 52%;}
.overview-right img {width: 100%; height: auto}

.overview-left {width: 45%;}
.overview-left h2 {display: block; padding: 20px 0 6px 0; border-bottom: 3px solid #757070; color: #757070; font-weight: bold; font-size: 24rem; line-height: 1.2; margin-bottom: 15px;}
.overview-left p { margin-bottom: 15px;}
.overview-left p.read-bold {font-weight: bold; font-size: 20rem;}

@media screen and (max-width: 1023px) {
	.overview { padding: 20px 0 }
	.overview .content-inner { display: block;}
	.overview-right {width: 100%;}
	.overview-left {width: 100%;}
	.overview-left h2 {font-size: 20rem;}
	.overview-left p.read-bold { font-size: 18rem;}
}

.program { padding-bottom: 100px}
.program h3 { display: block; background-color: #fe679b; color: #fff; font-weight: bold; font-size: 24rem; padding: 10px 10px; max-width: 400px; margin: 20px auto; text-align: center;}
.program-img {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px auto;}
.program-img img{display: block; width: 23%; height: auto;}

#online {display: block; border-top: 3px solid #01cd99; border-bottom: 3px solid #01cd99; padding: 20px 0;}
#online h4 {display: block; font-size: 18rem; margin-bottom: 20px;}
#online h4 strong {font-size: 24rem; vertical-align: baseline}

@media screen and (max-width: 1023px) {
	.program { padding-bottom: 50px}
	.program-img img{width: 48%; margin-bottom: 20px;}
	#online h4 strong {display: block;}
}

#shutten { background-color: #c6f0ff; padding: 100px 0;}
#shutten h2 { display: block; font-weight: bold; font-size: 36rem; color: #03b0f0; text-align: center; margin-bottom: 40px;}
.shutten-link { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 60px}
.shutten-link a { display: block; width: 320px; margin: 0 20px 10px 20px}

#shutten h3 { display: block; font-weight: bold; font-size: 22rem; color: #fff; text-align: center; background-color: #03b0f0; padding: 8px 0; margin-bottom: 20px;}

.shutten-list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px}
.shutten-list article { display: block; background-color: #fff; padding: 30px 20px; width: 49%; margin-bottom: 20px; box-sizing: border-box; }
.shutten-list article h5 { font-weight: bold; font-size: 14rem; color: #666; display: block; margin-bottom: 1px}
.shutten-list article h4 { font-weight: bold; font-size: 20rem; display: block; margin-bottom: 10px}
ol.shutten-icon { list-style: none; display: block; margin-bottom: 20px;}
ol.shutten-icon li { color: #666; display: inline-block; font-size: 12rem; padding: 3px 4px; border-style: solid; border-width: 2px; line-height: 1; margin: 0 3px 5px 0;}
ol.shutten-icon li.icon1 {border-color: #fe0200;}
ol.shutten-icon li.icon2 {border-color: #91ce4f;}
ol.shutten-icon li.icon3 {border-color: #ffbf00;}
ol.shutten-icon li.icon4 {border-color: #00aeee;}
ol.shutten-icon li.icon5 {border-color: #d86ecd;}
ol.shutten-icon li.icon6 {border-color: #7f7d7e;}

.shutten-btn{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.shutten-btn a{ display: block; width: 48%; margin-right: 2%;}

@media screen and (max-width: 1023px) {
	#shutten { padding: 60px 0 40px 0;}
	#shutten h3 { font-size: 18rem; margin-bottom: 10px;}
	.shutten-list { display: block; }
	.shutten-list article { width: 100%; padding: 30px 20px 15px 20px; margin-bottom: 10px; }
	ol.shutten-icon { margin-bottom: 10px;}
	ol.shutten-icon li { font-size: 10.5rem; }
	.shutten-btn{ display: block;}
	.shutten-btn a{ width: 100%; margin-right: 0; margin-bottom: 5px}
}

.footer {background: #fff; padding: 60px 0; color: #333; text-align: center;}
.footer h5 {font-size: 20rem; margin-bottom: 10px}
.footer .copy {font-size: 13rem; margin-top: 30px}

@media screen and (max-width: 1023px) {
	.footer .box-inner {display: block;}
	.footer .box-inner div h6 img { display: block; max-width: 80%; margin: 0 auto;}
	.footer .box-inner div p { text-align: left; font-size: 12rem}
	.footer .box-inner div p img { display: block; max-width: 80%; margin: 0 auto 10px auto;}
	.footer .box-inner div:nth-child(2) { text-align: center;}
	.footer div a.footbana img { max-width: 100%;}
	.footer .box-inner div p.copy {text-align: center}
}
/*scroll view*/
.fade-in{}

@media screen and (max-width: 1023px) {
}