@charset "UTF-8";

/* *****************************
 * Import file to Scss or Sass.
 **************************** */

@import "https://fonts.googleapis.com/css?family=Cormorant+Upright";

/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */

/*
 * Normalization
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

audio:not([controls]) {
  display: none;
}

b,
strong {
  font-weight: bolder;
}

button {
  -webkit-appearance: button;
  overflow: visible;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

button,
select {
  text-transform: none;
}

details {
  display: block;
}

hr {
  overflow: visible;
}

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

input {
  -webkit-border-radius: 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
}

input[type="number"] {
  width: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

main {
  display: block;
}

pre {
  overflow: auto;
}

progress {
  display: inline-block;
}

summary {
  display: block;
}

svg:not(:root) {
  overflow: hidden;
}

template {
  display: none;
}

textarea {
  overflow: auto;
}

[hidden] {
  display: none;
}

/*
 * Universal inheritance
 */

*,
::before,
::after {
  box-sizing: inherit;
}

* {
  font-size: inherit;
  line-height: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

/*
 * Opinionated defaults
 */

* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  border-style: solid;
  border-width: 0;
}

a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  touch-action: manipulation;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

svg {
  fill: currentColor;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute;
}

[hidden][aria-hidden="false"]:focus {
  clip: auto;
}

/*
 * Configurable defaults
 */

* {
  background-repeat: no-repeat;
}

:root {
  background-color: #ffffff;
  box-sizing: border-box;
  color: #000000;
  cursor: default;
  font: 100%/1.5 sans-serif;
}

a {
  text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit;
}

button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
  min-height: 1.5em;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

nav ol,
nav ul {
  list-style: none;
}

small {
  font-size: 75%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

textarea {
  resize: vertical;
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none;
}

/*utilities*/

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.mt1em {
  margin-top: 1em;
}

.mt1_5em {
  margin-top: 1.5em;
}

.mt2em {
  margin-top: 2em;
}

/*default*/

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100%;
  position: relative;
}

body {
  font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro",
    "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  color: #444;
  font-weight: 500;
}

a {
  color: #444;
  font-weight: bold;
  transition: all 0.2s linear;
}

a:hover {
  color: #f39e15;
}

p {
  line-height: 1.8em;
}

header {
  position: fixed;
  z-index: 99;
  background-color: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}

header #header-logo {
  float: left;
}

header #header-logo a {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 188px;
  height: 25px;
  background-image: url(images/logo_new.svg);
  background-repeat: no-repeat;
}

header .menu-head-container {
  float: right;
}

header .menu-head-container ul li {
  float: left;
  border-bottom: 3px solid transparent;
}

header .menu-head-container ul li a {
  display: block;
  padding: 1em 2em;
  text-align: center;
}

header .menu-head-container ul li a:before {
  content: "";
  position: relative;
  float: left;
  top: 0.25em;
  left: -2em;
  display: block;
  height: 1em;
  width: 1px;
  background-color: #444;
}

header .menu-head-container ul .current {
  border-bottom: 3px solid #f39e15;
}

header .menu-head-container ul .current a {
  color: #f39e15;
  pointer-events: none;
}

.w-max {
  width: 100%;
  min-width: 1000px;
}

.w-980 {
  max-width: 1000px;
  margin: auto;
}

.w-1024 {
  max-width: 1024px;
  margin: auto;
}

.content-out-box {
  background-color: white;
  padding-bottom: 4em;
}

.en-font {
  font-family: "Cormorant Upright", serif;
  font-weight: normal;
}

#main-image {
  position: fixed;
  z-index: -99;
  width: 100%;
  height: 100vh;
  background-image: url(images/main-image.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}

#main-copy {
  /* height: 500px; */
  height: 100vh;
  background-image: url(images/main_ct.png);
  background-repeat: no-repeat;
  background-position: center;
}

