@charset "UTF-8";

header, article {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
section {
	position: relative;
	clear: both;
	z-index: 1;
}
.cnts900 {
	width: 900px;
	margin: 0 auto;
}
.dp-n-01, .dp-n-02 { display: none; }
.dp-b-01 {	display: inline-block; }
.dp-b-02 {	display: block; }

/* header
------------------------------------------------------------------- */
header {
	display: flex;
	justify-content: right;
	flex-wrap: wrap;
	margin-bottom: 69px;
}
.g-nav {
	position:fixed;
	z-index: 10;
	top: 60px;
}

/* top page
-------------------------------------------*/
body {
	background:#ffffff url(../../images/bg_main@2x.png) no-repeat center -45px;
	background-size: 1920px auto;
}
.T-area {
	width: 764px;
	margin: 0 auto;
}
.top-lead {
	height: 666px;
	margin-top: 139px;
}
h1 {
	margin-bottom: 68px;
}
.main-visual {
	position: absolute;
	right: 0;
	top: 91px;
}

.bd-Y, .bd-B, .bd-G, .bd-P {
	position: relative;
	z-index: 1;
}
.bd-Y::after, .bd-B::after, .bd-G::after, .bd-P::after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 15px;
	background: url(../../images/bd-yellow@2x.jpg);
	background-size: 14px auto; 
	background-repeat: repeat-x;
	z-index: -1;
	transition: all 0.5s ease-out;
}
.bd-B::after {
	background: url(../../images/bd-blue@2x.jpg);
	background-size: 14px auto; 
}
.bd-G::after {
	background: url(../../images/bd-green@2x.jpg);
	background-size: 14px auto; 
}
.bd-P::after {
	background: url(../../images/bd-pink@2x.jpg);
	background-size: 14px auto; 
}
.bd-Y.isActive::after, .bd-B.isActive::after, .bd-G.isActive::after, .bd-P.isActive::after {
	width: 100%;
}

