@charset "UTF-8";

body {
	font-family: 'Noto Sans TC', sans-serif;
	margin: 0 auto;
	padding: 0;
	position:relative;
  background-color:#fff;
	font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
* {
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-boxmages;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
img { vertical-align: top; }

h2 {

}
p {
  padding:0;
  margin:0;
	font-size:16px;
	color:#111;
}
.fl { float:left; }
.fr { float:right; }
.tl { text-align:left; }
.tr { text-align:right; }
.clear { clear:both; }

.pc { display:block; }
.smp { display:none; }

/*header*/
header {
	width:100%;
	padding:12px;
	position:fixed;
	top:0;
	left:0;
	background-color:#fff;
	z-index:9000;
}
header img {
	height:26px;
}
.openbtn1{
  position: absolute;/*ボタン内側の基点となるためrelativeを指定*/
	right:0;
	top:0;
  cursor: pointer;
  width: 60px;
  height:50px;
}
/*ボタン内側*/
.openbtn1 span{
  display: inline-block;
  transition: all .4s;/*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 1px;
  background: #111111;
  width: 45%;
}
.openbtn1 span:nth-of-type(1) {
  top:18px;
}
.openbtn1 span:nth-of-type(2) {
  top:25px;
}
.openbtn1 span:nth-of-type(3) {
  top:32px;
}
/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-35deg);
  width: 40%;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;/*真ん中の線は透過*/
}
.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(35deg);
  width: 40%;
}

/*to top*/
a.totop {
  width:50px;
  position:fixed;
  bottom:0;
  right:0;
  z-index:13000;
}
a.totop img { width:100%; }
/*menu*/
.contact {
	width:50px;
	height: 240px;
	position:fixed;
	right:0;
	top:50%;
	transform: translate(0,-50%);
	background-image: url('../images/contact_btn.png');
	background-size:50px 240px;
	z-index: 13000;
}
.contact:hover {
	background-image: url('../images/contact_btn_h.png');
	background-size:50px 240px;
}
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 8999;
  /*ナビのスタート位置と形状*/
  bottom:0;
  right: -120%;
  width:440px;
  height: 100vh;/*ナビの高さ*/
  background:rgba(222,193,141,0.95);
  /*動き*/
  transition: all 0.6s;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  z-index: 999;
  width:440px;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
	margin:0;
	padding:0;
  position: absolute;
  z-index: 999;
  top:50%;
  left:20px;
  transform: translate(0,-50%);
}
#g-nav li {
	padding:0;
	margin:0 0 20px;
  list-style: none;
  text-align: left;
	color:#fff;
	font-size:22px;
	font-weight: bold;
}
#g-nav li:nth-child(1) { padding:0 0 4px 12px; }
#g-nav li:last-child { margin:0; }
#g-nav li a {
	width:300px;
  color: #133D6F;
  text-decoration: none;
  padding:0 0 12px 12px;
  display: block;
  font-weight: bold;
	font-size:16px;
	border-bottom:1px solid #fff;
}
#g-nav li a span {
  color: #fff;
  font-weight: normal;
	font-size:10px;
}
#g-nav li a span.oomoji{
  text-transform: uppercase;
}

/*content*/
.main { overflow: hidden; position:relative; }
section {
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}
section .inner {
  width: 100%;
  max-width:960px;
  margin:0 auto;
  padding:0;
	position:relative;
}
section .inner .content {
  width: 100%;
  max-width:760px;
  margin:0 auto;
  padding:0;
	position:relative;
}

