@charset "UTF-8";
/**背景位置とサイズ******************************/
/**PCmin-width1225**/
/**PHmax-width1224**/
/**PHmax-width415**/
/*アイテム横軸 中央よせ*/
/*アイテム横軸 左側よせてに配置*/
/*アイテム横軸 右側よせてに配置（右から配置ではないので注意）*/
/*アイテム縦軸 中央配置*/
/*アイテム縦軸 後尾配置*/
/*最初と最後のアイテムは端に残りは等間隔*/
/*全てのアイテムは等間隔*/
/*上から下へ垂直方向*/
/*アイテム横軸 右から配置*/
/*横一行に配置*/
/*横複数行に配置*/
/*角丸*/
/*矢印 135が下、-45が上向き、45が右*/
/*--------------------------------------------------------------------------
 CSS Reset
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
html, body, div, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, hr, table, tr, th, td, tbody, tfoot, thead, img, iframe, span, object, pre, blockquote, abbr, a, address, cite, code, del, dfn, em, sup, sub, ins, kbd, q, samp, small, var, b, i, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button, input {
  margin: 0;
  padding: 0;
  outline: 0;
  vertical-align: baseline;
  border: none;
  /*font: inherit;*/
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  list-style: none; }

ul[role="list"], ol[role="list"] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

a {
  text-decoration: none; }

img, picture {
  max-width: 100%;
  /*display:block;*/ }

input, button, textarea, select {
  font: inherit; }

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

/*--------------------------------------------------------------------------
 common
---------------------------------------------------------------------------*/
html {
  width: 100%;
  height: 100%; }

body {
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: #FFF;
  font-feature-settings: "palt";
  line-height: 1.9;
  font-weight: 500;
  color: #131313;
  letter-spacing: 0.1em;
  height: 100%; }

