/* For modern browsers */
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom: 1;
}
/* common */
.mb5 {
	margin-bottom: 5%;
}
.mb10 {
	margin-bottom: 5%;
}
.Tcenter {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.Tright {
	text-align: right;
}
.w10 {
	width: 10%;
}
.w20 {
	width: 20%;
}
.w30 {
	width: 30%;
}
.w40 {
	width: 40%;
}
.w50 {
	width: 50%;
}
.w60 {
	width: 60%;
}
.w70 {
	width: 70%;
}
.w80 {
	width: 80%;
}
.w90 {
	width: 90%;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media print, screen and (max-width:900px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* br */
@media print, screen and (max-width:900px) {
.br-sp {
	display: none;
}
}

/* body */
body.index {
	background: #F0F2F9;
}
body.economy {
	background: #F2F6E2;
}
body.management {
	background: #E9F2FA;
}

/* wrap */
#wrap {
	padding: 0 0 20% 0;
}
.index #wrap {
	padding: 13% 0 20% 0;
}
@media print, screen and (min-width:900px) {
#wrap {
	padding: 0 0 10% 0;
}
.index #wrap {
	padding: 8% 0 10% 0;
}
}

/* contents */
#contents {
	margin-bottom: 10%;
}
@media print, screen and (min-width:900px) {
#contents {
	font-size: 1.6rem;
	margin-bottom: 5%;
}
}
#contents .container {
	width: 100%;
}

/*　top　////////////////////////////*/

/* main */
.main {
	width: 80%;
	margin: 0 auto 20% auto;
}
@media print, screen and (min-width:900px) {
.main {
	width: 100%;
	margin: 0 auto 12% auto;
}
}
.main .main_ttl {
	animation: fadein_dw 1s ease-out forwards;
	text-align: center;
	margin-bottom: 8%;
	font-size: clamp(12px, 4vw, 36px);
	font-weight: bold;
	letter-spacing: -0.04em;
	/*white-space: nowrap;*/
}
.main .main_ttl .txt{
	font-size: clamp(24px, 4vw, 52px);
	color: #46B2E7;
	min-width: 16.5%;
	display: inline-block;
	letter-spacing: 0;
}
.main .main_ttl .inner{
	width: 100%;
	max-width: 703px;
	border-bottom: 2px solid #46B2E7;
	display: inline-block;
}
.main .main_ttl .anker {
	position: relative;
}
.main .main_ttl .anker sup {
    font-size: 0.6em;
    vertical-align: super;
    position: absolute;
    top: 0;
	left: 0.5em;
}
.main .main_onigiri {
	text-align: center;
	margin-bottom: 11%;
	animation: fadein_oni 1s ease-out forwards;
}
@media print, screen and (min-width:900px) {
.main .main_onigiri {
	margin-bottom: 6%;
}
}
.main ul {
	overflow: hidden;
	max-width: 605px;
	margin: 0 auto 8% auto;
	animation: fadein_up 1s ease-out forwards;
}
@media print, screen and (min-width:900px) {
.main ul {
	margin: 0 auto 6% auto;
}
}
.main ul li {
	display: inline-block;
	width: 48%;
	max-width: 280px;
}
.main ul li:nth-child(1) {
	float: left;
}
.main ul li:nth-child(2) {
	float: right;
}
.main .main_txt {
	text-align: center;
	width: 80%;
	margin: 0 auto;
	animation: fadein_up 1s ease-out forwards;
}

/* course */
.course {
	width: 80%;
	margin: 0 auto 10% auto;
	animation: fadein_up 1s ease-out forwards;
}
@media print, screen and (min-width:900px) {
.course {
	width: 100%;
	margin: 0 auto 7% auto;
}
}
.course h1{
	text-align: center;
	margin-bottom: 7%;
}
@media print, screen and (min-width:900px) {
.course h1{
	margin-bottom: 5%;
}
}
.course .inner{
	max-width: 600px;
	margin: 0 auto;
}
.course p{
	margin-bottom: 6%;
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: -0.02em;
}
@media print, screen and (min-width:900px) {
.course p{
	margin-bottom: 6%;
	font-size: 1.8rem;
	line-height: 2.5;
	text-align: center;
}
}

/* link_btn */
.link_btn {
	width: 80%;
	margin: 0 auto 20% auto;
	overflow: hidden;
}
@media print, screen and (min-width:900px) {
.link_btn {
	width: 446px;
	margin: 0 auto 10% auto;
}
}
.link_btn ul {
	text-align: center;
}
.link_btn ul li {
	display: inline-block;
	width: 45%;
	max-width: 189px;
}
.link_btn ul li:first-child {
	margin-right: 8%;
}

/* link_btn_02 */
.link_btn_02 {
	width: 90%;
	margin: 0 auto 20% auto;
	overflow: hidden;
}
@media print, screen and (min-width:900px) {
.link_btn_02 {
	width: 100%;
	margin: 0 auto 10% auto;
}
}
.link_btn_02 ul {
	text-align: center;
}
.link_btn_02 ul li {
	display: inline-block;
	width: 30%;
	max-width: 189px;
	margin-right: 3%;
}
.link_btn_02 ul li:last-child {
	margin-right: 0;
}

