@charset "utf-8";

/*---------------------------------------------
    main
---------------------------------------------*/
#t4_1 main { height: 100vh; min-height: 790px; background: url(../../images/t-4/bg.png) no-repeat; overflow: hidden; }

/*---------------------------------------------
    title-area
---------------------------------------------*/
#t4_1 .title-area			{ position: relative; width: 1440px; margin: 0 auto; padding : 19px 0 0 12px; }
#t4_1 .title-area:before	{ content: ""; top: 105px; left: 0; position: absolute; width: 1440px; height: 2px; background: url(../../images/t-4/bg_title_gradation_white.png) no-repeat; }
#t4_1 .title-area h1 img	{ padding-top: 22px; }
#t4_1 .title-area strong	{ display: block; margin: 29px 0 0 -17px; font-family: 'Noto Sans Regular', sans-serif; font-size: 28px; color: #fff; }

/*---------------------------------------------
    selection-area
---------------------------------------------*/
#t4_1 .selection-area			{ position: relative; z-index: 0; margin-top: 17px; min-height: 503px; overflow: hidden; }

#t4_1 .learn-contents			{ position: absolute; z-index: 10; top: 0; left: 50%; margin-left: -720px; width: 840px; min-height: 503px; background: url(../../images/t-4/bg_learn.png) no-repeat; transition: .5s; }
#t4_1 .learn-contents:before	{ content: ""; position: absolute; top: 0; left: -99.9vw; width: 100vw; min-height: 503px; background: #1faee7; }

#t4_1 .support-contents			{ position: absolute; z-index: 11; top: 0; right: 50%; margin-right: -720px; width: 862px; min-height: 503px; background: url(../../images/t-4/bg_supprt.png) no-repeat; transition: .5s; }
#t4_1 .support-contents:before	{ content: ""; position: absolute; top: 0; right: -99.9vw; width: 100vw; min-height: 503px; background: #9cd248;  }

#t4_1 .learn-inner, #t4_1 .support-inner{ min-height: 503px; overflow: hidden; }
#t4_1 .contents-title-area				{ position: relative; text-align: center; width: 587px; transition: .5s .2s; }
#t4_1 .contents-title-area:before		{ content: ""; position: absolute; top: 113px; left: 0; width: 587px; height: 2px; background: url(../../images/t-4/contents_title_line.png) no-repeat; transition: .5s .2s; }
#t4_1 .contents-title-area h2				{ font-family: 'Noto Sans Bold', sans-serif; font-size: 23px; color: #fff; }
#t4_1 .contents-title-area h2 strong		{ display: block; margin-top: 8px; font-size: 38px; }
#t4_1 .contents-title-area p				{ margin-top: 38px; font-size: 18px; color: #002e66; transition: .5s .2s; }
#t4_1 .learn-contents .contents-title-area	{ margin: 75px 0 0 58px; }
#t4_1 .support-contents .contents-title-area{ margin: 75px 0 0 236px; }

#t4_1 .learn-btn		{ width: 316px; margin: 65px 0 0 193px; transition: .5s .2s; }
#t4_1 .learn-btn a		{ position: relative; display: block; width: 316px; margin: 0 auto; padding: 13px; font-family: 'Noto Sans Regular', sans-serif; font-size: 16px; text-decoration: none; letter-spacing: 0.5px; cursor: pointer; }
#t4_1 .learn-btn a:after{ content: ""; position: absolute; top: 21px; right: 18px; width: 7px; height: 7px; transform: rotate(45deg);  }

#t4_1 .learn-btn .continue,
#t4_1 .learn-btn .start					{ margin-top: 10px; background: #0f6ea6; color: #fff; }
#t4_1 .learn-btn .start:after,
#t4_1 .learn-btn .continue:after		{ border-top: 2px solid #fff; border-right: 2px solid #fff; }
#t4_1 .learn-btn .start:hover,
#t4_1 .learn-btn .continue:hover		{ background: #fff; color: #002e66; }
#t4_1 .learn-btn .start:hover:after,
#t4_1 .learn-btn .continue:hover:after	{ border-top: 2px solid #002e66; border-right: 2px solid #002e66; }

