@charset "utf-8";

/* Variables
   ========================================================= */

:root {
  /* Very Dark Blue */
  --color-primary-h: 209.1;
  --color-primary-s: 94.6%;
  --color-primary-l: 21.8%;
  --color-primary: hsl(
    var(--color-primary-h),
    var(--color-primary-s),
    var(--color-primary-l)
  );
  --color-primary-dark: #011f4b;
  --color-primary-light: #005b96;

  --color-secondary: #6497bc;
  --color-secondary-dark: #19425c;
  --color-secondary-light: #348ac0;

  --color-text: #505050;

  --color-white: #fff;
  --color-grey-40: #666;
  --color-grey-90: #e5e5e5;
  --color-grey-95: #f2f2f2;
}

/* Typesettings
   ========================================================= */

html,
body {
  height: 100%;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 16x0.625=10px */
}

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

body {
  color: var(--color-text);
  font-family: YakuHanJPs, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', Meiryo, sans-serif;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5; /* （ベースグリッド）16x1.5=24px */
}

h1 {
  margin-bottom: 0;
  font-size: 3.2rem; /* 32px */
  line-height: 1.5; /* 32x1.5=48px */
  line-height: 1.1;
}

/**
 * 16x37.5em=600px
 */
@media (min-width: 37.5em) {
  h1 {
    font-size: 4.5rem; /* 45px */
    line-height: 1.6; /* 45x1.6=72px */
    line-height: 1.2;
  }
}

/**
 * 16x48em=768px
 */
@media (min-width: 48em) {
  h1 {
    /*font-size: 6.4rem;  64px */
    /*line-height: 1.125;  64x1.125=72px */

    font-size: 5rem;
    line-height: 1.2;
  }
}

h2 {
  margin-top: 2.4rem;
  margin-bottom: 0;
  font-size: 3.2rem; /* 32px */
  line-height: 1.5; /* 32x1.5=48px */
}

h3 {
  margin-top: 2.4rem;
  margin-bottom: 0;
  font-size: 2.3rem; /* 23px */
  line-height: 1.0434782; /* 23x1.0434782=24px */
}

h4,
h5,
p,
ul,
ol,
table {
  margin-top: 2.4rem;
  margin-bottom: 0;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5; /* 16x1.5=24px */
}

.home-Gmap {
  margin-top: 2.4rem;
  margin-bottom: 0;
}

ul,
ol {
  margin-bottom: 0;
}