/* learn */
.learn {
	width: 80%;
	margin: 0 auto 20% auto;
}
@media print, screen and (min-width:900px) {
.learn {
	width: 100%;
	margin: 0 auto 10% auto;
}
}
.learn .train_box{
	position: relative;
	max-width: 566px;
	margin: 0 auto 4% auto;
}
.learn .train_box .train{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	animation: rotateAnimation 8s linear infinite;
}


/*　page　////////////////////////////*/

/* page_title */
.page_title {
	max-width: 1200px;
	margin: 0 auto 10% auto;
}
@media print, screen and (min-width:900px) {
.page_title {
	margin: 0 auto 7% auto;
}
}
.page_title .top{
	background: url("../img/common/bg_01.png")repeat top left;
	border-bottom: 2px solid #8A8584;
	text-align: center;
	padding: 4% 5%;
}
.page_title .top h1{
	animation: fadein 1s ease-out forwards;
}
.page_title .top h1 img{
	margin: 0 auto;
	display: inline-block;
}
.page_title .mid{
	text-align: center;
	position: relative;
}
.page_title .mid h2{
	display: inline-block;
	position: absolute;
	text-align: right;
	animation: fadein_up 1s ease-out forwards;
}
.economy .page_title .mid h2{
	top: 9.5%;
	left:11%;
	height: 77.7%;
	width: 16%;
}
@media print, screen and (min-width:900px) {
.economy .page_title .mid h2{
	top: 9.5%;
	left:15.8%;
	width: 12%;
}
}
.management .page_title .mid h2{
	top: 6.5%;
	right:11.5%;
	height: 88.3%;
	width: 14%;
}
@media print, screen and (min-width:900px) {
.management .page_title .mid h2{
	top: 6.5%;
	right:12.6%;
	width: 11%;
}
}
.page_title .mid img{
}
.page_title .btm{
	background: url("../img/common/bg_01.png")repeat top left;
	border-top: 2px solid #8A8584;
	border-bottom: 2px solid #8A8584;
	padding: 4% 5%;
}
.page_title .btm dt{
	border-bottom: 2px dotted #8A8584;
	padding: 0 0 3% 0;
	margin: 0 0 3% 0;
	animation: fadein 1s ease-out forwards;
}
.page_title .btm dd{
	animation: fadein 1s ease-out forwards;
}
@media print, screen and (min-width:900px) {
.page_title .btm{
	padding: 4% 10%;
}
.page_title .btm dl{
	display: flex;
	align-items: stretch;
}
.page_title .btm dt{
	display: flex;
	border-right: 2px dotted #8A8584;
	border-bottom: none;
	padding: 0 5% 0 0;
	margin: 0 5% 0 0;
	width: 50%;
	align-items: center;
}
.page_title .btm dd{
	width: 50%;
}
}

/* article */
.article {
	width: 80%;
	max-width: 740px;
	margin: 0 auto 15% auto;	
}
@media print, screen and (min-width:900px) {
.article {
	width: 100%;
	margin: 0 auto 8% auto;	
}
}
.article p{
	margin: 0 0 2em 0;
	font-size: 1.6rem;
	line-height: 2;
}
.article p:last-child{
	margin: 0;
}
.article strong{
	background: #FFF362;
	padding: 0 3px;
}

/* pickup */
.pickup{
	margin: 0 0 15% 0;
}
@media print, screen and (min-width:900px) {
.pickup{
	margin: 0 0 8% 0;
}
}
.pickup .box{
	position: relative;
	background: url("../img/common/bg_01.png")repeat top left;
	padding: 7% 10%;
}
@media print, screen and (min-width:900px) {
.pickup .box{
	display: flex;
	align-items: stretch;
	padding: 4% 10%;
	max-width: 1000px;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
}
}
@media print, screen and (min-width:1000px) {
.pickup .box{
	align-items: flex-end;
	padding: 3% 3%;
}
}
.pickup .box .ico{
	display: inline-block;
	position: absolute;
	top: -30px;
	left: 5%;
	width: 30%;
	min-width: 183px;
}
@media print, screen and (min-width:900px) {
.pickup .box .ico{
	top: -20px;
	left: 5%;
	width: 183px;
}
}
@media print, screen and (min-width:1000px) {
.pickup .box .ico{
	top: -20px;
	left: 10px;
	width: 183px;
}
}
.pickup .box .left{
}
@media print, screen and (min-width:900px) {
.pickup .box .left{
	width: 65%;
	margin-right: 5%;
}
}
.pickup .box .left h3{
	margin: 0 0 3% 0;
}
@media print, screen and (min-width:900px) {
.pickup .box .left h3{
	max-width: 542px;
	margin: 0 0 3% 0;
}
}
.pickup .box .left h4{
	margin: 0 0 3% 0;
	font-size: 2rem;
}
.pickup .box .left p{
	font-size: 1.6rem;
    line-height: 2;
	margin: 0 0 5% 0;
	letter-spacing: -0.02em;
}
@media print, screen and (min-width:900px) {
.pickup .box .left p{
	font-size: 1.4rem;
    line-height: 2;
	margin: 0 0 0 0;
}
}
.pickup .box .right{
}
@media print, screen and (min-width:900px) {
.pickup .box .right{
	width: 30%;
}
}

