@charset "utf-8";

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

/* =page structure
-------------------------------------------------------------------------*/
.index article nav figure:nth-of-type(6) img {
	top: 0;
	transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		-moz-transform: translate(-50%,0);
		-ms-transform: translate(-50%,0);
}


/* =.outline
-------------------------------------------------------------------------*/
.outline article { padding: 0; }
.outline article>header,.outline .pkg { padding: 0 20px; }
.outline article>figure { padding: 0 20px 20px; }

.outline article>dl.list-table {
	padding: 1px 20px 20px;
	background: #F9F9F9;
}

.outline #graph {
  margin-top: 10px;
  text-align: left;
}

.clients header {
	padding: 40px 20px 20px;
	border-bottom: 1px solid #EEE;
}

.clients header h1 {
	position: relative;
	font-weight: normal;
	font-size: 3rem;
	font-family: Didot,'theanodidot',serif;
}

.clients header p {
	font-weight: 600;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
	font-size: 1.4rem;
	margin: 0;
}

.clients ul {
	margin-left: 1px;
	background: #FFF;
	overflow: hidden;
}

.clients li {
	position: relative;
	width: 50%;
	height: 160px;
	float: left;
}

.clients li:nth-child(2n+1) { margin-right: 0; }

.clients li a {
	display: block;
	width: 100%;
	height: 100%;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
}

.clients li img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 90%;
	transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
}


/* =.access
-------------------------------------------------------------------------*/
.access .pkg>figure { margin: 0 0 60px; }
.access .pkg>figure img { border: 1px solid rgba(0,0,0,.8); }

.access .pkg>figure figcaption h3 {
	font-size: 1.3rem;
	margin: 2em 0 1em;
}

.access .pkg>figure figcaption p { text-align: left; }
.access .pkg>figure figcaption p span { display: inline-block; }

.access .pkg>figure figcaption p span.map {
	display: block;
	margin-top: 1em;
}

.access .pkg>figure figcaption p span a {
	display: inline-block;
	padding: 0 10px;
	font-weight: 400;
	font-size: 1.2rem;
	font-family: 'Nunito',sans-serif;
	text-transform: uppercase;
	color: #FFF;
	background: #131B3F;
	border-radius: 3px;
}

.access .pkg>figure figcaption ol li { position: relative; }

.access .pkg>figure figcaption ol li:before {
	position: absolute;
	top: 1px;
	left: 1px;
	display: block;
	width: 2em;
	height: 2em;
	font-weight: bold;
	line-height: 2em;
	text-align: center;
	background: #FFF;
}

.access .pkg>figure figcaption ol li:nth-child(1):before { content: '1'; }
.access .pkg>figure figcaption ol li:nth-child(2):before { content: '2'; }
.access .pkg>figure figcaption ol li:nth-child(3):before { content: '3'; }
.access .pkg>figure figcaption ol li:nth-child(4):before { content: '4'; }
.access .pkg>figure figcaption ol li:nth-child(5):before { content: '5'; }
.access .pkg>figure figcaption ol li:nth-child(6):before { content: '6'; }
.access .pkg>figure figcaption ol li:nth-child(7):before { content: '7'; }
.access .pkg>figure figcaption ol li:nth-child(8):before { content: '8'; }
.access .pkg>figure figcaption ol li:nth-child(9):before { content: '9'; }
.access .pkg>figure figcaption ol li:nth-child(10):before { content: '10'; }

.access .pkg>figure figcaption ol li img { margin: 0 0 10px; }

.access .pkg>figure figcaption ol li p {
	font-size: 1.2rem;
	text-align: justify;
}


/* =.history
-------------------------------------------------------------------------*/
.history article { padding: 0; }
.history article>header { margin-left: 20px; }
.history .pkg { margin: 0 20px 20px; }
.history article>figure#graph { margin: -70px 20px 30px; }
.history article>figure img,.message article>figure img { width: 100%; }


/* =.message
-------------------------------------------------------------------------*/
.message article>figure img { margin: 0 0 30px; }
.message .pkg ul { margin: 0 0 30px; }

.message .pkg li {
	position: relative;
	margin: 0 0 2em;
	text-align: justify;
}

.message .pkg li:before {
	content: '\f111';
	margin-right: .3em;
}

.message .pkg aside {
	padding-top: 30px;
	border-top: 1px solid #DDD;
}

.message .pkg aside header { margin: 0 0 30px; }

.message .pkg aside header p {
	font-weight: 400;
	font-family: 'Nunito',sans-serif;
	font-size: 1.4rem;
	margin: 0;
}