.teacher {
	background: url(../../images/teacher-img@2x.png), linear-gradient(180deg, #ffffff 0%, #ffffff 12.8%,#f0f0f0 12.8%,#f0f0f0 91%,#ffffff 99%, #ffffff 100%);
	background-repeat: no-repeat , repeat;
	background-size:1920px auto , auto;
	background-position:  center top, left top;
	width: 100vw;
	height: 768px;
	margin: -20px calc(50% - 50vw) 0;
	position: relative;
	z-index: -1;
	padding-top: 192px;
	box-sizing: border-box;
}
.about-teacher {
	width: 637px;
}
.teacher h3 {
	text-align: left;
}
.teacher ul {
	display: flex;
	column-gap: 23px;
}
.learning-cycle {
	background: url(../../images/bg_cycle@2x.png) no-repeat center top;
	background-size: 1200px auto;
	padding-top: 70px;
	margin: 0 calc(50% - 50vw);
}
.cycle-img {
	margin-top: 60px;
	margin-bottom: 70px;
	text-align: center;
}
.hands-on-training {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 20px;
	row-gap: 20px;
	padding-bottom: 70px;
	padding-top: 80px;
}
.hands-on-training li {
	width: calc((100% - 40px) / 3);
	border: 1px solid #cccccc;
	box-sizing: border-box;
	border-bottom-right-radius:20px;
	font-size: 1.125em;
	text-align: center;
	padding: 27px 0 22px 0;
}
.hands-on-training li img {
	display: block;
	margin:0 auto 20px;
}

.graph-wrapper {
	width: 50%;
}
.recoed-wrapper {
	width: 50%;
}
.graph h3 {
	text-align: left;
	margin-bottom: 19px;
}
.bar-container {
	width: 90%;
	margin-bottom: 40px;
}
.bar {
	display: flex;
	align-items: center;
	margin-bottom: 19px;
}

.bar-label {
	width: 118px;
	font-size: 1.125em;
	color: #1a6aac;
}
.bar-fill {
	position: relative;
	background-color: #7ab0de;
	height: 27px;
	margin-right: 11px;
/* 初期状態で棒の横幅を0に設定 */
  transform: scaleX(0); 
  /* アニメーションが左から始まるように、左端を基準に設定 */
  transform-origin: left center;   
  /* アニメーションの設定 */
  animation: growBar 2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; 
  /* 'growBar'という名前のアニメーションを2秒間で、イージング（動きが滑らかになる）を指定し、最終状態に向かう */
	animation-timeline: view();
	animation-delay: .5s;
	animation-range: contain 0% contain 50%; /* 開始: 要素がビューポートに完全に入った時、終了: ビューポートの真ん中 */
}
.percentage {
	font-size: 1.125em;
	color: #7ab0de;
	font-weight: 700;
	position: absolute;
	right: -3em;
	top: 3px;
}

.bar-colG .bar-label {
	color: #118630;
}
.bar-colG .bar-fill {
	background-color: #80d296;
}
.bar-colG .percentage {
	color: #80d296;
}

.bar-colP .bar-label {
	color: #9f3f6a;
}
.bar-colP .bar-fill {
	background-color: #de91b3;
}
.bar-colP .percentage {
	color: #de91b3;
}

/* 棒グラフのアニメーションの定義 */
@keyframes growBar {
  from {
    transform: scaleX(0); /* アニメーション開始時、棒の横幅は0（非表示） */
  }
  to {
    transform: scaleX(1); /* アニメーション終了時、棒の横幅が100%に伸びる */
  }
}

/* 各棒に個別のアニメーション時間を設定 */
.bar:nth-child(1) .bar-fill {
  animation-duration: 2s; /* 1番目の棒グラフは2秒でアニメーション */
}
.bar:nth-child(2) .bar-fill {
  animation-duration: 2.5s; /* 2番目の棒グラフは2.5秒でアニメーション */
}
.bar:nth-child(3) .bar-fill {
  animation-duration: 3s; /* 3番目の棒グラフは3秒でアニメーション */
}
.bar:nth-child(4) .bar-fill {
  animation-duration: 3.5s; /* 3番目の棒グラフは3秒でアニメーション */
}
.bar:nth-child(5) .bar-fill {
  animation-duration: 4s; /* 3番目の棒グラフは3秒でアニメーション */
}
.record-list li {
	font-size: 1.125rem;
}

.voice {
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	background-image: url(../../images/voice_bg_L@2x.png), url(../../images/voice_bg_R@2x.png), url(../../images/voice_bg.png);
	background-repeat: no-repeat, no-repeat, repeat-x ;
	background-position: calc(50% - 315px) 40px, calc(50% + 300px) 20px, center bottom;
	background-size: 392px auto, 620px auto ,auto;
	height: 452px;
	overflow: hidden;
}
.slider-card {
	width: 100%;
	margin: 0 auto;
}
.slider-card .slick-track {
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.slick-slide {
	height: auto !important;
}
.slick-initialized .slick-slide {
	display: flex !important;
}
.slick-prev {
	z-index: 10;
}
.slick-prev, .slick-next {
    top: 60%;
    width: 25%;
    height: 100%;
	/*background:rgba(0, 0, 0, 0.07);*/
}
.slick-next {
	width: 75%;
}
.card {
	border: 1px solid #ffffff;
	border-bottom-right-radius: 30px;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.07);
	line-height: 1.31;
	width: 498px;
	padding: 40px;
	margin: 0 30px;
	box-sizing: border-box;
	margin-top: 70px;
	opacity: 0.7;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content:center;
	
}
.card.slick-current.card.slick-active {
	opacity: 1;
}

.card h3 {
	font-size: 1.5em;
	font-weight: 500;
	text-align: left;
	line-height: 1.33;
	margin-bottom: 10px;
}

.type1 li {
	color: #2d6898;
}
.type2 li {
	color: #37a453;
}

.accordion_inner {
	display: none;
}
h3.accordion_title {
	font-size: 2em;
	line-height: 1.19;
	font-weight: 700;
	text-align: left;
}
h3.accordion_title span {
	font-size: 1.3125rem;
	font-weight: 400;
}
.js-accordion_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #cccccc;
	border-bottom-right-radius: 20px;
	padding: 50px 66px;
	margin-bottom: 25px;
}
.js-accordion_title:hover {
	cursor: pointer;
}
.js-accordion_title .icon_open {
	background: url(../../images/icon_open@2x.png) no-repeat center top;
	background-size: 50px auto;
	font-size: 1.125em;
	color: #3c8cd0;
	width: 5em;
	text-align: center;
	padding-top: 40px;
}
.js-accordion_title.open .icon_open {
	display: none;
}
.js-accordion_title.open {
	border-bottom: none;
	border-bottom-right-radius: 0;
	padding-bottom: 30px;
	margin-bottom: 0;
}
.js-accordion_title.open:hover {
	cursor: default;
}
.accordion_inner {
	padding: 0 66px 50px;
	border: 1px solid #cccccc;
	border-bottom-right-radius: 20px;
	border-top:none;
	margin-bottom: 25px;
}
.course h4 {
	font-size: 1.125rem;
	line-height: 1.17;
	margin-bottom: 10px;
}
.course .dot-c li {
	line-height: 1.625;
}
.course .specific {
	margin-bottom: 30px;
}
.course .specific h4 {
	width: 3em;
}
.course .specific p {
	width: calc(100% - 3.5em);
	font-size: 1.125em;
}
.icon-next::after {
	content: "";
	width: 35px;
	height: 20px;
	display: block;
	margin: 30px auto 20px;
	background: url(../../images/icon_next@2x.png) no-repeat center top;
	background-size: 35px auto;
}
.ft-nav {
	margin: 60px auto;
	text-align: center;
}
.ft-nav li {
	font-size: 1.3125em;
	line-height: 1.52;
	display: inline-block;
}
.ft-nav li a {
	color: #333333;
}
.ft-nav li::after {
	content: "｜";
	display: inline-block;
	color: #cccccc;
}
footer {
	width: 100%;
	background-color: #000000;
	padding: 65px 0 70px 0;
}
footer h4 {
	font-size: 1.5em;
	text-align: center;
	color: #ffffff;
	margin:25px 0 15px;
}
footer address {
	font-size: 0.75em;
	color: #ffffff;
	text-align: center;
	font-style: normal;
}
footer .ft-logo {
	width: 77px;
	height: 77px;
	margin: 0 auto;
}
footer .ft-logo img {
	width: 100%;
	height: auto;
}

