@charset "utf-8";

@font-face {
	font-family: 'theanodidot';
	src: url('../webfonts/theanodidot-regular-webfont.woff') format('woff');
}

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

/* =page structure
-------------------------------------------------------------------------*/
html,
body {
	width: 100%;
	overflow-x: hidden;
}

html {
	height: 100%;
	font: 10px/1 HelveticaNeue, 'Helvetica Neue', Helvetica, ArialMT, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
}

body {
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#articles {
	position: relative;
}

.print {
	display: none;
}


/* =icons
-------------------------------------------------------------------------*/
p.next a:after,
p.notice:before,
ol.step li.current:before,
dl.wicket dd a:before,
nav.secondary dd a:before,
#connect div li a:before,
.message .pkg li:before,
#csr .pkg figure figcaption li:before,
p.btn button:before,
.confirm dt:before,
.confirm h3:before {
	font-weight: normal !important;
	font-family: 'FontAwesome';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* =tags
-------------------------------------------------------------------------*/
p,
dt,
dd,
li {
	font-size: 1.3rem;
	line-height: 1.8;
}

p {
	text-align: justify;
	margin: 0 0 2em;
}

p.next {
	width: auto;
	font-weight: 600;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
	letter-spacing: .1em;
}

p.next a {
	display: inline-block;
	height: 5em;
	line-height: 5em;
	padding: 0 35px 0 40px;
	background: #E6ECF3;
	border-radius: 3px;
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
}

p.next a:after {
	content: '\f105';
	margin-left: 10px;
}

p.next a:hover {
	color: #FFF;
	background: #131B3F;
}

p.notice {
	font-size: 1.2rem;
	color: #A5013E;
}

p.notice:before {
	content: '\f111';
	margin-right: 5px;
}

ul,
ol,
dl {
	margin: 0;
	list-style-type: none;
}

ul.signature {
	margin: 30px 0;
}

ul.signature li {
	text-align: right;
}

ol.step li {
	text-align: right;
	line-height: 2.4;
	color: #999;
}

ol.step li.current {
	color: #131B3F;
}

ol.step li.current:before {
	content: '\f061';
	font-size: 2rem;
	line-height: 1;
	margin-right: .5em;
}

dl.list-table {
	margin: 20px 0;
}

dl.list-table dt {
	margin-top: 30px;
	font-weight: 600;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
	letter-spacing: .1em;
}

dl.list-table>dd dl {
	margin: 1em 0 0;
	padding: .5em 0 2em 10px;
	border-left: 1px solid rgba(0, 0, 0, .8);
}

dl.list-table>dd dl dt {
	margin-top: 0;
}

dl.list-table>dd strong {
	display: block;
	font-weight: 600;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
	font-size: 2.4rem;
}

dl.list-table>dd em {
	display: block;
	font-size: 1.6rem;
}

dl.list-table>dd a {
	display: inline-block;
	font-size: 1.6rem;
	margin: .5em 0;
	padding: 0 10px;
	color: #131B3F;
	background: #EEE;
}

dl.list-table>dd a:hover {
	background: #DDD;
}

dl.list-table>dd dd.map a {
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
	font-size: 1.4rem;
	text-transform: uppercase;
	color: #FFF;
	background: #131B3F;
	border-radius: 3px;
}

dl.list-table>dd dt {
	margin: 1em 0;
}

dl.list-table>dd span {
	display: inline-block;
}

dl.wicket {
	margin: 2em 0;
}

dl.wicket dd span {
	display: inline-block;
}

dl.wicket dd a {
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
	font-size: 1.4rem;
	color: #000;
}

dl.wicket dd a:before {
	content: '\f095';
	margin-right: 5px;
}


/* =#masthead
-------------------------------------------------------------------------*/
#masthead {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 20px 3px rgba(0, 0, 0, .1);
	z-index: 1000;
}


