@charset "utf-8";
/*------------------------ basic ---------------------*/
html {
	/*    margin: 0 8px;*/
	/* font-size: 62.5%; */
	font-size: 0.2666666vw;
}
body {
	overflow-x: hidden;
	font-size: 13rem;
	-webkit-text-size-adjust: 100%;
}
body.home .fixed,
body.single .fixed,
body.page .fixed {
	z-index: 99;
	height: 55px;
	position: fixed;
	border: none;
	padding: 0;
}
.home .header .header-inner,
.single .header .header-inner,
.page .header .header-inner {
	width: 100%;
}
.home .header .header-inner .nav,
.single .header .header-inner .nav,
.page .header .header-inner .nav {
	float: left;
	position: inherit;
}
.header .header-inner #togglehidden .nav {
	text-align: left;
}
.home .header .header-inner .toggle,
.single .header .header-inner .toggle,
.page .header .header-inner .toggle {
	float: left;
	position: inherit;
}
.header .header-inner .logo {
	position: relative;
}
#header {
	padding: 0;
	border: none;
	/* height: 9vh; */
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
}
#wrap.thanks .container {
	width: unset;
}
#wrap.thanks p {
	text-align: center;
}
.toggleMenu {
	display: block;
}
.header-inner .nav {
	display: block;
}
.header .header-inner #togglehidden ul {
	float: left;
}
.form-main {
	margin: 0 2%;
}
a:active,
a:focus,
a:visited,
body #wrap a:hover {
	text-decoration: none;
	color: #fff;
	opacity: 0.7;
}
body.flyer #main {
	text-align: center;
}
h2 {
	font-size: 28rem;
}
h3 {
	font-size: 22rem;
}
a {
	font-size: 15rem;
}
p {
	font-size: 15rem;
}
span {
	font-size: 15rem;
}

/*------------------------ basic ---------------------*/