body, input[type="button"], input[type="text"], input[type="submit"], select {
  font-family: 'Segoe UI', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

/* IE8-11 */
@media screen\0  {
  body, input[type="button"], input[type="text"], input[type="submit"], select {
    font-family: 'Segoe UI', Meiryo UI, Meiryo UI, Meiryo, "メイリオ", sans-serif; } }
img, video {
  max-width: 100%;
  vertical-align: middle;
  height: auto; }

video {
  cursor: pointer; }

sub {
  vertical-align: baseline;
  line-height: 0;
  font: inherit;
  font-size: 70%; }

sup {
  vertical-align: super;
  padding-top: 0.2em;
  line-height: 0;
  font: inherit;
  font-size: 70%; }

hr, hr.line, hr.line-dot {
  clear: both;
  margin: 3em 0 1em 0;
  height: 1px;
  border-top: 1px solid transparent;
  background: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important; }

hr.line {
  margin: 1em 0 1em 0;
  border-top: 1px solid #c1c1c1; }

hr.line-dot {
  margin: 1em 0 1em 0;
  border-top: 1px dotted #cccccc; }

input[type="button"], input[type="text"], input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0; }

@media all and (min-width: 1225px) {
  .onlyPc-txtC {
    text-align: center; } }
@media all and (min-width: 769px) {
  .onlySpTb {
    display: none; }

  .onlySp {
    display: none; } }
@media all and (max-width: 768px) {
  .onlySpTb {
    display: block; }

  .onlySp {
    display: none; } }
@media all and (max-width: 415px) {
  .onlySpTb {
    display: block; }

  .onlySp {
    display: block; } }
.error-message {
  color: #df0000;
  margin-bottom: 20px; }

/*--------------------------------------------------------------------------
  contents
---------------------------------------------------------------------------*/
body.is-fixed {
  overflow: hidden; }

#wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }

article {
  flex: 1;
  display: flex;
  flex-direction: column; }

/*--------------------------------------------------------------------------
  window size
---------------------------------------------------------------------------*/
._inner {
  width: 1225px !important;
  margin: 0 auto;
  /*padding: 0 10px 0 5px;*/ }

@media all and (max-width: 1324px) {
  ._inner {
    width: calc(100% - 60px) !important; } }
@media all and (max-width: 1224px) {
  ._inner {
    width: 100% !important;
    padding: 0; }

  ._innerph {
    padding: 0 5px; } }
/*----------------------------------------------------------------------------
    header (header.scss)
-----------------------------------------------------------------------------*/
header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
  width: 100%;
  display: block; }
  header .header {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

@media all and (min-width: 1225px) {
  .header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    padding: 0 15px 0 15px; }

  .menuBtn {
    display: none; }

  .header {
    position: relative; }
    .header #logo img {
      width: auto;
      height: 40px; }
    .header #logo-group {
      position: absolute;
      right: 15px;
      top: 15px; }
      .header #logo-group img {
        width: 70px;
        height: auto; }
    .header nav {
      display: -webkit-flex;
      display: flex;
      padding-right: 90px;
      /*20+70*/
      align-items: flex-end; }
    .header nav > ul {
      display: -webkit-flex;
      display: flex;
      margin-left: 30px;
      justify-content: center; }
    .header nav > ul > li {
      height: 70px;
      line-height: 1.3; }
    .header nav > ul > li > a {
      display: flex;
      align-items: center;
      height: 100%;
      position: relative;
      color: #000;
      font-weight: 500;
      padding: 0 0 3px 0;
      height: 70px;
      cursor: pointer; }
    .header a.window {
      background: url("../img/ico/ico-windowPoint.svg") right 6px no-repeat; }
    .header nav > ul > li:hover > a {
      color: #005396; }
    .header nav > ul#gNav > li {
      margin-left: 30px; }
    .header nav > #gNav > li > a::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      content: "";
      background: #005396;
      height: 1px;
      margin: auto;
      transform: scale(0, 1);
      transform-origin: center center;
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
    .header nav > #gNav > li:hover > a::after {
      transform: scale(1, 1); }
    .header #gNavBtns #download a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #005396;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1;
      text-decoration: none;
      width: 90px;
      height: 70px;
      padding: 8px 0 8px 0;
      transition: .2s ease-in-out;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      background: #f2f9ff; }
      .header #gNavBtns #download a:before {
        display: block;
        content: '';
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 2.3rem;
        margin-bottom: 8px;
        background-image: url("/assets/img/nav/ico-dl-b.svg");
        width: 3.07rem; }
      .header #gNavBtns #download a:hover {
        background: #138dba;
        color: #fff; }
        .header #gNavBtns #download a:hover:before {
          background-image: url("/assets/img/nav/ico-dl-w.svg"); }
    .header #gNavBtns #office a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #005396;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1;
      text-decoration: none;
      width: 90px;
      height: 70px;
      padding: 10px 0 10px 0;
      transition: .2s ease-in-out;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      background: #dcf0ff; }
      .header #gNavBtns #office a:before {
        display: block;
        content: '';
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 20px;
        margin-bottom: 15px;
        background-image: url("/assets/img/nav/ico-office-b.svg");
        width: 3.07rem; }
      .header #gNavBtns #office a:hover {
        background: #138dba;
        color: #fff; }
        .header #gNavBtns #office a:hover:before {
          background-image: url("/assets/img/nav/ico-office-w.svg"); }
    .header #gNavBtns #contact a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1;
      text-decoration: none;
      width: 90px;
      height: 70px;
      padding: 10px 0 10px 0;
      transition: .2s ease-in-out;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      background: #005396; }
      .header #gNavBtns #contact a:before {
        display: block;
        content: '';
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 22px;
        margin-bottom: 15px;
        background-image: url(/assets/img/nav/ico-contact-w.svg);
        width: 3.07rem; }
      .header #gNavBtns #contact a:hover {
        background: #138dba; }

  #services nav > #gNav > li:nth-child(1) > a,
  #corporate nav > #gNav > li:nth-child(2) > a,
  #sustainability nav > #gNav > li:nth-child(3) > a,
  #recruit nav > #gNav > li:nth-child(4) > a,
  #contact nav > #gNav > li:nth-child(5) > a {
    color: #005396; }

  #services nav > #gNav > li:nth-child(1) > a::after,
  #corporate nav > #gNav > li:nth-child(2) > a::after,
  #sustainability nav > #gNav > li:nth-child(3) > a::after,
  #recruit nav > #gNav > li:nth-child(4) > a::after,
  #contact nav > #gNav > li:nth-child(5) > a::after {
    position: absolute;
    /*top: -35px;*/
    left: 0;
    right: 0;
    bottom: 20px;
    content: "";
    background: #005396;
    height: 1px;
    margin: auto;
    transform: scale(1, 1); }

  /*--gNavLow---*/
  nav > ul#gNav li.gNavLowWrap {
    position: relative; }
    nav > ul#gNav li.gNavLowWrap .gNavLow {
      width: 100%;
      position: fixed;
      left: 0;
      top: 70px;
      visibility: hidden;
      opacity: 0;
      z-index: 1;
      background: #f1f3f4;
      -webkit-transition: 0.4s ease-in-out;
      transition: 0.4s ease-in-out; }
      nav > ul#gNav li.gNavLowWrap .gNavLow ul {
        display: none;
        width: 1140px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto; }
        nav > ul#gNav li.gNavLowWrap .gNavLow ul li {
          margin: 0 14px 0 14px;
          border-bottom: 1px solid #005396;
          font-size: 15px;
          width: calc(25% - 28px); }
          nav > ul#gNav li.gNavLowWrap .gNavLow ul li a {
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #005396;
            background: #f1f3f4;
            font-weight: 500; }
          nav > ul#gNav li.gNavLowWrap .gNavLow ul li a:hover {
            background: rgba(242, 249, 255, 0.9);
            color: #138dba; }
        nav > ul#gNav li.gNavLowWrap .gNavLow ul li#port, nav > ul#gNav li.gNavLowWrap .gNavLow ul li#logistics {
          border-bottom: none;
          width: 45%; }
        nav > ul#gNav li.gNavLowWrap .gNavLow ul li#port > a, nav > ul#gNav li.gNavLowWrap .gNavLow ul li#logistics > a {
          border-bottom: 1px solid #005396; }
        nav > ul#gNav li.gNavLowWrap .gNavLow ul li:last-child a {
          border-bottom: none; }
    nav > ul#gNav li.gNavLowWrap .gNavLow2 {
      display: flex; }
      nav > ul#gNav li.gNavLowWrap .gNavLow2 ul {
        display: flex; }
        nav > ul#gNav li.gNavLowWrap .gNavLow2 ul li {
          width: calc(25% - 16px);
          margin: 0;
          font-size: 14px; }
          nav > ul#gNav li.gNavLowWrap .gNavLow2 ul li a {
            padding-left: 23px;
            height: 35px;
            position: relative; }
    nav > ul#gNav li.gNavLowWrap .gNavLow > ul > li:first-child {
      /*midashi*/
      width: 100% !important;
      height: 53px;
      font-weight: 700;
      font-size: 26px;
      border-bottom: none;
      margin-bottom: 20px; }
      nav > ul#gNav li.gNavLowWrap .gNavLow > ul > li:first-child a {
        width: 250px;
        height: 53px; }
        nav > ul#gNav li.gNavLowWrap .gNavLow > ul > li:first-child a:after {
          display: none; }
    nav > ul#gNav li.gNavLowWrap .gNavLow > ul > li > a {
      position: relative;
      width: 100%;
      padding: 5px 18px 5px 4px;
      height: 53px; }
      nav > ul#gNav li.gNavLowWrap .gNavLow > ul > li > a:after {
        position: absolute;
        top: 40%;
        bottom: auto;
        right: 6px;
        display: block;
        width: 6px;
        height: 6px;
        margin: auto;
        content: "";
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-top: 1px solid #005396;
        border-right: 1px solid #005396; }
    nav > ul#gNav li.gNavLowWrap .gNavLowTtl {
      display: none; }

  nav > ul#gNav li.gNavLowWrap:hover .gNavLow {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    display: flex;
    justify-content: center;
    padding: 40px 0 60px 0; }
    nav > ul#gNav li.gNavLowWrap:hover .gNavLow ul {
      display: block;
      display: flex;
      flex-wrap: wrap; }
      nav > ul#gNav li.gNavLowWrap:hover .gNavLow ul li {
        margin: 0 14px 0 14px; }
  nav > ul#gNav li.gNavLowWrap:hover .gNavLow2 ul {
    display: block;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px; }
    nav > ul#gNav li.gNavLowWrap:hover .gNavLow2 ul li {
      margin: 0 8px 0 8px;
      border-bottom: none; }
      nav > ul#gNav li.gNavLowWrap:hover .gNavLow2 ul li a {
        padding-left: 23px;
        height: 35px;
        position: relative; }
        nav > ul#gNav li.gNavLowWrap:hover .gNavLow2 ul li a:after {
          position: absolute;
          top: 40%;
          right: auto;
          bottom: auto;
          left: 6px;
          display: block;
          width: 6px;
          height: 6px;
          margin: auto;
          content: "";
          -ms-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #8b8b8b;
          border-right: 1px solid #8b8b8b; }

  nav > ul#gNav #gNavLowSer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    nav > ul#gNav #gNavLowSer li .gNavLow2 ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      nav > ul#gNav #gNavLowSer li .gNavLow2 ul li {
        width: calc(50% - 4px);
        margin: 0;
        font-size: 14px; }

  .pcNone {
    display: none; }

  /*スクロール時*/
  .headerFixBefore {
    position: fixed;
    top: -100px;
    display: none;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out; }

  .headerFixBlock {
    display: block; }

  .headerFix {
    top: 0; }

  .headerFixBefore {
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(56, 56, 56, 0.4); }
    .headerFixBefore img.logo-w {
      opacity: 0; }
    .headerFixBefore .header {
      height: 70px; }
      .headerFixBefore .header #logo {
        width: auto;
        height: 40px; }
        .headerFixBefore .header #logo img {
          width: auto;
          height: 40px; }
        .headerFixBefore .header #logo a {
          display: block;
          width: auto;
          height: 40px; }
      .headerFixBefore .header a.window {
        background: url("../img/ico/ico-windowPoint.svg") right 6px no-repeat; }
      .headerFixBefore .header nav > ul > li > a {
        color: #000; }
      .headerFixBefore .header nav > ul > li:hover > a {
        color: #00a0dc; }
      .headerFixBefore .header nav > ul#gNav li.gNavLowWrap .gNavLow {
        top: 70px; }
      .headerFixBefore .header nav > ul#gNav li.gNavLowWrap::after {
        border-top: 2px solid #00a0dc;
        border-right: 2px solid #00a0dc; }
      .headerFixBefore .header nav > ul#gNav li:hover.gNavLowWrap::after {
        border-top: 2px solid #00a0dc;
        border-right: 2px solid #00a0dc; } }
@media all and (max-width: 1280px) {
  header .header nav > ul > li > a {
    font-size: 15px; } }
/*ハンバーガーメニュー*/
@media all and (max-width: 1224px) {
  .header {
    height: 70px; }
    .header #logo {
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-left: 10px;
      margin-top: 0;
      height: 70px; }
      .header #logo img {
        width: auto;
        height: 40px; }
    .header .menuBtn {
      margin-right: 0;
      margin-top: 5px;
      width: 56px;
      height: 56px;
      cursor: pointer;
      position: relative; }
      .header .menuBtn .menuLines {
        position: absolute;
        background: #00a0dc;
        top: 27px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 26px;
        height: 2px;
        -webkit-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out; }
      .header .menuBtn .menuLines::before, .header .menuBtn .menuLines::after {
        position: absolute;
        left: 0;
        width: 26px;
        height: 2px;
        background: #00a0dc;
        content: "";
        -webkit-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out; }
      .header .menuBtn .menuLines::before {
        top: 8px; }
      .header .menuBtn .menuLines::after {
        top: -8px; }
    .header .menuBtnActive .menuLines {
      background: none; }
    .header .menuBtnActive .menuLines::before {
      -webkit-transform: translateY(12px) rotate(-315deg);
      transform: translateY(12px) rotate(-315deg);
      top: -13px; }
    .header .menuBtnActive .menuLines::after {
      -webkit-transform: translateY(-12px) rotate(315deg);
      transform: translateY(-12px) rotate(315deg);
      top: 11px; }
    .header #logo-group {
      display: none; }
    .header nav {
      /*display: none; noneにするとふんわり開くが解除される*/
      position: absolute;
      left: 0;
      top: 70px;
      width: 100%;
      height: calc(100vh - 70px);
      overflow-y: auto;
      visibility: hidden;
      opacity: 0;
      /*@include txtHover(0.3s);*/
      /*SP　gNavLow*/ }
      .header nav ul#gNav {
        border-top: 1px solid #005396; }
        .header nav ul#gNav li a {
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 100%;
          height: 55px;
          padding: 5px 10px;
          color: #005396;
          border-bottom: 1px solid #005396;
          position: relative;
          font-weight: 500; }
        .header nav ul#gNav li.gNavLowWrap a.gNavLowTtl {
          padding-right: 65px;
          position: relative; }
        .header nav ul#gNav li.gNavLowWrap a.gNavLowTtl::before, .header nav ul#gNav li.gNavLowWrap a.gNavLowTtl::after {
          position: absolute;
          content: "";
          width: 18px;
          height: 2px;
          top: 26px;
          right: 20px;
          background-color: #005396;
          -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out; }
        .header nav ul#gNav li.gNavLowWrap a.gNavLowTtl::before {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }
        .header nav ul#gNav li.gNavLowWrap a.gNavLowTtlOpen {
          border-bottom: 1px solid #ccc;
          transition: .2s ease-in-out; }
          .header nav ul#gNav li.gNavLowWrap a.gNavLowTtlOpen::before {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
          .header nav ul#gNav li.gNavLowWrap a.gNavLowTtlOpen::after {
            background: none; }
        .header nav ul#gNav li.gNavLowWrap .gNavLow {
          display: none; }
        .header nav ul#gNav li.gNavLowWrap .gNavLow.gNavLowActive {
          display: block; }
        .header nav ul#gNav li.gNavLowWrap .phNone {
          display: none; }
      .header nav ul#gNav .gNavLow > ul > li:first-child a {
        /*midashi*/ }
        .header nav ul#gNav .gNavLow > ul > li:first-child a:after {
          content: "TOP";
          padding-left: 5px; }
      .header nav ul#gNav .gNavLow ul li a {
        height: 50px;
        background: #fff;
        color: #005396;
        border-bottom: 1px solid #ccc;
        padding: 5px 5px 5px 25px;
        font-size: 14px; }
      .header nav ul#gNav .gNavLow ul li:last-child a {
        border-bottom: 1px solid #005396; }
      .header nav ul#gNav .gNavLow ul li#port {
        padding-bottom: 10px;
        background: #fff; }
        .header nav ul#gNav .gNavLow ul li#port a {
          border-bottom: 1px solid #fff; }
      .header nav ul#gNav .gNavLow ul li#logistics {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #005396;
        padding-bottom: 10px;
        background: #fff; }
        .header nav ul#gNav .gNavLow ul li#logistics a {
          border-bottom: 1px solid #fff; }
      .header nav ul#gNav .gNavLow2 ul li {
        position: relative; }
        .header nav ul#gNav .gNavLow2 ul li a {
          height: 30px;
          border-bottom: none !important;
          padding-left: 40px; }
        .header nav ul#gNav .gNavLow2 ul li:after {
          position: absolute;
          top: 40%;
          right: auto;
          bottom: auto;
          left: 25px;
          display: block;
          width: 6px;
          height: 6px;
          margin: auto;
          content: "";
          -ms-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #4d4d4d;
          border-right: 1px solid #4d4d4d; }

  /*ハンバーガーメニューアクティブ*/
  header.headerActive .header {
    width: 100%;
    height: 100vh;
    background: #f1f3f4;
    transition: all 0.6s; }
    header.headerActive .header .nav-content nav {
      display: block;
      visibility: visible;
      opacity: 1; }
      header.headerActive .header .nav-content nav #logo-group {
        display: block;
        width: 90px;
        height: auto;
        margin: 25px auto 0 auto; }
    header.headerActive .header .window {
      background: none !important; }
    header.headerActive .header #gNavBtns {
      display: flex;
      margin: 25px auto;
      justify-content: center;
      width: calc(100% - 50px);
      max-width: 500px; }
      header.headerActive .header #gNavBtns #download {
        width: 33%; }
        header.headerActive .header #gNavBtns #download a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #005396;
          font-size: 12px;
          letter-spacing: 0;
          line-height: 1;
          text-decoration: none;
          height: 70px;
          padding: 8px 0 8px 0;
          transition: .2s ease-in-out;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          background: #f2f9ff;
          border: 1px solid #005396; }
          header.headerActive .header #gNavBtns #download a:before {
            display: block;
            content: '';
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
            height: 2.3rem;
            margin-bottom: 8px;
            background-image: url(/assets/img/nav/ico-dl-b.svg);
            width: 3.07rem; }
          header.headerActive .header #gNavBtns #download a:hover {
            background: #0daae3;
            color: #fff; }
            header.headerActive .header #gNavBtns #download a:hover:before {
              background-image: url(/assets/img/nav/ico-dl-w.svg); }
      header.headerActive .header #gNavBtns #office {
        width: 33%; }
        header.headerActive .header #gNavBtns #office a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #005396;
          font-size: 12px;
          letter-spacing: 0;
          line-height: 1;
          text-decoration: none;
          height: 70px;
          padding: 10px 0 10px 0;
          transition: .2s ease-in-out;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          background: #dcf0ff;
          border-top: 1px solid #005396;
          border-bottom: 1px solid #005396; }
          header.headerActive .header #gNavBtns #office a:before {
            display: block;
            content: '';
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
            height: 20px;
            margin-bottom: 15px;
            background-image: url(/assets/img/nav/ico-office-b.svg);
            width: 3.07rem; }
          header.headerActive .header #gNavBtns #office a:hover {
            background: #0daae3;
            color: #fff; }
            header.headerActive .header #gNavBtns #office a:hover:before {
              background-image: url("/assets/img/nav/ico-office-w.svg"); }
      header.headerActive .header #gNavBtns #contact {
        width: 33%; }
        header.headerActive .header #gNavBtns #contact a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 12px;
          letter-spacing: 0;
          line-height: 1;
          text-decoration: none;
          height: 70px;
          padding: 10px 0 10px 0;
          transition: .2s ease-in-out;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          background: #005396;
          border: 1px solid #005396; }
          header.headerActive .header #gNavBtns #contact a:before {
            display: block;
            content: '';
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
            height: 22px;
            margin-bottom: 15px;
            background-image: url(/assets/img/nav/ico-contact-w.svg);
            width: 3.07rem; }
          header.headerActive .header #gNavBtns #contact a:hover {
            background: #0daae3;
            color: #fff; }

  /*スクロール時*/
  .headerFixBefore {
    position: fixed;
    top: -70px;
    display: none;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out; }

  .headerFixBlock {
    display: block; }

  .headerFix {
    top: 0; }

  .headerFixBefore .header {
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(56, 56, 56, 0.6); }
    .headerFixBefore .header img.logo-w {
      opacity: 0; }
    .headerFixBefore .header #logo a {
      display: block; }
    .headerFixBefore .header #logo-group {
      display: none; }
    .headerFixBefore .header .menuBtn .menuLines,
    .headerFixBefore .header .menuBtn .menuLines::before,
    .headerFixBefore .header .menuBtn .menuLines::after {
      background: #00a0dc; }
    .headerFixBefore .header .menuBtnActive .menuLines {
      background: none; }
    .headerFixBefore .header .menuBtnActive .menuLines::before {
      background: #00a0dc; }
    .headerFixBefore .header .menuBtnActive .menuLines::after {
      background: #00a0dc; } }
@media all and (max-width: 415px) {
  .header {
    height: 70px; }

  header.headerActive .header {
    width: 100%;
    height: 100vh;
    background: #f1f3f4;
    transition: all 0.6s; }
    header.headerActive .header nav {
      display: block;
      visibility: visible;
      opacity: 1; }
    header.headerActive .header .window {
      background: none !important; }

  .headerFixBefore .header img.logo-w {
    opacity: 0; }

  .header #logo a,
  .headerFixBefore .header #logo a {
    display: block; } }
header.headerActive .header #logo a {
  display: block; }
header.headerActive .header img.logo-w {
  opacity: 1; }
header.headerActive .header img.logo-b {
  opacity: 0; }

/**背景位置とサイズ******************************/
/**PCmin-width1225**/
/**PHmax-width1224**/
/**PHmax-width415**/
/*アイテム横軸 中央よせ*/
/*アイテム横軸 左側よせてに配置*/
/*アイテム横軸 右側よせてに配置（右から配置ではないので注意）*/
/*アイテム縦軸 中央配置*/
/*アイテム縦軸 後尾配置*/
/*最初と最後のアイテムは端に残りは等間隔*/
/*全てのアイテムは等間隔*/
/*上から下へ垂直方向*/
/*アイテム横軸 右から配置*/
/*横一行に配置*/
/*横複数行に配置*/
/*角丸*/
/*矢印 135が下、-45が上向き、45が右*/
footer {
  width: 100%;
  height: 76px;
  background: #333333;
  color: #FFF; }

.footer a {
  color: #FFF; }
.footer .addNav address span {
  display: block; }
.footer .addNav address .cName {
  font-weight: bold; }
.footer .addNav address .cAdd {
  margin: 10px 0;
  font-size: 90%;
  line-height: 1.5; }
.footer .addNav .fNavOthers ul li a {
  position: relative;
  padding-left: 18px; }
.footer .addNav .fNavOthers ul li a::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  width: 8px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5); }
.footer .fNavWrap .fNavLow {
  font-size: 85%; }
  .footer .fNavWrap .fNavLow ul li a {
    position: relative;
    padding-left: 18px; }
  .footer .fNavWrap .fNavLow ul li a::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 8px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5); }