/* =.breadcrumb
-------------------------------------------------------------------------*/
.breadcrumb {
	width: 100%;
	max-width: 1200px;
	margin: 10px auto;
	border-bottom: 1px solid #EEE;
	padding-top: 60px;
}

.breadcrumb a {
	display: inline-block;
	padding: 1em 0;
	font-size: 1.1rem;
	letter-spacing: 1px;
	vertical-align: baseline;
}

.breadcrumb>span:after {
	content: '\00203A';
	display: inline-block;
	font-size: 2.4rem;
	vertical-align: bottom;
	margin: 0 5px .4em 10px;
}

.breadcrumb>span:last-of-type:after {
	content: '';
}

.breadcrumb>span:first-of-type a {
	font-weight: 300;
	font-family: 'Nunito', sans-serif;
	font-size: 1.3rem;
	text-transform: uppercase;
}


/* =.secondary
-------------------------------------------------------------------------*/
nav.secondary dt {
	display: inline-block;
	padding: 0 10px;
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
	font-size: 1.4rem;
	color: #FFF;
	background: #131B3F;
	border: 1px solid #131B3F;
	border-radius: 3px;
}

nav.secondary dt.close {
	color: #131B3F;
	background: #FFF;
	border-color: #131B3F;
}

nav.secondary dd a {
	display: block;
	line-height: 2.4;
	color: #999;
}

nav.secondary dd a:hover,
.outline nav.secondary dd a:nth-child(1),
.access nav.secondary dd a:nth-child(2),
.history nav.secondary dd a:nth-child(3),
.message nav.secondary dd a:nth-child(4),
.board-member nav.secondary dd a:nth-child(5),
.advisor nav.secondary dd a:nth-child(6),
.web-promotion nav.secondary dd a:nth-child(1),
.new-graduates nav.secondary dd a:nth-child(2),
.training nav.secondary dd a:nth-child(3),
.exe-part nav.secondary dd a:nth-child(4),
.medicine nav.secondary dd a:nth-child(5),
.new-business nav.secondary dd a:nth-child(6),
.employee nav.secondary dd a:nth-child(1),
.welfare nav.secondary dd a:nth-child(2),
#news.a2018 nav.secondary dd a:nth-last-child(13),
#news.a2017 nav.secondary dd a:nth-last-child(12),
#news.a2016 nav.secondary dd a:nth-last-child(11),
#news.a2015 nav.secondary dd a:nth-last-child(10),
#news.a2014 nav.secondary dd a:nth-last-child(9),
#news.a2013 nav.secondary dd a:nth-last-child(8),
#news.a2012 nav.secondary dd a:nth-last-child(7),
#news.a2011 nav.secondary dd a:nth-last-child(6),
#news.a2010 nav.secondary dd a:nth-last-child(5),
#news.a2009 nav.secondary dd a:nth-last-child(4),
#news.a2008 nav.secondary dd a:nth-last-child(3),
#news.a2007 nav.secondary dd a:nth-last-child(2),
#news:not([class]) nav.secondary dd a:last-child {
	color: #131B3F;
}

nav.secondary dd a:before {
	content: '\f111';
	margin-right: 10px;
}


/* =article
-------------------------------------------------------------------------*/
article {
	padding: 0 20px 20px;
}

article>figure {
	text-align: left;
}

article>header h1 {
	font-weight: normal;
	font-size: 3rem;
	font-family: Didot, 'theanodidot', serif;
	text-transform: uppercase;
	margin: 0 0 30px;
}

article>header h1 span {
	display: block;
	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;
	letter-spacing: 1px;
	margin: .5em 0 0;
}

article>header h2 {
	font-size: 2rem;
	margin: -15px 0 30px;
}

article>header h2:before {
	content: '';
	display: block;
	width: 50%;
	height: 4px;
	margin: 0 0 .5em;
	background: #000;
}

.index article nav figure,
.index .external figure {
	position: relative;
	height: 180px;
	margin: 0 0 1px;
	text-align: left;
	background: #000;
	overflow: hidden;
}