/*------------------------ main-visual ---------------------*/
#main-visual {
	background: url(/img/sp-MainVisual2x.jpg) no-repeat center top;
	/* padding-top: 128.24%; */
	height: 79vh;
	/* display: block; */
	width: 100%;
	background-size: cover;
	position: relative;
}
#stemon-logo {
	position: absolute;
	top: 2%;
	left: 2vw;
	width: auto;
	height: auto;
}
#stemon-logo__img {
	width: 36vw;
	height: auto;
}
#mv-icon-area {
	position: absolute;
	top: 24vh;
	left: 0;
	width: 100%;
	height: 22vh;
	background-color: #ffffff82;
}
#mv-icon {
	/* position: absolute;
	top: 30vh;
	left: 9vw;
	right: 0; */
	display: block;
	margin: 2% auto 0;
	width: auto;
	height: 19vh;
}
#cource-button-area {
	position: absolute;
	top: 53vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	margin: 0 auto;
	width: 100%;
	/* width: 86vw; */
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#wrap #cource-button-area a:hover {
	opacity: 1;
}
.cource-button {
	-ms-flex-preferred-size: 46%;
	    flex-basis: 46%;
	position: relative;
	/* width: 41vw; */
	height: 14vw;
	border-radius: 8rem;
	display: inline-block;
	display: inline-table;
	text-align: center;
	border-bottom: solid 4rem #627295;
}
/*
.cource-button:first-child {
	margin-right: 2.9%;
}
*/
.cource-button:active {
	/*ボタンを押したとき*/
	-webkit-transform: translateY(4px);
	transform: translateY(4px); /*下に動く*/
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
	border-bottom: none;
}
.cource-button::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 40%;
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 0;
}
.cource-button__bottom {
	width: 100%;
	margin-top: 8px;
}
.cource-button-text {
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 5.6vw;
	font-size: 3.6vw;
}
#button-kindary .cource-button-text,
#button-prog-and-robo .cource-button-text,
#button-basic .cource-button-text {
	position: relative;
    top: -0.4vw;
	line-height: 4.2vw;
}
.cource-button-text--sub {
	position: absolute;
	top: 8vw;
	left: 14vw;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	font-size: 3vw;
}
#button-kindary {
	background-color: #3bc7e2;
	border-bottom: solid 4px #29a0b7;
	padding: 8px 0;
}
#button-basic {
	background-color: #efa72d;
	border-bottom: solid 4px #845607;
	padding: 8px 0;
}
#button-advance {
	background-color: #ea5a6e;
	border-bottom: solid 4px #932938;
	/* position: absolute; */
	/* right: 0; */
	padding: 8px 0;
	margin-top: 1vh;
}
#button-elite {
	background-color: #004994;
	border-bottom: solid 4px #000000;
	padding: 8px 0;
	margin-top: 1vh;
}
#button-prog-and-robo {
	background-color: #efa72d;
	border-bottom: solid 4px #845607;
	/* -ms-flex-preferred-size: 96%;
	    flex-basis: 96%; */
	padding: 8px 0;
	/* padding: 16px 0; */
	margin-top: 1vh;
}
#button-python {
	background-color: #3bc7e2;
	border-bottom: solid 4px #29a0b7;
	padding: 8px 0;
	margin-top: 1vh;
}
/*------------------------ main-visual ---------------------*/
/*------------------------ discount-area ---------------------*/
#discount-area-link {
	display: block;
	margin: 6vw 0.8%;
}
#discount-area {
	position: relative;
	display: block;
	width: 100%;
	height: 46vw;
	border: solid 2px #fc5f7a;
}
#discount-banner {
	width: 100%;
	padding: 20px 10px;
}
#block_img {
	position: absolute;
	left: 4vw;
	top: 11vw;
	width: 18vw;
	height: auto;
}
#week1_text {
	position: absolute;
	font-size: 15.6rem;
	font-weight: bold;
	top: 2.6vw;
	left: 8vw;
}
.yen {
	position: absolute;
	font-weight: bold;
	font-size: 20rem;
}
#yen15000 {
	position: absolute;
	top: 10vw;
	left: 32vw;
}
#yen10000 {
	position: absolute;
	top: 27vw;
	left: 27vw;
	width: 48vw;
	height: 8vw;
	border-radius: 16vw;
	background-color: #e4007f;
	color: #fff;
	text-align: center;
}
#cost_text {
	position: absolute;
	top: 1.8vw;
	left: 68vw;
	background-color: #f39800;
	border-radius: 16rem;
	text-align: center;
	width: 22vw;
	height: 7vw;
	font-size: 18rem;
	color: #fff;
}
#arrow_under {
	position: absolute;
	top: 17vw;
	left: 45vw;
	width: 9vw;
}
#family_discount {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 16rem;
	color: #848383;
	letter-spacing: 3rem;
	bottom: 3vw;
}
#tax_info {
	position: absolute;
	bottom: 0.6vw;
	right: 2vw;
	font-size: 11rem;
}
/*------------------------ discount-area ---------------------*/
/*------------------------ content ---------------------*/
#content-kindary {
	background-color: #3bc7e2;
}
#content-basic {
	background-color: #efa72d;
}
#content-advance {
	background-color: #ea5a6e;
}
#content-elite {
	background-color: #004994;
}
#content-prog-and-robo {
	background-color: #efa72d;
}
#content-python {
	background-color: #3bc7e2;
}
.content-common {
	position: relative;
	margin: 0 4px 12px 4px;
	border-radius: 8px;
	padding: 0.6vh 2vw;
}
.detail_link {
	position: absolute;
	bottom: 2vh;
	right: 6vw;
	padding: 1vh 2vw;
	background-color: #f55423;
	border-radius: 8rem;
	-webkit-box-shadow: 0 4rem 0 0 #c4431c;
	        box-shadow: 0 4rem 0 0 #c4431c;
	color: #fff;
}
.content-common p {
	color: #fff;
}
.content-h3 {
	margin: 0px 10px 16px 10px;
	padding: 10px 0;
	border-bottom: solid 3px #f9d392;
	text-align: center;
	color: white;
	font-weight: bold;
}
#content-prog-and-robo .content-h3 {
	font-size: 19.2rem;
}
#content-prog-and-robo .content-h4 {
	margin-top: 6vw;
	font-size: 18rem;
	color: white;
	font-weight: bold;
	border-bottom: solid 2px #f9d392;
}
.inner-title {
	font-size: 16rem;
}
.inner-title::before {
	content: "";
	display: inline-block;
	margin-right: 6rem;
	margin-left: 6rem;
	border-top: 7rem solid transparent;
	border-bottom: 7rem solid transparent;
	border-left: 11rem solid #f9d392;
}
.youtube_outer {
	position: relative;
	width: 100%;
	margin-bottom: 3vh;
	padding-top: 56.25%;
}
.youtube_inner {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
}
.content-common p.youtube_annotation {
	color: #414141;
	font-size: 12rem;
	margin: 0;
	text-align: center;
}
.content-common p.annotation {
	color: #414141;
}
.holyday_message {
	border: solid 1px #ff5959;
	padding: 10px 15px;
	margin-top: 15px;
}
/*------------------------ content ---------------------*/

