@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  word-break: break-all;
}

/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
} */
html {
  height: 100%;
  font-size: 10px;
  word-break: break-all;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 6px;
  }
}
body {
  height: 100%;
  line-height: 1.6;
  line-break: strict;
  word-wrap: break-all;
  text-align: left;
  color: #787878;
  letter-spacing: 0.15em;
  overflow-x: hidden;
  word-break: break-all;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media screen and (max-width: 768px) {
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a {
  transition: 0.2s ease;
  text-decoration: none;
  color: #787878;
  outline: none;
}
a:hover {
  text-decoration: none;
}
a img {
  outline: none;
  border: none;
}
a img:hover {
  opacity: 0.8;
}

.no-control {
  overflow: hidden;
  height: 100%;
}

/*---------------------------------------------------------
header
---------------------------------------------------------*/
.header {
  width: 100%;
  position: fixed;
  z-index: 1;
  top: -60px;
  transition: all 0.4s ease;
  background: rgba(255, 255, 255, 0.4);
  z-index: 999;
}
.header.moveDown {
  top: 0;
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.header__logo img {
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .header__logo img {
    max-width: 210px;
  }
}
.menu-bg-animation {
  animation: menu-bg-animation 0.5s ease forwards;
}

.menu {
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  z-index: 999;
}
.menu .menu-bg {
  opacity: 0;
  position: absolute;
  content: "";
  left: -300px;
  height: 100%;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .menu {
    height: 60px;
    width: 100%;
  }
}
.menu__list {
  display: none;
  margin-bottom: 30px;
}

.menu__btn {
  padding: 0 48px;
}

@media screen and (max-width: 768px) {
  .menu__btn {
    padding: 0;
    position: absolute;
    right: 6px;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .menu__list {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .menu__list ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20% 0;
  }
}
.menu__list ul li {
  font-size: 18px;
  letter-spacing: 0.2em;
}
.menu__list ul li span {
  font-size: 4.8rem;
}
.menu__list ul li a {
  display: block;
  padding: 20px 0;
  transition: all 0.4s;
}
.menu__list ul li a:hover {
  color: #15c5d2;
  transition: all 0.4s;
}

.button-toggle {
  float: right;
  display: block;
  width: 60px;
  height: 60px;
  z-index: 100;
}

/*smartphone menu animation*/
.menu-trigger {
  display: block;
  transition: all 0.4s;
  box-sizing: border-box;
  position: relative;
  width: 30px;
  height: 26px;
  z-index: 999;
}
.menu-trigger span {
  transition: all 0.4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 6px;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(9px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-9px) rotate(315deg);
}

@media screen and (max-width: 768px) {
  .menu-trigger {
    top: 14px;
    left: 15px;
  }
}
/*--------------------------------------------------------------------
  utility css
--------------------------------------------------------------------*/
/* Scss Document */
/* clearfix - utility
--------------------------------------------------------- */
.u-text-bold {
  font-weight: bold !important;
}

.u-text-ac {
  text-align: center !important;
}

.u-cf {
  *zoom: 1;
}
.u-cf:after {
  content: "";
  display: table;
  clear: both;
}

.u-for-pc {
  display: block;
}

.u-for-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .u-for-pc {
    display: none;
  }
  .u-for-sp {
    display: block;
  }
}
/* auto margin */
.u-m-c {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Top margin */
.u-mt-0 {
  margin-top: 0% !important;
}

.u-mt-1 {
  margin-top: 1% !important;
}

.u-mt-2 {
  margin-top: 2% !important;
}

.u-mt-3 {
  margin-top: 3% !important;
}

.u-mt-4 {
  margin-top: 4% !important;
}

.u-mt-5 {
  margin-top: 5% !important;
}

.u-mt-6 {
  margin-top: 6% !important;
}

.u-mt-7 {
  margin-top: 7% !important;
}

.u-mt-8 {
  margin-top: 8% !important;
}

.u-mt-9 {
  margin-top: 9% !important;
}

.u-mt-10 {
  margin-top: 10% !important;
}

.u-mt-11 {
  margin-top: 11% !important;
}

.u-mt-12 {
  margin-top: 12% !important;
}

.u-mt-13 {
  margin-top: 13% !important;
}

.u-mt-14 {
  margin-top: 14% !important;
}

.u-mt-15 {
  margin-top: 15% !important;
}

.u-mt-16 {
  margin-top: 16% !important;
}

.u-mt-17 {
  margin-top: 17% !important;
}

.u-mt-18 {
  margin-top: 18% !important;
}

.u-mt-19 {
  margin-top: 19% !important;
}

.u-mt-20 {
  margin-top: 20% !important;
}

.u-mt-21 {
  margin-top: 21% !important;
}

.u-mt-22 {
  margin-top: 22% !important;
}

.u-mt-23 {
  margin-top: 23% !important;
}

.u-mt-24 {
  margin-top: 24% !important;
}

.u-mt-25 {
  margin-top: 25% !important;
}

.u-mt-26 {
  margin-top: 26% !important;
}

.u-mt-27 {
  margin-top: 27% !important;
}

.u-mt-28 {
  margin-top: 28% !important;
}

.u-mt-29 {
  margin-top: 29% !important;
}

.u-mt-30 {
  margin-top: 30% !important;
}

.u-mt-31 {
  margin-top: 31% !important;
}

.u-mt-32 {
  margin-top: 32% !important;
}

.u-mt-33 {
  margin-top: 33% !important;
}

.u-mt-34 {
  margin-top: 34% !important;
}

.u-mt-35 {
  margin-top: 35% !important;
}

.u-mt-36 {
  margin-top: 36% !important;
}

.u-mt-37 {
  margin-top: 37% !important;
}

.u-mt-38 {
  margin-top: 38% !important;
}

.u-mt-39 {
  margin-top: 39% !important;
}

.u-mt-40 {
  margin-top: 40% !important;
}

.u-mt-41 {
  margin-top: 41% !important;
}

.u-mt-42 {
  margin-top: 42% !important;
}

.u-mt-43 {
  margin-top: 43% !important;
}

.u-mt-44 {
  margin-top: 44% !important;
}

.u-mt-45 {
  margin-top: 45% !important;
}

.u-mt-46 {
  margin-top: 46% !important;
}

.u-mt-47 {
  margin-top: 47% !important;
}

.u-mt-48 {
  margin-top: 48% !important;
}

/* Right margin */
.u-mr-0 {
  margin-right: 0% !important;
}

.u-mr-1 {
  margin-right: 1% !important;
}

.u-mr-2 {
  margin-right: 2% !important;
}

.u-mr-3 {
  margin-right: 3% !important;
}

.u-mr-4 {
  margin-right: 4% !important;
}

.u-mr-5 {
  margin-right: 5% !important;
}

.u-mr-6 {
  margin-right: 6% !important;
}

.u-mr-7 {
  margin-right: 7% !important;
}

.u-mr-8 {
  margin-right: 8% !important;
}

.u-mr-9 {
  margin-right: 9% !important;
}

.u-mr-10 {
  margin-right: 10% !important;
}

.u-mr-11 {
  margin-right: 11% !important;
}

.u-mr-12 {
  margin-right: 12% !important;
}

.u-mr-13 {
  margin-right: 13% !important;
}

.u-mr-14 {
  margin-right: 14% !important;
}

.u-mr-15 {
  margin-right: 15% !important;
}

.u-mr-16 {
  margin-right: 16% !important;
}

.u-mr-17 {
  margin-right: 17% !important;
}

.u-mr-18 {
  margin-right: 18% !important;
}

.u-mr-19 {
  margin-right: 19% !important;
}

.u-mr-20 {
  margin-right: 20% !important;
}

.u-mr-21 {
  margin-right: 21% !important;
}

.u-mr-22 {
  margin-right: 22% !important;
}

.u-mr-23 {
  margin-right: 23% !important;
}

.u-mr-24 {
  margin-right: 24% !important;
}

.u-mr-25 {
  margin-right: 25% !important;
}

.u-mr-26 {
  margin-right: 26% !important;
}

.u-mr-27 {
  margin-right: 27% !important;
}

.u-mr-28 {
  margin-right: 28% !important;
}

.u-mr-29 {
  margin-right: 29% !important;
}

.u-mr-30 {
  margin-right: 30% !important;
}

.u-mr-31 {
  margin-right: 31% !important;
}

.u-mr-32 {
  margin-right: 32% !important;
}

.u-mr-33 {
  margin-right: 33% !important;
}

.u-mr-34 {
  margin-right: 34% !important;
}

.u-mr-35 {
  margin-right: 35% !important;
}

.u-mr-36 {
  margin-right: 36% !important;
}

.u-mr-37 {
  margin-right: 37% !important;
}

.u-mr-38 {
  margin-right: 38% !important;
}

.u-mr-39 {
  margin-right: 39% !important;
}

.u-mr-40 {
  margin-right: 40% !important;
}

.u-mr-41 {
  margin-right: 41% !important;
}

.u-mr-42 {
  margin-right: 42% !important;
}

.u-mr-43 {
  margin-right: 43% !important;
}

.u-mr-44 {
  margin-right: 44% !important;
}

.u-mr-45 {
  margin-right: 45% !important;
}

.u-mr-46 {
  margin-right: 46% !important;
}

.u-mr-47 {
  margin-right: 47% !important;
}

.u-mr-48 {
  margin-right: 48% !important;
}

/* Bottom margin */
.u-mb-0 {
  margin-bottom: 0% !important;
}

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

.u-mb-2 {
  margin-bottom: 2% !important;
}

.u-mb-3 {
  margin-bottom: 3% !important;
}

.u-mb-4 {
  margin-bottom: 4% !important;
}

.u-mb-5 {
  margin-bottom: 5% !important;
}

.u-mb-6 {
  margin-bottom: 6% !important;
}

.u-mb-7 {
  margin-bottom: 7% !important;
}

.u-mb-8 {
  margin-bottom: 8% !important;
}

.u-mb-9 {
  margin-bottom: 9% !important;
}

.u-mb-10 {
  margin-bottom: 10% !important;
}

.u-mb-11 {
  margin-bottom: 11% !important;
}

.u-mb-12 {
  margin-bottom: 12% !important;
}

.u-mb-13 {
  margin-bottom: 13% !important;
}

.u-mb-14 {
  margin-bottom: 14% !important;
}

.u-mb-15 {
  margin-bottom: 15% !important;
}

.u-mb-16 {
  margin-bottom: 16% !important;
}

.u-mb-17 {
  margin-bottom: 17% !important;
}

.u-mb-18 {
  margin-bottom: 18% !important;
}

.u-mb-19 {
  margin-bottom: 19% !important;
}

.u-mb-20 {
  margin-bottom: 20% !important;
}

.u-mb-21 {
  margin-bottom: 21% !important;
}

.u-mb-22 {
  margin-bottom: 22% !important;
}

.u-mb-23 {
  margin-bottom: 23% !important;
}

.u-mb-24 {
  margin-bottom: 24% !important;
}

.u-mb-25 {
  margin-bottom: 25% !important;
}

.u-mb-26 {
  margin-bottom: 26% !important;
}

.u-mb-27 {
  margin-bottom: 27% !important;
}

.u-mb-28 {
  margin-bottom: 28% !important;
}

.u-mb-29 {
  margin-bottom: 29% !important;
}

.u-mb-30 {
  margin-bottom: 30% !important;
}

.u-mb-31 {
  margin-bottom: 31% !important;
}

.u-mb-32 {
  margin-bottom: 32% !important;
}

.u-mb-33 {
  margin-bottom: 33% !important;
}

.u-mb-34 {
  margin-bottom: 34% !important;
}

.u-mb-35 {
  margin-bottom: 35% !important;
}

.u-mb-36 {
  margin-bottom: 36% !important;
}

.u-mb-37 {
  margin-bottom: 37% !important;
}

.u-mb-38 {
  margin-bottom: 38% !important;
}

.u-mb-39 {
  margin-bottom: 39% !important;
}

.u-mb-40 {
  margin-bottom: 40% !important;
}

.u-mb-41 {
  margin-bottom: 41% !important;
}

.u-mb-42 {
  margin-bottom: 42% !important;
}

.u-mb-43 {
  margin-bottom: 43% !important;
}

.u-mb-44 {
  margin-bottom: 44% !important;
}

.u-mb-45 {
  margin-bottom: 45% !important;
}

.u-mb-46 {
  margin-bottom: 46% !important;
}

.u-mb-47 {
  margin-bottom: 47% !important;
}

.u-mb-48 {
  margin-bottom: 48% !important;
}

/* Left margin */
.u-ml-0 {
  margin-left: 0% !important;
}

.u-ml-1 {
  margin-left: 1% !important;
}

.u-ml-2 {
  margin-left: 2% !important;
}

.u-ml-3 {
  margin-left: 3% !important;
}

.u-ml-4 {
  margin-left: 4% !important;
}

.u-ml-5 {
  margin-left: 5% !important;
}

.u-ml-6 {
  margin-left: 6% !important;
}

.u-ml-7 {
  margin-left: 7% !important;
}

.u-ml-8 {
  margin-left: 8% !important;
}

.u-ml-9 {
  margin-left: 9% !important;
}

.u-ml-10 {
  margin-left: 10% !important;
}

.u-ml-11 {
  margin-left: 11% !important;
}

.u-ml-12 {
  margin-left: 12% !important;
}

.u-ml-13 {
  margin-left: 13% !important;
}

.u-ml-14 {
  margin-left: 14% !important;
}

.u-ml-15 {
  margin-left: 15% !important;
}

.u-ml-16 {
  margin-left: 16% !important;
}

/* misc - utility
--------------------------------------------------------- */
.u-ws-nowrap {
  white-space: nowrap;
}

.u-mx-img {
  max-width: 100%;
}

.u-tx-inside {
  text-indent: -1em;
  margin-left: 1em;
}

/* padding - utility
--------------------------------------------------------- */
/* Top padding */
.u-pt-0 {
  padding-top: 0% !important;
}

.u-pt-1 {
  padding-top: 1% !important;
}

.u-pt-2 {
  padding-top: 2% !important;
}

.u-pt-3 {
  padding-top: 3% !important;
}

.u-pt-4 {
  padding-top: 4% !important;
}

.u-pt-5 {
  padding-top: 5% !important;
}

.u-pt-6 {
  padding-top: 6% !important;
}

.u-pt-7 {
  padding-top: 7% !important;
}

.u-pt-8 {
  padding-top: 8% !important;
}

.u-pt-9 {
  padding-top: 9% !important;
}

.u-pt-10 {
  padding-top: 10% !important;
}

.u-pt-11 {
  padding-top: 11% !important;
}

.u-pt-12 {
  padding-top: 12% !important;
}

.u-pt-13 {
  padding-top: 13% !important;
}

.u-pt-14 {
  padding-top: 14% !important;
}

.u-pt-15 {
  padding-top: 15% !important;
}

.u-pt-16 {
  padding-top: 16% !important;
}

.u-pt-17 {
  padding-top: 17% !important;
}

.u-pt-18 {
  padding-top: 18% !important;
}

.u-pt-19 {
  padding-top: 19% !important;
}

.u-pt-20 {
  padding-top: 20% !important;
}

.u-pt-21 {
  padding-top: 21% !important;
}

.u-pt-22 {
  padding-top: 22% !important;
}

.u-pt-23 {
  padding-top: 23% !important;
}

.u-pt-24 {
  padding-top: 24% !important;
}

.u-pt-25 {
  padding-top: 25% !important;
}

.u-pt-26 {
  padding-top: 26% !important;
}

.u-pt-27 {
  padding-top: 27% !important;
}

.u-pt-28 {
  padding-top: 28% !important;
}

.u-pt-29 {
  padding-top: 29% !important;
}

.u-pt-30 {
  padding-top: 30% !important;
}

.u-pt-31 {
  padding-top: 31% !important;
}

.u-pt-32 {
  padding-top: 32% !important;
}

.u-pt-33 {
  padding-top: 33% !important;
}

.u-pt-34 {
  padding-top: 34% !important;
}

.u-pt-35 {
  padding-top: 35% !important;
}

.u-pt-36 {
  padding-top: 36% !important;
}

.u-pt-37 {
  padding-top: 37% !important;
}

.u-pt-38 {
  padding-top: 38% !important;
}

.u-pt-39 {
  padding-top: 39% !important;
}

.u-pt-40 {
  padding-top: 40% !important;
}

.u-pt-41 {
  padding-top: 41% !important;
}

.u-pt-42 {
  padding-top: 42% !important;
}

.u-pt-43 {
  padding-top: 43% !important;
}

.u-pt-44 {
  padding-top: 44% !important;
}

.u-pt-45 {
  padding-top: 45% !important;
}

.u-pt-46 {
  padding-top: 46% !important;
}

.u-pt-47 {
  padding-top: 47% !important;
}

.u-pt-48 {
  padding-top: 48% !important;
}

/* Right padding */
.u-pr-0 {
  padding-right: 0% !important;
}

.u-pr-1 {
  padding-right: 1% !important;
}

.u-pr-2 {
  padding-right: 2% !important;
}

.u-pr-3 {
  padding-right: 3% !important;
}

.u-pr-4 {
  padding-right: 4% !important;
}

.u-pr-5 {
  padding-right: 5% !important;
}

.u-pr-6 {
  padding-right: 6% !important;
}

.u-pr-7 {
  padding-right: 7% !important;
}

.u-pr-8 {
  padding-right: 8% !important;
}

.u-pr-9 {
  padding-right: 9% !important;
}

.u-pr-10 {
  padding-right: 10% !important;
}

.u-pr-11 {
  padding-right: 11% !important;
}

.u-pr-12 {
  padding-right: 12% !important;
}

.u-pr-13 {
  padding-right: 13% !important;
}

.u-pr-14 {
  padding-right: 14% !important;
}

.u-pr-15 {
  padding-right: 15% !important;
}

.u-pr-16 {
  padding-right: 16% !important;
}

.u-pr-17 {
  padding-right: 17% !important;
}

.u-pr-18 {
  padding-right: 18% !important;
}

.u-pr-19 {
  padding-right: 19% !important;
}

.u-pr-20 {
  padding-right: 20% !important;
}

.u-pr-21 {
  padding-right: 21% !important;
}

.u-pr-22 {
  padding-right: 22% !important;
}

.u-pr-23 {
  padding-right: 23% !important;
}

.u-pr-24 {
  padding-right: 24% !important;
}

.u-pr-25 {
  padding-right: 25% !important;
}

.u-pr-26 {
  padding-right: 26% !important;
}

.u-pr-27 {
  padding-right: 27% !important;
}

.u-pr-28 {
  padding-right: 28% !important;
}

.u-pr-29 {
  padding-right: 29% !important;
}

.u-pr-30 {
  padding-right: 30% !important;
}

.u-pr-31 {
  padding-right: 31% !important;
}

.u-pr-32 {
  padding-right: 32% !important;
}

.u-pr-33 {
  padding-right: 33% !important;
}

.u-pr-34 {
  padding-right: 34% !important;
}

.u-pr-35 {
  padding-right: 35% !important;
}

.u-pr-36 {
  padding-right: 36% !important;
}

.u-pr-37 {
  padding-right: 37% !important;
}

.u-pr-38 {
  padding-right: 38% !important;
}

.u-pr-39 {
  padding-right: 39% !important;
}

.u-pr-40 {
  padding-right: 40% !important;
}

.u-pr-41 {
  padding-right: 41% !important;
}

.u-pr-42 {
  padding-right: 42% !important;
}

.u-pr-43 {
  padding-right: 43% !important;
}

.u-pr-44 {
  padding-right: 44% !important;
}

.u-pr-45 {
  padding-right: 45% !important;
}

.u-pr-46 {
  padding-right: 46% !important;
}

.u-pr-47 {
  padding-right: 47% !important;
}

.u-pr-48 {
  padding-right: 48% !important;
}

/* Bottom padding */
.u-pb-0 {
  padding-bottom: 0% !important;
}

.u-pb-1 {
  padding-bottom: 1% !important;
}

.u-pb-2 {
  padding-bottom: 2% !important;
}

.u-pb-3 {
  padding-bottom: 3% !important;
}

.u-pb-4 {
  padding-bottom: 4% !important;
}

.u-pb-5 {
  padding-bottom: 5% !important;
}

.u-pb-6 {
  padding-bottom: 6% !important;
}

.u-pb-7 {
  padding-bottom: 7% !important;
}

.u-pb-8 {
  padding-bottom: 8% !important;
}

.u-pb-9 {
  padding-bottom: 9% !important;
}

.u-pb-10 {
  padding-bottom: 10% !important;
}

.u-pb-11 {
  padding-bottom: 11% !important;
}

.u-pb-12 {
  padding-bottom: 12% !important;
}

.u-pb-13 {
  padding-bottom: 13% !important;
}

.u-pb-14 {
  padding-bottom: 14% !important;
}

.u-pb-15 {
  padding-bottom: 15% !important;
}

.u-pb-16 {
  padding-bottom: 16% !important;
}

.u-pb-17 {
  padding-bottom: 17% !important;
}

.u-pb-18 {
  padding-bottom: 18% !important;
}

.u-pb-19 {
  padding-bottom: 19% !important;
}

.u-pb-20 {
  padding-bottom: 20% !important;
}

.u-pb-21 {
  padding-bottom: 21% !important;
}

.u-pb-22 {
  padding-bottom: 22% !important;
}

.u-pb-23 {
  padding-bottom: 23% !important;
}

.u-pb-24 {
  padding-bottom: 24% !important;
}

.u-pb-25 {
  padding-bottom: 25% !important;
}

.u-pb-26 {
  padding-bottom: 26% !important;
}

.u-pb-27 {
  padding-bottom: 27% !important;
}

.u-pb-28 {
  padding-bottom: 28% !important;
}

.u-pb-29 {
  padding-bottom: 29% !important;
}

.u-pb-30 {
  padding-bottom: 30% !important;
}

.u-pb-31 {
  padding-bottom: 31% !important;
}

.u-pb-32 {
  padding-bottom: 32% !important;
}

.u-pb-33 {
  padding-bottom: 33% !important;
}

.u-pb-34 {
  padding-bottom: 34% !important;
}

.u-pb-35 {
  padding-bottom: 35% !important;
}

.u-pb-36 {
  padding-bottom: 36% !important;
}

.u-pb-37 {
  padding-bottom: 37% !important;
}

.u-pb-38 {
  padding-bottom: 38% !important;
}

.u-pb-39 {
  padding-bottom: 39% !important;
}

.u-pb-40 {
  padding-bottom: 40% !important;
}

.u-pb-41 {
  padding-bottom: 41% !important;
}

.u-pb-42 {
  padding-bottom: 42% !important;
}

.u-pb-43 {
  padding-bottom: 43% !important;
}

.u-pb-44 {
  padding-bottom: 44% !important;
}

.u-pb-45 {
  padding-bottom: 45% !important;
}

.u-pb-46 {
  padding-bottom: 46% !important;
}

.u-pb-47 {
  padding-bottom: 47% !important;
}

.u-pb-48 {
  padding-bottom: 48% !important;
}

/* Left padding */
.u-pl-0 {
  padding-left: 0% !important;
}

.u-pl-1 {
  padding-left: 1% !important;
}

.u-pl-2 {
  padding-left: 2% !important;
}

.u-pl-3 {
  padding-left: 3% !important;
}

.u-pl-4 {
  padding-left: 4% !important;
}

.u-pl-5 {
  padding-left: 5% !important;
}

.u-pl-6 {
  padding-left: 6% !important;
}

.u-pl-7 {
  padding-left: 7% !important;
}

.u-pl-8 {
  padding-left: 8% !important;
}

.u-pl-9 {
  padding-left: 9% !important;
}

.u-pl-10 {
  padding-left: 10% !important;
}

.u-pl-11 {
  padding-left: 11% !important;
}

.u-pl-12 {
  padding-left: 12% !important;
}

.u-pl-13 {
  padding-left: 13% !important;
}

.u-pl-14 {
  padding-left: 14% !important;
}

.u-pl-15 {
  padding-left: 15% !important;
}

.u-pl-16 {
  padding-left: 16% !important;
}

.u-pl-17 {
  padding-left: 17% !important;
}

.u-pl-18 {
  padding-left: 18% !important;
}

.u-pl-19 {
  padding-left: 19% !important;
}

.u-pl-20 {
  padding-left: 20% !important;
}

.u-pl-21 {
  padding-left: 21% !important;
}

.u-pl-22 {
  padding-left: 22% !important;
}

.u-pl-23 {
  padding-left: 23% !important;
}

.u-pl-24 {
  padding-left: 24% !important;
}

.u-pl-25 {
  padding-left: 25% !important;
}

.u-pl-26 {
  padding-left: 26% !important;
}

.u-pl-27 {
  padding-left: 27% !important;
}

.u-pl-28 {
  padding-left: 28% !important;
}

.u-pl-29 {
  padding-left: 29% !important;
}

.u-pl-30 {
  padding-left: 30% !important;
}

.u-pl-31 {
  padding-left: 31% !important;
}

.u-pl-32 {
  padding-left: 32% !important;
}

.u-pl-33 {
  padding-left: 33% !important;
}

.u-pl-34 {
  padding-left: 34% !important;
}

.u-pl-35 {
  padding-left: 35% !important;
}

.u-pl-36 {
  padding-left: 36% !important;
}

.u-pl-37 {
  padding-left: 37% !important;
}

.u-pl-38 {
  padding-left: 38% !important;
}

.u-pl-39 {
  padding-left: 39% !important;
}

.u-pl-40 {
  padding-left: 40% !important;
}

.u-pl-41 {
  padding-left: 41% !important;
}

.u-pl-42 {
  padding-left: 42% !important;
}

.u-pl-43 {
  padding-left: 43% !important;
}

.u-pl-44 {
  padding-left: 44% !important;
}

.u-pl-45 {
  padding-left: 45% !important;
}

.u-pl-46 {
  padding-left: 46% !important;
}

.u-pl-47 {
  padding-left: 47% !important;
}

.u-pl-48 {
  padding-left: 48% !important;
}



/*--------------------------------------------------------------
共通でインポートモジュール
# mixinや変数の定義を行う
--------------------------------------------------------------*/
:root {
  --shadow-upper-item: drop-shadow(0px 5px 4px rgba(51, 51, 51, 0.2));
  --shadow-lower-item: drop-shadow(0px -5px 4px rgba(51, 51, 51, 0.2));
}
@media screen and (min-width: 769px) {
  :root {
    --shadow-upper-item: drop-shadow(0px 10px 8px rgba(51, 51, 51, 0.2));
    --shadow-lower-item: drop-shadow(0px -10px 8px rgba(51, 51, 51, 0.2));
  }
}

/*---------------------------------------------------------
common
---------------------------------------------------------*/
.lusitana-regular {
  font-family: "Lusitana", serif;
  font-weight: 400;
  font-style: normal;
}

.lusitana-bold {
  font-family: "Lusitana", serif;
  font-weight: 700;
  font-style: normal;
}

body {
  background: url(../img/tmb-01.png);
  overflow: visible;
}

section {
  background-color: #fff;
}

.box {
  width: 100%;
  /*
     height       : 100%;
   */
  /*  min-height: 1100px;*/
  /*overflow    : hidden;*/
  position: relative;
}

.main-content-wrapper3 {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .box {
    height: auto;
    overflow: visible;
  }
}
@media screen and (max-width: 768px) {
  .content {
    padding: 0 24px;
  }
}
.fade {
  opacity: 0;
}

.box_animation {
  animation: box_animation 2s ease forwards;
}

.fade_animation {
  animation: fadeIn 2s ease forwards;
}

/*---------------------------------------------------------
keyvisual
---------------------------------------------------------*/
.keyvisual {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: #fff;
  z-index: 2;
}

.keyvisual__lead {
  position: absolute;
  width: 80%;
  max-width: 900px;
  text-align: center;
  top: 47%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  animation: fadeOut 1.2s ease 4s forwards;
}
.keyvisual__lead .title {
  font-size: 22px;
  opacity: 0;
  animation: fadeIn 1.5s ease 1s forwards;
}
.keyvisual__lead .title--sub {
  font-size: 18px;
  opacity: 0;
  margin-top: 40px;
  animation: fadeIn 1.5s ease 2s forwards;
}

.keyvisual__logo__wrapper {
  position: relative;
  top: -40px;
}

.keyvisual__logo__circle img {
  width: 92px;
  opacity: 0;
  margin: 0 auto;
  animation: spin 1s ease 5s forwards;
}

.keyvisual__logo__name img {
  position: absolute;
  left: 2px;
  width: 130px;
  opacity: 0;
  text-align: center;
  animation: fadeInUp 1s ease 5.5s forwards;
}

.scrool_prompt {
  opacity: 0;
  padding-top: 60px;
  animation: fadeIn 1s ease 8.5s forwards;
}
.scrool_prompt span {
  position: absolute;
  bottom: 4%;
  bottom: calc(4% + 25px);
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 1px solid #dedede;
  border-radius: 50px;
  box-sizing: border-box;
}
.scrool_prompt span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: "";
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #dedede;
  border-radius: 100%;
  animation: scrool-animation 2s ease 8s infinite;
  box-sizing: border-box;
}

/*---------------------------------------------------------
vision & mission
---------------------------------------------------------*/
.vision {
  width: 100%;
  padding: 18.75vw 0 15.1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .vision {
    padding: 120px 0;
    font-size: 18px;
  }
}
.vision__content {
  text-align: center;
  z-index: 2;
}

.vision__title {
  color: #15c5d2;
  letter-spacing: 0.1em;
  font-size: 57px;
  font-size: clamp(24px, 15.99px + 2.136vw, 57px);
  line-height: 1;
}

.vision__sub_title {
  font-size: 32px;
  font-size: clamp(12px, 7.146px + 1.294vw, 32px);
  letter-spacing: 0.1em;
  margin-top: 90px;
  margin-top: clamp(45px, 34.078px + 2.913vw, 90px);
}

.vision__text {
  font-size: 26px;
  font-size: clamp(10px, 6.117px + 1.036vw, 26px);
  margin-top: 60px;
  margin-top: clamp(22px, 12.777px + 2.46vw, 60px);
}

.vision__animation_wrapper {
  position: relative;
  margin-top: 8%;
}

.vision1 {
  background-image: url(../img/tmb-01-sp.jpg);
  background-size: 100%;
}
@media screen and (min-width: 769px) {
  .vision1 {
    background-image: url(../img/tmb-01.png);
    background-size: cover;
  }
}
.vision1:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 20px 0vw 17vw 100vw;
  z-index: 1;
  filter: var(--shadow-upper-item);
  /*
        @media screen and (max-width: 768px) {
          content                   : none;
        }
    */
}
.vision1:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 11vw 100vw 20px 0vw;
  z-index: 1;
  filter: var(--shadow-lower-item);
  /*
        @media screen and (max-width: 768px) {
          content                   : none;
        }
    */
}

.vision2 {
  z-index: 3;
  background-repeat: no-repeat;
  background-image: url(../img/tmb-01-sp.jpg);
  background-size: 100%;
  overflow: hidden;
  padding-block: 60px 480px;
  padding-top: clamp(25px, 16.505px + 2.265vw, 60px);
  padding-bottom: clamp(120px, 32.621px + 23.301vw, 480px);
}
@media screen and (min-width: 769px) {
  .vision2 {
    background-image: url(../img/tmb-01.png);
    background-size: cover;
  }
}
.vision2 .vision__sub_title {
  font-size: 26px;
  font-size: clamp(10px, 6.117px + 1.036vw, 26px);
}
.vision2 .vision__text {
  font-size: 32px;
  font-size: clamp(12px, 7.146px + 1.294vw, 32px);
}
.vision2:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff transparent transparent #fff;
  /*    border-width: 0vw 3800px 1800px 0vw;*/
  border-width: 450px 0 27.5vw 100vw;
  border-top-width: clamp(190px, 126.893px + 16.828vw, 450px);
  z-index: 1;
  filter: var(--shadow-upper-item);
}
.vision2:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #fff;
  border-width: 0vw 100vw 10vw 0vw;
  z-index: 1;
  filter: var(--shadow-lower-item);
}

