@charset "UTF-8";

/*************************************
    online
**************************************/

/*@media screen and (min-width: 62.5em) {*/
.lead-area h2 strong{
	font-weight:700;
}
.h1back h1{font-weight:500;}
@media screen and (min-width: 40em) {
	.page-top{
	   width: 100%;
	   padding-top: 500px;
	   /*background: url(../img/online/main.jpg) no-repeat center;*/
	   background: url(../img/online/main-seiminarmovie.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}
	.page-top .h1back{
		text-align: center;
		width: 100%;
		position: absolute;
		bottom:55px;
		left:0;
		right: 0;
		margin:0 auto;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#298397+0,18a6a6+47,47b9b9+100&0.9+0,0.9+47,0.9+100 */
		background: -moz-linear-gradient(top,  rgba(41,131,151,0.9) 0%, rgba(24,166,166,0.9) 47%, rgba(71,185,185,0.9) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(41,131,151,0.9) 0%,rgba(24,166,166,0.9) 47%,rgba(71,185,185,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(41,131,151,0.9) 0%,rgba(24,166,166,0.9) 47%,rgba(71,185,185,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6298397', endColorstr='#e647b9b9',GradientType=0 ); /* IE6-9 */
		padding:20px 0;
	}
	.h1back h1{
		font-size: 2.625rem;
		color: #fff;
		filter: drop-shadow(0 0 12px #000);
		text-align: center;
	}
	.h1back span{
		display: block;
		border-radius: 18px;
		/*width: 124px;*/
		max-width: 550px;
		border:2px solid #3f8aa3;
		background:#fff;
		color:#3f8aa3;
		font-size: 1.12rem;
		position: absolute;
		top:-18px;
		left:0;
		right: 0;
		margin:0 auto;
	}
	.lead-area h2 {
		margin-bottom:40px;
	}
	.lead-area h2 strong:first-child{font-size:2.25rem;}
	.lead-area h2 span{
		font-size: 2.25rem;
		display: block;
		color: #3d92ad;
	}
	.lead-area h2 strong{color: #3d92ad;}
	.lead-area p{
		margin-bottom:40px;
	}
	.button.online-order{
		display: block;
		max-width: 480px;
		padding: 30px 0;
		margin:0 auto;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181818+0,303030+78,303030+100 */
		background: rgb(24,24,24); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(24,24,24,1) 0%, rgba(48,48,48,1) 78%, rgba(48,48,48,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(24,24,24,1) 0%,rgba(48,48,48,1) 78%,rgba(48,48,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(24,24,24,1) 0%,rgba(48,48,48,1) 78%,rgba(48,48,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
		color: #fff;
		font-size: 1.75rem;
		font-style: italic;
		text-align: center;
		box-shadow: 0 4px 7px 2px rgba(14,27,44,0.2);
	}
	.button.online-order:hover{text-decoration: none;}
	.what-online .flex{
		justify-content: space-between;
		margin-bottom: 90px;
	}
	/*.what-online dl{width:33%;}*/
	.what-online dl{width:30%;}
	.what-online dd{font-size: 1.25rem;}
	.what-online dd:nth-of-type(2){
		font-size: 1rem;
		text-align: left;
	}
	.online-flow .flex{
		max-width: 1000px;
	}
	.flowblock{	width: calc((100% - 30px) / 3);}
	.flowttl{
		position: relative;
		padding:15px 0 15px 30px;
		width: 100%;
		border:2px solid;
		border-color:#fff transparent #fff #fff;
		font-size: 1.2rem;
		overflow: hidden;
		/*outline:2px solid #fff;
		outline-offset: -2px;*/
	}
	.flowttl.gray{background-color: #d8d8d8;}
	.flowttl.blue{background-color: #c9e2ea;}
	.flowblock:not(:nth-of-type(3)) .flowttl:after{
		display: inline-block;
		content:'';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 35px 0 35px 15px;
		/*border-color:transparent transparent transparent #d8d8d8;*/
		/*background-color: #d8d8d8; */
		position: absolute;
		right:18px;
		top:0;
		z-index:1;
	}
	.flowblock:not(:nth-of-type(3)) .flowttl.gray:after{border-color:transparent transparent transparent #d8d8d8;}
	.flowblock:not(:nth-of-type(3)) .flowttl.blue:after{border-color:transparent transparent transparent #c9e2ea;}
	.flowblock:not(:nth-of-type(3)) .flowttl:before{
		display: inline-block;
		content:'';
		width: 0;
		height: 0;
		/*background-color: #fff;	*/
		border-style: solid;
		border-width: 35px 0 35px 15px;
		border-color:transparent transparent transparent #fff;	
		position: absolute;
		right:16px;
		top:0;
		z-index:1;
	}
	.flowttl .flownum{
		display: inline-block;
		font-style: italic;
		font-size: 1.37rem;
		margin-right: 1rem;
	}
	.flowttl .minutes{
		display: inline-block;
		font-size: 0.87rem;
		text-align:center;
		border-radius: 14px; 
		padding:0 10px;
		margin-left: 1rem;
		background-color: rgba(255,255,255,.5)
	}
	.flowcontents{padding:20px 40px; }
	.flowcontents ul li{display:flex;align-items:baseline;}
	.flowcontents ul li:before{
		display: inline-block;
		color: #c1bcbc;
		content:'・';
		transform: scale(1.5);
	}
	.schedule{
		background:url(../img/online/online_back01.png) no-repeat #fff;
		background-position: center;
		background-size: cover; 
	}
	.schedule h3{
		text-shadow: 1px 1px 8px rgba(9,9,9,.5),1px 1px 8px rgba(9,9,9,.5),
		-1px -1px 8px rgba(9,9,9,.5),-1px -1px 8px rgba(9,9,9,.5);
	}
	.schedule ul{box-shadow: 1px 0 11px 8px rgba(0,0,0,.11);}
	.schedule li{
		background:rgba(255,255,255,.8);
		padding:30px 40px; 
		font-size: 1.25rem;
		display: flex;
		align-items: center;
	}
	.schedule li span{font-size: 1.75rem;}
	.schedule li:not(last-child){border-bottom:1px solid #96b6be;}
	.schedule li .button.online-order{
		min-width: 100px;
		padding: 15px 40px;
		font-size: 1rem;
		font-style: normal;
		text-align: center;
		margin-left: auto;
		margin-right: 0;
	}
	.schedule li .button.online-order.disable{
		color: #7b7979;
		background:#d5d5d5;
		box-shadow: none;
		cursor: not-allowed;
	}
	.sec-plan table th{width: 240px;font-size: 1rem;}
	.sec-plan table td{padding-right: 1rem;font-size: 1rem;}
	.sec-plan table td ol li{
		line-height: 1.5;
		margin-bottom: 10px;
	}
	.sec-plan table td ol li strong{font-weight: bold;}
	 .online-contact{margin-bottom:40px;}

/*}*/
/*@media screen and (max-width: 62.438em) {*/

	/*.lead-area {margin-bottom:0;}*/
	.lead-area  p:first-child {
		font-size: 1.25rem;
		text-align: left;
	}
	.lead-area .button.order {
		margin-top:20px;
	    padding-top: 25px;
		line-height: 1.1;
	}
	section{padding: 70px 0;}
}

@media screen and (max-width: 39.9375em) {
	section{padding: 40px 0;}
	.page-top{
	   width: 100%;
	   padding-top: 270px;
	   /*background: url(../img/online/main.jpg) no-repeat center;*/
	   background: url(../img/online/main-seiminarmovie.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}
	.page-top .h1back{
		text-align: center;
		width: 100%;
		position: absolute;
		bottom:55px;
		left:0;
		right: 0;
		margin:0 auto;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#298397+0,18a6a6+47,47b9b9+100&0.9+0,0.9+47,0.9+100 */
		background: -moz-linear-gradient(top,  rgba(41,131,151,0.9) 0%, rgba(24,166,166,0.9) 47%, rgba(71,185,185,0.9) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(41,131,151,0.9) 0%,rgba(24,166,166,0.9) 47%,rgba(71,185,185,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(41,131,151,0.9) 0%,rgba(24,166,166,0.9) 47%,rgba(71,185,185,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6298397', endColorstr='#e647b9b9',GradientType=0 ); /* IE6-9 */
		/*padding:18px 0 11px;*/
		padding:38px 0 11px;
	}
	.h1back h1{
		font-size: 2.625rem;
		color: #fff;
		filter: drop-shadow(0 0 12px #000);
		text-align: center;
	}
	.h1back span{
		display: block;
		border-radius: 28px;
		/*width: 124px;*/
		width: 80%;
		border:2px solid #3f8aa3;
		background:#fff;
		color:#3f8aa3;
		font-size: 1rem;
		position: absolute;
		top:-18px;
		left:0;
		right: 0;
		margin:0 auto;
	}
	/*.page-top .h1back{bottom:38px;}*/
	.page-top .h1back{bottom:0px;}
	.h1back h1{font-size: 1.33rem;}
	.page-top .breadcrumbs{
		position: absolute;
	}
	.lead-area{
		padding-top: 60px;
	}
	.lead-area h2 {margin-bottom:20px;}
	.lead-area h2 span{
		font-size: 1.4rem;
		display: block;
		color: #3d92ad;
	}
	.lead-area h2 strong{color: #3d92ad;}
	.lead-area p{margin-bottom:20px;}
	.button.online-order{
		display: block;
		max-width: 300px;
		padding: 30px 0;
		margin:0 auto;
		background: rgb(24,24,24); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(24,24,24,1) 0%, rgba(48,48,48,1) 78%, rgba(48,48,48,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(24,24,24,1) 0%,rgba(48,48,48,1) 78%,rgba(48,48,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(24,24,24,1) 0%,rgba(48,48,48,1) 78%,rgba(48,48,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
		color: #fff;
		font-size: 1.143rem;
		font-style: italic;
		text-align: center;
		box-shadow: 0 4px 7px 2px rgba(14,27,44,0.2);
	}
	.button.online-order:hover{text-decoration: none;}
	.what-online dl{
		margin-bottom: 30px;
	}
	.what-online dd{
		font-size: 1.25rem;
		margin-bottom: 20px;
	}
	.what-online dd:nth-of-type(2){
		font-size: 1rem;
		text-align: left;
	}
	.flowblock{	width:calc(100% - 30px);}
	.flowttl{
		padding:15px 0 15px 30px;
		width: 100%;
		border:2px solid #fff;
		font-size: 1.2rem;
	}
	.flowttl.gray{background-color: #d8d8d8;}
	.flowttl.blue{background-color: #c9e2ea;}
	.flowttl .flownum{
		display: inline-block;
		font-style: italic;
		font-size: 1.37rem;
		margin-right: 1rem;
	}
	.flowttl .minutes{
		display: inline-block;
		font-size: 0.87rem;
		text-align:center;
		border-radius: 14px; 
		padding:0 10px;
		margin-left: 1rem;
		background-color: rgba(255,255,255,.5)
	}
	.flowcontents{padding:20px 40px;}
	.flowcontents ul li:before{
		display: inline-block;
		color: #c1bcbc;
		content:'・';
		transform: scale(1.5);
	}
	.schedule{
		background:url(../img/online/online_back01.png) no-repeat #fff;
		background-position: center;
		background-size: cover; 
	}
	.schedule h3{
		text-shadow: 1px 1px 8px rgba(9,9,9,.5),1px 1px 8px rgba(9,9,9,.5),
		-1px -1px 8px rgba(9,9,9,.5),-1px -1px 8px rgba(9,9,9,.5);
	}
	.schedule ul{box-shadow: 1px 0 11px 8px rgba(0,0,0,.11);}
	.schedule li{
		background:rgba(255,255,255,.8);
		padding:30px 40px; 
		font-size: 1.25rem;
		text-align: center;
	}
	.schedule li span{font-size: 1.75rem;}
	.schedule li:not(last-child){border-bottom:1px solid #96b6be;}
	.schedule li .button.online-order{
		padding: 15px 0px;
		font-size: 1rem;
		font-style: normal;
		text-align: center;
		margin-top: 10px;
	}
	.schedule li .button.online-order.disable{
		color: #7b7979;
		background:#d5d5d5;
		box-shadow: none;
		cursor: not-allowed;
	}
	.sec-plan table th{width: 90px;}
	.sec-plan table td{padding-right: 1rem;}
	.sec-plan table td ol li{
		line-height: 1.5;
		margin-bottom: 10px;
	}
	 .online-contact{margin-bottom:20px;}
	.text-note{font-size:75%;}
}