/* lower page style
-----------------------------------------
h1 span + br + span {
	display: inline-block;;
	margin-top: 8px;
	margin-bottom: 8px;
}

.page-menu ul {
	display: flex;
	justify-content: space-around;
	padding: 0 12%;
}

.page-menu li a {
	font-size: 1.5em;
	color: #999999;
}
.page-menu li a::after {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(../../img/icon_down@2x.png) no-repeat left center;
	background-size: 100% auto;
	vertical-align: middle;
	margin: -5px 10px 0 10px;
}

.slider li.slick-active img {
	border-bottom:2px solid;
	margin-inline: auto;
	border-image: linear-gradient(to right, #ff00cc , #ff9933, #00cc66, #0099ff, #cc33cc) 1;
}
.slider li img {
    width: 100%;
    height: auto;
}
.slider .slick-dots li {
    background: none;
}


.tag-area {
	max-width: 1000px;
	width: 100%;
	margin: 40px auto 0;
	position: relative;
	z-index: 3;
}
.tag-area ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 5px;
}
.tag-area li {
	font-size: 1.31em;
	color: #333333;
	line-height: 51px;
	border-radius: 25px;
	background-color: #eeeeee;
	list-style: none;
}
.tag-area li a {
	display: block;
	color: #333333;
	text-decoration: none;
	padding: 0 25px;
}
.tag-area li a:hover {
	text-decoration: underline;
}

/*  footer 
------------------------------------------------------------------- 
footer {
	background: url(../../img/footer_bg@2x.jpg) no-repeat center top;
	background-size: 1920px 100%;
	padding: 190px 0 40px 0;
	margin-top: 170px;
	position: relative;
}

footer nav h3 {
	font-size: 0.875em;
	color: #999999;
	margin: 0;
}

footer nav ul {
	padding: 0;
	margin:5px 0 57px 0;
}
footer nav li {
	color: #ffffff;
	line-height: 2em;
	list-style: none;
}
footer nav {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding-top: 40px;
}
footer nav div {
	width: auto;
	padding: 0;
}
.ft-copy-jp {
	background: url(../../img/top_footer_copy01@2x.png) no-repeat center top;
	background-size:1232px auto;
	width: 100%;
	height: 327px;
	margin-top: -395px;
	z-index: 1;
	position: absolute;
	transition:transform 0.5s ease;
	overflow: hidden;
}
.ft-copy-en {
	background: url(../../img/top_footer_copy02@2x.png) no-repeat center top;
	background-size:1400px auto;
	width: 100%;
	height: 233px;
	margin-top: -280px;
	z-index: 2;
	position: absolute;
	transition:transform 0.5s ease;
	overflow: hidden;
}