.colOrange {
  color: #ff8a00; }

.bold {
  font-weight: bold; }

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

/* rayout -------------------------------------------*/
.br-sp {
  display: none !important; }

header {
  width: 100%;
  border-top: #172C58 5px solid; }
  header .innerBox {
    width: 80%;
    margin: 0 auto;
    padding: 10px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center; }
    header .innerBox div.pageTitle {
      width: 30%; }
    header .innerBox nav ul {
      display: flex; }
      header .innerBox nav ul li {
        padding: 8px 0;
        margin-left: 2em; }
        header .innerBox nav ul li a {
          display: block;
          padding: 0 0 5px;
          text-decoration: none;
          color: #555555; }
        header .innerBox nav ul li a::after {
          border-bottom: solid 3px #172C58;
          bottom: 0;
          content: "";
          display: block;
          transition: all .3s ease;
          -webkit-transition: all .3s ease;
          width: 0; }
        header .innerBox nav ul li a:hover {
          color: #172C58; }
        header .innerBox nav ul li a:hover::after {
          width: 100%; }

div.headimg {
  width: 100%;
  margin: 0 auto; }
  div.headimg img {
    width: 100%; }
  div.headimg p {
    width: 98%;
    background: #FFF;
    opacity: 0.6;
    font-size: 90%;
    margin-top: -2.5em;
    text-align: right;
    padding: 0.5em 1%;
    color: #000;
    font-weight: bold; }

section.grayBox {
  background: #A28D62;
  width: 100%;
  padding: 60px 0; }

.introBox {
  width: 60%;
  margin: 0 auto; }
  .introBox h1 {
    font-size: 200%;
    color: #FFF;
    margin-bottom: 20px;
    font-family: "Mplus 1p"; }
  .introBox h2 {
    font-size: 180%;
    color: #FFF;
    margin-bottom: 20px;
    font-family: "Mplus 1p"; }
  .introBox p {
    font-size: 110%;
    line-height: 1.8;
    text-align: center;
    color: #FFF; }

.businessBox {
  width: 60%;
  margin: 0 auto; }
  .businessBox h2 {
    font-size: 180%;
    color: #172C58;
    margin-bottom: 20px;
    font-family: "Mplus 1p";
    margin-bottom: 40px; }
  .businessBox h3 {
    font-size: 160%;
    color: #172C58;
    font-family: "Mplus 1p";
    margin-bottom: 10px; }
  .businessBox ul {
    width: 100%;
    text-align: justify;
    position: relative; }
    .businessBox ul li div.photoBox {
      display: flex;
      justify-content: space-between; }
      .businessBox ul li div.photoBox img {
        width: 33%;
        margin-bottom: 10px; }
      .businessBox ul li div.photoBox + p {
        margin-bottom: 70px; }
    .businessBox ul p.enCatch {
      font-size: 120%;
      color: #CCCCCC;
      text-align: right;
      margin: -2.5em 0 15px; }

.business-s {
  width: 50%;
  margin: 0 auto;
  text-align: justify; }
  .business-s h3 {
    font-size: 140%;
    color: #172C58;
    font-family: "Mplus 1p";
    margin-bottom: 10px; }
  .business-s ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px; }
    .business-s ul li:first-child {
      width: 30%; }
      .business-s ul li:first-child img {
        width: 100%;
        margin-bottom: 15px; }
    .business-s ul li:last-child {
      width: 65%; }

.map {
  width: 100%; }
  .map h2 {
    color: #A28D62;
    font-size: 160%;
    font-family: "Mplus 1p";
    margin-bottom: 10px; }
    .map h2 + p {
      font-size: 120%; }
  .map #map_canvas {
    margin-top: 15px; }

footer {
  width: 100%;
  background: #555555;
  padding: 10px 0;
  color: #FFF; }

/* new create css 20190424 -----------------------------------*/
.slick-slide img {
  width: 100%;
  height: auto; }

/* company page ----------------------------------------------------*/
div.company h1 {
  font-size: 180%;
  color: #FFF; }

.companyImg {
  display: block;
  width: 40%;
  margin: 0 auto 100px auto; }

section.profile dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 50%;
  margin: 0 auto;
  text-align: left;
  font-size: 120%; }
  section.profile dl dt {
    width: 30%;
    font-weight: bold;
    border-bottom: 2px #DDD solid;
    margin-bottom: 20px;
    padding-bottom: 20px; }
  section.profile dl dd {
    width: 70%;
    margin-bottom: 20px;
    border-bottom: 2px #DDD solid;
    padding-bottom: 20px; }
    section.profile dl dd p.blt {
      line-height: 2.5;
      position: relative;
      padding-left: 1em; }
      section.profile dl dd p.blt:before {
        content: "\25CF";
        position: absolute;
        font-size: 70%;
        color: #A28D62;
        left: 0;
        top: 0.5em; }
      section.profile dl dd p.blt span {
        font-size: 80%;
        color: #777777;
        vertical-align: baseline; }
    section.profile dl dd p.link-funfun {
      margin-top: -0.5em;
      margin-bottom: 1em;
      margin-left: 1.5em; }

/* introduction page ----------------------------------------------------*/
section.introduction {
  width: 60%;
  margin: 0 auto; }
  section.introduction .h2Box {
    margin-bottom: 40px; }
    section.introduction .h2Box h2 {
      font-size: 200%;
      text-align: left; }
    section.introduction .h2Box p.h2sub {
      font-size: 110%;
      color: #FFFFFF;
      text-align: right;
      background: #172C58;
      padding: 4px 20px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px; }
  section.introduction ul.photoBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    section.introduction ul.photoBox img {
      width: 100%; }
    section.introduction ul.photoBox li {
      width: 31%; }
    section.introduction ul.photoBox + p {
      text-align: justify; }
  section.introduction ul.photoBox1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    section.introduction ul.photoBox1 img {
      width: 100%; }
    section.introduction ul.photoBox1 li:first-child {
      width: 30%; }
    section.introduction ul.photoBox1 li:last-child {
      width: 65%;
      text-align: justify; }
  section.introduction p.h2Read {
    font-size: 130%;
    text-align: justify; }
  section.introduction .parenthesis {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto; }
    section.introduction .parenthesis:before, section.introduction .parenthesis:after {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    section.introduction .parenthesis:before {
      top: 0;
      left: 0;
      border-top: 2px solid #A28D62;
      border-left: 2px solid #A28D62; }
    section.introduction .parenthesis:after {
      bottom: 0;
      right: 0;
      border-bottom: 2px solid #A28D62;
      border-right: 2px solid #A28D62; }
    section.introduction .parenthesis h3 {
      color: #172C58;
      font-size: 140%;
      letter-spacing: 0.1em; }
  section.introduction .notice {
    display: inline-block;
    color: #FFF;
    background: #ff8a00;
    padding: 3px 10px;
    margin: 0 0 0 20px; }
  section.introduction div.specBox {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0; }
    section.introduction div.specBox p {
      font-size: 90%;
      display: inline-block;
      width: auto;
      background: #172C58;
      color: #FFF;
      padding: 5px 15px;
      margin-right: 15px;
      border-radius: 25px; }
      section.introduction div.specBox p.colOrange {
        background: #ff8a00; }

div.placeBox a {
  position: relative;
  display: inline-block;
  margin-top: 20px; }
  div.placeBox a i {
    position: absolute;
    right: -1em;
    top: 0; }

/* FOR smartphone landscape
***************************************************************************/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header .innerBox {
    width: 95%; }
    header .innerBox div.pageTitle {
      width: 40%; }
    header .innerBox nav ul li {
      padding: 5px 0;
      margin-left: 1.5em; }

  .introBox {
    width: 80%; }

  .businessBox {
    width: 80%; }

  .business-s {
    width: 80%; }

  /* company page ------------------------------------*/
  section.profile dl {
    width: 70%; }

  /* introduction page ----------------------------------------------------*/
  section.introduction {
    width: 80%; } }
/* FOR smartphone portrait
***************************************************************************/
@media screen and (max-width: 414px) {
  body {
    font-size: 100%; }

  .br-sp {
    display: block !important; }

  header .innerBox {
    width: 95%;
    display: block; }
    header .innerBox div.pageTitle {
      width: 70%; }
    header .innerBox nav ul {
      width: 100%;
      display: block;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px; }
      header .innerBox nav ul li {
        width: 100%;
        margin: 0 auto 5px auto;
        padding: 0; }
        header .innerBox nav ul li a {
          width: 100%;
          display: block;
          padding: 15px 0;
          text-decoration: none;
          color: #FFF;
          background: #172C58; }

  .introBox {
    width: 90%; }
    .introBox h1 {
      font-size: 180%; }
    .introBox h2 {
      font-size: 160%; }
    .introBox p {
      font-size: 110%; }

  .businessBox {
    width: 90%; }
    .businessBox h2 {
      font-size: 160%; }
    .businessBox h3 {
      font-size: 140%; }
    .businessBox ul li div.photoBox {
      display: block; }
      .businessBox ul li div.photoBox img {
        width: 100%; }
    .businessBox ul p.enCatch {
      font-size: 110%;
      margin: -1em 0 15px; }

  .business-s {
    width: 90%; }
    .business-s h3 {
      font-size: 130%; }
    .business-s ul {
      width: 100%;
      display: block; }
      .business-s ul li:first-child {
        width: 100%; }
        .business-s ul li:first-child img {
          width: 100%;
          margin-bottom: 15px; }
      .business-s ul li:last-child {
        width: 100%; }

  .map {
    width: 100%; }
    .map h2 {
      color: #A28D62;
      font-size: 160%;
      font-family: "Mplus 1p";
      margin-bottom: 10px; }
      .map h2 + p {
        font-size: 120%; }
    .map #map_canvas {
      margin-top: 15px; }
      .map #map_canvas iframe {
        height: 350px !important; }

  /* company page ----------------------------------------------------*/
  div.company h1 {
    font-size: 140%;
    color: #FFF; }

  .companyImg {
    width: 90%; }
    .companyImg img {
      width: 100%;
      height: 300px !important; }

  section.profile dl {
    display: block;
    width: 90%;
    font-size: 100%; }
    section.profile dl dt {
      width: 100%;
      font-weight: bold;
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0; }
    section.profile dl dd {
      width: 100%;
      margin-bottom: 20px;
      border-bottom: 2px #DDD solid;
      padding-bottom: 20px; }

  footer {
    width: 100%;
    background: #555555;
    padding: 10px 0;
    color: #FFF; }

  /* introduction page ----------------------------------------------------*/
  section.introduction {
    width: 90%; }
    section.introduction .h2Box h2 {
      font-size: 140%; }
    section.introduction .h2Box p.h2sub {
      font-size: 90%; }
    section.introduction ul.photoBox1 {
      display: block; }
      section.introduction ul.photoBox1 li:first-child {
        width: 100%; }
      section.introduction ul.photoBox1 li:last-child {
        width: 100%; }
    section.introduction p.h2Read {
      font-size: 110%; }
    section.introduction .parenthesis {
      margin-top: 20px;
      display: block;
      text-align: center; }
      section.introduction .parenthesis h3 {
        font-size: 110%;
        letter-spacing: 0;
        font-weight: bold; }
    section.introduction div.specBox {
      display: block;
      margin: 20px 0;
      text-align: center; }
      section.introduction div.specBox p {
        display: block;
        margin-right: 0;
        margin-bottom: 10px; }
    section.introduction div.placeBox a {
      font-size: 90%; } }