#footer-purokuma {
  margin: auto;
  margin-top: 30px;
  width: 121px;
  height: 126px;
  background-image: url(images/purokuma.png);
  background-repeat: no-repeat;
  background-position: center;
}

#home-content article {
  overflow: auto;
}

#home-content article > h1 {
  margin-top: 1em;
  margin-bottom: 0.2em;
  font-size: 3em;
  display: flex;
  align-items: center;
  text-align: center;
  /* for no-flexbox browsers */
}

#home-content article > h1:before,
#home-content article > h1:after {
  border-top: 1px solid;
  content: "";
  display: inline;
  /* for IE */
  flex-grow: 1;
}

#home-content article > h1:before {
  margin-right: 0.5em;
}

#home-content article > h1:after {
  margin-left: 0.5em;
}

#home-content article section h1 {
  position: relative;
  /* top: -50%; */
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.1em;
  text-align: center;
  color: #fff;
}

#home-content #home-pol {
  width: 50%;
  margin: auto;
  margin-top: 2em;
}

#home-content #home-pol a {
  float: left;
  display: block;
  margin: 0 1%;
  padding: 0.5em;
  width: 46%;
  text-align: center;
  border: 1px solid #444;
  font-size: 0.9em;
  cursor: pointer;
}

.page-content-image {
  width: 100%;
  height: 15vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.page-content-company,
.page-content-partner-synergy,
.page-content-philosophy {
  background-image: url(images/about.jpg);
}

.page-content-service,
.page-content-web-solution,
.page-content-web-solution-mobile-first {
  background-image: url(images/ser_img.jpg);
}

.page-content-collaboration {
  background-image: url(images/business_partner.png);
}

.page-content-job-category,
.page-content-welfare,
.page-content-application-form,
.page-content-training {
  background-image: url(images/job-category.jpg);
}

.page-content-contact,
.page-content-application,
.page-content-inquiry {
  background-image: url(images/contact.jpg);
}

.page-content-security-policy,
.page-content-security-policy {
  background-image: url(images/policy.jpg);
}

.page-content-request {
  background-image: url(images/about.jpg);
}

.page-content-grant-in-aid,
.page-content-course_1,
.page-content-course_2,
.page-content-course_3,
.page-content-course_4,
.page-content-course_5,
.page-content-course_6,
.page-content-training-service,
.page-content-curriculum-3,
.page-content-schedule_1,
.page-content-schedule_2,
.page-content-schedule_3,
.page-content-schedule_4,
.page-content-schedule_5 {
  background-image: url(images/subsidy.jpg);
}

.single-section {
  padding-top: 4em;
}

.single-section .single-date {
  float: left;
  width: 30%;
}

.single-section .single-content {
  float: left;
  width: 70%;
  padding-left: 5%;
}

.single-section .single-content h1 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

.page-contenet {
  padding-top: 4em;
}

.page-contenet .page-main-title {
  position: relative;
  bottom: 17px;
  float: left;
  width: 30%;
}

.page-contenet .page-main-title .page-title-en {
  font-family: "Cormorant Upright", serif;
  font-size: 3em;
  font-weight: normal;
  color: #f39e15;
}

.page-contenet .page-main-content {
  float: left;
  width: 70%;
  padding-left: 5%;
}

.page-contenet .page-main-content h1 {
  margin-bottom: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
}

.page-contenet .page-main-content ul li {
  margin-left: 1.5em;
}

.page-contenet .page-main-content table {
  border-top: 2px solid #444;
}

.page-contenet .page-main-content table tr {
  border-bottom: 1px dotted #444;
}

.page-contenet .page-main-content table tr th {
  padding: 1.2em 0 1.2em 0.5em;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

.page-contenet .page-main-content table tr td {
  padding: 1.2em 0 1.2em 1em;
}

.page-contenet .page-main-content .service-section {
  padding-top: 5%;
}

.page-contenet .page-main-content .service-section:first-child {
  margin-top: -70px;
}

.page-contenet .page-main-content .service-photo-box {
  width: 100%;
  height: 150px;
  margin-bottom: 1em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-contenet .page-main-content .service-01 {
  background-image: url(images/se_photo01.jpg);
}

.page-contenet .page-main-content .service-02 {
  background-image: url(images/se_photo02.jpg);
}

.page-contenet .page-main-content .contact-click {
  color: #f39e15;
  font-size: 2em;
}

footer {
  background-color: #f39e15;
  width: 100%;
}

footer #footer-content {
  text-align: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

footer #footer-content .footer-add-wrap {
  overflow: auto;
}

footer #footer-content #footer-comtent-comp {
  padding: 1em 0;
  float: left;
}

footer #footer-content #footer-comtent-comp #footer-comtent-comp-left {
  float: left;
}