#official-page {
	padding: 20px 0;
	background-color: #f6f6f5;
}
#official-page-inner {
	display: block;
	margin: 20px 3vw;
	padding: 2vw 0;
	background-color: #fff;
	border-radius: 8px;
	text-align: center;
	border-bottom: solid 4px #8d8c8c;
}
#official-page-title {
	font-size: 26px;
	font-weight: bold;
}
#official-page-banner {
	width: 86%;
	height: auto;
}
/*------------------------ flyer ---------------------*/
.flyer_image {
	max-width: 100vw;
}
.banner-link {
	background-color: #0179C5;
    display: block;
    border-radius: 8px;
    margin: 20px 3vw 40px;
    padding: 6vw 0;
    text-align: left;
    border-bottom: solid 4px #135d52;
	font-size: 20px;
	color: #fff;
}
.arrow-right {
	position: relative;
}
.arrow-right:after {
	position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	right: 6vw;
}
.icon-before {
	padding-left: 18vw;
}
.icon-before::before {
	position: absolute;
	width: 10vw;
    height: 10vw;
    left: 5vw;
    top: 28%;
}
.icon-blog::before {
	content: url(img/icon-blog.svg);
}

/*------------------------ footer ---------------------*/
#sticky-footer {
	display: table;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
	background-color: #fff;
	padding: 0 0 6rem 0;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	-webkit-box-shadow: 0 0 4rem 2rem #dfdfdf;
	        box-shadow: 0 0 4rem 2rem #dfdfdf;
}
.sticky-footer-text {
	display: table-cell;
	vertical-align: middle;
	height: 8vh;
	width: 98%;
	background-color: #f55423;
	border-radius: 8rem;
	-webkit-box-shadow: 0 4rem 0 0 #c4431c;
	        box-shadow: 0 4rem 0 0 #c4431c;
	margin: 0 auto;
}
.sticky-footer-text:active {
	opacity: 0.7;
	-webkit-animation: fluffy 1s linear 0s 1;
	animation: fluffy 1s linear 0s 1;
}
.sticky-footer-text__span {
	font-size: 27rem;
	font-weight: bold;
	color: white;
}
@font-face {
	font-family: "icomoon";
	src: url("fonts/icomoon.eot?puuh3p");
	src: url("fonts/icomoon.eot?#iefixpuuh3p") format("embedded-opentype"),
		url("fonts/icomoon.woff?puuh3p") format("woff"), url("fonts/icomoon.ttf?puuh3p") format("truetype"),
		url("fonts/icomoon.svg?puuh3p#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
	font-family: "icomoon";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-mail:before {
	content: "\e900";
	margin-right: 16px;
	position: relative;
	top: 2px;
}

/*------------------------ animation ---------------------*/
.fluffy {
	-webkit-animation: fluffy 18s linear 10s infinite;
	animation: fluffy 18s linear 10s infinite;
}
@-webkit-keyframes fluffy {
	0% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
	}
	97.5% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
	}
	98% {
		-webkit-transform: scale(0.95, 0.95) translate(0%, 5%);
	}
	98.5% {
		-webkit-transform: scale(1.05, 0.9) translate(0%, 10%);
	}
	99% {
		-webkit-transform: scale(0.9, 1.05) translate(0%, -10%);
	}
	99.5% {
		-webkit-transform: scale(1.05, 0.95) translate(0%, 5%);
	}
	100% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
	}
}
@keyframes fluffy {
	0% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
		        transform: scale(1, 1) translate(0%, 0%);
	}
	97.5% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
		        transform: scale(1, 1) translate(0%, 0%);
	}
	98% {
		-webkit-transform: scale(0.95, 0.95) translate(0%, 5%);
		        transform: scale(0.95, 0.95) translate(0%, 5%);
	}
	98.5% {
		-webkit-transform: scale(1.05, 0.9) translate(0%, 10%);
		        transform: scale(1.05, 0.9) translate(0%, 10%);
	}
	99% {
		-webkit-transform: scale(0.9, 1.05) translate(0%, -10%);
		        transform: scale(0.9, 1.05) translate(0%, -10%);
	}
	99.5% {
		-webkit-transform: scale(1.05, 0.95) translate(0%, 5%);
		        transform: scale(1.05, 0.95) translate(0%, 5%);
	}
	100% {
		-webkit-transform: scale(1, 1) translate(0%, 0%);
		        transform: scale(1, 1) translate(0%, 0%);
	}
}
/*------------------------ animation ---------------------*/

