@charset "utf-8";


/**************************************************50
 * habits
 **************************************************/
#habits{
	color: #3F3F3F;
	text-align: center;
}
#habits h2{
}
#habits img[src*="logo"]{
	width: 56.25%;
	max-width: 270px;
}
#habits_message:after{
	content: "";
	display: block;
	pointer-events: none;
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
}
#habits.lazyloaded #habits_message:after{
	background-image: url("https://test.dearaiz.com/images/user/habits/img_010.jpg"),  url("https://test.dearaiz.com/images/user/habits/img_020.jpg");
}
#habits p{
}
@media screen and (max-width:767px){
	#habits{
		padding-top: 12.5%;
		margin-bottom: 12.5%;
	}
	#habits h2{
		margin: 3.125% 0;
	}
	#habits h2 img{
		width: 87.5%;
	}
	#habits_message:after{
		margin: 6.25% auto 3.125%;
	}
	#habits p:not(#habits_logo){
		padding: 0 3.125%;
		text-align: left;
	}
	#habits p + p{
		margin-top: 1em;
	}
}
@media screen and (min-width:768px){
	#habits{
	}
	#habits h2{
		margin: 2em 0;
	}
	#habits h2 img{
		width: 560px;
	}
	#habits p + p{
		margin-top: 1.5em;
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#habits_message:after{
		margin: 2em auto 1.5em;
	}
}
@media screen and (min-width:768px) and (max-width:1599px){
	#habits{
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
@media screen and (max-width:1279px){
	#habits_message:after{
		padding-top: 65%;
		width: 93.75%;
	}
}
@media screen and (min-width:1280px){
	#habits{
		position: relative;
	}
	#habits_message:after{
		position: absolute;
		left: 50%;
		top: 50%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
}
@media screen and (min-width:1280px) and (max-width:1365px){
	#habits_message:after{
		height: 480px;
		width: 1279px;
	}
}
@media screen and (min-width:1366px) and (max-width:1439px){
	#habits_message:after{
		height: 512px;
		width: 1366px;
	}
}
@media screen and (min-width:1440px) and (max-width:1599px){
	#habits_message:after{
		height: 580px;
		width: 1440px;
	}
}
@media screen and (min-width:1600px){
	#habits{
		padding-top: 150px;
		padding-bottom: 150px;
	}
	#habits_message:after{
		height: 700px;
		width: 1600px;
	}
}


/**************************************************50
 * feature
 **************************************************/
#feature{
	color: #4D4D4D;
	text-align: center;
}
#feature .feature{
	display: inline-block;
	vertical-align: top;
}
#feature .feature picture{
}
#feature .feature picture img{
	width: 87.5%;
}
#feature .feature figcaption{
}
#feature .feature figcaption > strong{
	color: #4476BB;
	display: block;
	line-height: 1.2;
	padding: 0.4em 0;
}
#feature .feature figcaption > strong span{
	font-size: 80%;
}
#feature .feature figcaption p{
	text-align: left;
}
@media screen and (max-width:479px){
	#feature .feature{
		width: 93.75%;
	}
}
@media screen and (min-width:480px)and (max-width:767px){
	#feature .feature{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#feature{
		margin-top: -12.5%;
		margin-bottom: 12.5%;
	}
	#feature .feature{
		margin: 6.25% 1.5625% 0;
	}
	#feature .feature picture{
	}
	#feature .feature figcaption{
	}
	#feature .feature figcaption > strong{
		font-size: 150%;
	}
	#feature .feature figcaption > strong b span{
		display: inline-block;
	}
	#feature .feature figcaption p{
	}
}
@media screen and (min-width:768px){
	#feature{
		margin-top: -100px;
		margin-bottom: 100px;
	}
	#feature .feature{
		margin-top: 50px;
		width: 32%;
	}
	#feature .feature:not(:nth-child(3n+1)){
		margin-left: 2%;
	}
	#feature .feature picture{
	}
	#feature .feature figcaption{
	}
	#feature .feature figcaption > strong{
	}
	#feature .feature figcaption p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#feature .feature figcaption > strong{
		font-size: 150%;
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#feature .feature figcaption > strong b span{
		display: block;
	}
}
@media screen and (min-width:940px){
	#feature .feature figcaption p{
		padding: 0 1em;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#feature .feature figcaption > strong{
		font-size: 162.5%;
	}
}
@media screen and (min-width:1024px) and (max-width:1279px){
	#feature .feature figcaption > strong{
		font-size: 175%;
	}
}
@media screen and (max-width:1279px){
	#feature .feature figcaption > strong{
	}
	#feature .feature figcaption > strong b{
	}
}
@media screen and (min-width:1280px){
	#feature .feature figcaption > strong{
		font-size: 200%;
	}
}


/**************************************************50
 * button
 **************************************************/