.footer .fNavOthers {
  margin-left: 50px; }
  .footer .fNavOthers ul {
    display: flex;
    line-height: 1; }
    .footer .fNavOthers ul li + li {
      padding-left: 12px;
      margin-left: 10px;
      border-left: 1px solid #005396; }
    .footer .fNavOthers ul li a {
      font-size: 13px; }

#copyright {
  display: block;
  font-size: 70%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  padding-right: 100px; }

@media all and (min-width: 1225px) {
  .footer {
    height: 76px;
    padding: 30px 0 0 0;
    display: flex;
    justify-content: space-between;
    display: -webkit-flex;
    display: flex; }
    .footer a:hover {
      color: #138dba; }
    .footer .addNav {
      width: 450px; }
      .footer .addNav .fNavOthers {
        margin-top: 85px; }
        .footer .addNav .fNavOthers ul li {
          line-height: 2; }
    .footer .fNavWrap {
      width: calc(100% - 450px); }
      .footer .fNavWrap .fNav > li {
        margin-bottom: 40px; }
      .footer .fNavWrap .fNav > li > a {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding-bottom: 20px;
        margin-bottom: 20px;
        /*color: $colorLink;*/ }
      .footer .fNavWrap .fNavLow ul {
        display: -webkit-flex;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .footer .fNavWrap .fNavLow ul li {
          width: 50%;
          padding-right: 10px;
          line-height: 1.5; }
        .footer .fNavWrap .fNavLow ul li:first-child {
          display: none; }
      .footer .fNavWrap .fNav > li > a.fNavLowTtl {
        display: none; }

  .fBnr {
    width: 450px;
    position: relative; }
    .fBnr ul {
      display: -webkit-flex;
      display: flex;
      position: absolute;
      left: 0;
      bottom: 130px; }
      .fBnr ul li {
        width: 160px;
        margin-right: 10px; }
        .fBnr ul li img {
          width: 100%; } }
@media all and (max-width: 1224px) {
  footer {
    padding: 1em 0 1em 0;
    background-position: left bottom -100px, right -350px top, left top;
    height: auto; }

  .footer .fNavOthers {
    margin: 0 0 15px 15px;
    font-size: 85%; }
    .footer .fNavOthers ul {
      flex-direction: column; }
      .footer .fNavOthers ul li {
        line-height: 2; }
      .footer .fNavOthers ul li + li {
        padding-left: 0;
        margin-left: 0;
        border-left: none; }
      .footer .fNavOthers ul li a {
        position: relative;
        padding-left: 18px; }
      .footer .fNavOthers ul li a::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        content: "";
        width: 8px;
        height: 1px;
        background-color: #138dba; }
  .footer .fNavWrap {
    margin-bottom: 30px; }
    .footer .fNavWrap ul.fNav {
      border-top: 1px solid rgba(255, 255, 255, 0.4); }
      .footer .fNavWrap ul.fNav li a {
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 55px;
        padding: 5px;
        color: #FFF;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
      .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtl {
        padding-right: 65px;
        position: relative; }
      .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtl::before, .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtl::after {
        position: absolute;
        content: "";
        width: 18px;
        height: 2px;
        top: 26px;
        right: 24px;
        background-color: #FFF;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out; }
      .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtl::before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }
      .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtlOpen::before {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); }
      .footer .fNavWrap ul.fNav li.fNavLowWrap a.fNavLowTtlOpen::after {
        background: none; }
      .footer .fNavWrap ul.fNav li.fNavLowWrap .fNavLow {
        display: none; }
      .footer .fNavWrap ul.fNav li.fNavLowWrap .fNavLow.fNavLowActive {
        display: block; }
      .footer .fNavWrap ul.fNav li.fNavLowWrap .phNone {
        display: none; }
    .footer .fNavWrap .fNavLow ul li a {
      height: 50px;
      padding-left: 23px;
      padding-right: 5px;
      background: rgba(94, 129, 219, 0.3);
      color: #FFF; }
    .footer .fNavWrap .fNavLow ul li a::before {
      left: 5px;
      top: 0;
      bottom: 0;
      margin: auto; }

  .fBnr {
    margin-bottom: 30px; }
    .fBnr ul {
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .fBnr ul li {
        width: 40%;
        max-width: 160px;
        margin-right: 10px; }
        .fBnr ul li img {
          width: 100%; }

  #copyright {
    text-align: left;
    letter-spacing: 0;
    padding-left: 15px; } }
/*--------------------------------------------------------------------------
  pagetop
---------------------------------------------------------------------------*/
#pagetop {
  position: fixed;
  z-index: 1000;
  font-size: 0; }
  #pagetop a {
    display: block;
    background: #00a0dc;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    position: relative; }
  #pagetop a::before {
    position: absolute;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    /*position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;*/
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    /*border-top: 2px solid #000;
    border-right: 2px solid #000;*/
    content: "";
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 14px;
    height: 14px; }
  #pagetop a:hover {
    background: #005396; }

@media all and (min-width: 1225px) {
  #pagetop {
    bottom: 0;
    right: 0; }
    #pagetop a {
      width: 76px;
      height: 76px; } }
@media all and (max-width: 1224px) {
  #pagetop {
    bottom: 0;
    right: 0; }
    #pagetop a {
      width: 50px;
      height: 50px; } }
/**背景位置とサイズ******************************/
/**PCmin-width1225**/
/**PHmax-width1224**/
/**PHmax-width415**/
/*アイテム横軸 中央よせ*/
/*アイテム横軸 左側よせてに配置*/
/*アイテム横軸 右側よせてに配置（右から配置ではないので注意）*/
/*アイテム縦軸 中央配置*/
/*アイテム縦軸 後尾配置*/
/*最初と最後のアイテムは端に残りは等間隔*/
/*全てのアイテムは等間隔*/
/*上から下へ垂直方向*/
/*アイテム横軸 右から配置*/
/*横一行に配置*/
/*横複数行に配置*/
/*角丸*/
/*矢印 135が下、-45が上向き、45が右*/
/*----------------------------------------------------------------------------
    mainTop
-----------------------------------------------------------------------------*/
.header {
  background: #fff; }
  .header a.window {
    background: url(../img/ico/ico-windowPoint.svg) right 6px no-repeat; }
  .header nav > ul#langNav li.active a:after {
    background-color: #138dba; }
  .header .menuBtn .menuLines,
  .header .menuBtn .menuLines::before,
  .header .menuBtn .menuLines::after {
    background: #00a0dc; }

.headerFixBefore .header #logo a {
  display: block; }
.headerFixBefore .header #logo-group {
  display: block;
  background-size: cover; }

div.mainTop {
  position: relative;
  /*left: 0;
  top: 0;*/
  z-index: 1;
  width: 100%;
  height: 100vh;
  /*height: calc(100vh - 50px);*/
  min-height: 600px;
  overflow: hidden; }
  div.mainTop img {
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
    touch-callout: none; }
  div.mainTop .mainBg {
    width: 100%;
    height: 100vh;
    /*height: calc(100vh - 50px);*/
    min-height: 600px; }
  div.mainTop .mainBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-size: 14px;
    width: 100%;
    height: 100%;
    z-index: 2; }
  div.mainTop #slider01 li {
    height: 100vh;
    min-height: 600px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    overflow: hidden; }
  div.mainTop #slider01 li.bg-mv1 {
    background: url("/assets/img/top/slide/bg-mv1-pc.jpg"); }
  div.mainTop #slider01 li.bg-mv2 {
    background: url("/assets/img/top/slide/bg-mv2-pc.jpg"); }
  div.mainTop #slider01 li.bg-mv3 {
    background: url("/assets/img/top/slide/bg-mv3-pc.jpg"); }
  div.mainTop .mainTxt {
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    color: #FFF;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 120px;
    z-index: 1000;
    pointer-events: none;
    font-weight: 700 !important; }
  div.mainTop dt {
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding-bottom: 20px;
    position: relative;
    letter-spacing: 0; }
  div.mainTop dt::after {
    /*position: absolute;
    bottom: 0;
    content: "";
    width: 2em;
    height: 8px;
    background-color: $colorPoint;*/ }
  div.mainTop dd {
    padding-top: 0;
    line-height: 1.6;
    font-size: 3.4vw;
    /*koko*/
    letter-spacing: 0.2em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }

@keyframes zoomUp {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.3); } }
.add-animation {
  animation: zoomUp 10s linear 0s normal both; }

@media all and (min-width: 1225px) {
  .mainTop dt {
    font-size: 8vw;
    font-weight: 700; }
  .mainTop dt::after {
    left: 2.2em; }
  .mainTop dd {
    width: 30em;
    font-weight: 700; } }
@media all and (max-width: 1224px) {
  .header .menuBtnActive .menuLines {
    background: none; }

  .header .menuBtnActive .menuLines::after,
  .header .menuBtnActive .menuLines::before {
    background: #138dba; }

  .headerFixBefore .header #logo-group {
    display: none; }

  div.mainTop .mainTxt {
    padding-left: 15px;
    top: 45%; }
  div.mainTop dt {
    width: 90%;
    text-align: center;
    /*margin: -165px auto 0 auto;*/
    margin: -45px auto 0 auto;
    font-size: 8vw;
    letter-spacing: 0.01em;
    line-height: 1.2; }
  div.mainTop dd {
    width: 90%;
    margin: 0 auto;
    font-size: 7.3vw;
    letter-spacing: 0.1em; } }
@media all and (max-width: 810px) {
  .header #logo img {
    width: auto;
    height: 40px; }

  div.mainTop .mainTxt {
    padding-left: 15px;
    top: 45%; }
  div.mainTop dt {
    width: 90%;
    text-align: center;
    margin: -45px auto 0 auto;
    font-size: 14vw;
    letter-spacing: 0.01em;
    line-height: 1.2; }
  div.mainTop dd {
    width: 90%;
    margin: 0 auto;
    font-size: 7.4vw;
    letter-spacing: 0.1em; } }