#t4_1 .support-btn			{ width: 316px; margin: 85px 0 0 371px; transition: .5s .2s; }
#t4_1 .support-btn a		{ position: relative; display: block; width: 316px; margin: 0 auto; padding: 23px 13px; font-family: 'Noto Sans Regular', sans-serif; font-size: 16px; text-decoration: none; letter-spacing: 0.5px; cursor: pointer; }
#t4_1 .support-btn a:after	{ content: ""; position: absolute; top: 30px; right: 18px; width: 7px; height: 7px; transform: rotate(45deg);  }

#t4_1 .support-btn .start				{ margin-top: 10px; background: #588e4a; color: #fff; }
#t4_1 .support-btn .start:after			{ border-top: 2px solid #fff; border-right: 2px solid #fff; }
#t4_1 .support-btn .start:hover			{ background: #fff; color: #002e66; }
#t4_1 .support-btn .start:hover:after	{ border-top: 2px solid #002e66; border-right: 2px solid #002e66; }

/* --------------------------------- */

#t4_1 .active-learn .selection-area:before				{ -webkit-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); }
#t4_1 .active-learn .selection-area:after				{ -webkit-transform: translateX(100vw); -ms-transform: translateX(100vw); transform: translateX(100vw) }
#t4_1 .active-learn .learn-contents						{ transition-delay: .6s; -webkit-transform: translateX(-235px); -ms-transform: translateX(-235px); transform: translateX(-235px); }
#t4_1 .active-learn .support-contents					{ right: -50%; }
#t4_1 .active-learn .learn-contents .contents-title-area{ animation: active-learn-animation 1.8s .2s forwards; }

#t4_1 .reverse-learn .learn-contents					{ transition-delay: 1.0s; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
#t4_1 .reverse-learn .support-contents					{ right: 50%; transition-delay: 1.0s; }
#t4_1 .reverse-learn .learn-contents .contents-title-area{ top: 126px; left: 94px; animation: reverse-learn-animation 2.6s .2s forwards; }

@keyframes active-learn-animation{
  0%	{ opacity: 1; top: 0; left: 0; }
  15%	{ opacity: 0; top: 0; left: 0; }
  30%	{ opacity: 0; top: 0; left: 0; }
  50%	{ opacity: 0; top: 126px; left: 94px; }
  100%	{ opacity: 1; top: 126px; left: 94px; }
}
@keyframes reverse-learn-animation{
  0%	{ opacity: 1; top: 126px; left: 94px; }
  15%	{ opacity: 0; top: 126px; left: 94px; }
  30%	{ opacity: 0; top: 126px; left: 94px; }
  50%	{ opacity: 0; top: 0; left: 0; }
  100%	{ opacity: 1; top: 0; left: 0; }
}

#t4_1 .active-learn .learn-contents .contents-title-area:before,
#t4_1 .active-learn .learn-contents .contents-title-area p,
#t4_1 .active-learn .learn-btn { opacity: 0; }

#t4_1 .reverse-learn .learn-contents .contents-title-area:before,
#t4_1 .reverse-learn .learn-contents .contents-title-area p,
#t4_1 .reverse-learn .learn-btn { opacity: 1; transition-delay: 1.6s; }

#t4_1 .active-support .selection-area:before				{ -webkit-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); }
#t4_1 .active-support .selection-area:after					{ -webkit-transform: translateX(100vw); -ms-transform:  translateX(100vw); transform: translateX(100vw); }
#t4_1 .active-support .learn-contents						{ left: -50%; }
#t4_1 .active-support .support-contents						{ transition-delay: .6s; -webkit-transform: translateX(235px); -ms-transform: translateX(235px); transform: translateX(235px); }
#t4_1 .active-support .support-contents .contents-title-area{ animation: active-support-animation 1.8s .2s forwards; }

