@charset "utf-8";

@import url("normalize.css");
@import url("common.css");
@import url("layout.css");
@import url("title.css");
@import url("move.css");
@import url("menu.css");
/*------------------------------------------------------------------------------------------------*/
.recommend { display: flex; width: 100%; height: auto; min-height: 100vh; background-color: #000; }
.recommend div .waku { width: 100%; height: auto; min-height: 100vh; }
/*----------------*/
.mRight { margin-right: auto; }
.mLight { margin-left: auto; }




@media screen and (min-width: 960px) {
	/*----------------*/
	/*　
	------------------*/
	.recommend > div { width: 50%; height: auto; min-height: 100vh; vertical-align: middle; }
	.recommend.img1 .lBox { background-image: url(../img/pattern.png), url(../img/back-img101.jpg); background-size: 2px 2px, cover; background-position: right top, right top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; }
	.recommend.img1 .rBox { background-image: url(../img/back-img001.jpg); background-size: cover; } 
	.recommend.img2 .lBox { background-image: url(../img/back-img002.jpg); background-size: cover; }
	.recommend.img2 .rBox { background-image: url(../img/pattern.png), url(../img/back-img102.jpg); background-size: 2px 2px, cover; background-position: left top, left top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; }
	
	.info { width: 480px; }
	.info p.text { font-size: 90%; }
	.info p a { font-size: 110%; }
	.pRight { padding-right: 15px; }
	.pLeft { padding-left: 15px; }

	.gotoR { text-align: right; padding-top: 15px; font-weight: bold; }
	.gotoL { text-align: left; padding-top: 15px; font-weight: bold; }
	.gotoR a::after { content: "\0bb"; margin: 3px; }
	.gotoL a::before { content: "\0ab"; margin: 3px; }
	
}
@media screen and (min-width: 800px) and (max-width: 959.9px) {
	/*----------------*/
	/*　
	------------------*/
	.s-padding { padding: 170px 0px 100px; }
	.recommend { display: flex; flex-flow: row wrap; }
	.recommend > div { width: 100%; min-width: 800px; height: auto; vertical-align: middle; }
	.recommend.img1 .lBox { order: 1; background-image: url(../img/pattern.png), url(../img/back-img101m.jpg); background-size: 2px 2px, cover; background-position: right top, right top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; height: 400px; }
	.recommend.img1 .rBox { order: 2; background-image: url(../img/back-img001.jpg); background-size: cover; } 
	.recommend.img2 .lBox { order: 2; background-image: url(../img/back-img002.jpg); background-size: cover; }
	.recommend.img2 .rBox { order: 1; background-image: url(../img/pattern.png), url(../img/back-img102m.jpg); background-size: 2px 2px, cover; background-position: left top, left top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; height: 400px; }
	
	.info { width: 780px; margin-left: auto; margin-right: auto; }
	.info p.text { font-size: 90%; }
	.info p a { font-size: 125%; }
	.gotoR { text-align: right; padding-top: 15px; font-weight: bold; }
	.gotoL { text-align: right; padding-top: 15px; font-weight: bold; }
	.gotoR a::after { content: "\0bb"; margin: 3px; }
	.gotoL a::after { content: "\0bb"; margin: 3px; }
	
}
@media screen and (max-width: 799.9px) {
	/*----------------*/
	/*　
	------------------*/
	.s-padding { padding: 170px 0px 100px; }
	.recommend { display: flex; flex-flow: row wrap; }
	.recommend > div { width: 100%; min-width: 640px; height: auto; vertical-align: middle; }
	.recommend.img1 .lBox { order: 1; background-image: url(../img/pattern.png), url(../img/back-img101m.jpg); background-size: 2px 2px, cover; background-position: right top, right top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; height: 400px; }
	.recommend.img1 .rBox { order: 2; background-image: url(../img/back-img001.jpg); background-size: cover; } 
	.recommend.img2 .lBox { order: 2; background-image: url(../img/back-img002.jpg); background-size: cover; }
	.recommend.img2 .rBox { order: 1; background-image: url(../img/pattern.png), url(../img/back-img102m.jpg); background-size: 2px 2px, cover; background-position: left top, left top; background-repeat: repeat, no-repeat; filter:alpha(opacity=50); opacity: 0.5; height: 400px; }
	
	.info { width: 620px; margin-left: auto; margin-right: auto; }
	.info p.text { font-size: 90%; }
	.info p a { font-size: 125%; }
	.gotoR { text-align: right; padding-top: 15px; font-weight: bold; }
	.gotoL { text-align: right; padding-top: 15px; font-weight: bold; }
	.gotoR a::after { content: "\0bb"; margin: 3px; }
	.gotoL a::after { content: "\0bb"; margin: 3px; }
	
}