@charset "utf-8";
/* common.css
++++++++++++++++++++++++++++++++++++++++
* NOTE
++++++++++++++++++++++++++++++++++++++++
- Charset: utf-8
- Return code: LF
++++++++++++++++++++++++++++++++++++++++

/* Base
++++++++++++++++++++++++++++++++++++++++ */
/* web fonts ++++++++++++++++ */
@font-face {
  font-family: 'lato';
  src: url('../fonts/Lato-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'lato';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'lato';
  src: url('../fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300;
}

/* reset ++++++++++++++++
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display: block;
}
nav ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}

/* initialize ++++++++++++++++ */
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

[lang=ja] {
  font-family: "lato", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
[lang=en] {
  font-family: 'lato', sans-serif;
}

body {
  color: #333940;
  font-family: inherit;
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1.6rem;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (min-width: 769px) {
  body {
    font-size: 1.8rem;
  }
}

main {
  display: block;
}

a {
  color: #005bac;
  text-decoration: none;
}
a:hover {
  color: #21548c;
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul, ol {
  list-style: none;
}

b {
  font-weight: bold;
}

/* form */
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  vertical-align: middle;
  margin: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
input::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.3;
}
input::-webkit-input-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.5;
}
input:-ms-input-placeholder {
  color: rgba(51,57,64,0.5);;
  font-family: inherit;
}

/* Layout
++++++++++++++++++++++++++++++++++++++++ */
.l-header {
  position: relative;
  top: 0;
  z-index: 10;
  width: 100%;
}
.l-footer {
  width: 100%;
}
.l-container,
.l-container--mid {
  margin: auto;
  padding: 0 15px;
}
.l-container--full {}
.l-main {
  flex-grow: 1;
}
.l-side {}

@media screen and (max-width: 768px) {
  .l-header {
    height: 56px;
  }
  .l-container,
  .l-container--mid,
  .l-container--full {
    margin-top: 20px;
  }
  .l-container--full > .l-side {
    margin-right: 15px;
    margin-left: 15px;
  }
}
@media screen and (min-width: 769px) {
  .l-container,
  .l-container--mid,
  .l-container--full {
    margin-top: 30px;
  }
  .l-container {
    display: flex;
    width: 1230px;
  }
  .l-container--mid {
    width: 1025px;
  }
  .l-side {
    flex: 0 0 auto;
    order: -1;
    width: 250px;
    /*margin-right: 27.5px;*/
    margin-right: 57.5px;
  }
}


/* header
++++++++++++++++++++++++++++++++++++++++ */
.header-top {
  margin: 0 auto;
  padding: 0 15px;
  background-color: #fff;
}
.header-logo {
  height: 19px;
  margin-right: auto;
  background-size: 100% 100%;
  white-space: nowrap;
  text-indent: 120%;
  overflow: hidden;
}
[lang="ja"] .header-logo {
  width: 240px;
  background-image: url(../images/logo-gmofh-jp.svg);
}
[lang="en"] .header-logo {
  width: 257px;
  background-image: url(../images/logo-gmofh-en.svg);
}
.header-logo > a {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .header-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    margin: 0 auto;
    box-shadow: 0 2px 4px 0 rgba(103, 139, 171, 0.2);
    transition: top 0.12s ease;
  }
  .header-top.is-hidden {
    top: -60px;
  }
  .header-logo {
    margin-top: 18px;
  }
  [lang="en"] .header-logo {
    width: 230px;
    height: 17px;
    margin-top: 19px;
  }
}
@media screen and (min-width: 769px) {
  .header-top {
    display: flex;
    flex-wrap: wrap;
    width: 1230px;
    height: 80px;
  }
  .header-top::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 4px 0 rgba(103, 139, 171, 0.2);
    content: "";
  }
  .header-logo {
    margin-top: 31px;
  }
}

/* Block Module(general)
++++++++++++++++++++++++++++++++++++++++ */
/* clear  */
.clear {
  clear: both !important;
}

/* typography */
.el-title1 {
  position: relative;
  line-height: 1.25;
  font-weight: normal;
}
.el-title1::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -12px;
  height: 2px;
  background: #005bac;
}

.bl-text{
  line-height: 1.75;
  font-weight: normal;
  margin-top: 16px;
}

@media screen and (min-width: 769px) {
  .el-title1 {
    font-size: 3.6rem;
    margin-top: 40px;
  }
  .el-title1::after {
    width: 36px;
  }
  .bl-text{
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .el-title1 {
    font-size: 2.8rem;
    margin-top: 38px;
  }
  .el-title1::after {
    width: 28px;
  }
  .bl-text{
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 340px) {
  .el-title1 {
    font-size: 2.6rem;
  }
}

/* typography margin */
.el-title1 + .bl-frame {
  margin-top: 46px;
}

/* bl-frame */
.bl-frame--border {
  border: solid 1px #d4d7d9;
}

.bl-frame > *:first-child {
  margin-top: 0;
}
@media screen and (min-width: 769px) {
  .bl-frame {
    padding: 24px 30px 22px;
  }
}
@media screen and (max-width: 768px) {
  .bl-frame {
    padding: 24px 21px 22px 19px;
    margin-top: 18px;
  }
}

/* schedule */
.un-title-mainte-schedule {
  margin: 20px 0;
  padding-left: 12px;
  height: 38px;
  background: #f7f7f7;
  border: 1px solid #d2d6db;
  line-height: 40px;
  color: #1e335c;
  font-size: 1.6rem;
  font-weight: bold;
}
.un-text-mainte-schedule-note {
  margin: 1em 0;
  font-size: 1.4rem;
}

.un-table-mainte-schedule {
  border-collapse: collapse;
  width: 100%;
  font-size: 1.4rem;
}
.un-table-mainte-schedule th {
  padding: 4px 0;
  border-bottom: 1px solid #c7ccd6;
  font-weight: bold;
  text-align: left;
  color: #1e335c;
}
.un-table-mainte-schedule th:first-child {
  width: 200px;
}
.un-table-mainte-schedule td {
  padding: 16px 0;
  border-bottom: 1px solid #d2d6db;
}
.un-table-mainte-schedule td:first-child {
  color: #9a661b;
}
.un-table-mainte-schedule .nowrap {
  white-space: nowrap;
}
@media all and (max-width: 640px) {
  .un-table-mainte-schedule th:first-child {
    width: 32%;
  }
  .un-table-mainte-schedule td:first-child {
    vertical-align: top;
  }
}