.index article figure a {
	display: block;
}

.index article nav figure img,
.index .external figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 104%;
	max-width: none;
	min-height: 101%;
	opacity: .9;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.index article nav figure figcaption,
.index .external figure figcaption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-weight: 600;
	font-family: "游明朝", "YuMincho", HiraMinProN-W6, "Hiragino Mincho ProN", Meiryo, serif;
	font-size: 1.8rem;
	color: #FFF;
	z-index: 10;
}

.headerlogo {
	display: inline-block;
	width: 6%;
	height: auto;
}

@media (max-width: 768px) {
	.headerlogo {
		margin: 15px auto;
		width: 100px;
		display: block;
	}
}

.serviceheader {
	margin: 0 0 60px;
	font-size: 5rem;
}

.serviceheader div {
	font-family: Didot, 'theanodidot', serif;
	text-transform: uppercase;
}

.serviceheader span {
	display: block;
	font-size: 1.4rem;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0.5em 0 0;
}

/* =#connect
-------------------------------------------------------------------------*/
#connect {
	position: relative;
	height: 28em;
	color: #FFF;
	background: #000;
}

#connect>span {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: url("../img/temp/connect.jpg") no-repeat 50% 40%;
	background-size: cover;
	z-index: 0;
	opacity: .8;
}

#connect div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	text-align: center;
	z-index: 10;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

#connect div h1,
#connect div p {
	text-align: center;
}

#connect div h1 {
	font-size: 1.6rem;
	margin: 0 0 1em;
}

#connect div p {
	font-size: 1.2rem;
}

#connect div p span {
	display: inline-block;
}

#connect div ul {
	display: table;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

#connect div li {
	display: table-cell;
	width: 50%;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
}

#connect div li a {
	display: block;
	font-weight: 600;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, 'Droid Sans', 'Yu Gothic', Meiryo, 'Meiryo UI', sans-serif;
	margin: 0 !important;
}

#connect div li a[href^="tel:"] {
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
	font-size: 1.1em;
}

#connect div li a:before {
	display: block;
	content: '\f003';
	font-size: 6rem;
	margin: 0 0 5px;
}

#colophon footer div img[alt="東京都スポーツ推進企業認定ロゴ"] {
	height: 50%;
}

#connect div li a[href^="tel:"]:before {
	content: '\f095';
	margin: 5px 0 0;
}

.footerconnect {
	font-weight: normal;
	font-size: 3.6rem;
	margin: -3em 0 0.5em;
	text-align: center;
}


/* =#colophon
-------------------------------------------------------------------------*/
#colophon {
	clear: both;
}

#colophon footer {
	color: #FFF;
	margin: 0;
	padding: 50px 20px 20px;
	background: #131B3F;
	text-align: center;
}

#colophon footer div {
	height: 112.5px;
	margin: 0 0 5px;
	text-align: left;
}

#colophon footer div img[alt="DYM"] {
	display: inline-block;
	width: 120px;
	padding: 41.25px 0;
}

#colophon footer div img[alt="Privacy Mark"] {
	background: #fff;
	box-sizing: border-box;
	float: right;
	height: 50%;
	padding: 0.8%;
}

#colophon footer div img[alt="健康経営優良法人2024"] {
	background: #fff;
	box-sizing: border-box;
	float: right;
	height: 50%;
	padding: 0.3%;
}

#colophon footer p {
	font-size: 1.1rem;
	text-align: left;
	margin: 0;
	padding-top: 1em;
	border-top: 1px solid rgba(255, 255, 255, .3);
}

#colophon footer li {
	display: inline-block;
	margin: 0 10px .5em 0;
}

#colophon footer li a {
	opacity: .8;
	transition: opacity .2s;
	-webkit-transition: opacity .2s;
	-moz-transition: opacity .2s;
	-ms-transition: opacity .2s;
}

#colophon footer li a:hover {
	opacity: 1;
}


/* =p#gotop
-------------------------------------------------------------------------*/
p#gotop {
	margin: 0;
}