@media all and (max-width: 415px) {
  div.mainTop {
    /*height: calc(100vh - 95px);*/
    height: 100vh; }
    div.mainTop .mainBg {
      height: 100vh; }
    div.mainTop .mainTxt {
      padding-left: 15px;
      top: 45%; }
    div.mainTop dt {
      width: 90%;
      text-align: center;
      margin: -45px auto 0 auto;
      font-size: 16vw;
      letter-spacing: 0.01em;
      line-height: 1.2;
      padding-bottom: 0;
      line-height: 1.2; }
    div.mainTop dd {
      width: 90%;
      margin: 0 auto;
      font-size: 7.5vw;
      letter-spacing: 0.05em; } }
/*----------------------------------------------------------------------------
    h2ttl
-----------------------------------------------------------------------------*/
.h2ttl h2 {
  position: relative; }
.h2ttl h2::before {
  /*position: absolute;
  top:0;
  content: "";
  height: 5px;
  background-color: $colorPoint;*/ }

@media all and (min-width: 1225px) {
  .h2ttl {
    width: 100%;
    padding: 60px 0; }
    .h2ttl h2 {
      padding-top: 30px; }
    .h2ttl h2::before {
      width: 50px; }

  .h2Wrap {
    padding: 60px 0; } }
/*-------------------
　SP
-------------------*/
@media all and (max-width: 1224px) {
  .h2ttl {
    padding: 30px 5px; }
    .h2ttl h2 {
      padding-top: 0; }
    .h2ttl h2::before {
      width: 30px; } }
/*----------------------------------------------------------------------------
    Information
-----------------------------------------------------------------------------*/
#oshirase {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  #oshirase .h2ttl {
    width: 25%;
    min-width: 360px;
    padding: 15px 40px 40px 80px;
    background-color: #005396;
    color: #fff; }
    #oshirase .h2ttl h2 {
      padding-top: 40px;
      line-height: 1.0;
      margin-bottom: 20px;
      font-size: 34px;
      font-weight: 500;
      width: 320px;
      text-align: left;
      padding-bottom: 20px;
      border-bottom: 1px solid #fff; }
    #oshirase .h2ttl a {
      color: #fff;
      font-size: 13px;
      position: relative; }
      #oshirase .h2ttl a::after {
        position: absolute;
        top: 6px;
        right: auto;
        bottom: auto;
        right: -20px;
        display: block;
        width: 8px;
        height: 8px;
        margin: auto;
        content: "";
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-top: 1px solid #fff;
        border-right: 1px solid #fff; }
      #oshirase .h2ttl a:hover {
        color: #138dba; }
        #oshirase .h2ttl a:hover::after {
          border-top: 1px solid #138dba;
          border-right: 1px solid #138dba; }
  #oshirase .infolistWrap {
    width: 75%;
    max-width: 1260px;
    padding: 30px 30px 30px 50px; }
  #oshirase .infolist {
    padding-bottom: 0;
    margin-bottom: 0; }
    #oshirase .infolist ul {
      margin-bottom: 0; }
      #oshirase .infolist ul li {
        font-size: 16px; }
        #oshirase .infolist ul li a {
          padding: 12px 0px; }
          #oshirase .infolist ul li a time {
            padding-left: 10px; }
        #oshirase .infolist ul li:last-child {
          border-bottom: none; }

#nrWrap {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  #nrWrap .h2ttl {
    width: 25%;
    min-width: 360px;
    padding: 15px 40px 40px 80px;
    background-color: #676767;
    color: #fff; }
    #nrWrap .h2ttl h2 {
      width: 320px;
      text-align: left;
      padding-top: 40px;
      padding-bottom: 20px;
      line-height: 1.0;
      margin-bottom: 20px;
      font-size: 34px;
      font-weight: 500;
      border-bottom: 1px solid #fff; }
    #nrWrap .h2ttl a {
      color: #fff;
      font-size: 13px;
      position: relative; }
      #nrWrap .h2ttl a::after {
        position: absolute;
        top: 6px;
        right: auto;
        bottom: auto;
        right: -20px;
        display: block;
        width: 8px;
        height: 8px;
        margin: auto;
        content: "";
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-top: 1px solid #fff;
        border-right: 1px solid #fff; }
      #nrWrap .h2ttl a:hover {
        color: #138dba; }
        #nrWrap .h2ttl a:hover::after {
          border-top: 1px solid #138dba;
          border-right: 1px solid #138dba; }
  #nrWrap .infolistWrap {
    width: 75%;
    max-width: 1260px;
    padding: 30px 30px 30px 50px; }
  #nrWrap .infolist {
    padding-bottom: 0;
    margin-bottom: 0; }
    #nrWrap .infolist ul {
      margin-bottom: 0; }
      #nrWrap .infolist ul li {
        font-size: 16px; }
        #nrWrap .infolist ul li a {
          padding: 12px 0px; }
          #nrWrap .infolist ul li a time {
            padding-left: 10px; }
        #nrWrap .infolist ul li:last-child {
          border-bottom: none; }

@media all and (max-width: 1460px) {
  #oshirase .h2ttl {
    padding: 15px 15px 40px 15px; }
    #oshirase .h2ttl h2 {
      padding-top: 30px; }
  #oshirase .infolistWrap {
    width: calc(100% - 361px);
    max-width: calc(100% - 365px);
    padding: 30px 30px 30px 50px; }

  #nrWrap .h2ttl {
    padding: 15px 15px 40px 15px; }
    #nrWrap .h2ttl h2 {
      padding-top: 30px; }
  #nrWrap .infolistWrap {
    width: calc(100% - 361px);
    max-width: calc(100% - 365px);
    padding: 30px 30px 30px 50px; } }
@media all and (max-width: 1224px) {
  #oshiraseWrap .h2ttl {
    padding: 20px 10px 20px 10px; }
  #oshiraseWrap .infolist ul li a {
    padding-left: 0; } }
@media all and (max-width: 1024px) {
  #oshiraseWrap {
    padding: 20px 0; }
    #oshiraseWrap #oshirase {
      flex-direction: column; }
      #oshiraseWrap #oshirase .h2ttl {
        width: 100%;
        min-width: 100%;
        background: #fff;
        padding: 15px 15px 0 15px; }
        #oshiraseWrap #oshirase .h2ttl h2 {
          padding-top: 0;
          color: #005396;
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 0;
          width: auto;
          text-align: center; }
        #oshiraseWrap #oshirase .h2ttl p {
          text-align: right;
          padding-right: 20px; }
        #oshiraseWrap #oshirase .h2ttl a {
          color: #005396; }
          #oshiraseWrap #oshirase .h2ttl a:after {
            border-top: 1px solid #005396;
            border-right: 1px solid #005396; }
      #oshiraseWrap #oshirase .infolistWrap {
        width: 100%;
        max-width: 100%;
        padding: 15px; }
        #oshiraseWrap #oshirase .infolistWrap .infolist ul li a time {
          padding-left: 0;
          font-weight: normal;
          font-size: 15px;
          width: 90px; }

  #nrWrap {
    padding: 20px 0;
    flex-direction: column; }
    #nrWrap .h2ttl {
      width: 100%;
      min-width: 100%;
      background: #fff;
      padding: 15px 15px 0 15px; }
      #nrWrap .h2ttl h2 {
        padding-top: 0;
        color: #333;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
        width: auto;
        text-align: center; }
      #nrWrap .h2ttl p {
        text-align: right;
        padding-right: 20px; }
      #nrWrap .h2ttl a {
        color: #005396; }
        #nrWrap .h2ttl a:after {
          border-top: 1px solid #005396;
          border-right: 1px solid #005396; }
    #nrWrap .infolistWrap {
      width: 100%;
      max-width: 100%;
      padding: 15px; }
      #nrWrap .infolistWrap .infolist ul li a time {
        padding-left: 0;
        font-weight: normal;
        font-size: 15px;
        width: 90px; } }
@media all and (max-width: 450px) {
  #oshiraseWrap #oshirase .h2ttl {
    padding: 15px 15px 0 15px; }
    #oshiraseWrap #oshirase .h2ttl h2 {
      font-size: 20px;
      font-weight: 700; }

  #nrWrap .h2ttl {
    padding: 15px 15px 0 15px; }
    #nrWrap .h2ttl h2 {
      font-size: 20px;
      margin-bottom: 1em;
      font-weight: 700; } }
.tab, .tab-multiple {
  min-height: 1%; }

/*----------------------------------------------------------------------------
    #quickaccess
-----------------------------------------------------------------------------*/
#qaWrap {
  background: #005396;
  width: 100%;
  height: auto;
  padding: 60px 0 30px 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(0, 113, 226, 0.5) 0%, rgba(200, 96, 240, 0.3)), url("../img/top/bg-qa.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*background: url(../images/top/bg-top_linkarea.jpg) 50% 50% no-repeat;
  background-size: cover;*/ }
  #qaWrap h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 1em;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em; }
  #qaWrap ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 630px;
    height: auto;
    margin: 0 auto 30px auto; }
    #qaWrap ul li {
      width: 190px;
      height: 190px;
      background-color: #ffffff;
      border-radius: 5px;
      margin-bottom: 30px;
      border: 1px solid #00a0dc;
      transition: .2s ease-in-out; }
      #qaWrap ul li:hover {
        /*opacity: 0.8;*/
        background: #00a0dc;
        border: 1px solid #00a0dc; }
        #qaWrap ul li:hover .name {
          color: #fff; }
      #qaWrap ul li a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 5px 30px 5px;
        box-sizing: border-box;
        text-align: center;
        transition: 0.3s; }
        #qaWrap ul li a .name {
          text-decoration: none;
          letter-spacing: 0;
          font-size: 17px;
          color: #005396;
          line-height: 1.2;
          white-space: nowrap;
          font-weight: 700; }
        #qaWrap ul li a span {
          width: 48px;
          height: 48px;
          margin-top: 50px;
          background: url("/assets/img/top/qa/ico-fune-b.svg") no-repeat;
          background-size: contain; }
    #qaWrap ul li#qa-kicts a span {
      background: url("/assets/img/top/qa/ico-fune-b.svg") no-repeat; }
    #qaWrap ul li#qa-kicts a:hover span {
      background: url("/assets/img/top/qa/ico-fune-w.svg") no-repeat; }
    #qaWrap ul li#qa-oicts a span {
      background: url("/assets/img/top/qa/ico-fune-b.svg") no-repeat; }
    #qaWrap ul li#qa-oicts a:hover span {
      background: url("/assets/img/top/qa/ico-fune-w.svg") no-repeat; }
    #qaWrap ul li#qa-camera a span {
      width: 42px;
      height: 42px;
      background: url("/assets/img/top/qa/ico-camera-b.svg") no-repeat; }
    #qaWrap ul li#qa-camera a:hover span {
      background: url("/assets/img/top/qa/ico-camera-w.svg") no-repeat; }
    #qaWrap ul li#qa-order a span {
      background: url("/assets/img/top/qa/ico-truck-b.svg") no-repeat;
      width: 54px;
      height: 54px;
      margin-top: 60px; }
    #qaWrap ul li#qa-order a:hover span {
      background: url("/assets/img/top/qa/ico-truck-w.svg") no-repeat; }
    #qaWrap ul li#qa-devan a span {
      background: url("/assets/img/top/qa/ico-cal-b.svg") no-repeat;
      width: 42px;
      height: 42px; }
    #qaWrap ul li#qa-devan a:hover span {
      background: url("/assets/img/top/qa/ico-cal-w.svg") no-repeat; }
    #qaWrap ul li#qa-cafeteria a {
      padding: 0 5px 45px 5px; }
      #qaWrap ul li#qa-cafeteria a span {
        background: url("/assets/img/top/qa/ico-cafe-b.svg") no-repeat;
        width: 42px;
        height: 42px; }
      #qaWrap ul li#qa-cafeteria a:hover span {
        background: url("/assets/img/top/qa/ico-cafe-w.svg") no-repeat; }
    #qaWrap ul li#qa-download {
      width: 100%;
      height: 95px;
      font-size: 17px; }
      #qaWrap ul li#qa-download a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        line-height: 1; }
        #qaWrap ul li#qa-download a span {
          margin-top: 0;
          margin-right: 22px;
          background: url("/assets/img/top/qa/ico-dl-b.svg") no-repeat;
          width: 42px;
          height: 42px; }
        #qaWrap ul li#qa-download a:hover span {
          background: url("/assets/img/top/qa/ico-dl-w.svg") no-repeat; }