footer
  #footer-content
  #footer-comtent-comp
  #footer-comtent-comp-left
  #footer-logo {
  width: 188px;
  height: 81px;
  background-image: url(images/new_logo_sq_tp_s.png);
  background-repeat: no-repeat;
  background-position: center;
}

footer #footer-content #footer-comtent-comp #footer-comtent-comp-left address {
  padding-top: 0.5em;
  font-style: normal;
  font-size: 0.8em;
  text-align: left;
  color: white;
}

footer #footer-content small {
  display: block;
  width: 100%;
  color: white;
}

footer #footer-privacymark {
  margin: 1.1em 0 1em 1em;
  padding: 0.5em;
  font-size: 0.7em;
  line-height: 1.2em;
  font-weight: 800;
  text-align: left;
  color: white;
  float: left;
}

footer #privacymark-logo {
  width: 100px;
  height: 100px;
  background-image: url(images/26000148_200_JP.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 0.2em;
  float: left;
}

footer #footer-smartsmemark {
  margin: 1.4em 0 1em 1em;
  padding: 0.5em;
  font-size: 0.7em;
  line-height: 1.2em;
  font-weight: 800;
  text-align: left;
  color: white;
  float: left;
}

footer #smartsmemark-logo {
  width: 100px;
  height: 100px;
  background-image: url(images/smartsme_logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 0.2em;
  float: left;
}

.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition-property: transform, opacity;
  transition-duration: 1.5s;
  transition-delay: 0s;
}

.fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1315.98px) {
  footer #footer-privacymark {
    margin: 1.1em 0 1em 0.3em !important;
    padding: 0.1em !important;
  }

  footer #privacymark-logo {
    width: 70px !important;
    height: 70px !important;
  }

  footer #footer-smartsmemark {
    margin: 1.7em 0 1em 0.3em !important;
    padding: 0.1rem !important;
  }

  footer #smartsmemark-logo {
    width: 70px !important;
    height: 70px !important;
  }
}

@media (max-width: 875.98px) {
  footer #footer-privacymark {
    margin: 1.1em 0 1em 0.3em !important;
    padding: 0.1em !important;
  }

  footer #privacymark-logo {
    width: 70px !important;
    height: 70px !important;
  }

  footer #footer-smartsmemark {
    margin: 1.7em 0 1em 0.3em !important;
    padding: 0.1rem !important;
  }

  footer #smartsmemark-logo {
    width: 70px !important;
    height: 70px !important;
  }
}

@media (max-width: 575.98px) {
  footer #footer-privacymark {
    margin: 1.1em 0 1em 0.5em !important;
    padding: 0.3em !important;
  }

  footer #privacymark-logo {
    width: 60px !important;
    height: 60px !important;
  }

  footer #footer-smartsmemark {
    margin: 1.7em 0 1em 0.5em !important;
    padding: 0.3rem !important;
  }

  footer #smartsmemark-logo {
    width: 60px !important;
    height: 60px !important;
  }
}

@media (max-width: 324.98px) {
  footer #privacymark-logo {
    width: 45px !important;
    height: 45px !important;
  }

  footer #smartsmemark-logo {
    width: 45px !important;
    height: 45px !important;
  }
}