/*---------------------------------------------------------
service
---------------------------------------------------------*/
.service {
  width: 100%;
  padding: 60px 0 180px;
  background: #fff;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .service {
    padding: 40px 0;
  }
}
.service__title {
  width: 100%;
  color: #15c5d2;
  font-size: 57px;
  font-size: clamp(24px, 15.99px + 2.136vw, 57px);
  letter-spacing: 0.1em;
  z-index: 9;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .service__title {
    text-align: left;
  }
}

.service__content {
  width: auto;
  max-width: 1517px;
  margin-block: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  z-index: 4;
  margin-inline: 10.4vw;
  margin-inline: clamp(27px, -15.233px + 11.262vw, 201px);
  padding: 0;
}
@media screen and (min-width: 1920px) {
  .service__content {
    margin-inline: auto;
  }
}

.service__list {
  width: 100%;
  margin: 0 auto;
  font-size: 28px;
  font-size: clamp(11px, 6.874px + 1.1vw, 28px);
  color: #666464;
  letter-spacing: 0.1em;
  z-index: 9;
  box-sizing: border-box;
  padding-left: 50px;
  padding-left: clamp(0px, -12.136px + 3.236vw, 50px);
}
.service__list li {
  margin-top: 120px;
  margin-top: clamp(40px, 20.583px + 5.178vw, 120px);
}
.service__list li + li {
  margin-top: clamp(20px, -4.272px + 6.472vw, 120px);
}
.service__list li span {
  position: relative;
  /* padding    : 16px 0 16px 82px; */
  padding-block: 16px 16px;
  padding-inline: 0;
  display: inline-flex;
  gap: 50px;
  gap: clamp(9px, -0.951px + 2.654vw, 50px);
  align-items: center;
}
.service__list li span:before {
  content: "";
  display: inline-block;
  width: 57px;
  width: clamp(18px, 8.534px + 2.524vw, 57px);
  height: 57px;
  height: clamp(18px, 8.534px + 2.524vw, 57px);
  background-image: url(../img/logo-circle.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.service__list li:nth-of-type(1) {
  text-align: left;
}
.service__list li:nth-of-type(2) {
  /* margin-left: -69px; */
  text-align: center;
  margin-left: clamp(-48px, -59.65px + 3.107vw, 0px);
}
.service__list li:nth-of-type(3) {
  /* margin-left: -69px; */
  text-align: right;
}

.service:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #fff;
  border-width: 0vw 4000px 1140px 0vw;
  z-index: 3;
}

.transparent {
  position: absolute;
  width: 100%;
  height: 220px;
  top: 160px;
  background: rgba(255, 255, 255, 0.431372549);
  transition: skew(10deg);
  transform: skewY(-13deg);
  filter: blur(1px);
  box-shadow: 1px 1px 20px #b3b3b3;
  z-index: 99;
}

.transparent__wrapper {
  z-index: 4;
  position: relative;
}

/*---------------------------------------------------------
corporate
---------------------------------------------------------*/
.corporate {
  width: 100%;
  padding: 350px 0 260px;
  padding-top: clamp(80px, 14.466px + 17.476vw, 350px);
  padding-bottom: clamp(80px, 36.311px + 11.65vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/tmb-01-sp.jpg);
  background-size: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:520px) {
  .corporate {
    background-image: url(../img/tmb-01.png);
    background-size: cover;
    background-attachment: fixed;
  }
}

.corporate__content {
  text-align: center;
  z-index: 2;
}

.corporate__title {
  color: #15c5d2;
  letter-spacing: 0.1em;
  font-size: 57px;
  font-size: clamp(18px, 8.534px + 2.524vw, 57px);
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .corporate__title {
    line-height: 1;
  }
}
@media screen and (min-width: 769px) {
  .corporate__title br {
    display: none;
  }
}

.corporate__sub_title {
  font-size: 28px;
  font-size: clamp(10px, 5.631px + 1.165vw, 28px);
  margin-top: 100px;
  margin-top: clamp(30px, 13.01px + 4.531vw, 100px);
  letter-spacing: 0.1em;
}

.corporate__text {
  margin-top: 50px;
  margin-top: clamp(5px, -5.922px + 2.913vw, 50px);
  font-size: 32px;
  font-size: clamp(12px, 7.146px + 1.294vw, 32px);
}

.corporate__animation_wrapper {
  position: relative;
  margin-top: 8%;
}

.corporate:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 0vw 100vw 10vw 0vw;
  z-index: 1;
  filter: var(--shadow-upper-item);
}
.corporate:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 6vw 100vw 0vw 0vw;
  z-index: 1;
  filter: var(--shadow-lower-item);
}

