@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

.current {
  border-bottom: solid 1px rgba(255,255,255,0.4);
}

/*イントロ*/

.intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color01);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	animation: fadeOutBackground 1s ease-in-out 3.5s forwards;
}
.intro.hidden {
	display: none;
}

.intro__tit {
	opacity: 0;
	transform: translateY(40px);
	animation:
		slideFadeIn 0.6s ease-out 0.3s forwards,
		fadeOutText 0.8s ease-in 2.5s forwards;
}
.intro__tit img {
	width: 70px;
	margin: 0 auto 20px auto;
}
.intro__tit span {
	display: block;
	color: var(--color01);
	font-family: var(--font01);
	font-size: 1.6rem;
	font-weight: 700;
}

@keyframes slideFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOutText {
	to {
		opacity: 0;
	}
}

@keyframes fadeOutBackground {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.main-content {
	opacity: 0;
	animation: showMain 1s ease 4.6s forwards;
	text-align: center;
}

@keyframes showMain {
	to {
		opacity: 1;
	}
}

/* ==========================================================================
	MAIN
	========================================================================== */

.mainslider {
  position: relative;
  overflow: hidden;
  text-align: left;
  margin: 0 auto 5% auto!important;
}
.slider {
	position: relative;
	width: 100%;
	left: 50%;
	margin: 0 auto 0 -50%;
}
.slick-slide {
	margin: 0px 5px;
}
.slick-slide img {
  float: right;
	width: 70%;
  border-radius: 40px 0 40px 0;
  object-fit:cover;
  margin-right: -5%;
}
.mainslider__txt {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
.mainslider__tit {
  color: #fff;
  font-family: var(--font01);
  font-size: clamp(2.5rem,4.5vw,5rem);
  font-weight: 900;
  line-height: 160%;
  margin-bottom: 40px;
}
.mainslider__txt p {
  color: #fff;
  font-family: var(--font01);
  font-size: clamp(1.4rem,2.375vw,2rem);
  font-weight: 900;
}
.mainslider__tit span {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  font-size: clamp(1.7rem,2.375vw,3rem);
  margin-bottom: 20px;
}
.mainslider__tit span::before,.mainslider__tit span::after {
  width: 2px;
  height: 28px;
  content: "";
  background-color: #fff;
}
.mainslider__tit span::before {
  margin-right: 0.5em;
  transform: rotate(-30deg);
}
.mainslider__tit span::after {
  margin-left: 0.5em;
  transform: rotate(30deg);
}
/* ==========================================================================
	CONTENTS
	========================================================================== */

.profile__txt {
  float: right;
  width: 65%;
}
.profile .tit-cmn01 {
  float: right;
  margin-bottom: 20px;
}
.profile__img {
  float: left;
  width: 23%;
}
.profile__name {
  clear: both;
  font-family: var(--font01);
  font-weight: 700;
  text-align: right;
  margin-bottom: 50px;
}
.license-tit {
  display: flex;
  align-items: center;
  font-size: clamp(1.8rem,3.5vw,2.8rem);
}
.license-tit::after {
  content: "";
  height: 2px; 
  flex-grow: 1;
  background-color: var(--color01);
}
.license-tit::after {
  margin-left: 20px; /* 文字との余白 */
}
.license {
  display: flex;
  align-items: center;
}
.license__img {
  width: 180px;
  border-right: dotted 1px #ccc;
}
.license__img img {
  display: block;
  width: 45%;
  margin: 5px auto;
}
.license__txt {
  flex: 1;
  font-family: var(--font01);
  font-weight: 700;
  padding-left: 40px;
}

.message {
  color: #fff;
  background: url("../images/cmn-images/bg.jpg") 50% 100% no-repeat;
  padding: 80px 0;
}
.message .tit-cmn01::before {
  background-color: #fff!important;
}
.message__tit {
  float: left;
  width: 30%;
}
.message__txt {
  float: right;
  width: 60%;
}
.message__txt p {
  font-family: var(--font01);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 250%;
}
.message__txt p:last-child {
  margin-bottom: 0;
}

.block-ttl{
  width: 100vw;

  border: solid 1px;
  margin-left: 50%;
}
.point .wrapper {
  overflow: visible!important;
}
.point__txt {
  float: left;
  width: 65%;
}
.point__img {
  width: 100vw;
  margin-left: 70%;
}

.point__en {
  color: var(--color01);
  font-family: var(--font01);
  font-size: clamp(1.8rem,2.875vw,2.5rem);
  font-weight: 700;
}
.point__inner {
  border-left: solid 2px var(--color01);
  padding: 0 0 30px 50px;
}
.point__tit {
  font-size: clamp(3rem,6vw,5rem);
}
.point-list {
  padding-left: 30px;
  margin-bottom: 30px;
}
.point-list:last-child {
  margin-bottom: 0;
}
.point-list__tit {
  font-family: var(--font01);
  font-size: 1.8rem;
  font-weight: 700;
  background: url("../images/cmn-images/icon-check.png") 0 3px no-repeat;
  background-size: 25px;
  padding-left: 30px;
  margin-bottom: 20px;
}

.lesson-list {
  width: 103.333%;
  margin: 0 auto;
}
.lesson-list__item {
  position: relative;
  float: left;
  width: 30%;
  margin-right: 3.333%;
  padding-bottom: 70px;
}
.lesson-list__item p {
  font-size: 1.4rem;
}
.lesson-list figure {
  position: relative;
  margin-bottom: 30px;
}
.lesson-list figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  color: var(--color01);
  font-family: var(--font01);
  font-size: clamp(1.8rem,2.375vw,2rem);
  font-weight: 700;
  background-color: #fff;
  border-radius: 0 20px 0 0;
  padding: 15px;
}
.lesson-list__item .bt-cmn01 {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -130px;
}


/* ==========================================================================
	PC 1025px -
	========================================================================== */

@media screen and (min-width: 1025px){


}
@media screen and (max-width: 1200px){/*1200以下*/

}


/* ==========================================================================
	TABLET - 1024px
	========================================================================== */

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

.slick-slide img {
	width: 90%;
}

.profile__txt {
  float: none;
  width: 100%;
}
.profile .tit-cmn01 {
  float: none;
}
.profile__img {
  float: none;
  display: block;
  width: 200px;
  margin: 0 auto 40px auto;
}
.license__img {
  width: 150px;
}
.license__txt {
  padding-left: 35px;
}

.message {
  background-size: 3000px;
  padding: 60px 0;
}
.message__tit {
  float: none;
  width: 100%;
}
.message__txt {
  float: none;
  width: 100%;
}
.message__txt p {
  font-size: 1.6rem;
  line-height: 200%;
}

.point .wrapper {
  overflow: hidden;
}
.point__txt {
  float: none;
  width: 100%;
  margin-bottom: 40px;
}
.point__img {
  width: 100%;
  margin-left: 0;
}

.point__inner {
  padding: 0 0 30px 40px;
}
.point-list {
  padding-left: 20px;
}

.lesson-list {
  width: 100%;
}
.lesson-list__item {
  float: none;
  width: 60%;
  margin: 0 auto 40px auto;
}
.lesson-list__item:last-child {
  margin-bottom: 0;
}


}

