* { font-size: inherit;line-height: inherit;margin:0;padding:0; }
*,::before,::after { box-sizing:inherit; }
::before,::after { text-decoration:inherit;vertical-align:inherit; }
h1,h2,h3,h4,h5,h6 { font-family:inherit;font-size:100%;font-weight:inherit; }
address,em,i { font-style:normal; }
table { border-collapse:collapse;border-spacing:0; }
th { font-weight:inherit;text-align:left; }
legend { display:none; }
img,fieldset { border:0; }
ul, ol { list-style-type:none; }
article,aside,dialog,figure,figcaption,footer,header,hgroup,nav,section,main { display:block; }
html { background-color:transparent;overflow-y:scroll; }
input,textarea { outline:none; }
input,select { vertical-align:middle; }
object,embed { vertical-align:top; }
img { background:transparent;border-style:none;font-size:0;line-height:0;vertical-align:top; }
a { background-color:transparent;-webkit-text-decoration-skip:none;vertical-align:baseline;-webkit-tap-highlight-color:transparent;}
a:active,a:hover { outline:none;outline-width:0; }
b,strong { font-weight:inherit;vertical-align:baseline; }
span,em,i { vertical-align:baseline; }
small { font-size: 80%;vertical-align:baseline; }
button,input,select,textarea { color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;outline:none; }
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}
table { border-collapse:collapse;border-spacing:0; }
textarea { resize: vertical; }
.clearfix:after { clear:both;content:'';display:block;height:0; }
.clear { clear:both; }
.none { display:none; }
:root { box-sizing:border-box;text-rendering:optimizeLegibility;}
:root {
    --theme-color: #35b6e4;
    --theme-color-rgb: rgb(53, 182, 228);
}
::-webkit-input-placeholder {
    color: #aaa;
}
::-moz-placeholder {
    color: #aaa;
}
:-ms-input-placeholder {
    color: #aaa;
}
::-ms-input-placeholder {
    color: #aaa;
}
::placeholder {
    color: #aaa;
}
::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #FFFFFF;
    color: #555;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    height: 100%;
    letter-spacing: .2em;
    line-height: 1.6;
    text-rendering: auto;
    word-wrap: break-word;
    /* overscroll-behavior: none; */
    /* touch-action: none; */
}
canvas{
    position: absolute;
    top:0;
    left: 0;
}
a {
    color: var(--theme-color);
    outline: none;
    text-decoration: none;
    transition: all .4s;
}
::-moz-selection {
    background-color: #E6E6E6;
    color: var(--theme-color);
    text-shadow: none
}
::selection {
    background-color: #E6E6E6;
    color: var(--theme-color);
    text-shadow: none
}
img {
    height: auto;
    max-width: 100%;
}

.en {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
}

.hd {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}
.logo {
    padding: 20px;
    width: 180px;
}
.u-inner {
    margin: 0 auto;
    max-width: 1220px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
}
.hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
}
.hero::before {
    background-image: url(../img/top/overlay.svg), url(../img/top/overlay.svg);
    background-position: center center;
    background-repeat: no-repeat;
    /* background-size: 1600px auto; */
    background-size: cover;
    content: "";
    display: block;
    /* filter: blur(400vw); */
    height: 100%;
    /* opacity: .7; */
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: skew(120deg);
    width: 100%;
}
.hero-copy-en {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 25px;
    font-style: normal;
    font-weight: 200;
    color: #2f0d0d;
    /* mix-blend-mode: difference; */
    line-height: 1.33;
    mix-blend-mode: overlay;
    margin-bottom: 1em;
}
.hero-copy-jp {
    /* background: linear-gradient(270deg, #4ec9ee 0%, #0c95d2 100%); */
    /* background-clip: text; */
    color: #2f0d0d;
    /* -webkit-background-clip: text; */
    font-size: 52px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    mix-blend-mode: overlay;
    line-height: 1.33;
}
.container {
    position: relative;
    margin-top: -3rem;
}
.service {
    position: relative;
}
.service::before {
    background-color: #F5F5F5;
    border-radius: 0 20px 80px 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    height: 100%;
    top: 0;
    width: calc(100% - 100px);
}
.service .u-inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.services-cols {
    display: flex;
    flex-wrap: wrap;
}
.services-col {
    background-color: #FFF;
    border-radius: 8px;
    padding: 20px;
    width: 360px;
}
.services-col + .services-col {
    margin-left: 30px;
}
.services-col ul {
    padding: 10px;
}
.services-col li::before {
    content: "-";
    margin-right: 4px;
}
.hdr-services {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #7157fc, #1abfa7);
    color: #FFF;
    height: 120px;
    border-radius: 8px;
    margin-bottom: 10px;
    opacity: .5;
    font-size: 1.125rem;
}

.company .u-inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.outline-dl {
    display: flex;
    flex-wrap: wrap;
}
.outline-dl > dt {
    width: 9em;
}
.outline-dl > dd {
    width: calc(100% - 9em);
}
.outline-dl > dd ~ dt,
.outline-dl > dd ~ dd {
    margin-top: 1em;
}

.hdr01-wrap {
    margin-bottom: 1.5rem;
}
.hdr01-jp {
    color: #555;
    font-size: 26px;
    font-weight: 500;
}
.hdr01-en {
    color: #bbdfff;
}

.ft {
    background-color: #F5F5F5;
    position: relative;
    text-align: center;
    padding: 24px 0 20px;
}
.copyrights {
    color: #888;
    font-size: 10px;
}


@media only screen and (max-width: 767px) {
.u-inner {
    padding-left: 20px;
    padding-right: 20px;
}
.hero-copy-en {
    font-size: clamp(16px, 3.7vw, 27px);
}
.hero-copy-jp {
    font-size: clamp(24px, 7.7vw, 52px);
}
body {
    font-size: 15px;
}
.service::before {
    width: calc(100% - 40px);
}
.outline-dl > dt {
    width: 7em;
}
.outline-dl > dd {
    width: calc(100% - 7em);
}
.hero::before {
    display: none;
}
.hero-copy-en {
    color: #0043cd;
    font-weight: 300;
}
.hero-copy-jp {
    color: #0043cd;
}
.services-col {
    width: 100%;
    padding: 16px;
}
.services-col + .services-col {
    margin-left: 0;
    margin-top: 16px;
}
.hdr-services {
    height: 48px;
}
}