/*---------------------------------------------------------
business_design
---------------------------------------------------------*/
.business_design {
  width: 100%;
  padding: 10px 0 0px 0;
  padding-top: clamp(5px, 3.786px + 0.324vw, 10px);
  display: block;
  align-items: center;
  justify-content: center;
  background-image: url(../img/tmb-02-l.webp);
  background-repeat: no-repeat;
  background-position: right 0px top -200px;
  background-size: 100vw;
  position: relative;
  overflow: hidden;
}

.business_connect {
  width: 100%;
  padding: 10px 0 0px 0;
  display: -ms-flexbox;
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 700px;
  background: #f7e4cb;
  background-size: cover;
  padding-top: 100px;
  height: 880px;
  height: clamp(245px, 90.874px + 41.1vw, 880px);
}
.business_connect:after {
  content: "";
  position: absolute;
  bottom: -70px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 0vw 100000vw 4vw 100000vw;
  z-index: 10;
  filter: drop-shadow(0px -20px 10px rgba(51, 51, 51, 0.1));
}
@media screen and (max-width: 768px) {
  .business_connect {
    min-height: auto !important;
  }
}
.business_connect .in {
  width: 100%;
  height: 880px;
  background-color: #f9e6cc;
  background-image: url(../img/tmb-03-pc.png);
  background-size: 120% auto;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-attachment: scroll;
  position: absolute;
  top: 0;
  z-index: 4;
  background-size: cover;
}
@media screen and (max-width:521px) {
  .business_connect .in {
    background-size: 160% auto;
    background-image: url(../img/tmb-03.png);
    background-position-x: -70px !important;
  }
}