/*cover*/
.pc_cover {
	width:100%;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	z-index:20000;
}
.pc_cover .cover_top {
	width:100%;
	height:50%;
	position:absolute;
	top:0;
	right:0;
	overflow: hidden;
}
.pc_cover .cover_top .text01_a {
	height:108px;
	position:absolute;
	bottom:5px;
	left:50%;
	transform: translate(-50%,0);
	opacity:0;
}
.pc_cover .cover_top .text01_a.text-active {
	animation: text-active 1.2s linear forwards;
}
.pc_cover .cover_top .text01_box {
	width:837px;
	height:108px;
	position:absolute;
	bottom:5px;
	left:50%;
	transform: translate(-50%,0);
}
.pc_cover .cover_top .text01_box .text_inner {
	width:0;
	height:108px;
	position:absolute;
	left:0;
	overflow:hidden;
}
.pc_cover .cover_top .text01_box .text_inner.img-wrap {
  animation: text-wrap01 1.2s linear forwards;
}
@keyframes text-wrap01 {
	0% {
    width:0;
  }
  100% {
    width:837px;
  }
}
.pc_cover .cover_top .text01_box .text01 {
	height:108px;
	position:absolute;
	left:0;
	opacity:1;
}
.pc_cover .cover_top .text01_box .text01.text-clear {
	animation: text-clear 1.2s linear forwards;
}
.pc_cover .cover_top .cover01 {
	/*width:110%;*/
	height:55vh;
	position:absolute;
	top:0; right:0;
}
.pc_cover .cover_top .cover01.cover-wrap01 {
	animation: cover-wrap01 1.2s linear forwards;
}
@keyframes cover-wrap01 {
  0% {
    right:0;
  }
  100% {
    right:-150vw;
  }
}
.pc_cover .cover_bottom {
	width:100%;
	height:50%;
	position:absolute;
	bottom:0;
	left:0;
	overflow: hidden;
}
.pc_cover .cover_bottom .text02_a {
	height:50px;
	position:absolute;
	top:10px;
	left:50%;
	transform: translate(-50%,0);
	opacity:0;
}
.pc_cover .cover_bottom .text02_a.text-active {
	animation: text-active 1.2s linear forwards;
}
.pc_cover .cover_bottom .text02_box {
	width:531px;
	height:50px;
	position:absolute;
	top:10px;
	left:50%;
	transform: translate(-50%,0);
}
.pc_cover .cover_bottom .text02_box .text_inner {
	width:0;
	height:50px;
	position:absolute;
	right:0;
	overflow:hidden;
}
.pc_cover .cover_bottom .text02_box .text_inner.img-wrap {
  animation: text-wrap02 1.2s linear forwards;
}
@keyframes text-wrap02 {
	0% {
    width:0;
  }
  100% {
    width:531px;
  }
}
.pc_cover .cover_bottom .text02_box .text02 {
	height:50px;
	position:absolute;
	right:0;
	opacity:1;
}
.pc_cover .cover_bottom .text02_box .text02.text-clear {
	animation: text-clear 1.2s linear forwards;
}
@keyframes text-clear {
	0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes text-active {
	0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.pc_cover .cover_bottom .cover02 {
	/*width:110%;*/
	height:55vh;
	position:absolute;
	bottom:0;
	left:0;
}
.pc_cover .cover_bottom .cover02.cover-wrap02 {
	animation: cover-wrap02 1.2s linear forwards;
}
@keyframes cover-wrap02 {
  0% {
    right:0;
  }
  100% {
    left:-150vw;
  }
}

/*firstview*/
#firstview {
	height:100vh;
	z-index:12000;
	background-image: url('../images/bg_firstview.png');
	position:relative;
	overflow: hidden;
}
#firstview .deco {
	height:99vh;
	position:absolute;
	top:0;
	left:50%;
	transform: translate(-50%,0);
}
#firstview .gra_top {
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
#firstview .gra_bottom {
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
}
@keyframes infinity-scroll-left {
	from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.f_deg_box {
	width:100%;
	height:100%;
	transform:rotate(-26deg);
}
.f_slide { margin:10px 0; }
/*.slide01 {
	position:absolute;
	top:50%;
	transform: translate(0,-330px);
}
.slide02 {
	position:absolute;
	top:50%;
	transform: translate(0,-50%);
}
.slide03 {
	position:absolute;
	top:50%;
	transform: translate(0,115px);
}*/
.slide_wrap {
  display: flex;
}
.slide_list {
	margin:0;
	padding:0;
  display: flex;
  list-style: none;
}
.slide_list--left{
	animation :infinity-scroll-left 15s infinite linear 0.5s both;
}
.slide_list--right{
	animation :infinity-scroll-right 15s infinite linear 0.5s both;
}
.slide_item {
  width: calc(100vw / 6);;
	margin:0 5px;
}
.slide_item > img{
   width: 100%;
}


/*feature*/
#feature .head.smp , #feature .box p.smp { display:none; }
#feature .gizagiza {
	height:10px;
	position:absolute;
	bottom:-6px;
	left:0;
	z-index:5000;
}
#feature::before {
	width:50%;
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	background-image: url('../images/bg_left.png');
}
#feature::after {
	width:50%;
	height:100%;
	content:"";
	position:absolute;
	top:0;
	right:0;
	background-image: url('../images/bg_right.png');
}
#feature .inner { padding:60px 0; background-color:#fff; z-index:1000; }
#feature .deco {
	width:825px;
	position:absolute;
	top:-60px;
	left:50%;
	transform: translate(-50%,0);
}
#feature .head {
	height:118px;
	margin:0 auto 40px;
	display:block;
}
#feature .box { margin:0 0 40px; position:relative; }
#feature .box:last-child { margin:0; }
#feature .box img {
	width:497px;
	display:inline-block;
	vertical-align: middle;
}
#feature .box img.smp { display:none; }
#feature .box p {
	width:243px;
	margin:0 0 0 12px;
	display:inline-block;
	vertical-align: middle;
}
#feature .content .box:nth-child(6) p { margin:0 12px 0 0; }