p#gotop a {
	position: relative;
	display: block;
	width: 100%;
	height: 60px;
	text-indent: 120%;
	white-space: nowrap;
	border-top: 1px solid rgba(255, 255, 255, .3);
	overflow: hidden;
	background: #131B3F;
}

p#gotop a:after {
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	display: block;
	width: 15px;
	height: 15px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	transform: translateX(-50%) rotate(45deg);
	-webkit-transform: translateX(-50%) rotate(45deg);
}

.aword-image {
	background: url(/images/temp/about/20season-award.jpg) no-repeat 50% 38%;
	background-size: contain;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	margin-bottom: 1em;
}

.dym-movie {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.headoffice {
	padding-bottom: 2em;
}

.entrancemovie {
	padding: 20px 0 0 0;
}

/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and (max-device-width: 320px) and (orientation: landscape) {

	.index article nav figure,
	.index .external figure {
		height: 180px !important;
	}
}

@media only screen and (min-device-width: 321px) {
	.breadcrumb a {
		font-size: 1.3rem;
	}

	.index article nav figure,
	.index .external figure {
		height: 220px;
	}
}

@media only screen and (min-device-width: 376px) {

	.index article nav figure,
	.index .external figure {
		height: 240px !important;
	}

	#connect div h1 {
		font-size: 2rem;
	}

	#connect div p,
	#connect div li {
		font-size: 1.4rem;
	}
}

@media only screen and (orientation: landscape),
only screen and (min-device-width: 721px) {

	.index article nav,
	.index .external {
		overflow: hidden;
	}

	.index article nav figure,
	.index .external figure {
		width: 50%;
		height: 220px;
		margin: 0;
		float: left;
	}
}

@media only screen and (min-device-width: 721px) {
	article {
		padding: 0 40px 60px;
	}

	article>header h1 {
		font-size: 5rem;
		margin: 0 0 60px;
	}

	article>header h2 {
		font-size: 2.4rem;
	}

	#news:not([class]) article>header h1 {
		font-size: 5rem;
		margin: 0 0 250px;
	}

	#news.dig article>header h2 {
		font-size: 2.4rem;
		margin: -45px 0 190px;
	}

	article>header h2:before {
		width: 25%;
	}
}

@media only screen and (min-device-width: 721px) and (orientation: landscape),
only screen and (min-width: 1025px) {

	.index article nav,
	.index .external {
		margin-left: 25%;
	}

	.index article nav figure,
	.index .external figure {
		height: 300px;
	}

	.index article nav figure.top img {
		top: 0 !important;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
	}

	#about.index article nav figure.adjust img {
		top: 63% !important;
	}
}

@media only screen and (min-width: 1025px) {
	article {
		padding: 0 60px 10em;
	}

	#connect {
		height: 50em;
	}

	#connect div h1 {
		font-weight: normal;
		font-size: 3.6rem;
		margin: 0 0 .5em;
	}

	#connect div p,
	#connect div li {
		font-size: 2rem;
	}

	#colophon footer {
		padding: 100px 4% 40px;
	}
}


/* スクリーンサイズが767px以下の場合に適用 */
@media screen and (max-width: 767px) {
	.breadcrumb {
		padding-left: 10px;
	}

	.dym-movie iframe {
		width: 100%;
		height: 100%;
	}

	.footerconnect {
		text-align: center;
		font-size: 1.6rem;
		margin: 0 0 1em;
	}
}

.nonetrancate {
	position: absolute;
	top: 0px !important;
	left: 0px !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
}

.olborder {
	border-bottom: 2px solid #f2f2f2;
}

/* EOF
-------------------------------------------------------------------------*/
img[src$="ng022.png"] {
	max-width: 40%;
}

@media only screen and (min-device-width: 721px) {
	.slide {
		display: flex;
		width: 100%;
	}

	.w-half {
		width: 50%;
	}

	.dym-color {
		background-color: #131B3F;
	}
}