@media screen and (max-width: 996px) {
  .business_connect .in {
    height: 700px;
  }
}
@media screen and (max-width: 768px) {
  .business_connect .in {
    height: 380px;
  }
}
.business_connect__content {
  margin: 0px auto;
  width: 100%;
  max-width: 1100px;
  text-align: center;
  z-index: 9;
  position: relative;
  padding: 200px 0;
  padding-block: clamp(86px, 40.126px + 12.233vw, 275px);
}

.business_connect__text {
  width: 100%;
  font-size: 28px;
  font-size: clamp(8px, 3.146px + 1.294vw, 28px);
  text-align: center;
  margin-top: 170px;
  margin-top: clamp(20px, -16.408px + 9.709vw, 170px);
}

.business_connect__subcopy {
  font-size: 32px;
  font-size: clamp(9px, 3.417px + 1.489vw, 32px);
  margin-top: 45px;
  margin-top: clamp(10px, 1.505px + 2.265vw, 45px);
}

.business_connect_white {
  content: "";
  position: absolute;
  top: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 0vw 0vw 9.8vw 100vw;
  z-index: 8;
  filter: var(--shadow-upper-item);
  padding-top: 60px;
}

.business_connect_white2 {
  content: "";
  position: absolute;
  bottom: 0vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 0vw 0vw 50px 100vw;
  z-index: 19;
  filter: var(--shadow-lower-item);
}