.button{
	text-align: center;
}
.button a{
	display: inline-block;
	position: relative;
	overflow: hidden;
	verticval-align: top;
}
.button a:before{
	background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	background-image: linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	content: "";
	display: block;
	height: 200%;
	position: absolute;
	top: -200%;
	left: -225%;
	transition: all 0.5s ease-in-out;
	width: 200%;
}
.button a:hover:before{
	-webkit-animation: shine .5s;
	animation: shine .5s;
}
@-o-keyframes shine {
	100% {
		top: 200%;
		left: 200%;
	}
}
@-webkit-keyframes shine {
	100% {
		top: 200%;
		left: 200%;
	}
}
@keyframes shine {
	100% {
		top: 200%;
		left: 200%;
	}
}
@media screen and (max-width:767px){
	.button{
		margin-bottom: 12.5%;
	}
	.button img[src$="button.svg"]{
		margin-top: 1.5625%;
		width: 75%;
	}
}
@media screen and (min-width:768px){
	.button{
		margin-bottom: 6.25em;
	}
	.button img[src$="button.svg"]{
		width: 612px;
	}
}


/**************************************************50
 * system
 **************************************************/
#system{
}
#system_back{
}
#system_back img{
	width: 100%;
}
#system h2{
}
#system h2 img{
	width: 100%;
}
#system_text{
	text-align: left;
}
#system_text strpng{
	display: block;
	line-height: 1;
	margin-bottom: 0.5em;
}
#system img[src$="system.svg"]{
}
#system img[src$="campaign.svg"]{
}
@media screen and (max-width:767px){
	#system{
		text-align: center;
		background-color: #BEDCF4;
		margin-bottom: 12.5%;
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#system_back{
		display: none;
	}
	#system h2{
		margin-bottom: -webkit-calc(3.125% + 0.5em);
		margin-bottom: calc(3.125% + 0.5em);
	}
	#system h2 img{
		width: 75%;
	}
	#system_text{
		margin-bottom: 3.125%;
		padding: 0 3.125%;
	}
	#system img[src$="system.svg"]{
		margin-bottom: -webkit-calc(3.125% + 0.5em);
		margin-bottom: calc(3.125% + 0.5em);
		width: 93.75%;
	}
	#system img[src$="campaign.svg"]{
		margin-left: 2.678571428571429%;
		width: 87.5%;
	}
}
@media screen and (min-width:768px){
	#system{
		margin-bottom: 100px;
		position: relative;
		text-align: left;
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#system{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#system_back{
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}
	#system_back img{
		height: 100%;
		object-fit: cover;
		object-position: 70% top;
		width: 100%;
	}
	#system h2{
		margin-bottom: 2.5%;
		margin-left: 3.5%;
		width: 49.5%;
	}
	#system_text{
		line-height: 3.2vw;
		line-height: 3.2dvw;
	}
	#system_text{
		margin-bottom: 2.5%;
		margin-left: 3.5%;
	}
	#system_text strpng{
		font-size: 3vw;
		font-size: 3dvw;
	}
	#system_text span{
		font-size: 2vw;
		font-size: 2dvw;
	}
	#system img[src$="system.svg"]{
		margin-bottom: 2.5%;
		margin-left: 3.5%;
		width: 60%;
	}
	#system img[src$="campaign.svg"]{
		margin-left: 2.75%;
		width: 56.4%;
	}
}
@media screen and (min-width:1280px){
	#system_back{
	}
	#system h2{
		margin-top: 5%;
		position: absolute;
		top: 0;
		left: 17.5%;
		width: 32.5%;
	}
	#system_text{
		line-height: 1.6vw;
		line-height: 1.6dvw;
		margin-top: 14%;
		position: absolute;
		top: 0;
		left: 17.5%;
	}
	#system_text strpng{
		font-size: 1.5vw;
		font-size: 1.5dvw;
	}
	#system_text span{
		font-size: 1vw;
		font-size: 1dvw;
	}
	#system img[src$="system.svg"]{
		margin-top: 22%;
		position: absolute;
		top: 0;
		left: 17.5%;
		width: 39.375%;
	}
	#system img[src$="campaign.svg"]{
		margin-top: 36.5%;
		position: absolute;
		top: 0;
		left: 16.5%;
		width: 37.03125%;
	}
}


/**************************************************50
 * situation
 **************************************************/
