@charset "utf-8";

/*-------------------------------------------------------------------------
	株式会社DYM
	Style Sheet for Common Setting (#vision)
	Date: 2015-01
	All content (c) RYNAPSE
-------------------------------------------------------------------------*/

/* =page structure
-------------------------------------------------------------------------*/
body { background: #1e2a5d; }
article { padding: 0; }

.breadcrumb {
	color: #FFF;
	border-color: transparent;
	}

.breadcrumb a { color: #FFF; }

article>header {
	margin: 0 20px;
	color: #FFF;
	}

article>h2 {
	position: relative;
	margin: 0 20px 30px;
	padding: 30px;
	}

article>h2:before,
article>h2:after {
	content: '';
	position: absolute;
	display: block;
	width: 100px;
	height: 50%;
	z-index: -1;
	}

article>h2:before {
	top: 0;
	left: 0;
	border-top: 1px solid rgba(255,255,255,.8);
	border-left: 1px solid rgba(255,255,255,.8);
	}

article>h2:after {
	right: 0;
	bottom: 0;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	}

article>h2>img {
    width: 100%;
    }
article section {
	clear: both;
	padding: 30px;
	background: #F5F5F1;
	}

article section h3 {
	position: relative;
	font-weight: normal;
	font-style: italic;
	font-family: 'Time New Roman',serif;
	font-size: 1.8rem;
	line-height: 1.4;
	text-align: left;
	margin: 30px 0 20px;
	color: #1e2a5d;
	}

article section h3:before {
	content: '\00201C';
	position: absolute;
	top: -.7em;
	left: -20px;
	font-family: 'Time New Roman',serif;
	font-size: 6rem;
	}

article section p {
	line-height: 2.4;
	margin: 0;
	font-size: 17px;
	}

article>ul {
	padding: 30px 30px 1px;
	background: #FFF;
	}

article>ul li img {
	display: block;
	margin: 0 0 20px;
	}

article>ul li h3 {
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 0 0 1em;
	}

article>ul li p {
	font-size: 1.4rem;
	color: #666;
	}

article>ul li h3:before {
	display: block;
	font-weight: 300;
	font-family: 'Nunito',sans-serif;
	font-size: 1.3rem;
	color: #999;
	}

article>ul li:nth-child(1) h3:before { content: 'Vision 01'; }
article>ul li:nth-child(2) h3:before { content: 'Vision 02'; }
article>ul li:nth-child(3) h3:before { content: 'Vision 03'; }
article>ul li:nth-child(4) h3:before { content: 'Vision 04'; }
article>ul li:nth-child(5) h3:before { content: 'Vision 05'; }
article>ul li:nth-child(6) h3:before { content: 'Vision 06'; }
article>ul li:nth-child(7) h3:before { content: 'Vision 07'; }
article>ul li:nth-child(8) h3:before { content: 'Vision 08'; }
article>ul li:nth-child(9) h3:before { content: 'Vision 09'; }
article>ul li:nth-child(10) h3:before { content: 'Vision 10'; }
article>ul li:nth-child(11) h3:before { content: 'Vision 11'; }

/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and ( max-device-width: 720px ) {
	article>ul li p br { display: none; }
	}

@media only screen and ( max-device-width: 720px ) and ( orientation: landscape ) {
	article>h2 { width: 50%; }
	}

@media
only screen and ( orientation: landscape ),
only screen and ( min-device-width: 721px ) {
	article>header { margin: 30px 40px; }
	article>h2 { width: 50%; float: right; }
	article section { padding: 80px 40px 40px 25%; }
	article>ul li { margin: 0 0 40px; overflow: hidden; }
	article>ul li img { width: 48%; margin: 0; float: left; }
	article>ul li h3,article>ul li p { width: 48%; float: right; }
	}

@media only screen and ( min-device-width: 721px ) {
	article>h2 { width: 75%; margin: 0 40px 40px; padding: 40px; }
	article section h3 { font-size: 2.8rem; }
	article>ul { padding: 40px 40px 20px; }
	article>ul li h3 { font-size: 1.9rem; line-height: 1.8; margin: 0 0 1em; }
	}

@media only screen and ( min-device-width: 721px ) and ( orientation: landscape ) {
	article>h2 { width: 50%; margin: 0 60px 60px; }
	article>ul { padding: 60px 60px 20px; }
	article section { padding: 80px 60px 60px 33%; }
	}

@media
only screen and ( min-device-width: 721px ) and ( orientation: landscape ),
only screen and ( min-width: 1025px ) {
	article>ul { padding: 40px 0 20px; }
	article>ul li img { width: 33%; padding: 0 40px; }
	article>ul li h3,article>ul li p { width: 67%; padding-right: 60px; }
	}

@media only screen and ( min-width: 1025px ) {
	article section { padding: 80px 6% 60px 33%; }
	article section h3 { font-size: 3.2rem; }
	article>ul { padding-top: 60px; }
	article>ul li { margin: 0 0 4em; }
	article>ul li img { padding: 0 40px 0 60px; }
	article>ul li h3,article>ul li p { padding-right: 6%; }
	article>ul li p{ font-size: 17px; }
	article>ul li h3 { font-weight: normal; font-size: 3rem; line-height: 1.4; color: #666; margin: .5em 0; }
	article>ul li h3:before { margin-bottom: .5em; font-size: 20px;}
	article>h2>img {
		width: 80%;
		margin: auto;
		}
	}

@media only screen and ( min-width: 1601px ) {
	article section { margin-top: 525px !important; 
		}
	}

@media only screen and ( min-width: 1921px ) {
	article section { margin-top: 700px; }
	}
@media only screen and ( max-width: 720px ) {
	article section p{font-size: 16px; line-height: 30px;}
	article>ul li h3 { font-size: 20px; margin-bottom: 8px; }
	article>ul li h3:before{ font-size: 17px; }
	article>ul li{ margin-bottom: 24px;}
	}

/* EOF
-------------------------------------------------------------------------*/