@media screen and (max-width: 768px) {
  .business_connect_white {
    border-width: 9vw 0vw 6vw 100vw;
    padding-top: 5px;
  }
  .business_connect_white2 {
    display: block;
  }
  .business_design {
    background-position: right 0px bottom 30vw;
    background-size: cover;
    border-width: 0vw 0vw 70px 1000px;
  }
  .business_design.original {
    padding: 8px 0 0px;
    background-position: right 0px bottom 30vw;
    background-position: right 0px top -9.7vw;
    background-size: cover;
    background-size: contain;
    border-width: 0vw 0vw 70px 1000px;
  }
}
.business_design__content {
  margin: 0 auto;
  width: auto;
  text-align: left;
  z-index: 9;
  position: relative;
  padding-inline: 0;
  margin-right: 0;
  margin-left: clamp(20px, -16.893px + 9.838vw, 172px);
  margin-right: clamp(29px, -24.398px + 14.239vw, 249px);
  padding-bottom: 100px;
}
@media screen and (min-width: 1920px) {
  .business_design__content {
    margin-right: 13vw;
  }
}
@media screen and (min-width: 769px) {
  .business_design__content {
    padding-bottom: 0;
  }
}

.business_design__main_title {
  position: absolute;
  display: inline-block;
  bottom: -500px;
  left: 0;
  color: #15c5d2;
  font-size: 18px;
  letter-spacing: 0.2em;
  z-index: 9;
}

@media screen and (max-width: 1280px) {
  .business_design__main_title {
    left: 100px;
  }
  .design_area .business_design__main_title {
    bottom: -470px;
  }
}
@media screen and (max-width: 1100px) {
  .business_design__main_title {
    bottom: -300px;
    left: 100px;
  }
  .design_area .business_design__main_title {
    bottom: -470px;
  }
}
@media screen and (max-width: 768px) {
  .business_design__main_title {
    margin-top: 30px;
    position: static;
    padding: 0;
    font-size: 13px;
    text-shadow: 1px 1px 3px #ffffff, -1px -1px 3px #ffffff;
  }
  #business_design .business_design__main_title {
    position: static;
  }
  #supported .business_design__main_title {
    padding-bottom: 360px;
  }
}
.business_design__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 0;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  gap: 75px;
  gap: clamp(14px, -0.806px + 3.948vw, 75px);
}
.business_design__title p {
  letter-spacing: 0.05em;
  font-size: 81px;
  font-size: clamp(18px, 2.709px + 4.078vw, 81px);
}
.business_design__title p:nth-of-type(1) {
  letter-spacing: 0.08em;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}
.business_design__title p:nth-of-type(1) span {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}
.business_design__title p:nth-of-type(2) {
  font-size: 48px;
  font-size: clamp(13px, 4.505px + 2.265vw, 48px);
}

.business_design__text {
  /* margin-top   : 140px; */
  margin-top: 95px;
  margin-top: clamp(20px, 1.796px + 4.854vw, 95px) !important;
  font-size: 28px;
  font-size: clamp(8px, 3.146px + 1.294vw, 28px);
  /* float     : left; */
}
.concepts .business_design__text {
  margin-top: clamp(5px, -16.845px + 5.825vw, 95px) !important;
}
.ideas .business_design__text {
  margin-top: clamp(0px, -18.204px + 4.854vw, 75px) !important;
}
.ux .business_design__text {
  margin-top: clamp(5px, -16.845px + 5.825vw, 95px) !important;
}
.business_design__text.paddingbottom {
  padding-bottom: 360px;
}
.business_design__text.paddingbottom2 {
  padding-bottom: 350px;
  padding-bottom: clamp(100px, 39.32px + 16.181vw, 350px);
  text-align: right;
  margin-top: 60px;
}
.business_design__text.paddingbottom2 p:first-child {
  padding-right: 3em;
}
.business_design__text.uxarea {
  padding-bottom: 460px;
  padding-left: clamp(22.5px, -16.456px + 10.388vw, 183px);
  padding-left: clamp(5px, -13.204px + 4.854vw, 80px);
}
@media screen and (min-width: 1920px) {
  .business_design__text.uxarea {
    padding-left: 1.3vw;
  }
}
.business_design__text.toyours {
  padding-bottom: 520px;
  padding-bottom: clamp(0px, -126.214px + 33.657vw, 520px);
}
.business_design__text p:nth-of-type(2) {
  margin-top: 50px;
  font-size: 32px;
  padding-left: 200px;
  margin-top: clamp(10px, 0.291px + 2.589vw, 50px);
  font-size: clamp(9px, 3.417px + 1.489vw, 32px);
  padding-left: clamp(46px, 8.621px + 9.968vw, 200px);
}

@media screen and (max-width: 1280px) {
  .business_design__text {
    margin-top: 100px;
  }
  .business_design__text.paddingbottom2 {
    padding-left: 60px;
  }
}
@media screen and (max-width: 768px) {
  .business_design__text.paddingbottom {
    padding-left: 0px;
    padding-bottom: 0px;
  }
  .business_design__text.paddingbottom2 {
    padding-left: 0px;
  }
  #concepts .business_design__text {
    margin-top: 100px;
    text-shadow: 1px 1px 3px #ffffff, -1px -1px 3px #ffffff;
  }
}
#concepts .ideas .business_design__text {
  margin-left: 9.9vw;
}