table {
  border-collapse: collapse;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

img {
  display: block;
  max-inline-size: 100%; /* max-width: 100% */
  inline-size: 100%;
  block-size: auto; /* height: auto */
}

img[src$='.svg'] {
  max-width: 100%;
  width: 100%;
  height: auto;
}

section {
  margin-top: 4.8rem;
}

section > :first-child,
.l-Container > :first-child,
.l-Container_Inner > :first-child,
.l-Container_Hero > :first-child,
.l-Container_BodyText > :first-child,
.l-Container_Table > :first-child,
.l-Container-maxWidth > :first-child {
  margin-top: 0;
}

/**
 * 16x66em=1056px
 */
@media (min-width: 66em) {
  body {
    font-size: 1.8rem; /* 18px */
    line-height: 1.78; /* （ベースグリッド）18x1.78=32px */
  }

  h1 {
    font-size: 7.2rem; /* 72px */
    line-height: 1.333333; /* 72x1.333333=96px */
    font-size: 6.4rem; /* 64px */
    line-height: 1.125; /* 64x1.125=72px */
  }

  h2 {
    margin-top: 3.2rem;
    font-size: 5.1rem; /* 51px */
    line-height: 1.254902; /* 51x1.5=64px */
  }

  h3 {
    margin-top: 3.2rem;
    font-size: 3.6rem; /* 36px */
    line-height: 1.777777; /* 36x1.777777=64px */
  }

  h4,
  h5,
  p,
  ul,
  ol,
  table {
    margin-top: 3.2rem;
    font-size: 1.8rem; /* 18px */
    line-height: 1.777777; /* 18x1.777777=32px */
  }

  .home-Gmap {
    margin-top: 3.2rem;
  }

  section {
    margin-top: 9.6rem;
  }

}

/* Icon Fonts
   ========================================================= */

/*!
 * "Material Icons" is lisenced under the Apache License 2.0
 * https://www.apache.org/licenses/LICENSE-2.0.txt
 *
 * by https://icomoon.io/
 *
 * This Web Site includes the work that is distributed in the Apache License 2.0.
 * このウェブサイトには、 Apache 2.0ライセンスで配布されている製作物が含まれています。
 */

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.ttf?rj9w73') format('truetype'),
    url('../fonts/icomoon.woff?rj9w73') format('woff'),
    url('../fonts/icomoon.svg?rj9w73#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-call:before {
  content: '\e900';
}
.icon-clear:before {
  content: '\e901';
}
.icon-keyboard_arrow_down:before {
  content: '\e902';
}
.icon-keyboard_arrow_left:before {
  content: '\e903';
}
.icon-keyboard_arrow_right:before {
  content: '\e904';
}
.icon-keyboard_arrow_up:before {
  content: '\e905';
}
.icon-menu:before {
  content: '\e906';
}
.icon-arrow_upward:before {
  content: '\e907';
}
.icon-check_box:before {
  content: '\e908';
}

/* Structure
   ========================================================= */

/**
 * One Page のため
 * 現状ナビゲーションは非表示
 */
.st-Header {
}

.st-NavList {
}

.st-NavList_Item + .st-NavList_Item {
  margin-left: 2rem;
}

.st-NavList_Link {
  padding: 0.5em;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem;
  text-decoration: none;
}

@media (min-width: 66em) {
  .st-NavList_Link {
    font-size: 1.6rem;
  }
}

.st-Logo {
  display: inine-block;
  position: absolute;
  grid-column: 2/3;
  grid-row: 1;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 14rem;
  opacity: 0.95;
}

.st-Footer {
  /* height: 360px; */
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  margin-top: 4.8rem;
  background-color: var(--color-primary-dark);
}

@media (min-width: 66em) {
  .st-Footer {
    /* height: 480px; */
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
}

.st-FooterAddress {
  padding-left: 0;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.4rem; /* 14px */
  font-style: normal;
  line-height: 1.7142857; /* 14x1.7142857=24px */
  list-style-type: none;
}

@media (min-width: 66em) {
  .st-FooterAddress {
    font-size: 1.6rem; /* 16px */
    line-height: 2; /* 16x2=32px */
  }
}

.st-Footer_Copyright {
  display: block;
  margin-top: 18rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1rem;
}

.st-BackToTopBtn {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  display: inline-block;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 2.2rem;
  line-height: 1;
  text-decoration: none;
  will-change: opacity;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.st-BackToTopBtn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s;
}

/* SiteWide
   ========================================================= */

.sw-Heading-2 {
  text-align: center;
}

.sw-Heading-small,
.sw-Heading-smallOn {
  margin-top: 0;
  font-size: 1.2rem; /* 12px */
  letter-spacing: 0.2rem;
  line-height: 2; /* 12x2=24px */
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 66em) {
  .sw-Heading-small,
  .sw-Heading-smallOn {
    font-size: 1.6rem; /* 16px */
    line-height: 2; /* 16x2=32px */
  }
}

.sw-Heading-small {
  color: var(--color-grey-40);
}

.sw-Heading-smallOn {
  color: var(----color-grey-95);
}

/**
 * Text Link
 */
.sw-TextLink {
  border-bottom: 1px solid rgba(3, 57, 108, 0.3);
  color: var(--color-primary);
  text-decoration: none;
}

.sw-TextLink:hover {
  border-bottom: 1px solid rgba(3, 57, 108, 1);
}

.sw-TextLink:focus,
.sw-TextLink:active,
.sw-TextLink:visited {
  color: var(--color-primary-dark);
}

/**
 * Cards
 */
.sw-Card {
  border: 1px solid var(--color-grey-90);
  border-radius: 0.4rem;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.05);
  background-color: var(--color-white);
}

.sw-Card_Image {
  border-top-right-radius: 0.4rem;
  border-top-left-radius: 0.4rem;
}

.sw-Card_Body {
  padding: 1.6rem;
}

.sw-Card_AreaText {
  margin-top: 0;
  font-size: 1rem;
}

.sw-Card_CategoryText {
  margin-top: 0;
}

/* Layout
   ========================================================= */

.l-Container {
  position: relative;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.l-Container-maxWidth {
  position: relative;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  width: 100%;
  max-width: 48em;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 37.5em) {
  .l-Container,
  .l-Container-maxWidth {
    padding-right: 3.2rem;
    padding-left: 3.2rem;
  }
}

@media (min-width: 66em) {
  .l-Container,
  .l-Container-maxWidth {
    padding-right: 4.8rem;
    padding-left: 4.8rem;
  }
}

.l-Container_Inner {
  padding: 1.6rem 2.4rem 2.4rem 2.4rem;
}

@media (min-width: 66em) {
  .l-Container_Inner {
    padding: 4rem;
  }
}

/**
 * Hero
 */
.l-Grid_Hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem auto 1.6rem;
}

@media (min-width: 37.5em) {
  .l-Grid_Hero {
    grid-template-columns: 2.4rem auto 2.4rem;
  }
}

@media (min-width: 48em) {
  .l-Grid_Hero {
    grid-template-columns: 3.2rem auto 3.2rem;
  }
}

@media (min-width: 66em) {
  .l-Grid_Hero {
    grid-template-columns: 4rem auto 4rem;
  }
}

/**
 * Service
 */
.l-Grid_Service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin-top: 2.4rem;
}

@media (min-width: 66em) {
  .l-Grid_Service {
    margin-top: 3.2rem;
  }
}

/**
 * Case Study
 */
.l-Grid_CaseStudy {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.6rem;
  width: 100%;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  margin-right: auto;
  margin-left: auto;
}

/* Home
   ========================================================= */

/**
 * Hero
 */
.home-Hero {
  margin-top: 0;
}