@media all and (max-width: 1024px) {
  #qaWrap {
    padding: 40px 0 10px 0; } }
@media all and (max-width: 629px) {
  #qaWrap ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    height: auto;
    margin: 0 10px 30px 10px; }
    #qaWrap ul li {
      width: calc(33% - 10px);
      height: calc(30vw - 10px);
      background-color: #ffffff;
      border-radius: 5px;
      margin-bottom: 10px;
      border: 1px solid #00a0dc;
      transition: .2s ease-in-out; }
      #qaWrap ul li a {
        padding: 0 5px 15px 5px; }
        #qaWrap ul li a span {
          width: 30px;
          height: 30px;
          margin-top: 25%; }
        #qaWrap ul li a .name {
          font-size: 3vw;
          letter-spacing: 0; }
    #qaWrap ul li#qa-camera a span {
      width: 30px;
      height: 30px; }
    #qaWrap ul li#qa-order a span {
      width: 45px;
      height: 45px;
      margin-top: 30%; }
    #qaWrap ul li#qa-devan a span {
      width: 30px;
      height: 30px; }
    #qaWrap ul li#qa-cafeteria a {
      padding: 0 5px 25px 5px; }
      #qaWrap ul li#qa-cafeteria a span {
        width: 30px;
        height: 30px; } }
@media all and (max-width: 450px) {
  #qaWrap h2 {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 700; }
  #qaWrap ul li a .name {
    font-size: 3vw;
    letter-spacing: 0; } }
@media all and (max-width: 300px) {
  #qaWrap ul li {
    width: calc(33% - 10px);
    height: calc(33vw - 10px); } }
/*----------------------------------------------------------------------------
    servicesWrap
-----------------------------------------------------------------------------*/
#servicesWrap {
  text-align: center;
  width: 100%;
  height: auto;
  padding: 60px 0 60px 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3)), url("../img/top/bg-services.jpg");
  background-repeat: no-repeat;
  background-size: cover; }
  #servicesWrap h2 {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.0;
    color: #fff;
    margin-bottom: 1em; }
  #servicesWrap .boxCol2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    height: auto; }
  #servicesWrap .boxCol2 > li {
    width: calc(50% - 40px);
    margin: 0 0 16px 0;
    height: auto;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.15); }
    #servicesWrap .boxCol2 > li a {
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 0;
      display: block;
      transition: opacity 0.2s, background 0.2s; }
      #servicesWrap .boxCol2 > li a:hover {
        opacity: 0.7; }
      #servicesWrap .boxCol2 > li a h3 {
        text-align: left;
        color: #212121;
        font-weight: 700;
        font-size: 22px;
        padding: 15px 30px 0 30px; }
      #servicesWrap .boxCol2 > li a .lead {
        text-align: left;
        color: #212121;
        font-size: 15px;
        letter-spacing: 0.1em;
        line-height: 1.4;
        padding: 0 30px 30px 30px; }
  #servicesWrap .bgGray {
    background: #f6f6f6 !important; }

@media all and (max-width: 1224px) {
  #servicesWrap .boxCol2 {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: auto;
    margin: 0 auto; }
    #servicesWrap .boxCol2 li figure img {
      width: 100%;
      height: 300px;
      object-fit: cover; } }
@media all and (max-width: 1024px) {
  #servicesWrap .boxCol2 {
    width: auto; }
    #servicesWrap .boxCol2 li {
      width: calc(50% - 20px); }
      #servicesWrap .boxCol2 li a h3 {
        padding: 15px 15px 0 15px; }
      #servicesWrap .boxCol2 li a .lead {
        padding: 0 15px 15px 15px; } }
@media all and (max-width: 768px) {
  #servicesWrap .boxCol2 {
    width: 90%;
    display: flex;
    flex-direction: column;
    height: auto; }
    #servicesWrap .boxCol2 li {
      width: 100%; } }
@media all and (max-width: 450px) {
  #servicesWrap h2 {
    font-size: 20px;
    font-weight: 700; }
  #servicesWrap .boxCol2 li figure img {
    width: 100%;
    height: 180px;
    object-fit: cover; }
  #servicesWrap .boxCol2 li a h3 {
    font-size: 18px; } }
/*----------------------------------------------------------------------------
    recruit
-----------------------------------------------------------------------------*/
#recruitWrap {
  background: url("../img/top/bg-recruit.jpg");
  background-repeat: repeat-y;
  background-size: cover; }
  #recruitWrap ._inner {
    position: relative;
    min-height: 420px; }
    #recruitWrap ._inner figure {
      z-index: 1;
      width: 660px;
      height: 360px;
      margin-bottom: 1em; }
    #recruitWrap ._inner .h2ttl {
      z-index: 2;
      width: 640px;
      height: 240px;
      padding: 40px 30px 30px 40px;
      color: #fff;
      background: #005396 url("../img/top/img-recruit2.jpg");
      box-shadow: 0px 0 8px 0 rgba(56, 56, 56, 0.2);
      display: flex;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column; }
      #recruitWrap ._inner .h2ttl h2 {
        margin-bottom: 1.125rem;
        font-size: 34px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.05em;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        padding-top: 0;
        color: #fff !important; }
      #recruitWrap ._inner .h2ttl p.lead {
        line-height: 1.8;
        letter-spacing: 0.05em;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        margin-bottom: 30px;
        color: #fff !important; }
      #recruitWrap ._inner .h2ttl .linkBtnWrap {
        display: flex;
        justify-content: flex-end;
        width: 100%; }

@media all and (min-width: 1025px) {
  #recruitWrap {
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 540px;
    padding: 60px 0; }
    #recruitWrap ._inner figure {
      position: absolute;
      top: 0;
      right: 30px;
      z-index: 1;
      width: 660px;
      height: 360px;
      margin-bottom: 1em; }
    #recruitWrap ._inner .h2ttl {
      position: absolute;
      top: 180px;
      left: 30px;
      z-index: 2; }
      #recruitWrap ._inner .h2ttl .linkBtn {
        background: #fff;
        width: 250px;
        min-height: 45px;
        padding: 10px 10px;
        border: 1px solid #138dba;
        color: #005396 !important;
        text-align: center;
        border-radius: 3px;
        font-size: 100% !important;
        font-weight: 500;
        transition: .2s ease-in-out; }
        #recruitWrap ._inner .h2ttl .linkBtn .btnArrow {
          position: relative;
          font-weight: 700;
          width: 250px; }
        #recruitWrap ._inner .h2ttl .linkBtn .btnArrow:after {
          position: absolute;
          right: 10px;
          top: calc(50% - 6px);
          content: "";
          width: 8px;
          height: 8px;
          background-size: 15px auto;
          transform: rotate(45deg);
          border-top: 2px solid #005396;
          border-right: 2px solid #005396; }
      #recruitWrap ._inner .h2ttl:hover .linkBtn {
        background: #138dba;
        border: 1px solid #138dba;
        color: #fff !important; }
        #recruitWrap ._inner .h2ttl:hover .linkBtn .btnArrow::after {
          border-top: 2px solid #fff;
          border-right: 2px solid #fff; } }
@media all and (max-width: 1024px) {
  #recruitWrap {
    padding: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    color: #fff; }
    #recruitWrap ._inner {
      min-height: 340px; }
      #recruitWrap ._inner figure {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: auto;
        width: 50vw; }
      #recruitWrap ._inner .h2ttl {
        width: 50vw;
        position: absolute;
        top: 100px;
        z-index: 2;
        height: 240px;
        padding: 15px 25px; }
        #recruitWrap ._inner .h2ttl h2 {
          text-align: left;
          font-weight: 500; }
        #recruitWrap ._inner .h2ttl .lead {
          margin-top: 1em;
          margin-bottom: 1em; }
          #recruitWrap ._inner .h2ttl .lead .phNone {
            display: none; }
      #recruitWrap ._inner .linkBtn {
        background: #fff;
        width: 250px;
        min-height: 45px;
        padding: 10px 10px;
        border: 1px solid #138dba;
        color: #005396 !important;
        text-align: center;
        border-radius: 3px;
        font-size: 100% !important;
        font-weight: 500;
        transition: .2s ease-in-out; }
        #recruitWrap ._inner .linkBtn .btnArrow {
          position: relative;
          font-weight: 700;
          width: 250px; }
        #recruitWrap ._inner .linkBtn .btnArrow:after {
          position: absolute;
          right: 10px;
          top: calc(50% - 6px);
          content: "";
          width: 8px;
          height: 8px;
          background-size: 15px auto;
          transform: rotate(45deg);
          border-top: 2px solid #005396;
          border-right: 2px solid #005396; } }
@media all and (max-width: 768px) {
  #recruitWrap {
    padding: 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    color: #fff; }
    #recruitWrap ._inner {
      min-height: 440px; }
      #recruitWrap ._inner figure {
        z-index: 1;
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0; }
        #recruitWrap ._inner figure img {
          width: 100%;
          height: 250px;
          object-fit: cover; }
      #recruitWrap ._inner .h2ttl {
        position: relative;
        margin: -160px auto 0 auto;
        z-index: 2;
        padding: 20px;
        width: 80vw;
        height: auto; }
        #recruitWrap ._inner .h2ttl .linkBtnWrap {
          justify-content: center; }
          #recruitWrap ._inner .h2ttl .linkBtnWrap h2 {
            text-align: center;
            font-weight: 500; }
        #recruitWrap ._inner .h2ttl .lead {
          margin-top: 1em;
          margin-bottom: 1em; }
          #recruitWrap ._inner .h2ttl .lead .phNone {
            display: none; } }
@media all and (max-width: 450px) {
  #recruitWrap {
    height: auto;
    padding: 0; }
    #recruitWrap ._inner figure {
      width: 100%; }
    #recruitWrap ._inner .h2ttl {
      width: calc(100% - 40px); }
      #recruitWrap ._inner .h2ttl h2 {
        font-size: 20px;
        font-weight: 700; }
      #recruitWrap ._inner .h2ttl p.lead {
        text-align: left;
        margin-bottom: 1em;
        font-size: 15px;
        line-height: 1.4; } }
/*----------------------------------------------------------------------------
    csWrap
-----------------------------------------------------------------------------*/
#csWrap {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #fff; }
  #csWrap #corporateWrap {
    width: calc(50% - 1px);
    height: 365px;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff; }
    #csWrap #corporateWrap a::after {
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url("/assets/img/top/bg-corporate.jpg") 50% 50% no-repeat;
      background-size: cover; }
    #csWrap #corporateWrap a:hover::after {
      transform: scale(1.05);
      filter: brightness(1.1);
      background: linear-gradient(135deg, rgba(54, 144, 197, 0.3), rgba(54, 144, 197, 0.1)), url("/assets/img/top/bg-corporate.jpg") 50% 50% no-repeat; }
  #csWrap #sustainabilityWrap {
    width: 50%;
    height: 365px;
    box-sizing: border-box;
    border-bottom: 1px solid #fff; }
    #csWrap #sustainabilityWrap a::after {
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url("/assets/img/top/bg-sustainability.jpg") 50% 50% no-repeat;
      background-size: cover; }
    #csWrap #sustainabilityWrap a:hover::after {
      transform: scale(1.05);
      /*transition: 15s;*/
      filter: brightness(1.05);
      background: linear-gradient(135deg, rgba(54, 250, 172, 0.3), rgba(54, 205, 172, 0.1)), url("/assets/img/top/bg-sustainability.jpg") 50% 50% no-repeat; }
  #csWrap a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 8.9%;
    padding-right: 8.9%;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    overflow: hidden; }
    #csWrap a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      -webkit-transition: 0.3s;
      transition: 0.3s; }
    #csWrap a::hover {
      opacity: 1; }
    #csWrap a .textbox {
      position: relative;
      z-index: 2; }
      #csWrap a .textbox h2 {
        margin-bottom: 1.125rem;
        font-size: 34px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.05em;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
      #csWrap a .textbox p.lead {
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
      #csWrap a .textbox::after {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background-color: #c80019;
        display: block;
        bottom: -20px;
        left: 0;
        -webkit-transition: .3s ease-out;
        transition: .3s ease-out; }

