@charset "utf-8";

/*----------------------------------------------------------------
 for corsage.html
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 mainview
----------------------------------------------------------------*/
#mainview h1{ background-image: url(../images/main-image.jpg); }
#mainview h1 span{ right: 0px; }
#mainview h1 img{ width: 130px; }

@media screen and (min-width: 768px) {
#mainview h1 span{ text-align: right; }
#mainview h1 img{
	position			: relative;
	right				: 5%;
	width				: auto;
}
}
@media screen and (min-width: 960px) {
#mainview h1 img{ right: 100px; }
}
/*----------------------------------------------------------------
 main
----------------------------------------------------------------*/
#main h2{ margin: 0 0 30px 0; }


/*----------------------------------------------------------------
 material
----------------------------------------------------------------*/
#material{}


/*----------------------------------------------------------------
 flow
----------------------------------------------------------------*/
#flow{}
#flow h2{ margin: 0 0 15px 0; }

/* flow-steps
-----------------------------------------------------*/
#flow .flow-steps{}
#flow .flow-steps>li{
	position			: relative;
	margin				: 0 0 25px 0;
	padding				: 0 0 65px 0;
}
#flow .flow-steps>li:after{
	content				: "";
	display				: block;
	position			: absolute;
	left				: 50%;
	bottom				: 0;
	width				: 46px;
	height				: 46px;
	border-right		: 1px solid #3399ff;
	border-bottom		: 1px solid #3399ff;
	transform			: rotate(45deg) translateX(-50%);
}
#flow .flow-steps>li:last-child{
	margin				: 0 0 15px 0;
	padding				: 0;
}
#flow .flow-steps>li:last-child:after{ display: none; }
#flow .flow-steps>li>dl>dt{ margin: 0 0 20px 0; }
#flow .flow-steps>li>dl>dd{ font-size: 13px; }

@media screen and (min-width: 768px) {
#flow .flow-steps>li{
	position			: relative;
	margin				: 0 0 30px 0;
	padding				: 0 0 30px 0;
}
#flow .flow-steps>li:after{
	position			: absolute;
	left				: 135px;
	transform			: rotate(45deg);
}
#flow .flow-steps>li>dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: center;
}
#flow .flow-steps>li>dl>dt{
	width				: calc( (100% / 2) - 10px);
	padding				: 0 0 0 10px;
}
#flow .flow-steps>li>dl>dd{
	width				: calc( (100% / 2) - 10px);
	font-size			: 16px;
}
}
@media screen and (min-width: 960px) {
#main .row>.col{ width: 360px; }
}


/*----------------------------------------------------------------
 order
----------------------------------------------------------------*/
#order{}

#order .container	{ padding-bottom: 40px; }
@media screen and (min-width: 768px) {
#order .container	{ padding-bottom: 70px; }
}

/* example-list
-----------------------------------------------------*/
#order .example-list{ margin: -30px 0 30px 0; }
#order .example-list li dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: center;
	flex-direction		: row;
}
#order .example-list li:nth-child(odd) dl{ flex-direction: row-reverse; }
#order .example-list li dl dt{ flex: 175px; }
#order .example-list li dl dd{ flex: calc(100% - 195px); }
#order .example-list li img{
	width				: 175px;
	border-radius		: 50%;
}

@media screen and (min-width: 768px) {
#order .example-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	margin				: 40px 0 45px 0;
}
#order .example-list li{ width: calc( (100% / 2) - 10px); }
#order .example-list li dl{
	flex-direction		: row-reverse;
	justify-content		: space-between;
}
#order .example-list li dl dt{
	flex				: initial;
	text-align			: right;
}
#order .example-list li dl dd{
	flex				: initial;
	width				: 140px;
	line-height			: 2;
	font-weight			: bold;
}

}
@media screen and (min-width: 960px) {
#order .example-list li{ width: 360px; }
#order .example-list li dl dt{ flex: 175px; }
#order .example-list li dl dd{ width: 140px; }
}

/*----------------------------------------------------------------
 lesson
----------------------------------------------------------------*/
#lesson{}
@media screen and (min-width: 768px) {
#lesson .container	{ padding-bottom: 90px; }
}

/* example
-----------------------------------------------------*/
#lesson .example{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	justify-content		: space-between;
	align-items			: center;
	flex-wrap			: wrap;
	margin				: -20px 0 0 0;
}
#lesson .example h3,
#lesson .example .image{
	flex				: calc(50% - 10px);
	margin				: 0 0 10px 0;
}
#lesson .example h3{ font-family:  "Yu Gothic", YuGothic, "游ゴシック",-apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro', Verdana, Meiryo, "M+ 1p", sans-serif; }
#lesson .example .image img{ border-radius: 50%; }
#lesson .example .text{
	margin				: 0 0 10px 0;
	font-size			: 13px;
}

@media screen and (min-width: 768px) {
#lesson .example{
	display				: block;
	position			: relative;
	margin				: 60px 0 50px 0;
	min-height			: 175px;
	padding				: 0 0 0 400px;
}
#lesson .example h3{
	margin				: 20px 0 0 0;
	font-weight			: bold;
	font-size			: 16px;
}
#lesson .example .image{
	position			: absolute;
	left				: 0;
	top					: 0;
	width				: 360px;
	text-align			: right;
}
#lesson .example .text{ font-size: 16px; }
}

/*----------------------------------------------------------------
 remake
----------------------------------------------------------------*/
#remake{}
#remake .container	{ padding: 15px 20px 50px 20px; }
@media screen and (min-width: 768px) {
#remake .container	{ padding: 40px 0 65px 0; }
}

#remake h2	{ margin: 0 0 -5px 0; }
#remake h3	{ margin: 0 0 25px 0; }


/* example-list
-----------------------------------------------------*/
#remake .example-list li{ margin: 0 0 40px 0; }
#remake .example-list p{
	margin				: 10px 0;
	font-size			: 12px;
}
@media screen and (min-width: 768px) {
#remake .example-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	justify-content		: space-between;
}
#remake .example-list li{
	width				: 360px;
	text-align			: center;
}
#remake .example-list li p{ text-align: left; }
}