#situation{
	color: #3F3F3F;
	text-align: center;
}
#situations{
}
#situations .situations{
	display: inline-block;
	vertical-align: top;
}
#situations .situations picture{
}
#situations .situations picture img{
	width: 100%;
}
#situations .situations figcaption{
}
#situations .situations figcaption h3{
	line-height: 1.5;
	padding: 0.5em 0.125em 0.375em;
}
#situations .situations figcaption p{
	text-align: left;
}
#situations .situations figcaption p strong{
	background-color: #FFFFAF;
}
@media screen and (max-width:479px){
	#situations .situations{
		width: 93.75%;
	}
}
@media screen and (min-width:480px) and (max-width:639px){
	#situations .situations{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#situations .situations{
		width: -webkit-calc((100% - (3.125% * 4)) / 3);
		width: calc((100% - (3.125% * 4)) / 3);
	}
}
@media screen and (max-width:767px){
	#situation{
		margin-bottom: 12.5%;
	}
	#situations{
	}
	#situations .situations{
		margin: 6.25% 1.5625% 0;
	}
	#situations .situations picture{
	}
	#situations .situations figcaption{
	}
	#situations .situations figcaption h3{
		font-size: 137.5%;
	}
	#situations .situations figcaption p{
		font-size: 75%;
	}
}
@media screen and (min-width:768px){
	#situation{
		margin-bottom: 100px;
	}
	#situations{
	}
	#situations .situations{
		margin-top: 50px;
		width: 32%;
	}
	#situations .situations:not(:nth-child(3n+1)){
		margin-left: 2%;
	}
	#situations .situations picture{
	}
	#situations .situations figcaption{
	}
	#situations .situations figcaption h3{
	}
	#situations .situations figcaption p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#situations .situations figcaption h3{
		font-size: 150%;
	}
}
@media screen and (min-width:1024px) and (max-width:1279px){
	#situations .situations figcaption h3{
		font-size: 162.5%;
	}
}
@media screen and (min-width:1280px){
	#situations .situations figcaption h3{
		font-size: 175%;
	}
}


/**************************************************50
 * lesson
 **************************************************/
#lesson{
	background-color: #5FBDC5;
	color: #FFFFFF;
	text-align: center;
}
#lesson picture{
}
#lesson picture img{
	width: 100%
}
#lesson figcaption{
	text-align: left;
}
#lesson figcaption h2{
}
#lesson figcaption p{
}
#lesson figcaption p + p{
	margin-top: 1em;
}
@media screen and (max-width:319px){
}
@media screen and (min-width:320px) and (max-width:359px){
}
@media screen and (min-width:360px) and (max-width:413px){
	#lesson figcaption h2 img{
		width: 20em;
	}
}
@media screen and (min-width:414px) and (max-width:479px){
	#lesson figcaption h2 img{
		width: 22.5em;
	}
}
@media screen and (min-width:480px) and (max-width:639px){
	#lesson figcaption h2 img{
		width: 24em;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#lesson figcaption h2 img{
		width: 30em;
	}
}
@media screen and (max-width:767px){
	#lesson{
		margin-bottom: 12.5%;
	}
	#lesson picture{
	}
	#lesson figcaption{
		padding: 6.25% 3.125%;
	}
	#lesson figcaption h2{
		margin-bottom: 0.8928571428571429%;
	}
	#lesson figcaption p{
	}
}
@media screen and (min-width:768px){
	#lesson{
		margin-bottom: 100px;
	}
	#lesson picture{
	}
	#lesson figcaption{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#lesson figcaption h2{
		margin-bottom: 4.5%;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#lesson figcaption{
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#lesson figcaption{
		padding-left: 25px;
		padding-right: 25px;
	}
}
@media screen and (min-width:1024px){
	#lesson{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#lesson picture{
		display: table-cell;
		overflow: hidden;
		position: relative;
		vertical-align: top;
	}
	#lesson picture img{
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
	}
	#lesson figcaption{
		padding-left: 2em;
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#lesson picture img{
		object-position: 70% top;
	}
	#lesson figcaption{
		padding-right: 30px;
		width: 34em;
	}
	#lesson figcaption h2 img{
		width: 28em;
	}
}
@media screen and (min-width:1200px) and (max-width:1279px){
	#lesson picture img{
		object-position: 70% top;
	}
	#lesson figcaption{
		padding-right: 35px;
		width: 42em;
	}
	#lesson figcaption h2 img{
		width: 32em;
	}
}
@media screen and (min-width:1280px){
	#lesson picture img{
		object-position: right top;
	}
	#lesson figcaption h2 img{
		width: 33.75em;
	}
}
@media screen and (min-width:1280px) and (max-width:1599px){
	#lesson figcaption{
		padding-right: -webkit-calc((100% - 1200px) / 2);
		padding-right: calc((100% - 1200px) / 2);
		width: 46em;
	}
}
@media screen and (min-width:1600px){
	#lesson{
		padding-left: -webkit-calc((100% - 1600px) / 2);
		padding-left: calc((100% - 1600px) / 2);
		padding-right: -webkit-calc((100% - 1600px) / 2);
		padding-right: calc((100% - 1600px) / 2);
	}
	#lesson figcaption{
		padding-right: -webkit-calc((1600px - 1200px) / 2);
		padding-right: calc((1600px - 1200px) / 2);
	}
}