#t4_1 .reverse-support .support-contents					{ transition-delay: 1.0s; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
#t4_1 .reverse-support .learn-contents						{ right: 50%; transition-delay: 1.0s; }
#t4_1 .reverse-support .support-contents .contents-title-area{ top: 126px; right: 149px; animation: reverse-support-animation 2.6s .2s forwards; }

@keyframes active-support-animation{
  0%	{ opacity: 1; top: 0; right: 0; }
  15%	{ opacity: 0; top: 0; right: 0; }
  30%	{ opacity: 0; top: 0; right: 0; }
  50%	{ opacity: 0; top: 126px; right: 149px; }
  100%	{ opacity: 1; top: 126px; right: 149px; }
}

@keyframes reverse-support-animation{
  0%	{ opacity: 1; top: 126px; right: 149px; }
  15%	{ opacity: 0; top: 126px; right: 149px; }
  30%	{ opacity: 0; top: 126px; right: 149px; }
  50%	{ opacity: 0; top: 0; right: 0; }
  100%	{ opacity: 1; top: 0; right: 0; }
}

#t4_1 .active-support .support-contents .contents-title-area:before,
#t4_1 .active-support .support-contents .contents-title-area p,
#t4_1 .active-support .support-btn { opacity: 0; }

#t4_1 .reverse-support .support-contents .contents-title-area:before,
#t4_1 .reverse-support .support-contents .contents-title-area p,
#t4_1 .reverse-support .support-btn { opacity: 1; transition-delay: 1.6s; }


/*---------------------------------------------
    links-contents
---------------------------------------------*/
#t4_1 .links-contents	{ position: relative;  text-align: left; }
#t4_1 .links-title		{ font-family: 'Noto Sans Regular', sans-serif; font-size: 22px; }
#t4_1 .learn-links,
#t4_1 .support-links	{ content: ""; position: absolute; top: 0; width: 1096px; min-height: 503px; transition: .5s; }

#t4_1 .learn-links:before, #t4_1 .support-links:before { content: ""; position: absolute; top: 0; width: 100vw; min-height: 503px; }

#t4_1 .learn-links:before						{ right: -100vw; background: #fff; }
#t4_1 .learn-links:after						{ content: ""; position: absolute; top: 124px; right: -100vw; width: 100vw; min-height: 46px; background: #e8f7fd; }
#t4_1 .learn-links								{ z-index: 15; right: -50%; margin-right: -720px; background: url(../../images/t-4/bg_learn_links.png) no-repeat; }

#t4_1 .learn-links .links-contents				{ width: 740px; margin: 130px 0 0 287px; }
#t4_1 .learn-links .links-contents .links-title	{ margin-left: 9px; color: #0696cf; opacity: 0; transition: .5s; }

#t4_1 .support-links:before							{ left: -100vw; background: #fff; }
/*#t4_1 .support-links:after							{ content: ""; position: absolute; top: 124px; left: -100vw; width: 100vw; min-height: 46px; background: #e8f7fd; }*/
#t4_1 .support-links								{ z-index: 16; left: -50%; margin-left: -743px; background:url(../../images/t-4/bg_support_links.png) no-repeat;}

#t4_1 .support-links .links-contents				{ width: 722px; margin: 130px 0 0 99px; }
#t4_1 .support-links .links-contents .links-title	{ margin-left: 9px; color: #4a7901; opacity: 0; transition: .5s;}