/*------------------------ form ---------------------*/
.caption {
	padding: 0.25em 0.5em;
	color: #494949;
	background: transparent;
	border-left: solid 5px #7db4e6;
	font-size: 17px;
	margin-left: -1em;
}
.caption_confirm {
	padding: 0.25em 0.5em;
	color: #494949;
	background: transparent;
	border-left: solid 5px #4dd962;
	font-size: 18px;
	margin-left: -1em;
}
.form-control {
	width: inherit;
}
.input-group .form-control {
	float: inherit;
	width: inherit;
}
.form-group {
	margin-bottom: 25px;
}
.address_1 {
	margin-right: 5px;
}
.zipcode_1 {
	display: inline-block;
	line-height: inherit;
	padding: 6px 6px;
	width: auto;
	position: relative;
	top: -1px;
	height: 33px;
}
#choose_date .radio-inline + .radio-inline {
	margin-top: 0;
	margin-left: 0;
}
#choose_date .radio-inline {
	font-size: 12px;
}
#choose_date .date_cource {
	font-size: 13px;
}
.width100 {
	width: 100%;
}
.width100_mb {
	width: 100%;
}
.form-group.radio_long .radio-inline {
	display: block;
}
.form-group.radio_long .radio-inline + .radio-inline {
	margin-left: 0;
}
#grade_all .radio-inline {
	display: block;
}
#grade_all .radio-inline + .radio-inline {
	margin-left: 0;
}
#button_page_bottom_all {
	text-align: center;
	margin-left: -10px;
}
#button_page_bottom_all .button_page_bottom {
	margin-top: 25px;
}
.button_page_bottom button {
	border-radius: 4px;
}
.button_page_bottom input {
	background-color: #2ac2ac;
	font-weight: bold;
	color: #3a3a3a;
}
#btn-validate {
	padding: 0;
}
#btn-validate .offset_button_css {
	padding: 6px 12px;
	background: transparent;
	border-style: none;
}
.has-feedback .smk-error-msg {
	position: inherit;
}
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
	position: relative;
	vertical-align: initial;
}
.radio_select {
	font-size: 14px;
}
/*------------------------ form ---------------------*/