@media all and (max-width: 768px) {
  #csWrap {
    flex-direction: column; }
    #csWrap #corporateWrap {
      width: 100%;
      border-right: none; }
    #csWrap #sustainabilityWrap {
      width: 100%; } }
@media all and (max-width: 450px) {
  #csWrap #corporateWrap {
    height: 250px; }
    #csWrap #corporateWrap a .textbox h2 {
      font-size: 20px;
      font-weight: 700; }
    #csWrap #corporateWrap a .textbox p.lead {
      font-size: 15px;
      line-height: 1.4; }
  #csWrap #sustainabilityWrap {
    height: 250px; }
    #csWrap #sustainabilityWrap a .textbox h2 {
      font-size: 20px;
      font-weight: 700; }
    #csWrap #sustainabilityWrap a .textbox p.lead {
      font-size: 15px;
      line-height: 1.4; } }
/*----------------------------------------------------------------------------
    loading
-----------------------------------------------------------------------------*/
.loadingWrap {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 1002;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; }

.loading {
  width: 100%;
  height: 100vh;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

@-webkit-keyframes logoOpen {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(360px); } }
@keyframes logoOpen {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(360px); } }
.logoOpen {
  position: fixed;
  height: 150px;
  width: 350px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #FFF; }

/*-------------------
　幅800px以上
-------------------*/
@media all and (min-width: 800px) {
  .loadingWrap {
    background: url("../img/logo-black.svg") center center no-repeat #FFF;
    background-size: 350px auto; }

  .logoOpen {
    animation: logoOpen 1s ease 0s 1 forwards; } }
/*-------------------
　幅800px未満
-------------------*/
@media all and (max-width: 799px) {
  .loadingWrap {
    background: url("../img/logo-black.svg") no-repeat #FFF;
    background-position: center top 46%;
    background-size: 80% auto; }

  .logoOpen {
    width: 85%;
    animation: logoOpen 1.7s ease 0s 1 forwards; } }
/*--------------------------------------------------------------------------
 animation
---------------------------------------------------------------------------*/
.mainTop dt {
  opacity: 0;
  animation: fadeIn 1s ease 1.1s 1 forwards;
  -webkit-animation: fadeIn 1s ease 1.1s 1 forwards; }
.mainTop dt::after {
  width: 0;
  /*left: 3.3em;*/
  background-color: transparent;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
  transform: translateX(-50%);
  animation: bgPointLine 0.3s ease 1.7s 1 forwards;
  -webkit-animation: bgPointLine 0.3s ease 1.7s 1 forwards; }
.mainTop dd {
  opacity: 0; }
  .mainTop dd span {
    opacity: 0;
    font-weight: 700 !important; }

@media all and (min-width: 1225px) {
  .mainTop dt::after {
    left: 3.3em; } }
@media all and (max-width: 1224px) {
  .mainTop dt::after {
    left: 3.6em;
    right: auto;
    margin: auto; } }
@media all and (max-width: 415px) {
  .mainTop dt::after {
    width: 90px;
    height: 6px; } }
@keyframes bgPointLine {
  0% {
    width: 0;
    background-color: transparent; }
  100% {
    width: 2em;
    background-color: #00a0dc; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes bgPointLine {
  0% {
    width: 0;
    background-color: transparent; }
  100% {
    width: 2em;
    background-color: #00a0dc; } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
header.headerActive .header #logo a {
  background: none; }
header.headerActive .header img.logo-w {
  opacity: 1; }

/**背景位置とサイズ******************************/
/**PCmin-width1225**/
/**PHmax-width1224**/
/**PHmax-width415**/
/*アイテム横軸 中央よせ*/
/*アイテム横軸 左側よせてに配置*/
/*アイテム横軸 右側よせてに配置（右から配置ではないので注意）*/
/*アイテム縦軸 中央配置*/
/*アイテム縦軸 後尾配置*/
/*最初と最後のアイテムは端に残りは等間隔*/
/*全てのアイテムは等間隔*/
/*上から下へ垂直方向*/
/*アイテム横軸 右から配置*/
/*横一行に配置*/
/*横複数行に配置*/
/*角丸*/
/*矢印 135が下、-45が上向き、45が右*/
/*--------------------------------------------------------------------------
 ico
---------------------------------------------------------------------------*/
img.ico {
  vertical-align: middle;
  margin: -1px 4px 0 4px;
  width: auto !important; }

.pdf {
  background: url(../img/ico/ico-pdf.svg) right 3px no-repeat;
  padding: 0 22px 0 0;
  margin-right: 5px;
  image-rendering: pixelated; }

figcaption .pdf {
  background: url(../img/ico/ico-pdf.svg) right 2px no-repeat; }

.xls {
  background: url(../img/ico/ico-xls.png) right 3px no-repeat;
  padding: 0 22px 0 0;
  margin-right: 5px;
  image-rendering: pixelated; }

a span.pdf {
  background-position: left 3px;
  padding: 0 0 0 20px;
  margin: 0 0 0 5px; }

a span.xls {
  background-position: left 3px;
  padding: 0 0 0 20px;
  margin: 0 0 0 5px; }

li.pdf,
ul.pdflist li,
p.pdf {
  background: url(../img/ico/ico-pdf.svg) left 3px no-repeat;
  padding: 0 0 0 20px; }

li.xls,
ul.xlslist li,
p.xls {
  background: url("../img/ico/ico-xls.png") left 3px no-repeat;
  padding: 0 0 0 20px; }

.ico-doc {
  background: url("../img/ico/ico-doc.png") right 4px no-repeat;
  padding: 0 22px 0 0;
  margin-right: 5px;
  image-rendering: pixelated; }

a span.ico-doc {
  background-position: left 4px;
  padding: 0 0 0 20px;
  margin: 0 0 0 5px; }

li.ico-doc,
ul.ico-doclist li,
p.ico-doc {
  background: url("../img/ico/ico-doc.png") left 3px no-repeat;
  padding: 0 0 0 20px; }

.window, a span.window {
  background: url(../img/ico/ico-windowPoint.svg) right 6px no-repeat;
  padding: 0 16px 0 0;
  margin-right: 3px;
  image-rendering: pixelated; }

.window.window-white, a span.window.window-white {
  background: url("../img/ico/ico-windowWhite.svg") right 6px no-repeat; }

li.window,
ul.windowlist li,
p.window {
  background: url(../img/ico/ico-windowPoint.svg) left 6px no-repeat;
  padding: 0 0 0 20px; }

.arrow {
  padding-left: 20px;
  position: relative; }

ul.arrowlist > li {
  padding-left: 24px;
  position: relative; }

.arrow::after,
ul.arrowlist > li::after {
  position: absolute;
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: 0;
  /*position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;*/
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  /*border-top: 2px solid #000;
  border-right: 2px solid #000;*/
  content: "";
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 1px solid #8f8f8f;
  border-right: 1px solid #8f8f8f; }

.arrow.arrow-white::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff; }

.pdf a:hover, li.pdf a:hover, ul.pdflist li a:hover, p.pdf a:hover,
.window a:hover, li.window a:hover, ul.windowlist li a:hover, p.window a:hover,
.xls a:hover, li.xls a:hover, ul.xlslist li a:hover, p.xls a:hover,
.arrow a:hover, ul.arrowlist > li a:hover {
  text-decoration: none !important; }

.mail {
  background: url(../img/ico/ico-mail.svg) right 5px no-repeat;
  padding: 0 22px 0 0;
  margin-right: 5px;
  background-size: 18px auto; }

@media all and (max-width: 1224px) {
  .pdf {
    padding: 0 18px 0 0;
    background-position: right 3px;
    background-size: 15px auto; }

  a span.pdf {
    background-position: left 3px;
    padding: 0 0 0 18px;
    background-size: 15px auto; }

  li.pdf,
  ul.pdflist li,
  p.pdf {
    background-size: 15px auto; }

  .window, a span.window {
    background-position: right 4px; }

  li.window,
  ul.windowlist li,
  p.window {
    background-position: left 5px; }

  .xls {
    padding: 0 18px 0 0;
    background-position: right 3px;
    background-size: 15px auto; }

  a span.xls {
    background-position: left 3px;
    padding: 0 0 0 18px;
    background-size: 15px auto; }

  li.xls,
  ul.xlslist li,
  p.xls {
    background-size: 15px auto; } }
@media all and (max-width: 760px) {
  figcaption .pdf {
    background: url(../img/ico/ico-pdf.svg) right 1px no-repeat; } }
/*--------------------------------------------------------------------------
 Tab
---------------------------------------------------------------------------*/
.tabBox,
.tabBox2,
.tabBox3,
.tabBox4 {
  display: none;
  margin-bottom: 1em; }

#displayTab,
#displayTab2,
#displayTab3 {
  display: block; }

.tab,
.tab-multiple {
  min-height: 1%; }

.tab li a,
.tab-multiple li a {
  display: block;
  height: 45px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 45px;
  text-decoration: none;
  letter-spacing: 0.09em; }

.tab li.tab-2line a,
.tab-multiple li.tab-2line a {
  line-height: 1.4;
  padding-top: 5px;
  height: 40px; }

/*----------------------------------------------------------------------------
    Information
-----------------------------------------------------------------------------*/
/*tab4*/
.tab4-news.tab {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  justify-content: space-between; }

.tab4-news.tab > li {
  width: 24.8%;
  text-align: center;
  padding: 0;
  margin-bottom: 0; }

.tab4-news.tab > li a {
  color: #ccc;
  text-decoration: none;
  padding: 0.25em 0 0 0;
  display: block;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  transition: .2s ease-in-out; }

.tab4-news.tab > li:hover a,
.tab4-news.tab > li.select a {
  /*background: #6b6b6b;*/
  color: #005396;
  border-bottom: 3px solid #005396;
  text-decoration: none; }

@media screen and (max-width: 768px) {
  .tab4-news.tab > li a {
    letter-spacing: 0;
    font-weight: normal;
    padding: 0; } }
.infolist ul li {
  border-bottom: 1px solid #eaeaea;
  font-size: 16px; }
  .infolist ul li a {
    padding: 14px 10px 14px 10px;
    font-weight: 500;
    display: flex;
    align-items: start;
    text-decoration: none;
    color: #212121;
    font-weight: 500; }
    .infolist ul li a time {
      display: inline-block;
      letter-spacing: 0.05em;
      font-weight: 500;
      width: 120px;
      font-size: 17px; }
    .infolist ul li a .news-category {
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      letter-spacing: 0.05em;
      line-height: 1.0;
      font-weight: 500;
      width: 105px;
      height: 22px;
      /*border: 1px solid #005396;*/
      border-radius: 1px;
      margin-right: 20px;
      margin-top: 4px; }
    .infolist ul li a .category-kict {
      letter-spacing: 0.1em;
      color: #fff;
      background: #7986CB; }
    .infolist ul li a .category-oict {
      letter-spacing: 0.1em;
      color: #fff;
      background: #64B5F6; }
    .infolist ul li a .category-log {
      letter-spacing: 0.1em;
      color: #fff;
      background: #80CBC4; }
    .infolist ul li a .category-nr {
      letter-spacing: 0;
      font-size: 11px;
      border: 1px solid #212121;
      color: #212121; }
    .infolist ul li a .ttl {
      display: block;
      letter-spacing: 0.03em;
      font-weight: 500; }
    .infolist ul li a:hover {
      background: #f7f7f7;
      color: #00a0dc !important;
      text-decoration: none; }
    .infolist ul li a:visited {
      color: #212121; }

#infoWrap .infolist ul li a {
  color: #212121; }

body#news .infolist ul li a:hover {
  text-decoration: none; }

@media all and (min-width: 1225px) {
  .infolist {
    padding: 0; }
    .infolist ul {
      margin-bottom: 50px; }
      .infolist ul li a {
        display: -webkit-flex;
        display: flex;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out; }
        .infolist ul li a .ttl {
          width: calc(100% - 225px);
          /*120+105*/ }
      .infolist ul li:first-child {
        /*border-top: 1px solid $colorBeigeLine;*/ }

  body.information #infoWrap .infolist {
    padding: 0px; } }
@media all and (max-width: 1224px) {
  .infolist {
    padding: 0px 5px 30px 5px; }
    .infolist ul {
      margin-bottom: 30px; }
      .infolist ul li a .ttl {
        line-height: 1.4;
        width: calc(100% - 225px);
        /*120+105*/ }
      .infolist ul li a:visited {
        color: #1d1d1d; }
      .infolist ul li a:hover {
        color: #c1007a; }

  body.information #infoWrap .infolist {
    background: #FFF;
    padding: 0px; } }
@media all and (max-width: 768px) {
  .infolist {
    background: #fff;
    padding: 0px 5px 30px 5px; }
    .infolist ul {
      margin-bottom: 30px; }
      .infolist ul li a {
        flex-wrap: wrap; }
        .infolist ul li a time {
          width: 90px;
          font-weight: normal;
          font-size: 15px; }
        .infolist ul li a .news-category {
          font-size: 11px;
          width: 110px;
          height: 20px;
          margin-right: 4rem; }
        .infolist ul li a .ttl {
          line-height: 1.4;
          font-size: 16px;
          width: 100%;
          margin-top: 5px;
          letter-spacing: 0.05em;
          color: #212121;
          font-weight: 500; }
        .infolist ul li a:visited {
          color: #1d1d1d; }
        .infolist ul li a:hover {
          color: #c1007a; }

  body.information #infoWrap .infolist {
    background: #FFF;
    padding: 0px; } }
@media all and (max-width: 450px) {
  .infolist ul li a .ttl {
    font-size: 15px; } }
/*----------------------------------------------------------------------------
    newsWrap
-----------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
 linkBtn
---------------------------------------------------------------------------*/
.linkBtn {
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }
  .linkBtn a, .linkBtn p {
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 300px;
    min-height: 45px;
    padding: 10px 10px;
    border: 1px solid #138dba;
    color: #005396 !important;
    text-align: center;
    border-radius: 3px;
    font-size: 100% !important;
    font-weight: bold; }
  .linkBtn .btnArrow {
    position: relative;
    display: block;
    width: 100%;
    font-weight: 700; }
  .linkBtn .btnArrow:after {
    position: absolute;
    right: 3px;
    top: calc(50% - 6px);
    content: "";
    width: 6px;
    height: 6px;
    background-size: 15px auto;
    transform: rotate(45deg);
    border-top: 1px solid #005396;
    border-right: 1px solid #005396; }
  .linkBtn .btnArrow:hover:after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff; }

.linkBtn._wl {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.linkBtn._wc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media all and (min-width: 1225px) {
  .linkBtn a, .linkBtn p {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out; }
    .linkBtn a .btnArrow:after, .linkBtn p .btnArrow:after {
      -webkit-transition: 0.2s ease-in-out;
      transition: 0.2s ease-in-out; }
  .linkBtn a:hover {
    background: #2b88ca;
    text-decoration: none !important;
    color: #fff !important; }
  .linkBtn a.btnArrow:hover::after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff; } }
@media all and (max-width: 1224px) {
  .linkBtn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; } }
/*--------------------------------------------------------------------------
  scroll animation
---------------------------------------------------------------------------*/
/* fade zoom */
.fade-type-zoom.show {
  transition: 8s;
  transform: scale(1.06); }

/* fade up */
.fade-type-up {
  transform: translateY(50px);
  opacity: 0; }

.fade-type-up.show {
  transition: .6s;
  transform: translateY(0);
  opacity: 1; }

.show .fade-type-up {
  transition: .6s;
  transform: translateY(0);
  opacity: 1; }

.show .fade-type-up:nth-child(2) {
  transition-delay: .4s; }

.show .fade-type-up:nth-child(3) {
  transition-delay: .8s; }

.show .fade-type-up:nth-child(4) {
  transition-delay: 1.2s; }

.show .fade-type-up:nth-child(5) {
  transition-delay: 1.6s; }

.show .fade-type-up:nth-child(6) {
  transition-delay: 2s; }

.show .fade-type-up:nth-child(7) {
  transition-delay: 2.4s; }

/* fade left */
.fade-type-left {
  transform: translateX(50px);
  opacity: 0; }

.fade-type-left.show {
  transition: .8s;
  transform: translateX(0);
  opacity: 1; }

.show .fade-type-left {
  transition: .8s;
  transform: translateX(0);
  opacity: 1; }

.show .fade-type-left:nth-child(2) {
  transition-delay: .2s; }

.show .fade-type-left:nth-child(3) {
  transition-delay: .4s; }

.show .fade-type-left:nth-child(4) {
  transition-delay: .6s; }

.show .fade-type-left:nth-child(5) {
  transition-delay: .8s; }

.show .fade-type-left:nth-child(6) {
  transition-delay: 1s; }

.show .fade-type-left:nth-child(7) {
  transition-delay: 1.2s; }

/* fade right */
.fade-type-right {
  transform: translateX(-50px);
  opacity: 0; }

.fade-type-right.show {
  transition: .8s;
  transform: translateX(0);
  opacity: 1; }

.show .fade-type-right {
  transition: .8s;
  transform: translateX(0);
  opacity: 1; }

.show .fade-type-right:nth-child(2) {
  transition-delay: .2s; }

.show .fade-type-right:nth-child(3) {
  transition-delay: .4s; }

.show .fade-type-right:nth-child(4) {
  transition-delay: .6s; }

.show .fade-type-right:nth-child(5) {
  transition-delay: .8s; }

/* img right*/
.fade-type-slide {
  position: relative; }

.fade-type-slide::after {
  content: '';
  display: block;
  width: 100%;
  transform: scaleX(1);
  transform-origin: 100% 0;
  height: 100%;
  background-color: #30468c;
  position: absolute;
  top: 0;
  right: 0; }

.fade-type-slide.show::after {
  transition: .6s;
  transform: scaleX(0); }

/* single marker */
.fade-type-marker {
  background: linear-gradient(to right, transparent 50%, rgba(255, 165, 0, 0.3) 50%);
  background: linear-gradient(to right, transparent 50%, rgba(255, 165, 0, 0.3) 50%);
  background-repeat: repeat-x;
  background-size: 200% .6em;
  background-position: 0 .6em;
  padding-bottom: .6em; }

.fade-type-marker.show {
  transition: all 1.2s ease;
  background-position: -100% .6em; }

/* bgextendTxt */
.bgextend {
  animation-name: bgextendBgAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0; }

@keyframes bgextendBgAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.bgappear.show {
  animation-name: bgextendTxtAnime;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendTxtAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.bgLRextend.show::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #30468c; }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
.bgappear,
.bgLRextend {
  opacity: 0; }

@media all and (max-width: 749px) {
  .bgLRextend.show::before {
    display: none; }

  .bgappear.show {
    animation-name: blurAnime;
    animation-delay: 0.1s;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  @keyframes blurAnime {
    from {
      filter: blur(10px);
      transform: scale(1.02);
      opacity: 0; }
    to {
      filter: blur(0);
      transform: scale(1);
      opacity: 1; } } }
/*--------------------------------------------------------------------------
  width margin padding
---------------------------------------------------------------------------*/
.w-auto {
  width: auto !important; }

.w1 {
  width: 1% !important;
  white-space: nowrap; }

.w5 {
  width: 5% !important; }

.w10 {
  width: 10% !important; }

.w15 {
  width: 15% !important; }

.w20 {
  width: 20% !important; }

.w25 {
  width: 25% !important; }

.w30 {
  width: 30% !important; }

.w35 {
  width: 35% !important; }

.w40 {
  width: 40% !important; }

.w45 {
  width: 45% !important; }

.w50 {
  width: 50% !important; }

.w56 {
  width: 56% !important; }

.w60 {
  width: 60% !important; }

.w65 {
  width: 65% !important; }

.w70 {
  width: 70% !important; }

.w75 {
  width: 75% !important; }

.w80 {
  width: 80% !important; }

.w85 {
  width: 85% !important; }

.w90 {
  width: 90% !important; }

.w95 {
  width: 95% !important; }

.w100 {
  width: 100% !important; }

.w100px {
  width: 100px !important; }

.w150px {
  width: 150px !important; }

.w200px {
  width: 200px !important; }

.w250px {
  width: 250px !important; }

.w300px {
  width: 300px !important; }

.w400px {
  width: 400px !important; }

.w100-20px {
  width: calc(100% - 20px); }

.mar0t {
  margin-top: 0 !important; }

.mar5t {
  margin-top: 5px !important; }

.mar10t {
  margin-top: 10px !important; }

.mar15t {
  margin-top: 15px !important; }

.mar20t {
  margin-top: 20px !important; }

.mar30t {
  margin-top: 30px !important; }

.mar50t {
  margin-top: 50px !important; }

.mar0b {
  margin-bottom: 0 !important; }

.mar1b {
  margin-bottom: 1px !important; }

.mar5b {
  margin-bottom: 5px !important; }

.mar10b {
  margin-bottom: 10px !important; }

.mar15b {
  margin-bottom: 15px !important; }

.mar20b {
  margin-bottom: 20px !important; }

.mar30b {
  margin-bottom: 30px !important; }

.mar50b {
  margin-bottom: 50px !important; }

.mar150b {
  margin-bottom: 150px !important; }

.mar0l {
  margin-left: 0 !important; }

.mar5l {
  margin-left: 5px !important; }

.mar10l {
  margin-left: 10px !important; }

.mar15l {
  margin-left: 15px !important; }

.mar20l {
  margin-left: 20px !important; }

.mar30l {
  margin-left: 30px !important; }

.mar50l {
  margin-left: 50px !important; }

.mar0r {
  margin-right: 0 !important; }

.mar5r {
  margin-right: 5px !important; }

.mar10r {
  margin-right: 10px !important; }

.mar15r {
  margin-right: 15px !important; }

.mar20r {
  margin-right: 20px !important; }

.mar30r {
  margin-right: 30px !important; }

.mar50r {
  margin-right: 50px !important; }

.mar0 {
  margin: 0 !important; }

.mar10 {
  margin: 10px !important; }

.mar20 {
  margin: 20px !important; }

.mar30 {
  margin: 30px !important; }

.mar50 {
  margin: 50px !important; }

.pad0t {
  padding-top: 0 !important; }

.pad5t {
  padding-top: 5px !important; }

.pad10t {
  padding-top: 10px !important; }

.pad20t {
  padding-top: 20px !important; }

.pad30t {
  padding-top: 30px !important; }

.pad50t {
  padding-top: 30px !important; }

.pad0b {
  padding-bottom: 0 !important; }

.pad5b {
  padding-bottom: 5px !important; }

.pad10b {
  padding-bottom: 10px !important; }

.pad20b {
  padding-bottom: 20px !important; }

.pad30b {
  padding-bottom: 30px !important; }

.pad50b {
  padding-bottom: 50px !important; }

.pad0l {
  padding-left: 0 !important; }

.pad5l {
  padding-left: 5px !important; }

.pad10l {
  padding-left: 10px !important; }

.pad20l {
  padding-left: 20px !important; }

.pad30l {
  padding-left: 30px !important; }

.pad50l {
  padding-left: 50px !important; }

.pad0r {
  padding-right: 0 !important; }

.pad5r {
  padding-right: 5px !important; }

.pad10r {
  padding-right: 10px !important; }

.pad20r {
  padding-right: 20px !important; }

.pad30r {
  padding-right: 30px !important; }

.pad50r {
  padding-right: 50px !important; }

.pad0lr {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.pad10lr {
  padding-left: 10px !important;
  padding-right: 10px !important; }

.pad20lr {
  padding-left: 20px !important;
  padding-right: 20px !important; }

.pad30lr {
  padding-left: 30px !important;
  padding-right: 30px !important; }

.pad50lr {
  padding-left: 50px !important;
  padding-right: 50px !important; }

.pad0 {
  padding: 0 !important; }

.pad10 {
  padding: 10px !important; }

.pad20 {
  padding: 20px !important; }

.pad30 {
  padding: 30px !important; }

.pad50 {
  padding: 50px !important; }

.mb {
  margin-bottom: 1em !important; }

@media all and (max-width: 840px) {
  .ph-mar0 {
    margin: 0 !important; }

  .ph-mar0b {
    margin-bottom: 0 !important; }

  .ph-pad0 {
    padding: 0 !important; }

  .ph-pad0b {
    padding-bottom: 0 !important; }

  .ph-w100 {
    width: 100% !important; }

  .ph-maxw100 {
    max-width: 100% !important; }

  .w1 {
    width: auto !important;
    white-space: normal; }

  .w100-20px {
    width: 100%; }

  .ph-l-txt {
    text-align: left !important; } }
/*--------------------------------------------------------------------------
  none
---------------------------------------------------------------------------*/
@media all and (min-width: 1225px) {
  .pcNone {
    display: none; } }
@media all and (max-width: 1224px) {
  .phNone {
    display: none; } }
@media all and (min-width: 750px) {
  .phNone2 {
    display: block; } }
@media all and (max-width: 749px) {
  .phNone2 {
    display: none; } }
/*----------------------------------------------------------------------------
    service
-----------------------------------------------------------------------------*/
.servicelist {
  letter-spacing: 0.1em; }
  .servicelist .servicesNav dl {
    background: #FFF;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .servicelist .servicesNav dl dd .read {
      font-size: 90%; }
    .servicelist .servicesNav dl dd ul li {
      font-size: 90%; }
      .servicelist .servicesNav dl dd ul li a {
        display: block;
        color: #000;
        position: relative; }
      .servicelist .servicesNav dl dd ul li a::after {
        display: block;
        position: absolute;
        /*top: 7px;*/
        border-top: 2px solid #00a0dc;
        border-right: 2px solid #00a0dc;
        /*position: absolute;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;*/
        display: block;
        width: 8px;
        height: 8px;
        margin: auto;
        /*border-top: 2px solid #000;
        border-right: 2px solid #000;*/
        content: "";
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
    .servicelist .servicesNav dl dd ul li.w-100 {
      width: 100%; }

@media all and (min-width: 1225px) {
  #serviceWrap .h2ttl {
    padding-bottom: 0; }
  #serviceWrap .h2Wrap.servicelist {
    width: 100%;
    padding-top: 30px 0; }

  .servicelist .servicesNav {
    position: relative;
    min-height: 420px;
    margin-bottom: 80px; }
    .servicelist .servicesNav figure {
      position: absolute;
      /*right: 0;
      top: 0;*/
      z-index: 1;
      width: 370px;
      height: 340px; }
    .servicelist .servicesNav dl {
      position: absolute;
      z-index: 2;
      width: 730px;
      height: 440px;
      padding: 0 20px 0 20px; }
      .servicelist .servicesNav dl dt {
        font-size: 28px;
        margin-bottom: 30px; }
      .servicelist .servicesNav dl dd .read {
        margin-bottom: 20px; }
      .servicelist .servicesNav dl dd ul {
        display: -webkit-flex;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 25px; }
        .servicelist .servicesNav dl dd ul li {
          line-height: 1.7;
          width: 50%; }
          .servicelist .servicesNav dl dd ul li a {
            padding-right: 40px;
            -webkit-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out; }
          .servicelist .servicesNav dl dd ul li a::after {
            top: 9px;
            right: 20px;
            -webkit-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out; }
          .servicelist .servicesNav dl dd ul li a:hover {
            color: #00a0dc;
            text-decoration: none; }
          .servicelist .servicesNav dl dd ul li a.txt-small {
            letter-spacing: 0;
            font-size: 90%;
            margin-top: 2px; }
      .servicelist .servicesNav dl dd .linkBtn {
        margin-right: 10px; } }
@media all and (max-width: 1224px) {
  .servicelist {
    padding-bottom: 10px; }
    .servicelist .servicesNav {
      margin-bottom: 50px; }
      .servicelist .servicesNav figure {
        position: relative;
        z-index: 1;
        width: 100%; }
      .servicelist .servicesNav dl {
        position: relative;
        z-index: 2;
        width: calc(100% - 30px);
        min-height: 200px;
        margin: -40px auto 0 auto;
        background: #FFF;
        padding: 25px 20px 30px 20px; }
        .servicelist .servicesNav dl dt {
          font-size: 22px;
          text-align: center;
          margin-bottom: 15px; }
        .servicelist .servicesNav dl dd .read {
          margin-bottom: 15px; }
        .servicelist .servicesNav dl dd ul {
          margin-bottom: 15px; }
          .servicelist .servicesNav dl dd ul li {
            width: 100%;
            line-height: 1.5; }
            .servicelist .servicesNav dl dd ul li a {
              display: block;
              color: #000;
              /*padding-right: 20px;*/
              padding-left: 20px;
              position: relative;
              -webkit-transition: 0.2s ease-in-out;
              transition: 0.2s ease-in-out; }
            .servicelist .servicesNav dl dd ul li a::after {
              top: 7px;
              left: 0;
              right: auto; }
            .servicelist .servicesNav dl dd ul li a.txt-small {
              letter-spacing: 0.05em; }
        .servicelist .servicesNav dl dd .linkBtn {
          margin-top: 25px; } }
/*----------------------------------------------------------------------------
    principle
-----------------------------------------------------------------------------*/
.principle > li {
  position: relative;
  margin-bottom: 1em;
  width: calc(100% - 200px);
  margin-left: 200px; }

.principle > li:last-of-type {
  margin-top: 3em;
  margin-bottom: 0; }

.principle li .num {
  color: #eff5fc;
  display: block;
  font-size: 130px;
  line-height: 1;
  width: 180px;
  position: absolute;
  top: -30px;
  left: -180px; }

.principle > li:last-of-type > .num {
  top: -50px; }

.principle li .txtLead {
  display: inline-block;
  z-index: 2;
  color: #30468c;
  z-index: 1; }

.principle li .box {
  font-size: 18px;
  margin-bottom: 1.5em;
  padding: 0 0 1em 2em; }

.principle li .box.bgLightBlue li {
  margin-bottom: 0.5em;
  font-weight: bold; }

@media all and (max-width: 1024px) {
  .principle > li {
    position: relative;
    margin-bottom: 1em;
    width: calc(100% - 70px);
    margin-left: 70px; }

  .principle > li:last-of-type {
    margin-top: 1em; }

  .principle li .num {
    font-size: 50px;
    line-height: 1;
    width: 70px;
    position: absolute;
    top: 0;
    left: -70px; }

  .principle > li:last-of-type > .num {
    top: 0; }

  .principle li .txtLead {
    z-index: 2;
    color: #30468c;
    z-index: 1; }

  .principle li .box {
    font-size: 16px;
    margin-top: 1.5em;
    padding: 0 1em 0.75em 1em; }

  .principle li .box li {
    margin-bottom: 0.5em; } }
@media all and (max-width: 490px) {
  .principle > li {
    width: 100%;
    margin-left: 0;
    margin-top: 50px; }

  .principle > li:last-of-type {
    margin-top: 50px; }

  .principle li .num {
    font-size: 50px;
    line-height: 1;
    width: 70px;
    position: absolute;
    top: -50px;
    left: 0; }

  .principle > li:last-of-type > .num {
    top: -50px; }

  .principle li .box {
    font-size: 16px;
    margin-top: 0;
    padding: 0 0 20px 0; } }
/*----------------------------------------------------------------------------
    FAQ
-----------------------------------------------------------------------------*/
.cwrap .contents .faq-list {
  margin-top: 40px;
  padding: 0;
  margin: 0;
  text-align: left; }
.cwrap .contents .faq-list dt {
  font-size: 20px;
  color: #171717;
  padding-bottom: 10px;
  text-indent: -48px;
  padding: 30px 0 0 40px;
  font-weight: 700;
  margin-bottom: 10px; }
.cwrap .contents .faq-list dt > .qa-icon {
  display: inline-block;
  background-color: #005396;
  border-radius: 50%;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding-left: 2px;
  margin-right: 1.0em;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  text-indent: 0; }
.cwrap .contents .faq-list dd {
  font-size: 16px;
  color: #171717;
  text-indent: -48px;
  padding: 0 0 30px 40px;
  font-weight: normal;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc; }
.cwrap .contents .faq-list dd > .qa-icon {
  display: inline-block;
  background-color: #dcf0ff;
  border-radius: 50%;
  color: #005396;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding-left: 2px;
  margin-right: 1.0em;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  text-indent: 0; }

@media screen and (min-width: 960px) {
  /*pc*/ }
/*----------------------------------------------------------------------------
    camera
-----------------------------------------------------------------------------*/
#camera .attentionBox {
  width: 760px;
  text-align: center;
  line-height: 1.7;
  background: #fff0f3;
  margin: 10px auto; }

@media screen and (max-width: 800px) {
  #camera .attentionBox {
    width: 100%;
    max-width: 100%;
    text-align: left; } }
/*----------------------------------------------------------------------------
    cafeteria
-----------------------------------------------------------------------------*/
#cafeteria .colL._col5 figure img {
  border: 1px solid #ccc; }

/*----------------------------------------------------------------------------
    order
-----------------------------------------------------------------------------*/
.tbl-order th {
  width: 300px; }

@media screen and (max-width: 840px) {
  .tbl-order th {
    width: 100% !important; } }
/*----------------------------------------------------------------------------
    okinawa schedule
-----------------------------------------------------------------------------*/
.iconstar img {
  width: 20px;
  height: 20px;
  margin-bottom: 5px; }

.icon01 img {
  width: 20px;
  height: 20px; }

.icon03 img {
  width: 20px;
  height: 20px; }

table#okinawaSchedule td {
  padding: 0;
  border-right: none;
  border-left: none;
  width: 20px; }
table#okinawaSchedule .icon01 {
  width: 20px; }
table#okinawaSchedule .icon02 {
  background: url("/services/port/okinawa/schedule/img/icon-line.svg") repeat-x;
  background-position: center center;
  background-size: 16px auto;
  width: 20px; }
table#okinawaSchedule .icon02end {
  text-align: left;
  width: 20px; }
table#okinawaSchedule .icon03 {
  width: 20px; }
table#okinawaSchedule .borderL {
  border-left: 1px solid #ccc; }
table#okinawaSchedule .borderR {
  border-right: 1px solid #ccc; }
table#okinawaSchedule img.icon-end {
  width: 12px;
  height: 15px; }

.twoBtns .col._col3 {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center; }
  .twoBtns .col._col3 .linkBtn {
    margin: 0 10px 20px 10px; }

@media screen and (max-width: 600px) {
  /*sp*/
  .twoBtns .col._col3 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center; } }