/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*------------------------------------*
	media query
*------------------------------------*/
/*------------------------------------*
	vw
*------------------------------------*/
/*------------------------------------*
	font size
*------------------------------------*/
/*------------------------------------*
	hover

  @include hover() {
    opacity: .9;
  }
*------------------------------------*/
/*------------------------------------*
	Custom easing functions.
  http://easings.net/ja
*------------------------------------*/
/*-----------------------------------*
	$Setting
*------------------------------------*/
html {
  --scrollbar-width: 0px;
  --base-color: #1a96d5;
  --sub-color: #fff;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.noto-sans-jp-100 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.noto-sans-jp-200 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.noto-sans-jp-300 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.noto-sans-jp-400 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp-500 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.noto-sans-jp-600 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.noto-sans-jp-700 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.noto-sans-jp-800 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.noto-sans-jp-900 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

h1,
.h1 {
  font-size: 80px;
  font-size: 5rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  h1,
  .h1 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1.5;
  }
}

h2,
.h2 {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  h2,
  .h2 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.5;
  }
}

h3,
.h3 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  h3,
  .h3 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

h4,
.h4 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  h4,
  .h4 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }
}

h5,
.h5 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  h5,
  .h5 {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/*-----------------------------------*
	$Fonts
*------------------------------------*/
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?6ak16a");
  src: url("../fonts/icomoon.eot?6ak16a#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?6ak16a") format("truetype"), url("../fonts/icomoon.woff?6ak16a") format("woff"), url("../fonts/icomoon.svg?6ak16a#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-arrow-right2:before {
  content: "\ea3c";
}

.icon-arrow-left2:before {
  content: "\ea40";
}

.icon-circle-down:before {
  content: "\ea43";
}

/*-----------------------------------*
	$Common
*------------------------------------*/
::selection {
  background: var(--sub-color);
  color: var(--base-color);
}

body {
  text-align: center;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 2;
  color: var(--sub-color);
  background-color: var(--base-color);
}
body > main {
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
    font-size: 1rem;
    line-height: 2;
  }
}

ul,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

p:first-child {
  margin-top: 0;
}

a {
  color: var(--sub-color);
}

.row {
  display: flex;
}
.row .col {
  flex: 1 0 0%;
}