/*------------------------ TEXT ---------------------*/
.entry-content p {
	font-size: 12px;
}
h1.entry-title,
h1.page-title {
	color: #464646;
	/*background-color: #231815;
	background:-moz-linear-gradient(top, #646262,#231815);
	background:-webkit-gradient(linear, left top, left bottom, from(#646262), to(#231815));*/
	background: rgba(203, 210, 79, 0.75);
	padding: 3px 0;
	font-size: 20px;
	margin: 0 auto;
	border-radius: 3px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-color: #bababa;
}
.title-h2 {
	text-align: center;
	margin: 48px 0;
}
#pageTit {
	text-align: center;
	font-size: 22rem;
}
#top_message {
	text-align: center;
	font-size: 14px;
}
body a,
body span,
body p,
body th {
	color: #464646;
}
body a:hover {
	color: #adadad;
}
body .header .header-inner .nav ul li a:hover {
	color: #adadad;
	/*padding-bottom: 10px;*/
}
#footer {
	padding: 6vh 0 9vh;
	text-align: center;
}
#footer .footer-inner {
	background: none;
}
input {
	font-size: 13px;
}
#address_all .input-group-addon {
	font-size: 13px;
}
#footer dd a {
	color: #333;
}
/* ----------- tablet ---------------- */
@media screen and (min-width: 768px) {
	html {
		font-size: 2px;
	}
	#header {
		/* height: 80px; */
		max-width: 1024px;
		margin: 0 auto;
	}
	#main {
		max-width: 1024px;
		margin: 0 auto;
	}
	h1.entry-title,
	h1.page-title {
		font-size: 22px;
	}
	#pageTit {
		font-size: 30px;
	}
	/* #top_message {
		font-size: 19px;
	} */
	.width100 {
		width: auto;
	}
	.width100_mb {
		width: inherit;
	}
	#choose_date .radio-inline + .radio-inline {
		margin-left: 10px;
	}
	#acknowledge_all .radio-inline {
		display: inline-block;
	}
	#acknowledge_all .radio-inline + .radio-inline {
		margin-left: 10px;
	}
	#grade_all .radio-inline {
		display: inline-block;
	}
	#grade_all .radio-inline + .radio-inline {
		margin-left: 10px;
	}
	#main-visual {
		/* background: url(/img/pc-MainVisual.jpg) no-repeat center top; */
		background-size: cover;
		position: relative;
		width: 100vw;
		-webkit-animation: "pcslide" 100s both;
		animation: "pcslide" 100s both;
	}
	@-webkit-keyframes pcslide {
		0% {
			background-position: 0 0;
		}
		50% {
			background-position: 0 100%;
		}
		100% {
			background-position: 0 0;
		}
	}
	@keyframes pcslide {
		0% {
			background-position: 0 0;
		}
		50% {
			background-position: 0 100%;
		}
		100% {
			background-position: 0 0;
		}
	}
	#stemon-logo__img {
		width: 26vw;
		max-width: 260px;
	}
	#cource-button-area {
		/* top: 73%; */
		top: unset;
		bottom: 1vw;
	}
	.cource-button {
		width: 47%;
		height: 80px;
	}
	.cource-button:nth-of-type(n + 3) {
		margin-top: 1vh;
	}
	.cource-button-text {
		line-height: 2vw;
		font-size: 2vw;
	}
	#button-kindary .cource-button-text,
	#button-prog-and-robo .cource-button-text,
	#button-basic .cource-button-text {
		position: static;
		line-height: 2vw;
	}
	.flyer_image {
		max-width: 100%;
	}
	.banner-link {
		font-size: 18rem;
	}

	#main .caption {
		font-size: 20px;
	}
	#main .attention_mess {
		font-size: 16px;
	}
	.radio_select {
		font-size: 16px;
	}
	.checkbox input[type="checkbox"],
	.checkbox-inline input[type="checkbox"],
	.radio input[type="radio"],
	.radio-inline input[type="radio"] {
		vertical-align: unset;
		top: 0;
	}
	.form-group {
		max-width: 760px;
	}
}
/*------------------------------ PC --------------------------------*/
@media screen and (min-width: 1026px) {
	#pageTit {
		font-size: 34px;
	}
	#main-visual {
		/* margin-left: calc((100vw - 1007px) / -2); */
		width: 1024px;
	}
	.cource-button-text,
	#button-kindary .cource-button-text {
		font-size: 22px;
		line-height: 22px;
	}
	#discount-area-link {
		margin: 6% 0.8%;
	}
	#block_img {
		left: 4%;
		top: 11vw;
		width: 18%;
	}
	#week1_text {
		top: 2.6%;
		left: 8%;
	}
	#yen15000 {
		top: 10vw;
		left: 32%;
	}
	#yen10000 {
		top: 27vw;
		left: 27%;
		width: 48%;
		height: 8vh;
		border-radius: 16vw;
	}
	#cost_text {
		top: 1.8vw;
		left: 68%;
		width: 22%;
		height: 7vh;
	}
	#arrow_under {
		top: 17vw;
		left: 45%;
		width: 9%;
	}
	#family_discount {
		bottom: 3vw;
	}
	#tax_info {
		bottom: 0.6vw;
		right: 2%;
	}
	
	.banner-link {
		font-size: 36px;
		height: 210px;
		/* width: 100%; */
		padding: 70px 240px;
	}
	.icon-before::before {
		width: 90px;
		height: 90px;
		left: 121px;
		top: 30%;
	}
	.arrow-right:after {
		width: 20px;
		height: 20px;
		right: 100px;
		top: 50%;
	}
	/*------------------------ discount-area ---------------------*/
}