/* ==========================================================================
	SP - 640px
	========================================================================== */

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

.intro__tit img {
	width: 60px;
	margin: 0 auto 15px auto;
}
.intro__tit span {
	font-size: 1.4rem;
}
.mainslider__tit {
  margin-bottom: 30px;
}

.slick-slide img {
	width: 80%;
  border-radius: 30px 0 30px 0;
  margin-right: -5%;
}
.mainslider__txt {
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 5vw;
}
.mainslider__tit span::before,.mainslider__tit span::after {
  height: 18px;
}

.profile__img {
  width: 130px;
  margin: 0 auto 20px auto;
}

.profile__name {
  margin-bottom: 30px;
}
.license-tit::after {
  margin-left: 10px; /* 文字との余白 */
}
.license {
  display: block;
}
.license__img {
  width: 100%;
  border-right: none;
  margin-bottom: 20px;
}
.license__img img {
  width: 80px;
}
.license__txt {
  padding-left: 0;
}

.message {
  padding: 40px 0;
}

.point__inner {
  padding: 0 0 30px 20px;
}
.point-list {
  padding-left: 10px;
}
.point-list__item {
  font-size: 1.6rem;
  background: url("../images/cmn-images/icon-check.png") 0 5px no-repeat;
  background-size: 17px;
  padding-left: 25px;
  margin-bottom: 20px;
}

.lesson-list__item {
  width: 100%;
  padding-bottom: 50px;
}
.lesson-list figure {
  margin-bottom: 20px;
}
.lesson-list figure img {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.lesson-list figcaption {
  padding: 15px 10px;
}
.lesson-list__item .bt-cmn01 {
  margin-left: -105px;
}


}