[class*=container] {
  margin: 0 auto;
  max-width: 1120px;
}
[class*=container].container-s {
  max-width: 960px;
}
@media screen and (max-width: 1280px) {
  [class*=container] {
    margin-left: 8%;
    margin-right: 8%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1120px) {
  [class*=container].container-s {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  [class*=container] {
    margin-left: 4%;
    margin-right: 4%;
  }
}

.section {
  text-align: left;
  margin-top: 160px;
}
.section.row {
  gap: calc(40 / 1280 * (100vw - var(--scrollbar-width)));
}
@media screen and (max-width: 768px) {
  .section {
    margin-top: 80px;
  }
}

.section-header h1 {
  display: inline-block;
  position: relative;
  font-family: "Zen Maru Gothic", serif;
  margin: 0;
  line-height: 1;
}
.section-header h1::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background-color: currentColor;
}
.section-header h2 {
  font-family: "Zen Maru Gothic", serif;
  margin: 1.6rem 0 0;
  line-height: 1;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .section-header h1::after {
    height: 4px;
    border-radius: 2px;
    bottom: -8px;
  }
  .section-header h2 {
    margin: 0.8rem 0 0;
  }
}

.section-body {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .section-body {
    margin-top: 32px;
  }
}

[class^=btn] {
  min-width: 320px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  border-radius: 40px;
  height: 80px;
  background-color: var(--base-color);
}
[class^=btn] p {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: bold;
  margin: 0 0 0 -8%;
}
[class^=btn] figure {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-color: var(--sub-color);
  overflow: hidden;
}
[class^=btn] figure i {
  color: var(--base-color);
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
  transform: translateX(-16px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  [class^=btn]:hover figure i {
    transform: translateX(0px);
  }
}
@media screen and (max-width: 768px) {
  [class^=btn] {
    width: 100%;
  }
}

.btn-back {
  color: var(--base-color);
  background-color: var(--sub-color);
}
.btn-back p {
  margin: 0 -8% 0 0;
}
.btn-back figure {
  right: 0;
  left: 8px;
  background-color: var(--base-color);
}
.btn-back figure i {
  color: var(--sub-color);
  transform: translateX(16px);
}

/*-----------------------------------*
	$Animation
  *------------------------------------*/
.section-header.anime {
  transform: translateY(8svh);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.section-header.anime h1::after {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left;
}
.section-header.anime.is-active {
  transform: translateY(0%);
  opacity: 1;
}
.section-header.anime.is-active h1::after {
  transform: scaleX(1);
}

.anime-slidein {
  transform: translateY(8svh);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.anime-slidein.is-active {
  transform: translateY(0%);
  opacity: 1;
}

/*-----------------------------------*
	$Header
*------------------------------------*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: var(--base-color);
}

/*-----------------------------------*
	$ScrollAttention
*------------------------------------*/
.scroll-attention {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999;
  bottom: 4vh;
  left: calc(50% - 16px);
  width: 32px;
  height: 48px;
  border: 1px solid var(--sub-color);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.scroll-attention::before, .scroll-attention::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 0px;
  left: calc(50% - 4px);
  background: var(--sub-color);
  opacity: 0;
  animation: ball-move 1.6s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}
.scroll-attention.show {
  opacity: 0.5;
}
.scroll-attention::after {
  animation-delay: 0.8s;
}
@keyframes ball-move {
  50% {
    opacity: 1;
  }
  47.5%, 52.5% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(24px);
  }
}

/*-----------------------------------*
	$Header
*------------------------------------*/
#header {
  position: relative;
  z-index: 9999;
  padding: 40px;
}
#header figure {
  width: 120px;
}
#header figure img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  #header {
    padding: 4%;
  }
}

/*-----------------------------------*
	$Footer
*------------------------------------*/
footer {
  position: relative;
  z-index: 9998;
  padding: 80px 0;
  text-align: center;
  font-weight: normal;
}
footer p {
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
}

