@charset "utf-8";

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

/* =page structure
-------------------------------------------------------------------------*/
ol.step {
  position: absolute;
  top: 120px;
  right: 20px;
  }

form p { text-align: left; }

form p.btn {
  position: relative;
  margin: 0;
  text-align: right;
}

.btn-fill {
  font-size: 3rem;
  width: 200px;
  height: 60px;
}

legend {
  font-size: 2.3rem;
}

input,textarea,select {
  font-size: 1.8rem;
  color: #666;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 3px !important;
}

select {
  height: 5rem;
}

input:focus,textarea:focus,select:focus { border-color: #000; }

input,label {
  display: block;
  height: 3em;
  padding-right: 10px;
  text-shadow: 0 1px 0 #FFF;
  vertical-align: middle;
}

#contact-form{
  background: url(../../img/top/section4-bg.png);
}


input, select {
  width: 100%;
  margin-top: 10px;
  padding: 0 10px;
}

label {
  font-size: 1.8rem;
  width: 14em;
  letter-spacing: 1px;
}

input[type="submit"] {
  display: inline-block;
  width: auto !important;
  height: 5em;
  font-weight: 600;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
  letter-spacing: .1em;
  line-height: 5em;
  margin: 0;
  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;
  }

input[type="reset"],
p.btn button {
  position: absolute;
  top: 0;
  left: 0;
  width: auto !important;
  height: auto;
  padding: 0;
  color: #999;
  text-transform: uppercase;
  }

input[type="submit"]:hover {
  color: #FFF;
  background: #131B3F;
  }

input[type="reset"]:hover,p.btn button:hover { color: #000; }

p.btn button:before {
  content: '\f0d9';
  margin-right: .5em;
  }

textarea {
  width: 100%;
  height: 15em;
  margin-top: 10px;
  padding: 0 10px;
  }


/* =.error
-------------------------------------------------------------------------*/
input.error,p.error input,select.error ,textarea.error, p.error textarea { 
  box-shadow: 0 0 3px 0px #ff0000; 
}

input.error::placeholder,
p.error input::placeholder,
p.error select::placeholder,
p.error textarea::placeholder,
textarea.error::placeholder { color: rgba(167,0,61,.5); }

input.error::-webkit-input-placeholder,
p.error input::-webkit-input-placeholder,
p.error select::-webkit-input-placeholder,
p.error textarea::-webkit-input-placeholder,
textarea.error::-webkit-input-placeholder { color: rgba(167,0,61,.5); }

input.error::-moz-placeholder,
p.error input::-moz-placeholder,
p.error select::-moz-placeholder,
p.error textarea::-moz-placeholder,
textarea.error::-moz-placeholder { color: rgba(167,0,61,.5); }

input.error:-ms-input-placeholder,
p.error input:-ms-input-placeholder,
p.error select:-ms-input-placeholder,
p.error textarea:-ms-input-placeholder,
textarea.error:-ms-input-placeholder { color: rgba(167,0,61,.5); }


/* =.confirm
-------------------------------------------------------------------------*/
.confirm dl {
  margin: 0 0 30px;
  overflow: hidden;
  }

.confirm dt,.confirm dd { float: left; }

.confirm dt {
  clear: left;
  width: 8em;
  font-weight: 600;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
  letter-spacing: 1px;
  }

.confirm dd { display: inline-block; }

.confirm h3 {
  font-weight: 600;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  margin: 0 0 2em;
  }

.confirm dt:before,
.confirm h3:before {
  content: '\f111';
  margin-right: 10px;
  }

.confirm blockquote {
  max-height: 56em;
  margin: 0 0 20px;
  padding: 0 0 1px 15px;
  border-left: 1px solid #000;
  overflow: auto;
  }

.confirm blockquote p { margin: 0 0 1em; }

p.confirm {
  background-color: white;
  padding: 20px 10px;
  border-radius: 10px;
  font-size: 16px;
  color: #000000;
}


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and ( min-device-width: 721px ) {
  ol.step { top: 125px; right: 40px; }
  article>p { line-height: 2.8; }
  label { font-weight: 600; }
  .confirm dl,.confirm blockquote { margin-bottom: 4em; }
  }

@media
only screen and ( orientation: landscape ),
only screen and ( min-width: 901px ) {
  article>p { width: 50%; margin: 0 0 40px 50%;  }
  .pkg { position: relative; width: 100%; margin: 0; }
  .pkg span { position: relative; top: 0; left: 0; bottom: 0; display: block; width: 46%; height: 100%; }
  .pkg form,#contact .pkg>p { width: 50%; }
  }

@media only screen and ( min-width: 1025px ) {
  ol.step { top: 85px; right: 80px; }
  article>p { position: absolute; top: 200px; right: 0; margin: 0; padding-right: 60px; }
  .confirm dl,.confirm blockquote { margin-bottom: 6em; }
  }


/* EOF
-------------------------------------------------------------------------*/
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 {
  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 {
  margin: 10px 20px;
  border-bottom: 1px solid #EEE;
  }

.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;
  }


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

#connect>span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: url("/images/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;
  }

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


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

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

#colophon footer h1 {
    height: 112.5px;
  margin: 0 0 5px;
  }

#colophon footer h1 img[alt="DYM"] {
  width: 120px;
  padding: 41.25px 0;
  }

#colophon footer h1 img[alt="Privacy Mark"] {
    background: #fff;
    box-sizing: border-box;
    float: right;
    height: 100.5px;
    padding: 18.75px;
  } 

#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/16season-award.jpg) no-repeat 43% 38%;background-size: contain; top: 0;left: 0;bottom: 0;width: 100%;margin-bottom: 1em;}
/* =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: 30px 100px 50px; }
  article>header h1 { font-size: 5rem; margin: 0 0 60px; }
  article>header h2 { font-size: 2.4rem; margin: -45px 0 60px; }
  #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: 30px 100px 50px; }
  #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; }
  }

.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%;
}

.contact-section {
    max-width: 1110px;
    display: block;
    margin: 0 auto;
    position: relative;
    padding-bottom: 0%;
}