@charset "UTF-8";
/**************************************

custom.css

***************************************/
.c-pc{
	display: block;
}
.c-sp{
	display: none;
}
@media screen and (max-width: 768px) {
.c-pc{
	display: none;
}
.c-sp{
	display: block;
}
}

header{
height: 74px;
}
header .inHeader .inHeader__inner{
	height: 74px;
}

header .box{
    align-items: center;
}
.c-btn.hd__btn--01{
	width: 100%;
	border-radius: 10px;
}
.c-btn a,
button span{
	color: #FFF;
	font-weight: bold;
}
.c-btn.hd__btn--01 a,
button{
	width: 210px;
	font-size: 15px;
	max-width: 100%;
	padding: 16px 0;
}
.c-btn.hd__btn--01::before{
    width: 8px;
    height: 8px;
	right: 1rem;
	border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
.hd__btn--02{
	width: 100%;
	margin-left: 20px;
}
.hd__btn--02 a{
	font-size: 15px;
	font-weight: bold;
}

.mainvisual__items .under{
	display: block;
	margin: 0;
}

.mainvisual__items .under .main{
	font-size: 2.8rem;
	line-height: 1.4;
	font-weight: bold;
}
.mainvisual__items .under .lead{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 40px
}
.mainvisual .under li:first-child{
	max-width: 400px;
	width: 100%;	
}

.mainvisual .mainvisual__items .under .c-btn{
	width: 230px;
	margin: 0;
	font-size: 15px;
	max-width: 100%;
}
.mainvisual .mainvisual__items .under .c-btn a{
	padding: 16px 0 14px;
}
.mainvisual .mainvisual__items .under .c-btn::before{
    width: 8px;
    height: 8px;
	right: 1rem;
	border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
.mainvisual__bg{
    background-image: url(../img/top/mainvisual_bg.jpg);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.mainvisual .circle{
	position: relative;
}
.mainvisual .circle__list{
	position: absolute;
	display: flex;
	right: 0%;
	bottom: -40px;
}
.mainvisual .circle__list .item{
	max-width: 170px;
	width: 50%;
}
@media screen and (max-width: 1080px) {
}
@media screen and (max-width: 768px) {
	.hd__btn--02{
		text-align: center;
		margin-left: 0;
	}
	.header .box.c-sp{
		display: flex;
		justify-content: flex-end;
	}
	.c-btn.hd__btn--01 a, button{
		padding: 12px 0 10px;
	}
	.c-btn.hd__btn--01{
		max-width: 190px;
	}
	.mainvisual__items{
		padding: 30% 0 10%;
	}
	.mainvisual__items .under .main{
		font-size: 1.8rem;
	}
	.mainvisual .under li:first-child{
		max-width: 300px;
		margin-bottom: 0;
	}
	.mainvisual__items .under .lead{
		font-size: 1.2rem;
		margin-bottom: 20px;		
	}
	.mainvisual .circle__list{
		position: relative;
		bottom: 30px;
		justify-content: flex-end;
	}
}


/**/
.first{
	padding: 55px 0 100px;
}
.ico-in{
	position: relative;
	width: 84.85%;
	max-width: 1200px;
	margin: 0 auto;
}
.ico-in .ico{
	position: absolute;
	right: 0;
    top: 50%;
    transform: translate(0%, -50%);
	z-index: 1;
}
.first .catch{
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
	line-height: 1.5;
	margin-bottom: 20px;
}
.first .catch span{
	font-size: 40px;
	color: #0097e1;
	font-weight: bold;
}
.first .lead{
	text-align: center;
	margin-bottom: 60px;
}
@media screen and (max-width: 1080px) {
	.first .catch{
		font-size: 20px;
	}
	.first .catch span{
		font-size: 22px;
	}
	.ico-in .ico{
		right: 0;
		width: 200px;
	}
}
@media screen and (max-width: 940px) {
	.ico-in .ico{
		right: 0;
		width: 170px;
	}
}
@media screen and (max-width: 768px) {
.mainvisual__bg{
    background-image: url(../img/top/mainvisual_bg-sp.jpg);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
	}
	.ico-in .ico{
		right: 0;
		width: 140px;
	}
}


.move{
	position: relative;
}
.scroll{
    display: block;
	position: absolute;
	width: 2em;
	top: -20px;
	height: 1.5em;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
	z-index: 1;
}
.scroll .arrow{
	width: 1px;
	height: 3em;
	position: absolute;
	animation: 1.25s arrow-animation infinite ease-in-out;
	background: #333333;
}
.scroll .arrow::after{
	content: '';
	display: block;
	width: 1px;
	height: 10px;
	position: absolute;
	top: calc(100% - 10px);
	right: 4px;
	background: #333333;
	transform: rotate(-45deg);
}
@keyframes arrow-animation{
	0%{
		height: 0.5em;
	}
	66%{
		height: 3em;
	}
}



.worries{
	position: relative;
	padding: 60px 0 0;
	background: #efefef;
}
.worries .tit{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
.worries .tit span{
	color: #0097e1;
	font-weight: bold;
}
.worries li.list div {
	position: relative;
    font-size: 20px;
    font-weight: bold;
}
.worries li.list div + div{
	margin-top: 20px;
}
.worries li.list div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.6em;
    left: -1.5em;
  width: 11px;
  height: 6px;
  border-left: 2px solid #0097e1;
  border-bottom: 2px solid #0097e1;
  transform: rotate(-45deg);
}
.worries li.list div:before {
	content: '';
    position: absolute;
    top: 0.2em;
    left: -2.2rem;
    background: #FFF;
    width: 24px;
    height: 24px;
    border-radius: 12px;
}
.worries__in{
	max-width: 800px;
	margin: 0 auto;
}
.worries__in.c-flex{
	align-items: center;
	justify-content: center;
}
.worries__in .list{
	padding-left: 40px; 
	margin-left: 40px;
}
.worries__in .pic{
	max-width: 316px;
}


@media screen and (max-width: 1080px) {
.worries__in li.list{
	width: 80%;
	max-width: 400px;
	margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
	.worries .tit{
		font-size: 24px;
	}
	.worries__in{
		max-width: 100%;
		margin: 0 auto;
	}
	.worries__in li.list{
		width: 90%;
	}
	.worries__in.c-flex{
		display: block;
		padding-bottom: 60px;
	}
	.worries__in .pic{
		margin: 0 auto 40px;
	}
	.worries li.list div{
		font-size: 16px;
	}
	.worries li.list div:after{
		left: -1.85em;
	}
}
.section1 {
  background: #efefef;
  position: relative;
  margin-bottom: calc(10vw + 10px);  
}
.section1 :after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 6vw 50vw 0 50vw;
  border-style: solid;
  border-color: #efefef transparent transparent transparent;  
}



.point{
}
.point .tit{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75;
	margin-bottom: 80px;
}
.point .tit span{
	color: #0097e1;
	font-weight: bold;
}
.point .list{
}
.point .list li{
	position: relative;
	padding: 1rem;
	padding-top: 75px;
	max-width: 320px;
	width: 32%;
	border: 3px solid blue;
	border-image: linear-gradient(to right, #0097e1, #48c6ef) 1;
	box-sizing: border-box;
	margin: 0 auto;
}
.point .list .cloud{
	max-width: 92px;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    text-align: center;
}
.point .list .pic{
	max-width: 124px;	
	text-align: center;
	margin: 0 auto 20px;
}
.point .list p{
	font-weight: bold;
	text-align: center;	
}
.point .list p span{
	color: #0097e1;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.point .list p{
		font-size: 18px;
	}
	.point .tit{
		font-size: 24px;
		margin-bottom: 60px;
	}
	.point .list li{
		width: 100%;
		padding-top: 50px;
	}
	.point .list li + li{
		margin-top: 60px;
	}
.point .list .cloud{
	max-width: 80px;
}
}



.pointAnswer{
	position: relative;
}
.pointAnswer .cloud{
	width: 254px;
	position: absolute;
    right: 0;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.pointAnswer__list li{
	width: 100%;
	background: #FFF;
}
.pointAnswer__list li .under{
	justify-content: flex-start;
	align-items: center;
	border-bottom: dotted 6px #0097e1;
	padding-bottom: 30px;
	margin: 40px 0 20px;
}
.pointAnswer__list li .under .pic{
	max-width: 122px;
	margin-right: 30px;
}
.pointAnswer__list li .under .tit{
	font-size: 37px;
	text-align: center;
	font-weight: bold;
}
.pointAnswer__list li .under .tit .tit--color{
	position: relative;
}
.pointAnswer__list li .under .tit .tit--color span{
	color: #0097e1;
	font-weight: bold;	
	position: relative;
    z-index: 10;
}
.pointAnswer__list li .under .tit .tit--color:after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 100%;
    height: 14px;
    background: rgba(244, 190, 39, 0.3);
    z-index: 1;
}
.pointAnswer__list li .under .tit .tit--color:after{
background-color: #f8ef3c;	
}

.pointAnswer .arrow{
	display: flex;
    align-items: center;
	color: #0097e1;
	font-size: 24px;
	text-align: center;
	transform: rotate(-90deg);
}

@media screen and (max-width: 768px) {
	.pointAnswer .pointAnswer-in{
		padding: 70px 0 40px;
	}
	.pointAnswer__list li .under .pic{
		max-width: 54px;
		margin-right: 1rem;
	}
	.pointAnswer__list li .under .tit{
		font-size: 20px;
		text-align: left;
	}
	.pointAnswer__list li .under.c-flex{
	 	display: flex;
	 	padding-bottom: 20px;
	    margin: 30px 0 20px;
	 }
	.pointAnswer .arrow{
		display: block;
		margin-bottom: 20px;
		transform: none;
	}
}



.pointAnswer__list li .c-lead{
	padding-bottom: 40px;
}
.pointAnswer__list li.pointAnswer__list__item+ li{
	margin-top: 20px;
}
.pointAnswer__list li .bottom__list{
	padding-bottom: 60px;
}
.pointAnswer__list li .bottom__list .item{
	text-align: center;
}
.pointAnswer__list li.item01 .bottom__list .pic{
	max-width: 180px;
	margin-bottom: 14px;
}
.pointAnswer__list li.item01 .bottom__list .tit{
	font-size: 14px;
	margin-bottom: 20px;
	font-weight: bold;
}
.pointAnswer__list li.item01 .bottom__list .tit span{
	display: block;
	color: #0097e1;
	font-size: 20px;
	font-weight: bold;
}

.pointAnswer__list li.item03 .bottom__list .pic{
	max-width: 260px;
	width: 29.5%;
}

.pointAnswer__list li .bottom__list p{
	font-size: 16px;
	text-align: left;
}
.pointAnswer__list .liner{
	display: block;
	padding-top: 20px;
	background: linear-gradient(to right, #0097e1, #48c6ef);

}

@media screen and (max-width: 768px) {
	 .pointAnswer__list li .c-lead{
	 	padding-bottom: 20px;
	 }
	 .pointAnswer__list li .bottom__list{
		padding-bottom: 40px;	 	
	 }
	.pointAnswer__list li .bottom__list p{
		margin-bottom: 20px;	
	}
	.pointAnswer__list li.item01 .bottom__list .pic{
		margin: 0 auto 10px;	
	}
	.pointAnswer__list li.item03 .bottom__list .pic{
		max-width: 300px;
		margin: 0 auto;
		width: 100%;
	}
	.pointAnswer__list li.item03 .bottom__list .pic + .pic{
		margin-top: 20px;
	}
}
/*この講座で学べること
***************************************/
.cont{
	padding-bottom: 60px; 
}
.cont .list li{
	align-items: center;
}
.cont .list li .lead{
	max-width: 510px;
	width: 52%;
}
.cont .list li .pic{
	max-width: 436px;
	width: 44.5%;
}
.cont .list li + li{
	margin-top: 100px;
} 
.cont .tit{
	display: flex;
	align-items: center;
	font-size: 25px;
	margin-bottom: 1rem; 
	padding-bottom: 1rem; 
	border-bottom: 1px solid blue;
	border-image: linear-gradient(to right, #0097e1, #48c6ef) 1;
}
.cont .tit i{
	max-width: 46px;
	padding-right: 1rem; 
}

@media screen and (max-width: 768px) {
	.cont .tit {
		font-size: 20px;
		margin-bottom: 0.8rem;
    	padding-bottom: 0.8rem;
	}
	.cont .tit i{
		max-width: 40px;
    	padding-right: 0.5rem;
	}
	.cont .list li .lead{
	max-width: 510px;
	width: 100%;
	margin: 0 auto;
	}
	.cont .list li .pic{
	max-width: 436px;
	width: 100%;
	margin: 0 auto;
	}
	.cont .list li .pic{
		margin-top: 20px;
	}
	.cont .list li + li{
		margin-top: 40px;
	}
}


/*講師紹介
***************************************/
.instructor{
	background: #e3e3e3;
}
.instructor__list{
	margin-bottom: 60px;
}
.instructor__list .pic{
	width: 24%;
}
.instructor__list .box{
	width: 70%;
	max-width: 678px;
	background: #FFF;
	padding: 1.2rem 1rem;
	border-radius: 16px;
	box-shadow: 0 0 8px 0 #b0b0b0;
}
.instructor__list .box .name{
	font-size: 22px;
	font-weight: bold;
}
.instructor__list .box .name__lead{
	font-size: 14px;
	border-bottom: 1px solid #969696;
	padding-bottom: 16px;
	margin-bottom: 16px;
}
.instructor__pic{
	margin-bottom: 40px;
}
.instructor__pic .item{
	width: 45.9%;
	max-width: 450px;
}
.instructor__pic .item p{
	font-size: 14px;
	margin-top: 6px;
}
@media screen and (max-width: 768px) {
	.instructor__list{
		margin-bottom: 40px;
	}
	.instructor__pic .item p{
		text-align: center;
	}
	.instructor__list .box .name{
		font-size: 18px;
		text-align: center;
	}
	.instructor__list .box .name__lead{
		text-align: center;
	}
	.instructor__list .pic{
		margin: 0 auto 20px;
	}
	.instructor__pic .item + .item{
		margin-top: 20px;
	}
	.instructor__list .box{
	width: 92%;
	max-width: 678px;
	padding: 1.2rem 1rem;
	border-radius: 16px;
	box-shadow: 0 0 8px 0 #b0b0b0;
}
.instructor__pic .item{
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}
}

/*受講者の声
***************************************/
.voice{
	padding: 90px 0;
}
.voice .list li{
	align-items: center;
}
.voice .list li + li{
	margin-top: 30px;
} 
.voice .list li .pic{
	max-width: 160px;
}
.voice .list li .lead{
	max-width: 700px;
	border-radius: 10px;
	padding: 1rem;
	box-sizing: border-box;
	box-shadow: 0 0 8px 0 #b0b0b0; 
}
.voice .list li .lead .name{
	font-weight: bold;
	display: block;
	margin-top: 1rem;
}
.voice .list li .lead .name{
}
@media screen and (max-width: 768px) {
	.voice .list li .pic{
		max-width: 120px;
		margin: 0 auto 20px;
	}
	.voice .list li + li{
		margin-top: 30px;
	}
}



/*料金
***************************************/
.price{
	position: relative;
}
.price .pic{
	margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.price .pic{
	margin-bottom: 30px;
}	
}


/*購入の流れ
***************************************/
.flow{}
.flow .list li.list__item{
	justify-content: flex-start;
	align-items: center;
	background: #FFF;
	padding: 1.5rem;
}
.flow .list li.list__ya{
  display: grid;
  height: calc( 0 - 16px);
  margin: 0;
  place-items: center;
  width: calc(100% - 16px);
	margin: 20px 0;
 }
.flow .list li.list__ya div{
	background: #0097e1;
	height: 22px;
	/*height: calc(tan(60deg) * 60px / 2);*/
	width: 36px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.flow .list .tit{
	margin-bottom: 1rem;
}
.flow .list .pic{
	max-width: 100px;
	padding-right: 1.5rem;
}
.flow .box .tit{
	font-weight: bold;
}
.flow .box .tit span{
	color: #0097e1;
	font-weight: bold;	
}
.flow .list li.list__item .lead a{
	text-decoration: underline;
}

@media screen and (max-width: 768px) {
	.flow .list .pic{
		max-width: 80px;
		margin: 0 auto 16px;
		padding-right: 0;
	}
	.flow .list li.list__item{

	}
}


/*カリキュラム
***************************************/
.curriculum{
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.curriculum-list{
}
.curriculum-table{
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 13px;
	table-layout: unset;
	width: 980px;
}
.curriculum tr th:first-child{
	width: 4rem;
}
.curriculum tr td.time{
	width: 3rem;
}
.curriculum th {
 padding: 6px;
 background: #cce5f2;
 border: solid 1px #4d4d4d;
}
.curriculum td {
 padding: 6px;
 border: solid 1px #4d4d4d;
}
.curriculum td.cont,
.curriculum td.detail{
 text-align: left;
}

.curriculum .att{
	font-size: 13px;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
.curriculum .att{
	margin-bottom: 40px;	
}

}


/*実際の動画
***************************************/
.video-wrap {
  width: 100%;
  max-width: 960px; /* 任意：最大幅 */
  margin: 0 auto;
  aspect-ratio: 16 / 8; /* 比率を指定 */

}
.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
.movie .c-inner03{
	width: 100%;
}
}


/*よくある質問
***************************************/
.question{}
.question .list li{
	/*border-bottom: 1px dotted #333333;*/
	background-image : linear-gradient(to right, #333 2px, transparent 2px);
	background-size: 10px 2px;
 	background-repeat: repeat-x;
 	background-position: left bottom;
	text-align: left;
}
.question .list li + li{
	margin-top: 30px;
}
.question .list li:last-child{
	background-image: none;
}
.question .list .start{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 26px;
}
.question .list .end{
	color: #0097e1;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}
.question .list .lead{
	font-size: 18px;
	padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
	.question .list .start{
		font-size: 18px;
		margin-bottom: 14px;
	}
	.question .list .end{
		font-size: 18px;
		margin-bottom: 0;
	}

	.question .list .lead{
		font-size: 14px;		
	}
}


/*カプセルアカデミー
***************************************/
.service .tit{
}
.service .bg{
	background-image: url(../img/top/service_pic.webp);
	background-size: contain;
}
.service .bg a{
	padding: 80px 0;
}
.service .bg__in{
	background: #FFF;
	max-width: 434px;
	border-radius: 10px;
	margin: 0 auto;
	padding: 35px 0;
	text-align: center;
}
.service__logo{
	max-width: 282px;
	margin: 0 auto 15px;
}
.service__lead{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px; 
}
.service__btn{
	position: relative;
	vertical-align: middle;
	max-width: 360px;
	margin: 0 auto;
	color: #FFF;
	font-weight: bold;
	line-height: 1;
	border-radius: 10px;
	padding: 1rem 0;
	background: #e5778f;
}
.service__btn::before{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.service__btn::before{
	right: 2rem;
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
.service .tit{
	font-size: 18px;
	margin-bottom: 20px;
}
.service .bg__in{
	width: 72%;
	padding: 2rem;
}
.service__lead{
	font-size: 18px;
}
.service__btn{
	font-size: 14px;	
}
}

.service .bnr{
	margin-bottom: 90px;
}
.service .other .tit{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}
.service .other__list li{
	max-width: 300px;
	width: 30.6%;
}
@media screen and (max-width: 768px) {
.service .bnr{
	margin-bottom: 50px;
}
.service .other .tit{
	font-size: 18px;
	margin-bottom: 20px;
}
.service .other__list li{
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
}	
.service .other__list li + li{
	margin-top: 20px;
}
}


/*運営会社
***************************************/
.company{
	background: #F6F6F2;
}
.company .tit{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 36px;
}
.company .list{
	justify-content: flex-start;
	text-align: left;
	margin-bottom: 60px;
}
.company .list li{
	width: 100%;
}
.company .list li + li{
	margin-top: 1rem; 
}
.company .list .element{
	font-size: 18px;
	width: 15%;
	max-width: 132px;
}
.company .list p{
	font-size: 18px;
	width: 73.6%;
	max-width: 648px;
}
.company .list p.url a{
	color: #000;
	text-decoration: underline;	
}
.company .btn{
	text-align: center;
	max-width: 434px;
	margin: 0 auto;
}
.company .btn a{
	font-weight: bold;
	padding: 1rem 0;
	border: 1px solid #000;
	border-radius: 12px;
}
@media screen and (max-width: 768px) {
	.company .tit{
		font-size: 18px;
		margin-bottom: 24px	
	}
	.company .list .element{
		width: 100%;
		font-size: 14px;
	}
	.company .list{
		margin-bottom: 30px;		
	}
	.company .list p{
		font-size: 14px;
	}
	.company .btn{
		font-size: 14px;
	}
}
@media screen and (max-width: 640px) {
	.const__items li:first-child{

	}
}


/*slide
***************************************/
.slider-for,
.slider-for-2,
.slider-for-3{
	margin-bottom: 30px;
}
.slick-list{
	padding: 0 !important;
}
.slick-dots li button{
	display: none;
}
.slick-dotted.slick-slider{
	margin-bottom: 0;
}
.slick-track{
	display: flex;
}
.slider-nav .slick-track .slick-slide + .slick-slide,
.slider-nav-2 .slick-track .slick-slide + .slick-slide,
.slider-nav-3 .slick-track .slick-slide + .slick-slide{
	margin-left: 2%;
}
@media screen and (max-width: 768px) {
.slider-for,
.slider-for-2,
.slider-for-3{
	margin-bottom: 20px;
}

}

/* /form
***************************************/
button{
	border: none;
	background: none;
}