/*style*/
#style .head.smp { display:none; }
#style {
	background-image: url('../images/bg_style.png');
}
#style .deco {
	width:1167px;
	position:absolute;
	top:42px;
	left:50%;
	transform: translate(-50%,0);
}
#style .head {
	width:100%;
	margin:0 auto 40px;
	display:block;
}
#style .inner { padding:60px 0; z-index:1000; }
#style .box { margin:0 0 40px; }
#style .box img {
	margin:0 0 20px;
	width:100%;
}
#style .box p { color:#fff; }
#style .lesson_box {
	margin:0 0 40px;
	padding:0 0 20px;
	background-color:#fff;
	border-bottom:10px solid #E66343;
}
#style .lesson_box.lesson02 { margin:0; border-bottom:10px solid #38B6E0; }
#style .lesson_box .head {
	padding:12px 0;
	margin:0 auto 20px;
	text-align:center;
	position:relative;
}
#style .lesson_box.lesson01 .head { background-color:#E66343; }
#style .lesson_box.lesson02 .head { background-color:#38B6E0; }
#style .lesson_box.lesson01 .head img:nth-child(1) {
	height:45px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}
#style .lesson_box.lesson02 .head img:nth-child(1) {
	height:45px;
	text-align:center;
	position:absolute;
	top:0;
	right:0;
}
#style .lesson_box .head img:nth-child(2){
	width:300px;
}
#style .lesson_box .title {
	width:310px;
	margin:0 auto 15px;
	display:block;
}
#style .lesson_box .con {
	padding:0 20px 20px;
}
#style .lesson_box .con img {
	width:350px;
	float:left;
}
#style .lesson_box .con p {
	width:350px;
	float:right;
}
#style .lesson_box .tags {
	width:100%;
	margin:0 0 20px;
	text-align: center;
}
#style .lesson_box .tags .tag {
	margin:0 6px;
	padding:8px 8px 7px;
	color:#fff;
	font-size:13px;
	display:inline-block;
	background-color: #E66343;
	border-radius: 4px;
	font-weight:500;
  letter-spacing: 0.5px;
}
#style .lesson_box.lesson02 .tags .tag { background-color: #38B6E0; }
#style .lesson_box .pickup {
	position:relative;
}
#style .lesson_box .pickup .title {
	width:100%;
	margin:0 0 15px;
	font-size:16px;
	font-weight: bold;
	text-align:center;
	color:#E66343;
}
#style .lesson_box.lesson02 .pickup .title { color:#38B6E0; }
#style .lesson_box .pickup img {
	width:310px;
	margin:0 auto;
	display:block;
}
#style .lesson_box .pickup .deco01 {
	width:147px;
	position:absolute;
	top:10px;
	left:47.5px;
}
#style .lesson_box .pickup .deco02 {
	width:147px;
	position:absolute;
	bottom:20px;
	right:45.5px;
}
#style .lesson_box.lesson02 .pickup .deco01 {
	width:147px;
	position:absolute;
	top:50px;
	left:47.5px;
}
#style .lesson_box.lesson02 .pickup .deco02 {
	width:147px;
	position:absolute;
	bottom:20px;
	right:48px;
}
#style .lesson_box .video-wrap {
	width:310px;
  max-width: 50%;
	margin:0 auto;
	border-radius: 6px;
	overflow: hidden;
}
#style .lesson_box .video-wrap .video {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}
#style .lesson_box .video-wrap .video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*featuremap*/
#featuremap {
	background-image: url('../images/bg_featuremap.png');
}
#featuremap .head {
	height:70px;
	margin:0 auto 40px;
	display:block;
}
#featuremap .inner { padding:60px 0; z-index:1000; }
#featuremap .featuremap-img {
	width:100%;
	margin:0 0 40px;
}
#featuremap p {
	width:760px;
	margin:0 auto;
}