@media screen and (max-width: 768px) {
  .business_design__text.uxarea {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 1040px) {
  .business_design__text {
    margin-top: 130px;
  }
}
@media screen and (max-width: 768px) {
  .business_design__text {
    float: none;
  }
  .business_design__text.toyours p:last-child {
    padding-left: 45px;
    margin-top: 9px;
  }
}
.trend {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 100px 0vw 0vw 1900px;
  border-top-width: clamp(60px, 50.291px + 2.589vw, 100px);
  z-index: 3;
  filter: var(--shadow-lower-item);
}

.trend2 {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 80px 0vw 0vw 1900px;
  z-index: 3;
  filter: drop-shadow(50px 20px 10px rgba(51, 51, 51, 0.1));
}

.trend3 {
  content: "";
  position: absolute;
  bottom: 0px;
  bottom: clamp(-16px, -19.883px + 1.036vw, 0px);
  width: 0;
  height: 90px;
  height: clamp(54px, 45.262px + 2.33vw, 90px);
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 6.6vw 0vw 5px 100vw;
  z-index: 3;
  filter: var(--shadow-lower-item);
}

.trend4 {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 7.5vw 0vw 0vw 100vw;
  z-index: 3;
  filter: var(--shadow-lower-item);
  padding-bottom: 0;
}

.trend5 {
  content: "";
  position: absolute;
  top: -250px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 100px 0vw 0vw 1900px;
  z-index: 2;
  filter: drop-shadow(-50px -20px 10px rgba(51, 51, 51, 0.1));
  padding-bottom: 150px;
}

.trend6 {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 0px 100vw 11vw 0;
  z-index: 2;
  filter: var(--shadow-upper-item);
  padding-top: 230px;
  padding-top: clamp(0px, -55.825px + 14.887vw, 230px);
}

@media screen and (max-width: 768px) {
  #ideas .business_design__text p:nth-of-type(1) {
    text-align: right;
    padding: 0;
  }
  #ideas .business_design__text p:nth-of-type(2) {
    text-align: left;
  }
  .business_design__text p:nth-of-type(2) span {
    display: block;
  }
  .business_design__text p:nth-of-type(2) span:last-child {
    margin-left: 105px;
  }
}
.business_design:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 115px 0vw 30vw 100vw;
  z-index: 3;
  filter: var(--shadow-upper-item);
}
.business_design.concepts::before {
  border-width: 115px 0vw 30vw 100vw;
  border-top-width: clamp(48px, 31.738px + 4.337vw, 115px);
}
.business_design.ux::before {
  border-width: 115px 0vw 39vw 100vw;
  border-top-width: clamp(46px, 29.252px + 4.466vw, 115px);
}
@media screen and (max-width: 768px) {
  .business_design.ux::before {
    border-bottom-width: 44vw;
  }
}
.business_design.original:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  /* border-width  : 115px 0vw 43vw 100vw; */
  border-width: 205px 0vw 43vw 100vw;
  z-index: 3;
  filter: var(--shadow-upper-item);
}
.business_design.ideas:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 103px 100vw 25vw 0vw;
  border-top-width: clamp(20px, -0.146px + 5.372vw, 103px);
  border-bottom-width: 38vw;
  z-index: 3;
  filter: var(--shadow-upper-item);
}
@media screen and (min-width: 769px) {
  .business_design.ideas:before {
    border-bottom-width: 25vw;
  }
}

@media screen and (max-width: 768px) {
  .business_design.original:before {
    top: 0;
    width: 0;
    height: 0;
    border-color: #fff #fff transparent;
    border-width: 40px 0vw 39vw 63vw;
    right: 0;
    z-index: 2;
  }
  .business_design.original:after {
    position: absolute;
    border-style: solid;
    content: "";
    top: 0;
    width: 0;
    height: 0;
    border-color: #fff #fff;
    border-width: 75px 0vw 39vw 38vw;
    left: 0;
    z-index: 2;
  }
}
@media screen and (min-width: 1290px) {
  .business_design__text.uxarea {
    padding-bottom: 460px;
  }
}
.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
}
.block p {
  display: inline-block;
  font-size: 60px;
  font-family: "Great Vibes", cursive;
  padding: 0;
  margin: 0;
}

/*---------------------------------------------------------
through
---------------------------------------------------------*/
.through {
  width: 100%;
  padding: 830px 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/tmb-03.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  position: relative;
}

@media screen and (max-width: 768px) {
  .through {
    background-attachment: inherit;
    padding: 380px 0 220px;
    background-size: cover;
    background-position: left 40% bottom;
  }
}
.through__content {
  text-align: center;
  z-index: 2;
}

.through__title {
  position: absolute;
  display: inline-block;
  top: 40px;
  left: 200px;
  color: #15c5d2;
  font-size: 18px;
  letter-spacing: 0.2em;
  z-index: 9;
}

@media screen and (max-width: 768px) {
  .through__title {
    top: 40px;
    left: 20px;
  }
}
.through__sub_title {
  font-size: 23px;
  letter-spacing: 0.1em;
  margin-top: 80px;
}

.through__text {
  margin-top: 20px;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .through__text {
    font-size: 18px;
  }
}
.through:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 20vw 0vw 20vw 100vw;
  z-index: 1;
  filter: drop-shadow(50px 20px 10px rgba(51, 51, 51, 0.1));
}

/*---------------------------------------------------------
mobility
---------------------------------------------------------*/
.mobility {
  width: 100%;
  padding: 480px 0 250px;
  padding-top: clamp(100px, 7.767px + 24.595vw, 480px);
  padding-bottom: clamp(83px, 42.466px + 10.809vw, 250px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: url(../img/tmb-01-sp.jpg);
  background-size: 100%;
}
@media screen and (min-width:520px) {
  .mobility {
    background-size: cover;
    background: url(../img/tmb-01.png);
    background-attachment: fixed;
  }
}
.mobility#reserch {
  padding: 400px 0 150px;
  padding-top: clamp(80px, 2.33px + 20.712vw, 400px);
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);
}
.mobility .trfront {
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 38px 100vw 10vw 0vw;
  border-top-width: clamp(0px, 47.223px + -2.46vw, 38px);
  z-index: 1;
  filter: var(--shadow-upper-item);
  padding-top: 280px;
  padding-top: clamp(0px, -67.961px + 18.123vw, 280px);
}
@media screen and (min-width: 769px) {
  .mobility .trfront {
    border-width: 0vw 100vw 12vw 0vw;
  }
}

@media screen and (max-width: 768px) {
  .mobility#reserch {
    margin-top: 0;
  }
}
.mobility__content {
  text-align: center;
  z-index: 2;
  /* margin    : 120px 0; */
  margin: 170px 0 50px;
  margin-top: clamp(10px, -28.835px + 10.356vw, 170px);
  margin-bottom: clamp(0px, -12.136px + 3.236vw, 50px);
}

.mobility__title {
  color: #15c5d2;
  letter-spacing: 0.05em;
  font-size: 57px;
  font-size: clamp(18px, 8.534px + 2.524vw, 57px);
  line-height: 1.2;
}

br.br_sp {
  display: none;
}

@media screen and (max-width: 768px) {
  br.br_sp {
    display: inline;
  }
}
.mobility__sub_title {
  letter-spacing: 0.1em;
  font-size: 28px;
  margin-top: 118px;
  font-size: clamp(10px, 5.631px + 1.165vw, 28px);
  margin-top: clamp(40px, 21.068px + 5.049vw, 118px);
}

@media screen and (max-width: 768px) {
  .mobility__sub_title {
    margin-inline: auto;
  }
  .mobility__sub_title span {
    display: block;
  }
  .mobility__sub_title span:first-child {
    text-align: left;
  }
  .mobility__sub_title span:last-child {
    text-align: right;
    margin-left: 40px;
  }
}
.mobility__text {
  margin-top: 57px;
  font-size: 32px;
  font-size: clamp(12px, 7.146px + 1.294vw, 32px);
  margin-top: clamp(8px, -3.893px + 3.172vw, 57px);
}
@media screen and (max-width: 768px) {
  .mobility__text span {
    display: block;
  }
  .mobility__text span:first-child {
    text-align: left;
  }
  .mobility__text span:last-child {
    text-align: right;
    margin-left: 40px;
  }
}

.mobility__animation_wrapper {
  position: relative;
  margin-top: 8%;
}

.mobility:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 6.8vw 100vw 15px 0vw;
  border-bottom-width: clamp(0px, 18.641px + -0.971vw, 15px);
  z-index: 1;
  filter: var(--shadow-lower-item);
}

/*---------------------------------------------------------
concepts
---------------------------------------------------------*/
.concepts {
  background: #fff;
}

.business_designlay {
  background-image: url(../img/tmb-04-new-sp.png);
  background-size: cover;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-repeat: no-repeat;
  background-position: right 0px bottom 0;
  position: relative;
  min-height: 680px;
  min-height: clamp(180px, 58.641px + 32.362vw, 680px);
}
@media screen and (min-width: 769px) {
  .business_designlay {
    background-image: url(../img/tmb-04-new.png);
    background-size: auto;
  }
}