/* active_learning */
.active_learning{
	text-align: center;
	margin-bottom: 15%;
}
@media print, screen and (min-width:900px) {
.active_learning{
	margin-bottom: 8%;
}
}
.active_learning div{
	display: inline-block;
}


/*　footer　////////////////////////////*/

footer {
	width: 80%;
	margin: 0 auto 0 auto;
}
@media print, screen and (min-width:900px) {
footer {
	width: 100%;
}
}
footer .box {
	max-width: 735px;
	margin: 0 auto;
}
/* inner01 */
footer .box .inner01{
	margin-bottom: 10%;
	text-align: center;
}
@media print, screen and (min-width:900px) {
footer .box .inner01{
	margin-bottom: 0;
	width: 30%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	border-right: 1px solid #595757;
	height: 110px;
	line-height: 77px;
}
}
/* inner02 */
footer .box .inner02{
	margin-bottom: 10%;
	text-align: center;
}
@media print, screen and (min-width:900px) {
footer .box .inner02{
	margin-bottom: 0;
	width: 40%;
	display: inline-block;
	text-align: left;
	height: 110px;
	vertical-align: top;
	padding-left: 3%;
}
}
footer .box .inner02 ul li{
	margin-bottom: 2%;
	font-weight: bold;
	width: 100%;
}
@media print, screen and (min-width:760px) {
footer .box .inner02 ul li:nth-child(2){
	display: inline-block;
	margin-right: 5%;
}
footer .box .inner02 ul li:nth-child(3){
	display: inline-block;
}
}
@media print, screen and (min-width:900px) {
footer .box .inner02 ul li:nth-child(2){
	display: block;
	margin-right: 0;
}
footer .box .inner02 ul li:nth-child(3){
	display: block;
}
}
footer .box .inner02 span{
	display: inline-block;
	background: #595757;
	text-align: center;
	width: 42px;
	color: #FFFFFF;
	margin-right: 10px;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 2px 0 3px 0;
}

/* inner03 */
footer .box .inner03{
	margin-bottom: 10%;
	text-align: center;
}
@media print, screen and (min-width:900px) {
footer .box .inner03{
	margin-bottom: 0;
	width: 25%;
	display: inline-block;
	text-align: left;
	height: 110px;
}
}
footer .box .inner03 ul li{
	margin-bottom: 5%;
}
@media print, screen and (min-width:760px) {
footer .box .inner03 ul li{
	display: inline-block;
	width: 31%;
	margin: 0 2% 0 0;
}
footer .box .inner03 ul li:last-child{
	margin: 0;
}
}
@media print, screen and (min-width:900px) {
footer .box .inner03 ul li{
	display: block;
	width: 100%;
	margin: 0 0 5% 0;
}
footer .box .inner03 ul li:last-child{
	margin: 0;
}
}
footer .text {
	font-size: 1.2rem;
}
@media print, screen and (min-width:900px) {
footer .text {
	margin-top: 5%;
}
}

/* fade */
.fade-in {
  opacity: 0;
  transform: translateY(40px); /* 下からふわっと */
  transition: all 1s; /* 1秒かけて */
}
.fade-in.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* keyframes */
@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1; }
}
@keyframes fadein_up {
	0% { opacity: 0; transform: scale(1) translateY(40px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadein_dw {
	0% { opacity: 0; transform: scale(1) translateY(-40px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadein_oni {
	0% { opacity: 0; transform: scale(1.2) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rotateAnimation {
	0% { transform: rotate(0deg); }
	60% { transform: rotate(360deg); } /* 5秒の60%（3秒）で回転完了 */
	100% { transform: rotate(360deg); } /* 残り40%（2秒）はそのまま停止 */
}

/*popup_format*/
.popup_format {
	padding: 50px 5% 5% 5%;
}
.popup_format dt{
	margin: 0 0 5% 0;
	overflow: hidden;
}
.popup_format dt img{
	float: left;
	width: 18%;
	margin: 0 5% 0 0;
}
.popup_format dt p{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.8;
}
.popup_format dd {

}

/*colerbox*/
#cboxLoadedContent {
	background: url("../img/common/bg_01.png")repeat top left;
	width: 90%;
}
@media print, screen and (min-width:750px) {
#cboxLoadedContent {
	width: 700px;
}
}
#cboxOverlay {
	background: #333333;
}
#cboxLoadingOverlay{
	background: #ffffff;
}
#cboxContent{
	background: #ffffff;
}
/*閉じるボタン */
#cboxClose{
	position:absolute;
	top:10px;
	right:10px;
	display:block;
	background:url(images/close.png) no-repeat top center;
	width:30px;
	height:30px;
	text-indent:-9999px;
}
#cboxClose:hover{
	background-position:bottom center;
}