/*stuff*/
#stuff {
	background-color:#C7733C;
	border-top:10px solid #111111;
	border-bottom:10px solid #111111;
}
#stuff .deco {
	width:1304px;
	position:absolute;
	top:30px;
	left:51.5%;
	transform: translate(-50%,0);
}
#stuff::before {
	width:100%;
	height:2px;
	position:absolute;
	top:2px;
	left:0;
	background-color: #111111;
	content: '';
}
#stuff::after {
	width:100%;
	height:2px;
	position:absolute;
	bottom:2px;
	left:0;
	background-color: #111111;
	content: '';
}
#stuff .head {
	height:49px;
	margin:0 auto 40px;
	display:block;
}
#stuff .inner { padding:72px 0; z-index:1000; }
#stuff .flex.smp { display:none; }
#stuff .flex.pc {
	display: flex;
	justify-content:space-between;
}
#stuff .flex.pc .stuff-box {
	width:300px;
}
#stuff .flex.pc .stuff-box img {
	width:182px;
	margin:0 auto 21px;
	display:block;
}
#stuff .flex.pc .stuff-box .name {
	margin:0 0 19px;
	font-weight:bold;
	font-size:20px;
	text-align: center;
	letter-spacing: 0.5px;
}
#stuff .flex.pc .stuff-box .name span { font-size:14px; }

/*students*/
#students  .head.smp { display:none; }
#students {
	background-image: url('../images/bg_students.png');
}
#students .naminami {
	height:5px;
	position:absolute;
	bottom:0px;
	left:0;
	z-index:1000;
}
#students .deco {
	width:1074px;
	position:absolute;
	top:32px;
	left:50%;
	transform: translate(-50%,0);
}
#students .inner { padding:60px 0; z-index:1000; }
#students .head {
	height:77px;
	margin:0 auto;
	display:block;
}
#students .border {
	height:6px;
	margin:30px auto;
	display:block;
}
#students .box { margin:0; }
#students .box img {
	margin:0 0 20px;
	width:100%;
}
#students .box .name {
	margin:0 0 20px;
	font-size:20px;
	font-weight:bold;
	color:#96528F;
	text-align:center;
}