/**************************************************50
 * instructor
 **************************************************/
#instructor{
	color: #3F3F3F;
	text-align: center;
}
#instructors{
}
#instructors .instructors{
}
#instructors .instructors picture{
}
#instructors .instructors picture img{
}
#instructors .instructors figcaption{
	text-align: left;
}
#instructors .instructors figcaption h3{
	line-height: 1.4;
}
#instructors .instructors figcaption h3 b{
	color: #46BDCF;
	font-weight: normal;
}
#instructors .instructors figcaption h3 span{
	font-weight: normal;
}
#instructors .instructors figcaption .instructor_subject{
	line-height: 1.5;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}
#instructors .instructors figcaption .instructor_subject_cyan{
	color: #46BDCF;
}
#instructors .instructors figcaption p{
}
#instructors .instructors figcaption .instructor_career{
}
#instructors .instructors figcaption .instructor_career > li{
	line-height: 1.5;
	text-indent: -1em;
}
#instructors .instructors figcaption .instructor_career > li:before{
	color: #46BDCF;
	content: "\F044A";
	font-family: "Material Design Icons";
	pointer-events: none;
	text-indent: 0;
}
#instructors hr.separator{
	background-color: transparent;
	height: 1em;
	line-height: 1;
	position: relative;
}
#instructors hr.separator:before{
	color: #46BDCF;
	content: "\F044A　\F044A　\F044A";
	font-family: "Material Design Icons";
	position: absolute;
	pointer-events: none;
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
@media screen and (max-width:767px){
	#suppliers{
		instructor-bottom: 12.5%;
	}
	#instructors{
	}
	#instructors .instructors{
		margin-top: 6.25%;
	}
	#instructors .instructors picture{
	}
	#instructors .instructors picture img{
		border-radius: 7px;
		margin-bottom: 3.125%;
		width: 93.75%;
	}
	#instructors .instructors picture img[src*="instructor."]{
		display: none;
	}
	#instructors .instructors figcaption{
	}
	#instructors .instructors figcaption h3{
	}
	#instructors .instructors figcaption h3 b{
		display: block;
		font-size: 175%;
		padding: 0 3.125%;
	}
	#instructors .instructors figcaption h3 span{
		display: block;
		font-size: 75%;
		padding: 0 3.125%;
	}
	#instructors .instructors figcaption .instructor_subject{
		font-size: 125%;
		padding: 0 3.125%;
	}
	#instructors .instructors figcaption p{
		padding: 0 3.125%;
	}
	#instructors .instructors figcaption .instructor_career{
	}
	#instructors .instructors figcaption .instructor_career > li{
		padding: 0.25em 3.125% 0.25em -webkit-calc(3.125% + 1em);
		padding: 0.25em 3.125% 0.25em calc(3.125% + 1em);
	}
	#instructors hr.separator{
		margin: 6.25% 0 0;
		fong-size: 150%;
	}
}
@media screen and (min-width:768px){
	#instructor{
		margin-bottom: 100px;
	}
	#instructors{
	}
	#instructors .instructors{
		border-collapse: separate;
		border-spacing: 0;
		margin-top: 50px;
		table-layout: fixed;
		width: 100%;
	}
	#instructors .instructors picture{
		display: table-cell;
		vertical-align: top;
		width: 35.15%;
	}
	#instructors .instructors picture img{
		border-radius: 12px;
		width: 100%
	}
	#instructors .instructors figcaption{
		display: table-cell;
		padding-left: 2em;
		vertical-align: top;
	}
	#instructors .instructors figcaption h3{
	}
	#instructors .instructors figcaption h3 b{
		display: inline-block;
		font-size: 225%;
		margin-right: 0.5em;
		vertical-align: middle;
	}
	#instructors .instructors figcaption h3 span{
		display: inline-block;
		font-size: 87.5%;
		vertical-align: middle;
	}
	#instructors .instructors figcaption .instructor_subject{
		font-size: 150%;
	}
	#instructors .instructors figcaption p{
	}
	#instructors .instructors figcaption .instructor_career{
	}
	#instructors .instructors figcaption .instructor_career > li{
		padding: 0.25em 0 0.25em 1em;
	}
	#instructors hr.separator{
		margin: 50px 0 0;
		fong-size: 200%;
	}
}
@media screen and (min-width:1024px){
	#instructors .instructors figcaption .instructor_career{
		display: inline-block;
		vertical-align: top;
		width: -webkit-calc((100% - 1em) / 2);
		width: calc((100% - 1em) / 2);
	}
	#instructors .instructors figcaption .instructor_career + .instructor_career{
		margin-left: 1em;
	}
}