/*-----------------------------------*
	$Home
*------------------------------------*/
/*-----------------------------------*
	$Bg
*------------------------------------*/
.home .bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--base-color);
}
/*-----------------------------------*
	$Hero
*------------------------------------*/
.home .hero {
  height: 100vh;
  display: flex;
  align-items: center;
  /*-----------------------------------*
  $Animation
   *------------------------------------*/
}
@media screen and (max-width: 768px) {
  .home .hero {
    height: auto;
    display: block;
  }
}
.home .hero .hane {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: center;
  height: 100vh;
  gap: 8vh;
}
.home .hero .hane .line {
  height: 14vh;
  background-color: var(--sub-color);
  border-top-right-radius: 8vh;
  border-bottom-right-radius: 8vh;
}
.home .hero .hane .line:nth-child(1) {
  width: 100%;
}
.home .hero .hane .line:nth-child(2) {
  width: 90%;
}
.home .hero .hane .line:nth-child(3) {
  width: 80%;
}
.home .hero .hane .line:nth-child(4) {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .home .hero .hane {
    width: 70%;
    height: 50svh;
    gap: 3vh;
  }
  .home .hero .hane .line {
    height: 7vh;
  }
}
.home .hero .txts {
  position: relative;
  color: var(--sub-color);
  width: 60%;
  height: 82vh;
  display: flex;
  padding: 0 calc(40 / 1280 * (100vw - var(--scrollbar-width))) 0 0;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
.home .hero .txts h2 {
  margin: 0;
  font-size: calc(80 / 1280 * (100vw - var(--scrollbar-width)));
  line-height: 1;
  mix-blend-mode: color;
}
.home .hero .txts h3 {
  font-size: calc(32 / 1280 * (100vw - var(--scrollbar-width)));
  margin: calc(32 / 1280 * (100vw - var(--scrollbar-width))) 0 0;
  line-height: 1;
}
.home .hero .txts .logo {
  width: calc(240 / 1280 * (100vw - var(--scrollbar-width)));
  margin-left: auto;
}
.home .hero .txts .logo svg {
  width: 100%;
  height: 100%;
}
.home .hero .txts .logo svg * {
  fill: currentColor;
}
@media screen and (max-width: 768px) {
  .home .hero .txts {
    width: 100%;
    height: 50svh;
    text-align: left;
    padding: 0 0 0 4%;
    justify-content: flex-start;
  }
  .home .hero .txts h2 {
    font-size: calc(48 / 375 * (100vw - var(--scrollbar-width)));
    line-height: 1.2;
  }
  .home .hero .txts h3 {
    font-size: calc(16 / 375 * (100vw - var(--scrollbar-width)));
    line-height: 1;
  }
  .home .hero .txts .logo {
    width: calc(80 / 375 * (100vw - var(--scrollbar-width)));
    margin: calc(40 / 375 * (100vw - var(--scrollbar-width))) 0 0 0;
  }
}
.home .hero .hane .line.anime {
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .hero .hane .line.anime.is-active {
  transform: translateX(0);
}
.home .hero .txts h2.anime,
.home .hero .txts .logo.anime {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.home .hero .txts h2.anime.is-active,
.home .hero .txts .logo.anime.is-active {
  opacity: 1;
}

/*-----------------------------------*
	$Service
*------------------------------------*/
.home .service {
  padding: 0 0 0 4%;
}
@media screen and (max-width: 768px) {
  .home .service {
    padding: 0 0 0 4%;
  }
}
.home .service .section-body {
  gap: 4%;
}
@media screen and (max-width: 768px) {
  .home .service .section-body {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .home .service .section-body > .col:nth-child(1) {
    margin-right: 4%;
  }
}
.home .service .col:nth-child(2) {
  height: 100%;
  position: sticky;
  top: 16px;
}
.home .service .service-content {
  height: 100%;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.home .service .service-content .item {
  white-space: nowrap;
  align-items: center;
  width: 110%;
  height: 80px;
  padding: 0 8px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  background-color: var(--sub-color);
}
.home .service .service-content .item:not(:first-child) {
  margin-top: 16px;
}
.home .service .service-content .item:nth-child(2) {
  margin-left: 24px;
}
.home .service .service-content .item:nth-child(3) {
  margin-left: 48px;
}
.home .service .service-content .item:nth-child(4) {
  margin-left: 72px;
}
.home .service .service-content .item .item__figure {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base-color);
  max-width: 64px;
  height: 64px;
  border-radius: 32px;
}
.home .service .service-content .item .item__figure img {
  width: 48px;
}
.home .service .service-content .item .item__texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--base-color);
  margin-left: 8px;
}
.home .service .service-content .item .item__texts h2,
.home .service .service-content .item .item__texts h3 {
  margin: 0;
  line-height: 1;
}
.home .service .service-content .item .item__texts h3 {
  font-weight: normal;
  margin-top: 0.4rem;
}
@media screen and (max-width: 768px) {
  .home .service .service-content .item {
    height: calc(48 / 375 * (100vw - var(--scrollbar-width)));
    padding: 0 calc(4 / 375 * (100vw - var(--scrollbar-width)));
    border-top-left-radius: calc(28 / 375 * (100vw - var(--scrollbar-width)));
    border-bottom-left-radius: calc(28 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item:not(:first-child) {
    margin-top: calc(8 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item:nth-child(2) {
    margin-left: calc(8 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item:nth-child(3) {
    margin-left: calc(24 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item:nth-child(4) {
    margin-left: calc(40 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item .item__figure {
    max-width: calc(40 / 375 * (100vw - var(--scrollbar-width)));
    height: calc(40 / 375 * (100vw - var(--scrollbar-width)));
    border-radius: calc(20 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item .item__figure img {
    width: calc(24 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item .item__texts h2 {
    font-size: calc(20 / 375 * (100vw - var(--scrollbar-width)));
  }
  .home .service .service-content .item .item__texts h3 {
    font-size: calc(12 / 375 * (100vw - var(--scrollbar-width)));
    margin-top: 0.2rem;
  }
}

/*-----------------------------------*
	$Company
*------------------------------------*/
.home .company .section-header {
  text-align: center;
}
.home .company dl {
  line-height: 1.5;
  padding: 0.8rem 0;
}
.home .company dl:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.home .company dl dd {
  flex-grow: 4;
}

/*-----------------------------------*
	$Contact
*------------------------------------*/
.home .contact {
  position: relative;
  color: var(--base-color);
  padding: 80px;
  background-color: var(--sub-color);
  border-radius: 80px;
  overflow: hidden;
  /*-----------------------------------*
  $Animation
   *------------------------------------*/
}
.home .contact .section-header {
  transform: translateY(0) !important;
}
.home .contact .section-header h1::after {
  height: 4px;
  bottom: -8px;
}
.home .contact .section-body {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  margin-top: 0;
  text-align: right;
}
.home .contact .logo {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: auto;
  height: 100%;
  animation: tickerContactTxt 20s infinite linear 0.5s both;
}
.home .contact .logo svg {
  margin-right: 80px;
  width: auto;
  height: 100%;
  opacity: 0.1;
}
.home .contact .logo svg * {
  fill: var(--base-color);
}
@media screen and (max-width: 992px) {
  .home .contact {
    display: block;
    border-radius: 40px;
    padding: 40px 24px;
    text-align: center;
  }
  .home .contact .section-body {
    margin-top: 40px;
    justify-content: center;
    text-align: center;
  }
}

@keyframes tickerContactTxt {
  0% {
    transform: translate3D(0, 0, 0);
  }
  100% {
    transform: translate3D(-50%, 0, 0);
  }
}
/*-----------------------------------*
	$Header
*------------------------------------*/
#header {
  position: relative;
  z-index: 9999;
  padding: 40px;
}
#header figure {
  width: 120px;
}
#header figure img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  #header {
    padding: 4%;
  }
}

/*-----------------------------------*
	$Contact
*------------------------------------*/
html.contact {
  background-color: var(--base-color);
}
html.contact h1 {
  color: var(--sub-color);
  margin: 0;
}
html.contact h4,
html.contact h3 {
  margin-top: 0;
}
html.contact main {
  text-align: center;
  color: #212121;
}
@media screen and (max-width: 768px) {
  html.contact main {
    max-width: 100%;
    padding: 4%;
  }
}
html.contact .contact-inner {
  text-align: center;
  max-width: 640px;
  margin: 24px auto 0;
  padding: 40px;
  background-color: var(--sub-color);
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  html.contact .contact-inner {
    padding: 40px 4%;
    border-radius: 24px;
  }
}
html.contact .block {
  text-align: left;
}
html.contact .block:not(html.contact .block:first-child) {
  margin-top: 40px;
}
html.contact .block > label {
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}
html.contact .require {
  color: #fff;
  margin-left: 8px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  background-color: #cc0000;
}
html.contact input:not([type=radio]),
html.contact button,
html.contact select,
html.contact textarea {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f7f7f7;
  padding: 16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
html.contact input[type=radio] + label {
  display: inline;
  margin-right: 16px;
}
html.contact input[type=submit],
html.contact input[type=button] {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  margin-top: 24px;
  background: var(--base-color);
  max-width: 320px;
  height: 80px;
  border-radius: 40px;
}
html.contact select {
  color: var(--base-color);
}
html.contact .select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
html.contact .select-wrapper::before {
  position: absolute;
  right: 16px;
  font-family: "icomoon" !important;
  content: "\ea43";
  opacity: 0.4;
}
html.contact .btn-back {
  margin-top: 40px;
}
html.contact .value {
  background-color: #f7f7f7;
  padding: 16px 16px;
  border-radius: 0.25rem;
}
html.contact .error_messe {
  color: #cc0000;
}

/*-----------------------------------*
	$style
*------------------------------------*/
/*# sourceMappingURL=maps/hane.css.map */