#t4_1 .links					{ margin-top: 40px; opacity: 0; transition: .5s; }
#t4_1 .links li					{ border-bottom: 1px solid rgba(0, 46, 102, .5); }
#t4_1 .links li + li			{ margin-top: 15px;  }
#t4_1 .links li > a				{ position: relative; display: block; padding: 9px 9px 24px; font-size: 19px; color: #002e66; text-decoration: none; text-align: left; }
#t4_1 .links li > a:after		{ content: ""; position: absolute; top: 21px; right: 12px; width: 7px; height: 7px; border-top: 2px solid #002e66; border-right: 2px solid #002e66; transform: rotate(45deg); }
#t4_1 .links li > a:hover		{ color: #1faee7; }
#t4_1 .links li > a:hover span	{ background: #1faee7; }
#t4_1 .links li > a:hover:after	{ border-color: #1faee7; }
#t4_1 .links li > a span		{ display: inline-block; width: 135px; height: 34px; margin-right: 20px; padding: 4px 0; background: #002e66; border-radius: 17px; font-size: 18px; font-weight: bold; color: #fff; text-align: center; }

/*#t4_1 .support-links .links				{ margin-left: 29px; }*/

#t4_1 .support-links .links li > a:hover		{ color: #1faee7; }
#t4_1 .support-links .links li > a:hover span	{ background: #82c836; }
#t4_1 .support-links .links li > a:hover:after	{ border-color: #1faee7; }

#t4_1 .support-links .links li.disable > a		{ color: #a6a6a6; pointer-events: none;}
#t4_1 .support-links .links li.disable > a span	{ background: #a6a6a6; }
#t4_1 .support-links .links li.disable > a:after{ border-color: #a6a6a6; }

#t4_1 .back-btn					{ position: absolute; bottom: 0;  display: block; width: 184px; padding: 6px 0;  background: rgba(0, 37, 82, 0.54) url(/ja/system/iot/support/learning/assets/images/i_ar_white_ref.png) no-repeat  11px 12px; font-family: 'Noto Sans Regular', sans-serif; font-size: 14px; color: #fff; text-align: center; text-decoration: none; cursor: pointer }
#t4_1 .learn-links .back-btn	{ right: 70px; }
#t4_1 .support-links .back-btn	{ left: 99px; }

#t4_1 .active-learn .learn-links{ transition-delay: .6s; right: 50%; }
#t4_1 .active-learn .learn-links .links-contents .links-title,
#t4_1 .active-learn .learn-links .links-contents .links		{ transition-delay: 1.2s; opacity: 1; }

#t4_1 .reverse-learn .learn-links{ transition-delay: .6s; right: -50%; }
#t4_1 .reverse-learn .learn-links .links-contents .links-title,
#t4_1 .reverse-learn .learn-links .links-contents .links { transition: 0.85s; opacity: 0; }

#t4_1 .active-support .support-links{ transition-delay: .6s; left: 50%; }
#t4_1 .active-support .support-links .links-contents .links-title,
#t4_1 .active-support .support-links .links-contents .links { transition-delay: 1.2s; opacity: 1; }

#t4_1 .reverse-support .support-links{ transition-delay: .6s; left: -50%; }
#t4_1 .reverse-support .support-links .links-contents .links-title,
#t4_1 .reverse-support .support-links .links-contents .links { transition: 0.85s; opacity: 0; }


/*---------------------------------------------
    for-beginner
---------------------------------------------*/
#t4_1 .for-beginner						{ margin-top: 22px; color: #fff; }
#t4_1 .for-beginner span				{ display: inline-block; margin-right: 18px; font-family: 'Noto Sans Regular', sans-serif; font-size: 18px; }
#t4_1 .for-beginner-btn					{ display: inline-block; }
#t4_1 .for-beginner-btn a				{ position: relative; display: inline-block; min-width: 230px; padding: 10px 30px; background: rgba(255, 255, 255, .1);  font-family: 'Noto Sans Regular', sans-serif; font-size: 14px; color: #fff; text-decoration: none;  }
#t4_1 .for-beginner-btn a:first-child	{ margin-right: 7px; }
#t4_1 .for-beginner-btn a:after			{ content: ""; position: absolute; top: 16px; right: 12px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#t4_1 .for-beginner-btn a:hover			{ background-color: #0270c0; }