@media screen and (max-width: 768px) {
  .business_designlay {
    margin-bottom: 0px;
  }
}
/*---------------------------------------------------------
ideas
---------------------------------------------------------*/
.ideas {
  background: url(../img/tmb-05-new.png) no-repeat;
  /* background-position: right 0 bottom -180px;
   min-height            : 690px; */
  padding-top: 0;
  background-size: cover;
  background-position: bottom clamp(-60px, 40.087px + -5.213vw, 0px) left;
  padding-bottom: clamp(85px, 8.167px + 9.991vw, 200px);
}
@media screen and (max-width: 768px) {
  .ideas {
    background-position: top left;
    padding-bottom: clamp(25px, -32.252px + 15.267vw, 85px);
  }
}

/*---------------------------------------------------------
supported
---------------------------------------------------------*/
.supported {
  background: url(../img/tmb-06.png) no-repeat;
  background-position: right bottom;
}

/*---------------------------------------------------------
reserch
---------------------------------------------------------*/
/*---------------------------------------------------------
ux
---------------------------------------------------------*/
.ux {
  background-image: url(../img/tmb-07-sp.png);
  background-repeat: no-repeat;
  background-position: right 0 bottom -220px;
  overflow: hidden;
  height: 790px;
  background-color: #fff;
  background-position: right 0 bottom clamp(-200px, 16.233px + -11.262vw, -26px);
  background-position: right 0 bottom 0;
  height: clamp(230px, 45.534px + 49.191vw, 990px);
}
@media screen and (min-width: 769px) {
  .ux {
    background-image: url(../img/tmb-07.png);
  }
}
.ux:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent;
  border-width: 6.9vw 0vw 5px 100vw;
  z-index: 3;
  filter: var(--shadow-lower-item);
}

.spacer100 {
  width: 100%;
  height: 100px;
  height: clamp(60px, 50.291px + 2.589vw, 100px) !important;
  background: #fff;
  position: relative;
  z-index: 1;
}

.spacer200 {
  width: 100%;
  height: 200px;
  background: #fff;
  position: relative;
  z-index: 1;
}

/*---------------------------------------------------------
smile
---------------------------------------------------------*/
.smile {
  width: 100%;
  /* padding          : 360px 0 500px; */
  padding-inline: 0;
  padding-top: clamp(120px, 61.748px + 15.534vw, 360px);
  padding-bottom: clamp(100px, 27.184px + 19.417vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cee2f5;
  background-image: url(../img/tmb-01.png);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width:521px) {
  .smile {
    background-image: url(../img/tmb-01-sp.jpg);
    background-size: 100%;
    background-attachment: scroll;
  }
}

.smile__content {
  text-align: center;
  align-items: center;
  z-index: 2;
  display: flex;
  gap: 160px;
  gap: clamp(40px, 10.874px + 7.767vw, 160px);
}
@media screen and (max-width: 768px) {
  .smile__content {
    flex-direction: column;
  }
}

.smile__title {
  /* position: absolute; */
  width: 169px;
  width: clamp(60px, 33.544px + 7.055vw, 169px);
}
.smile__title img {
  opacity: 0.6;
}

@media screen and (max-width: 768px) {
  .smile__title {
    position: relative;
    margin: 0 auto;
    top: inherit;
    left: inherit;
    margin-bottom: 0px;
    width: 60px;
  }
}
.smile__sub_title {
  font-size: 23px;
  letter-spacing: 0.1em;
  margin-top: 80px;
}

.smile__text {
  margin-top: 20px;
  font-size: 28px;
  font-size: clamp(9px, 4.388px + 1.23vw, 28px);
}
.smile__text:nth-of-type(2) {
  /* margin-left: 420px; */
  margin-left: -38px;
}

@media screen and (max-width: 768px) {
  .smile__text:nth-of-type(2) {
    margin-left: auto;
  }
}
.smile:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 1vw 0vw 9.3vw 100vw;
  z-index: 1;
  filter: var(--shadow-upper-item);
}
@media screen and (max-width: 768px) {
  .smile:before {
    border-width: 1vw 0vw 19vw 100vw;
  }
}
.smile:after {
  content: "";
  position: absolute;
  /* bottom        : 0; */
  bottom: -220px;
  bottom: clamp(-220px, -21.165px + -10.356vw, -60px);
  width: 0;
  height: 130px;
  height: clamp(40px, 18.155px + 5.825vw, 130px);
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 6vw 100vw 8vw 0vw;
  z-index: 1;
  filter: var(--shadow-lower-item);
}