.message .pkg aside header h1 {
	font-weight: 600;
	font-family: "游明朝","YuMincho",HiraMinProN-W6,"Hiragino Mincho ProN",Meiryo,serif;
	font-size: 1.5rem;
}


/* =.board-member,.advisor
-------------------------------------------------------------------------*/
.board-member figure img {
	display: block;
	width: 100%;
}

.board-member figure figcaption header h3,
.advisor figure figcaption header h3,
.board-member figure figcaption header p,
.advisor figure figcaption header p {
	font-weight: 600;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
	letter-spacing: 1px;
	margin: 0;
}

.board-member figure figcaption header h3,
.advisor figure figcaption header h3 {
	font-weight: 600;
	font-family: "游明朝","YuMincho",HiraMinProN-W6,"Hiragino Mincho ProN",Meiryo,serif;
	font-size: 2.4rem;
	line-height: 1.4;
}

.board-member figure figcaption header h3 span,
.advisor figure figcaption header h3 span {
	display: inline-block;
	font-weight: 400;
	font-family: 'Nunito',sans-serif;
	font-size: 1.4rem;
	line-height: 1;
}

.board-member figure figcaption dl { margin: 30px 0 }
.board-member figure figcaption dt { margin-top: 1em !important; }


/* =.advisor
-------------------------------------------------------------------------*/
.advisor .pkg { overflow: hidden; }
.advisor .pkg p.notice { color: #000; }

.advisor figure {
	transition: width .2s,height .2s;
		-webkit-transition: width .2s,height .2s;
		-moz-transition: width .2s,height .2s;
		-ms-transition: width .2s,height .2s;
}

.advisor figure.hidden {
	width: 0;
	height: 0;
	opacity: 0;
}

.advisor figure figcaption {
	display: none;
	position: relative;
	width: 200%;
	margin: 20px 0;
	background: #FFF;
	z-index: 10;
}

.advisor figure figcaption div { margin-top: 30px; }
.advisor dl.list-table dt { margin-top: 0; }


.advisor figure figcaption div ul {
	list-style-type: disc;
	margin-left: 25px;
}

.advisor figure figcaption div li span { display: inline-block; }



/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and ( max-device-width: 720px ) {
	.outline tr td:first-child { width: 50%; }
	.message .pkg p br { display: none; }
	.advisor figure figcaption div { margin-top: 30px; }
	.advisor dl.list-table dt { margin-top: 1em; }
}

@media only screen and ( orientation: landscape ) {
	.access .pkg { width: 75%; margin-left: 25%; }
	.history article>figure#graph { margin: -100px 20px 30px 25%; }
}

@media
only screen and ( min-device-width: 321px ) and ( orientation: landscape ),
only screen and ( min-device-width: 721px ) {
	.outline article>dl.list-table>dd dl { width: 33.33333333%; height: 28em; float: left; }
	.outline article>dl.list-table { margin: 0; padding-bottom: 0; overflow: hidden; }
	.outline #graph img { max-width: none; margin-left: 30px; }
}

@media only screen and ( min-device-width: 721px ) {
	.outline article>header,.outline article>figure,.outline .pkg { padding: 0 40px 40px; }
	.outline article>figure { padding: 0 0 40px 40px; }
	.outline article>dl.list-table { padding: 20px 40px 0; }
    .outline tr td:first-child { width: 11em; }
	.access .pkg>figure figcaption ol { overflow: hidden; }
	.access .pkg>figure figcaption ol li { width: 32%; float: left; margin: 0 2% 10px 0; }
	.access .pkg>figure figcaption ol li:nth-child(3) { margin-right: 0; }
	.clients header { padding: 60px 40px 0; border: none; }
	.clients ul { padding: 60px 0; }
	.clients li a { border: none; }
	.clients li a img { max-width: 80%; }
	.history article>figure#graph { margin: -160px 40px 60px; }
}

@media screen and ( max-width: 720px ) {	
	.message>aside.pconly{display:block !important;}
	.message>.sponly{display:none !important;}
	.message article>figure aside header{font-size: 17px;}
	.message article>figure aside header p{font-size: 14px;}
	.message article>figure aside dl.list-table dt{margin-top: 14px;}
}
@media
only screen and ( orientation: landscape ),
only screen and ( min-device-width: 721px ) {
	.outline article>figure { width: 75%; }
	.outline .pkg { overflow: hidden; }
	.outline .pkg dl.list-table { width: 50%; float: left; }
	.outline .pkg dl.list-table:nth-of-type(2n+1) { clear: both; }
	.clients li { width: 33.33333333%; }
	.message .pkg { overflow: hidden; }
	.message>.pconly{display:block !important;}
	.message>.sponly{display:none !important;}
	.message .pkg>div { width: 80%; max-width: 1200px; float: left; }
	.message .pkg aside { width: 50%; margin: 0 !important; padding: 0 !important; float: left; border: none; }
	.advisor dl.list-table { overflow: hidden; }
	.advisor dl.list-table dt,.advisor dl.list-table dd { float: left; }
	.advisor dl.list-table dt { clear: left; width: 23%; margin-top: 0 !important; }
	.advisor dl.list-table dd { width: 77%; }
	.board-member figure { margin-top: 60px; overflow: hidden; }
	.board-member figure:first-of-type { margin-top: 0 !important; }
	.board-member figure img { width: 48%; float: right; }
	.board-member figure figcaption { display: block !important; width: 48%; float: left; margin: 0 !important; }
	.board-member figure figcaption dl { margin-bottom: 0; overflow: hidden; }
	.board-member figure figcaption dt,.board-member figure figcaption dd { float: left; }
	.board-member figure figcaption dt { clear: left; width: 25%; margin: 0 !important; }
	.board-member figure figcaption dd { width: 75%; }
}

@media
only screen and ( min-device-width: 376px ) and ( orientation: landscape ),
only screen and ( min-device-width: 721px ) {
	.history article>header { margin-left: 40px; }
	.history .pkg { margin: 0 40px 40px; }
	.history dl.list-table { width: 50%; }
	.message article>figure { display: flex; width: 100% !important; max-width: 1600px; justify-content: space-between; align-items: flex-start;}
	.message article>figure img { margin-bottom: 60px; width: 48%; object-fit: contain;}
	.message article>figure aside { margin-bottom: 60px; width: 48%; }
	.message article>figure aside header{font-size: 18px;}
	.message article>figure aside header p{font-size: 15px;}
	.message article>figure aside dl.list-table dt{margin-top: 12px;}
	.message .pkg aside { margin-top: 6em; padding-top: 6em; }
	.message .pkg aside header { margin: 0 0 40px; }
	.message .pkg aside header p { font-size: 1.6rem; letter-spacing: 1px; }
	.message .pkg aside header h1 { font-size: 1.8rem; }
	.board-member figure figcaption dt { width: 20%; }
	.board-member figure figcaption dd { width: 80%; }
}

@media only screen and ( min-device-width: 721px ) and ( orientation: landscape ) {
	.outline #graph img { margin-left: 0; max-width: 100%; }
	.history article>figure#graph { margin: -250px 40px 60px 25%; }
	.advisor dl.list-table dt { width: 18%; }
	.advisor dl.list-table dd { width: 82%; }
}

@media only screen and ( min-device-width: 721px ) {
	.advisor .pkg p.notice { position: absolute; right: 40px; margin-top: -75px;}
	.advisor figure { width: 100%; float: none; margin: 0 0 30px; overflow: hidden; }
	.advisor figure img { width: 33%; float: left; }
	.advisor figure figcaption { display: block; width: 63%; float: right; margin: 0; }
}

@media only screen and ( min-width: 1025px ) {
	.outline article>header,.outline article>figure,.outline .pkg { padding: 0 60px; }
	.outline article>figure { padding: 0 0 60px 60px; }
	.outline article>figure img { max-width: none; width: 100%; }
	.outline .pkg { width: 75%; padding: 0 0 60px 60px; }
	.outline article>dl.list-table { width: 100%; padding: 80px 0 0 25%; }
	.access .pkg>figure { text-align: left; }
	.access .pkg>figure>img { height: 450px; }
	.access .pkg>figure figcaption ol li { width: 19%; margin-right: 1.0%; }
	.access .pkg>figure figcaption ol li:nth-child(3) { margin-right: 1.15%; }
	.access .pkg>figure figcaption ol li:nth-child(5) { margin-right: 0; }
	.history article>header { margin-left: 60px; }
	.history .pkg { margin: 0 60px 60px; }
	.history article>figure#graph { margin: -300px 60px 80px 25%; }
	.message article>figure { width: 75%; }
	.clients header { padding: 100px 60px 0; }
	.clients li { width: 25%; }
	.board-member figure { width: 75%; margin: 120px 25% 0 0; }
	.board-member figure figcaption header p { font-size: 1.6rem; }
	.board-member figure figcaption header h3 { font-size: 4rem; }
	.board-member figure figcaption header h3 span { font-size: 1.6rem; }
	.board-member figure figcaption dl { margin: 0; }
	.advisor .pkg { width: 75%; }
	.advisor .pkg p.notice { right: 60px; }
	.advisor figure { margin: 0 0 60px; }
}

@media only screen and ( max-width: 1280px ) {
	.board-member figure figcaption header h3 span { display: block; }
}


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