/*lesson*/
#lesson .head.smp { display:none; }
#lesson {
	background-color: #D6E0DD;
}
#lesson .bg {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-image: url('../images/bg_lesson.png');
	opacity:0.15;
}
#lesson .deco {
	width:1159px;
	position:absolute;
	top:11px;
	left:48%;
	transform: translate(-50%,0);
}
#lesson .inner { padding:60px 0; z-index:1000; }
#lesson .head {
	width:100%;
	margin:0 auto 40px;
	display:block;
}
#lesson .box {
	width:100%;
	padding:7px;
	border:4px solid #336657;
	background-color: #fff;
}
#lesson .box .border {
	width:100%;
	padding:13px;
	border:1px solid #336657;
	position:relative;
}
#lesson table {
	width:100%
}
#lesson table tr th { padding:15px 0 10px; position:relative; }
#lesson table tr th:nth-child(2) { background-color:#E66343 }
#lesson table tr th:nth-child(2) img { width:auto; height:30px; }
#lesson table tr th:nth-child(3) { background-color:#38B6E0 }
#lesson table tr th:nth-child(3) img { width:auto; height:33px; }
#lesson table tr td {
	padding:14px 10px;
	font-size:12px;
	text-align:center;
	position:relative;
  font-weight: regular;
  letter-spacing: 0.5px;
}
#lesson table tr td:nth-child(1) { background-color:#CC9C44; color:#fff; }
#lesson table tr td:nth-child(2) { background-color:#FAE0D9; line-height:24px; }
#lesson table tr td:nth-child(3) { background-color:#D7F0F9; line-height:24px; }
#lesson table tr td span { font-size:10px; }
#lesson table tr td a { margin:5px auto; display:block; }
#lesson table tr td a img { height:40px; }
#lesson table tr td .none {
	width:24px;
	height:1px;
	margin:0 auto;
	background-color: #111;
}
#lesson table tr td .under_line { position:relative; }
#lesson table tr td .under_line::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px; /*下線の上下位置調整*/
  display: inline-block;
  width: 20px; /*下線の幅*/
  height: 1px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #BC8430; /*下線の色*/
}
#lesson table tr .circle01 {
	width:12px;
	height:12px;
	content:'';
	position:absolute;
	top:-6px;
	left:-6px;
	border-radius:50%;
	background-color: #fff;
}
#lesson table tr .circle02 {
	width:12px;
	height:12px;
	content:'';
	position:absolute;
	top:-6px;
	right:-6px;
	border-radius:50%;
	background-color: #fff;
}
#lesson table tr .circle03 {
	width:12px;
	height:12px;
	content:'';
	position:absolute;
	bottom:-6px;
	left:-6px;
	border-radius:50%;
	background-color: #fff;
}
#lesson table tr .circle04 {
	width:12px;
	height:12px;
	content:'';
	position:absolute;
	bottom:-6px;
	right:-6px;
	border-radius:50%;
	background-color: #fff;
}
#lesson .box .border .scroll_icon { display:none; }

/*try*/
#try {
	background-image: url('../images/bg_try.png');
}
#try .deco {
	width:1000px;
	position:absolute;
	top:30px;
	left:50%;
	transform: translate(-50%,0);
	z-index:-1;
}
#try .head {
	height:118px;
	margin:0 auto 40px;
	display:block;
}
#try .inner {
	width:100%;
	max-width: 1040px;
	padding:60px 0 11px;
	z-index:1000;
	background-color: #E66343;
}
#try .try-img {
	width:100%;
	max-width: 960px;
	margin:0 auto 20px;
	display:block;
}
#try .try-img.smp { display:none; }
#try p {
	width:760px;
	margin:0 auto 40px;
	color:#fff;
}
#try .line {
	height:24px;
	margin:0 auto 30px;
	display:block;
}
#try .text {
	margin:0 auto 30px;
	font-size:18px;
	color:#FFFFFF;
	text-align:center;
  font-weight:500;
  letter-spacing: 0.5px;
}
#try a {
	width:350px;
	height:70px;
	margin:0 auto;
	display:block;
	background-image: url('../images/try_btn.png');
	background-size:350px 70px;
}
#try a:hover {
	background-image: url('../images/try_btn_h.png');
	background-size:350px 70px;
}

/*footer*/
footer {
	width:100%;
	padding:16px 0;
	background-color:#111111;
	font-size:10px;
	color:#FFFFFF;
	position:relative;
	text-align:center;
	z-index: 1000;
}

.footer-ul {
	padding-left: 0px;
	display: flex;
    justify-content: center;
}

.footer-li {
	list-style: none;
	font-size: 10px;
	margin:auto 2rem;
}

.footer-a {
	color: #FFFFFF;
	text-decoration: none;
}

.footer-a:hover {
  color: #478DF6;
}
/*smp_slider flex*/
#stuff .slick-next { right:7%; top:18.75%; transform: translate(0, 0); }
#stuff .slick-prev { left:7%; top:18.75%; transform: translate(0, 0);  }