.home-Hero_Image {
  grid-column: 1 / -1;
}

.home-Hero_Image::after {
  content: '';
  /* display: block; */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(3, 57, 108, 0.9);
}

.home-Hero_Title {
  position: absolute;
  grid-column: 2/3;
  grid-row: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 29rem;
  opacity: 0.95;
}

@media (min-width: 37.5em) {
  .home-Hero_Title {
    width: 38rem;
  }
}

@media (min-width: 48em) {
  .home-Hero_Title {
    width: 42rem;
  }
}

@media (min-width: 66em) {
  .home-Hero_Title {
    width: 52rem;
  }
}

.home-Hero_SubTitle {
  display: block;
  margin-top: 0.8rem;
  color: var(--color-white);
  font-size: 1.2rem;
  opacity: 0.9;
}

@media (min-width: 48em) {
  .home-Hero_SubTitle {
    margin-top: 1.6rem;
    font-size: 1.4rem;
  }
}

.home-Hero_Button {
  display: inline-block;
  position: absolute;
  grid-column: 2/3;
  grid-row: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-white);
  font-size: 2.4rem;
  line-height: 4.8rem;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 48em) {
  .home-Hero_Button {
    display: none;
  }
}

/**
 * Overview
 */
.home-Overview_TextBlock {
  color: var(--color-primary);
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

@media (min-width: 66em) {
  .home-Overview_TextBlock {
    font-size: 1.8rem;
  }
}

.home-Overview_Text {
  display: block;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.home-Overview_Text:first-child {
  padding-top: 0;
}

.home-Overview_Text:last-child {
  padding-bottom: 0;
}

/**
 * Service
 */
.home-Service_YaneThumbnail,
.home-Service_GaihekiThumbnail,
.home-Service_BankinThumbnail {
  position: relative;
}

.home-Service_YaneThumbnail::after,
.home-Service_GaihekiThumbnail::after,
.home-Service_BankinThumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.home-Service_Detail {
  margin-top: 2.8rem;
}

@media (min-width: 66em) {
  .home-Service_Detail {
    margin-top: 3.2rem;
  }
}

.home-Service_YaneTitle,
.home-Service_GaihekiTitle,
.home-Service_OthersTitle {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.6rem;
  line-height: 1;
}

.home-Service_YaneText,
.home-Service_GaihekiText,
.home-Service_OthersText {
  margin-top: 0;
}

/**
 * CaseStudy
 */
.home-CaseStudy {
  margin-top: 2.4rem;
}

/**
 * Qualification
 */
.home-Qualification_List {
  padding-left: 0;
  list-style: none;
}

.home-Qualification_ListItem {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 2rem;
  text-indent: -2.3rem;
}

.home-Qualification_ListItem:first-child {
  padding-top: 0;
}

/**
 * Table(About)
 */
.home-Table {
  width: 100%;
}

.home-Table td {
  padding: 1.6rem 0.8rem;
  border: 1px solid var(--color-grey-90);
  border-width: 0 0 1px;
}

.home-Table_Head {
  width: 7em;
}

@media (min-width: 48em) {
  .home-Table_Head {
    width: 12em;
  }
}

@media (min-width: 66em) {
  .home-Table td {
    padding: 2.4rem 1.6rem;
  }
}

/**
 * Info
 */

/* .home-Info_Date {
  display: block;
  margin-top: 2.4rem;
  color: var(--color-grey-40);
  font-size: 1.4rem;
  line-height: 1.7142857;
} */

/* 上記の font-size: 1.4rem; 14x1.7142857=24px */

/* .home-Info_Text {
  margin-top: 0;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5;
} */

/* @media (min-width: 48em) {
  .home-Info_Block {
    display: flex;
  }

  .home-Info_Date {
    margin-right: 2.4rem;
    color: #555;
  }

  .home-Info_Text {
    margin-top: 2.4rem;
  }
} */

/* @media (min-width: 66em) {
  .home-Info_Date {
    margin-top: 3.2rem;
    margin-right: 3.2rem;
    font-size: 1.6rem;
    line-height: 2;
  }

  .home-Info_Text {
    margin-top: 3.2rem;
    font-size: 1.8rem;
    line-height: 1.777777; /* 18x1.777777=32px */
  }
}  */


/**
 * Access
 */
.home-Gmap iframe {
  aspect-ratio: 4/3;
  width: 100%;
  height: 100%;
}

/**
 * Contact
 */
.home-Contact_Bg {
  background-color: var(--color-primary-light);
}

.home-Contact,
.home-Contact_Heading {
  color: var(--color-white);
  opacity: 0.95;
}

.home-Contact_Link {
  font-size: 3.8rem;
  text-align: center;
}

@media (min-width: 48em) {
  .home-Contact_Link {
    font-size: 4.2rem;
    line-height: 1.142857;
  }
}

@media (min-width: 66em) {
  .home-Contact_Link {
    font-size: 7.2rem;
    line-height: 1.333333;
  }
}

.home-Contact_LinkText {
  color: var(--color-white);
  text-decoration: none;
}

/* Utilities
   ========================================================= */