/*---------------------------------------------------------
news
---------------------------------------------------------*/
.news {
  width: 100%;
  padding: 10px 0 25px 0;
  display: -ms-flexbox;
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.business_connect {
  width: 100%;
  padding: 10px 0 0px 0;
  display: -ms-flexbox;
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 700px;
  background: #f7e4cb;
  background-size: cover;
  padding-top: 100px;
}

@media screen and (max-width: 768px) {
  .news {
    padding: 20px 0 50px;
    background-position: right 0px bottom 30vw;
    background-size: cover;
    border-width: 0vw 0vw 70px 1000px;
  }
}
.news__content {
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  text-align: center;
  z-index: 9;
  position: relative;
}

.news__title {
  color: #15c5d2;
  letter-spacing: 0.2em;
  font-size: 57px;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .news__title {
    font-size: 24px;
  }
}
.news_detail__content {
  background-image: url(../img/book-bg.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 60px 60px 70px;
  padding-top: clamp(18px, 7.806px + 2.718vw, 60px);
  padding-bottom: clamp(18px, 5.379px + 3.366vw, 70px);
  padding-inline: clamp(18px, 7.806px + 2.718vw, 60px);
  margin-top: 45px;
  margin-inline: auto;
  width: clamp(267px, 85.932px + 48.285vw, 1013px);
}

p.news_detail__date {
  text-align: left;
  font-size: 28px;
  font-size: clamp(9px, 4.388px + 1.23vw, 28px);
  letter-spacing: 0.05em;
  line-height: 1;
}
p.news_detail__text {
  font-size: 32px;
  font-size: clamp(9px, 3.417px + 1.489vw, 32px);
  letter-spacing: 0.05em;
  line-height: 1.56;
  margin-top: 40px;
}
p.news_detail__info {
  font-size: 28px;
  margin-top: 50px;
  font-size: clamp(8px, 3.146px + 1.294vw, 28px);
  margin-top: clamp(12px, 2.777px + 2.46vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.3;
}
p.news_detail__title {
  font-size: 34px;
  margin-top: 48px;
  font-size: clamp(9px, 2.932px + 1.618vw, 34px);
  margin-top: clamp(13px, 4.505px + 2.265vw, 48px);
  letter-spacing: 0.05em;
  line-height: 1.35;
}

.news_detail__title span {
  font-size: 0.824em;
  display: block;
}

.news__book {
  margin-top: 30px;
  margin-top: clamp(8px, 2.66px + 1.424vw, 30px);
  width: clamp(96px, 31.922px + 17.087vw, 360px);
  margin-inline: auto;
}
.news__book img {
  height: auto;
}

.news_detail__amazon {
  margin-top: 50px;
  font-size: 29px;
  font-size: clamp(8px, 2.903px + 1.359vw, 29px);
  margin-top: clamp(16px, 7.748px + 2.201vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.news_detail__link {
  margin-top: 40px;
  font-size: 29px;
  font-size: clamp(8px, 2.903px + 1.359vw, 29px);
  margin-top: clamp(12px, 5.204px + 1.812vw, 40px);
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: underline;
}

/*---------------------------------------------------------
profile
---------------------------------------------------------*/
.profile {
  width: 100%;
  padding: 360px 0 500px;
  padding-top: clamp(80px, 12.039px + 18.123vw, 360px);
  padding-bottom: clamp(100px, 2.913px + 25.89vw, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cee2f5;
  position: relative;
  overflow: hidden;
  background-image: url(../img/tmb-01-sp.jpg);
  background-size: 100%;
}
@media screen and (min-width: 769px) {
  .profile {
    background-attachment: fixed;
    background-image: url(../img/tmb-01.png);
    background-size: 126%;
  }
}

.profile__content {
  text-align: center;
  z-index: 2;
}

.profile__title {
  color: #15c5d2;
  letter-spacing: 0.2em;
  font-size: clamp(24px, 15.99px + 2.136vw, 57px);
  line-height: 1;
}

.profile__columns {
  margin-top: 100px;
  margin-top: clamp(30px, 13.01px + 4.531vw, 100px);
  display: grid;
  grid-template-columns: 33% 1fr;
  max-width: 1421px;
  width: 100%;
  width: clamp(323px, 56.495px + 71.068vw, 1421px);
}

.profile__image {
  position: relative;
  align-self: flex-start;
}
.profile__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  width: clamp(3px, 0.816px + 0.583vw, 12px);
  height: 100%;
  background-color: #08bfcd;
}
.profile__image img {
  display: block;
  width: 100%;
  height: auto;
}

.profile__column {
  font-size: 23px;
  letter-spacing: 0.05em;
  line-height: 2.04;
  text-align: left;
  position: relative;
  font-size: clamp(9px, 5.602px + 0.906vw, 23px);
}
.profile__column h3 {
  font-size: 69px;
  font-size: clamp(18px, 5.621px + 3.301vw, 69px);
  letter-spacing: 0.1em;
  padding-left: 37px;
  padding-bottom: 18px;
  padding-top: 10px;
  padding-left: clamp(12px, 5.932px + 1.618vw, 37px);
  padding-bottom: clamp(5px, 1.845px + 0.841vw, 18px);
  padding-top: clamp(0px, -2.427px + 0.647vw, 10px);
  border-bottom: 4px solid #08bfcd;
  border-bottom-width: clamp(1px, 0.272px + 0.194vw, 4px);
  line-height: 1;
}
.profile__column h3 span {
  letter-spacing: 0.1em;
  display: inline-block;
  font-size: 46px;
  margin-left: 90px;
  font-size: clamp(11px, 2.505px + 2.265vw, 46px);
  margin-left: clamp(15px, -3.204px + 4.854vw, 90px);
}
.profile__column p {
  padding-inline: 39px 0;
  padding-top: 16px;
  padding-inline-start: clamp(9px, 1.718px + 1.942vw, 39px);
  padding-top: clamp(5px, 2.33px + 0.712vw, 16px);
  font-size: clamp(5.3px, 1.004px + 1.146vw, 23px);
}

.profile__signature {
  position: absolute;
  height: auto;
  bottom: clamp(-135px, -9.485px + -6.537vw, -34px);
  right: clamp(-10px, 2.427px + -0.647vw, 0px);
  width: clamp(76.5px, 14.971px + 16.408vw, 330px);
}

.profile:before {
  content: "";
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #fff #fff transparent;
  border-width: 0vw 118vw 15vw 0vw;
  z-index: 1;
  filter: var(--shadow-upper-item);
}
.profile:after {
  content: "";
  position: absolute;
  bottom: -230px;
  height: 130px;
  bottom: clamp(-230px, -1.34px + -11.909vw, -46px);
  height: clamp(26px, 0.757px + 6.731vw, 130px);
  width: 0;
  border-style: solid;
  border-color: transparent #fff #fff;
  border-width: 6vw 100vw 8vw 0vw;
  filter: var(--shadow-lower-item);
  z-index: 1;
}

/*---------------------------------------------------------
company_detail
---------------------------------------------------------*/
.company_detail {
  background: #fff;
  position: relative;
  padding: 100px 0;
}

@media screen and (max-width: 768px) {
  .company_detail {
    padding: 80px 0 50px;
  }
}
.company_detail__list {
  width: 100%;
  margin: 0 auto;
}
.company_detail__list ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2%;
}
.company_detail__list ul:nth-of-type(8), .company_detail__list ul:nth-of-type(9) {
  margin-top: 1%;
}
.company_detail__list ul li {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company_detail__list ul li:nth-child(1), .company_detail__list ul li:nth-child(3) {
  width: 35%;
}
.company_detail__list ul li:nth-child(2) {
  width: 30%;
}
.company_detail__list ul li:nth-of-type(1) {
  justify-content: flex-end;
}
.company_detail__list ul li:nth-of-type(2) {
  text-align: center;
}
.company_detail__list ul li:nth-of-type(3) {
  justify-content: flex-start;
}

@media screen and (max-width: 768px) {
  .company_detail__list ul li {
    font-size: 14px;
    width: 30%;
  }
}
.company_detail__content {
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
}

.company_detail__title {
  color: #15c5d2;
  font-size: 57px;
  font-size: clamp(24px, 15.99px + 2.136vw, 57px);
  z-index: 9;
  letter-spacing: 0.2em;
  text-align: center;
}

/*---------------------------------------------------------
contact
---------------------------------------------------------*/
.contact {
  background: #fff;
  position: relative;
  padding: 200px 0;
  padding-block: clamp(50px, 13.592px + 9.709vw, 200px);
  filter: var(--shadow-upper-item);
  z-index: 1;
}

.contact__title {
  color: #15c5d2;
  font-size: 57px;
  font-size: clamp(24px, 15.99px + 2.136vw, 57px);
  z-index: 9;
  letter-spacing: 0.2em;
  text-align: center;
}

.contact__heading {
  color: #000;
}

.contact__back_icon {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: 38px;
  opacity: 0.5;
  transition: all 0.4s;
}
.contact__back_icon:hover {
  opacity: 0.2;
  transition: all 0.4s;
}

@media screen and (max-width: 768px) {
  .contact__back_icon {
    margin-top: 140px;
    position: relative;
    display: block;
  }
}
.contact .end_message {
  text-align: center;
  font-size: 16px;
  margin-top: 2%;
}
.contact .inner {
  z-index: 99;
}

.contact__wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.contact__wrapper form {
  font-size: 16px;
}
.contact__wrapper ul li {
  margin-top: 4%;
}
.contact__wrapper ul li:first-child {
  margin-top: 0;
}
.contact__wrapper ul li input[type=text], .contact__wrapper ul li input[type=email], .contact__wrapper ul li input[type=tel] {
  width: 100%;
  height: 36px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding: 0 8px;
}
.contact__wrapper ul li textarea {
  width: 100%;
  height: 36px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding: 0 8px;
}
.contact__wrapper ul li input[type=text]::-moz-placeholder, .contact__wrapper ul li input[type=email]::-moz-placeholder, .contact__wrapper ul li input[type=tel]::-moz-placeholder {
  color: #ccc;
}
.contact__wrapper ul li input[type=text]::placeholder, .contact__wrapper ul li input[type=email]::placeholder, .contact__wrapper ul li input[type=tel]::placeholder {
  color: #ccc;
}
.contact__wrapper ul li textarea::-moz-placeholder {
  color: #ccc;
}
.contact__wrapper ul li textarea::placeholder {
  color: #ccc;
}
.contact__wrapper ul li input[type=text]:focus, .contact__wrapper ul li input[type=email]:focus, .contact__wrapper ul li input[type=tel]:focus {
  outline: 0;
  border-bottom: 1px solid #000;
}
.contact__wrapper ul li textarea {
  width: 100%;
  height: 80px;
  padding: 0 8px;
}
.contact__wrapper ul li textarea:focus {
  outline: 0;
  border-bottom: 1px solid #000;
}
.contact__wrapper ul li input[type=submit] {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding: 6px 16px;
  border: none;
  color: #000;
  border: 1px solid #000;
  letter-spacing: 0.2em;
  font-size: 16px;
  margin-left: 8px;
  transition: all 0.4s;
  background: #fff;
}
.contact__wrapper ul li input[type=submit]:hover {
  background: #60d1db;
  color: #fff;
  border: 1px solid #60d1db;
  transition: all 0.4s;
}

/*---------------------------------------------------------
footer
---------------------------------------------------------*/
.white {
  background: #fff;
}

.footer {
  background: #000;
  padding: 10px 0;
  line-height: 1;
  position: relative;
  background-image: url(../img/tmb-01-sp.jpg);
  background-position-x: 0%;
  background-position-y: center;
  background-attachment: scroll;
  background-size: auto;
  background-size: cover;
}
@media screen and (min-width: 769px) {
  .footer {
    background-image: url(../img/tmb-01.png);
  }
}

.footer__logo {
  width: 112px;
  width: clamp(47.5px, 31.845px + 4.175vw, 112px);
  padding: 24px 0;
  margin: 0 auto;
}

.footer__copy {
  font-size: 0.8rem;
  text-align: center;
  color: #787878;
  letter-spacing: 0.1em;
  font-family: "Helvetica Neue";
  margin: 0 10px;
}

/*---------------------------------------------------------
css3
---------------------------------------------------------*/
@keyframes scrool-animation {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  0% {
    top: 130px;
    opacity: 0;
  }
  100% {
    top: 110px;
    opacity: 0.6;
  }
}
@keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(200deg) scale(0.5);
  }
  100% {
    opacity: 0.6;
    transform: rotate(360deg) scale(1);
  }
}
@keyframes box_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: 10%;
  }
}
.design_area {
  /* height  : 800px; */
  position: relative;
}

@media screen and (max-width: 768px) {
  .design_area {
    /* height  : 700px; */
    position: relative;
  }
}

/* IE */
@media all and (-ms-high-contrast: none) {
  .vision1:before, .vision1::after {
    left: 0;
  }
  .vision2:before, .vision2::after {
    left: 0;
  }
  .vision3:before, .vision3::after {
    left: 0;
  }
  .smile::after, .smile::before {
    left: 0;
  }
  .trfront {
    left: 0;
  }
  .business_design__main_title {
    bottom: -600px;
  }
}
/*bigm*/
@media screen and (min-width: 1900px) {
  .corporate,
  .mobility {
    background-size: cover;
  }
  .trend,
  .trend2 {
    border-width: 100px 0vw 0vw 3000px;
  }
  .business_connect_white {
    /* border-width: 0vw 0vw 300px 3000px; */
  }
  .trend5 {
    border-width: 100px 0vw 0vw 3000px;
  }
  .smile {
    background-size: cover;
  }
}/*# sourceMappingURL=style-new.css.map */