.comp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    pointer-events: none;
    opacity: .4
}

@font-face {
    font-family: "B";
    src: url(/resource/font/en_b.eot);
    src: url(/resource/font/en_b.eot?#iefix) format("embedded-opentype"), url(/resource/font/en_b.woff2) format("woff2"), url(/resource/font/en_b.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: "M";
    src: url(/resource/font/en_m.eot);
    src: url(/resource/font/en_m.eot?#iefix) format("embedded-opentype"), url(/resource/font/en_m.woff2) format("woff2"), url(/resource/font/en_m.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    outline: 0 !important;
    font-feature-settings: "palt"
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    border: 0;
    outline: 0;
    font-weight: 400
}

article,
aside,
details,
em,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
strong {
    font-style: normal;
    display: block
}

nav ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

span {
    display: block
}

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

img {
    width: 100%;
    vertical-align: bottom
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    display: block;
    cursor: pointer;
    color: #000;
    background: 0 0
}

ins {
    text-decoration: none;
    color: #000;
    background-color: #ff9
}

mark {
    font-weight: 700;
    font-style: italic;
    color: #000;
    background-color: #ff9
}

del {
    text-decoration: line-through
}

svg {
    width: 100%;
    height: 100%
}

em,
i {
    display: block;
    font-style: normal
}

abbr[title],
dfn[title] {
    cursor: help;
    border-bottom: 1px dotted
}

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

hr {
    height: 1px;
    margin: 1em 0;
    padding: 0;
    display: block;
    border: 0;
    border-top: 1px solid #ccc
}

input,
select {
    vertical-align: middle;
    -moz-appearance: none;
    -webkit-appearance: none
}

textarea {
    border: 1px solid #ccc;
    outline: 0;
    resize: none;
    width: 100%;
    min-height: 300px;
    padding: 10px;
    font-size: 1.4rem
}

input {
    padding: 10px;
    width: 100%;
    background-color: transparent;
    border: 1px solid #ccc;
    outline: 0
}

section {
    position: relative;
    overflow: hidden;
    max-width: 100%
}

::-moz-selection {
    color: #fff;
    background: rgba(0, 0, 0, .3)
}

::selection {
    color: #fff;
    background: rgba(0, 0, 0, .3)
}

.is-current {
    pointer-events: none !important
}

.lazy {
    background: #f7f7f7
}

.lazy img {
    transform: translateX(0) translateY(0) translateZ(0);
    transition: opacity .4s
}

.lazy .lazyload {
    opacity: 0
}

.lazy .lazyloaded {
    opacity: 1
}

@media screen and (min-width:821px) {
    .pc-none {
        display: none !important
    }
}

@media screen and (max-width:821px) {
    .sp-none {
        display: none !important
    }
}

.hidden {
    overflow: hidden
}

.hide {
    display: none !important
}

html {
    scroll-behavior: initial
}

.grecaptcha-badge {
    display: none
}

.fade {
    opacity: 0
}

.no-link {
    pointer-events: none !important
}

.lil-gui {
    display: none !important
}

#panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 100px);
    z-index: 110;
    background: #f4f3ef;
    pointer-events: none;
    opacity: 0
}

@media screen and (max-width:821px) {
    .show.scale .show-target {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0)
    }
}

@media screen and (max-width:821px) {
    .show .show-target {
        opacity: 0
    }
}

.ready {
    overflow: hidden !important;
    max-height: 100vh !important
}

#h .lang,
#menu .b a span,
#menu .b small,
#menu .l .sns a span,
#modal .modal-content .modal-inner .txt .position,
#page-company .s4 .member li .txt p,
#page-top .mv-nav .r a .b,
.btn-common,
.f-xs {
    font-size: 3.38vw;
    line-height: 1;
    letter-spacing: .05vw
}

@media screen and (min-width:821px) {

    #h .lang,
    #menu .b a span,
    #menu .b small,
    #menu .l .sns a span,
    #modal .modal-content .modal-inner .txt .position,
    #page-company .s4 .member li .txt p,
    #page-top .mv-nav .r a .b,
    .btn-common,
    .f-xs {
        font-size: .96vw;
        letter-spacing: .05vw
    }
}

#contact-area .l,
#f .w .l .social li a,
#f .w .l ul li a,
#f .w .r a,
#f .w .r small,
#h-scroll .inner .cell .t-box p,
#modal .modal-content .modal-inner .txt .profile,
#modal .modal-content .modal-nav-wrap .num,
#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p,
#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li span,
#page-company .common-column .list li a,
#page-company .common-column .list li p,
#page-company .common-column .list li span,
#page-contact .s2 .column-cell-r .form-wrap .cell .area,
#page-contact .s2 .column-cell-r .form-wrap .cell .area input,
#page-contact .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
#page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span select,
#page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
#page-contact .s2 .column-cell-r .form-wrap .cell .head,
#page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
#page-contact .s2 .column-cell-r .wpcf7-response-output,
#page-policy .s1 .column-cell-r .detail a,
#page-policy .s1 .column-cell-r .detail p,
#page-policy .s1 .column-cell-r .detail ul li,
#page-projects .s1 .tree .flex .cell .box .li .subttl,
#page-projects .s3 .common-column .column-cell-l i,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area input,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span select,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
#page-thanks .s2 .column-cell-r .form-wrap .cell .head,
#page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
#page-thanks .s2 .column-cell-r .wpcf7-response-output,
#page-thinking .s4 .flex .r .head span,
#page-thinking .s4 .flex .r p,
#page-top .s3 .list a p,
.f-s,
.ja #page-top .s3 .list a p,
.page-under .head-common h2,
.page-under .head-common h3 {
    text-align: justify;
    font-size: 3.22vw;
    letter-spacing: .02vw;
    line-height: 1.95
}

@media screen and (min-width:821px) {

    #contact-area .l,
    #f .w .l .social li a,
    #f .w .l ul li a,
    #f .w .r a,
    #f .w .r small,
    #h-scroll .inner .cell .t-box p,
    #modal .modal-content .modal-inner .txt .profile,
    #modal .modal-content .modal-nav-wrap .num,
    #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p,
    #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li span,
    #page-company .common-column .list li a,
    #page-company .common-column .list li p,
    #page-company .common-column .list li span,
    #page-contact .s2 .column-cell-r .form-wrap .cell .area,
    #page-contact .s2 .column-cell-r .form-wrap .cell .area input,
    #page-contact .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
    #page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span select,
    #page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
    #page-contact .s2 .column-cell-r .form-wrap .cell .head,
    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
    #page-contact .s2 .column-cell-r .wpcf7-response-output,
    #page-policy .s1 .column-cell-r .detail a,
    #page-policy .s1 .column-cell-r .detail p,
    #page-policy .s1 .column-cell-r .detail ul li,
    #page-projects .s1 .tree .flex .cell .box .li .subttl,
    #page-projects .s3 .common-column .column-cell-l i,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area input,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span select,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .head,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
    #page-thanks .s2 .column-cell-r .wpcf7-response-output,
    #page-thinking .s4 .flex .r .head span,
    #page-thinking .s4 .flex .r p,
    #page-top .s3 .list a p,
    .f-s,
    .ja #page-top .s3 .list a p,
    .page-under .head-common h2,
    .page-under .head-common h3 {
        font-size: .98vw;
        letter-spacing: .05vw;
        line-height: 2.25
    }
}

#page-career .contact .r p,
#page-career .s1 .txt,
#page-career .s2 .column-cell-r .nothing,
#page-company .common-column .column-cell-l,
#page-contact .s1 .txt,
#page-policy .s1 .column-cell-r .detail strong,
#page-projects .s1 .tree .flex .cell .box .li .ttl,
#page-projects .s3 .common-column .column-cell-l,
#page-thanks .s1 .txt,
.f-m,
.page-under .common-column .column-cell-r p {
    font-size: 3.23vw;
    line-height: 2.25
}

@media screen and (min-width:821px) {

    #page-career .contact .r p,
    #page-career .s1 .txt,
    #page-career .s2 .column-cell-r .nothing,
    #page-company .common-column .column-cell-l,
    #page-contact .s1 .txt,
    #page-policy .s1 .column-cell-r .detail strong,
    #page-projects .s1 .tree .flex .cell .box .li .ttl,
    #page-projects .s3 .common-column .column-cell-l,
    #page-thanks .s1 .txt,
    .f-m,
    .page-under .common-column .column-cell-r p {
        font-size: 1.15vw;
        line-height: 2.25;
        letter-spacing: .05vw
    }
}

#modal .modal-content .modal-inner .txt .name,
#page-projects .s3 .common-column .column-cell-r .align-r a span,
#page-top .s1 .flex .center h3 em,
.f-l {
    font-size: 3.6vw;
    letter-spacing: .42vw;
    line-height: 2
}

@media screen and (min-width:821px) {

    #modal .modal-content .modal-inner .txt .name,
    #page-projects .s3 .common-column .column-cell-r .align-r a span,
    #page-top .s1 .flex .center h3 em,
    .f-l {
        font-size: 1.3vw;
        letter-spacing: .06vw;
        line-height: 1.5
    }
}

#h-scroll .inner .cell .t-box strong,
#page-career .contact b,
.f-xl {
    font-size: 4.2vw;
    font-weight: 500
}

@media screen and (min-width:821px) {

    #h-scroll .inner .cell .t-box strong,
    #page-career .contact b,
    .f-xl {
        font-size: 1.6vw
    }
}

#page-top .s1 .flex .center h2 em,
.f-xxl,
.page-under .common-column .column-cell-r strong {
    font-weight: 500;
    font-size: 5.8vw;
    letter-spacing: .3vw;
    line-height: 1.3
}

@media screen and (min-width:821px) {

    #page-top .s1 .flex .center h2 em,
    .f-xxl,
    .page-under .common-column .column-cell-r strong {
        font-size: 2.6vw;
        letter-spacing: .46vw;
        line-height: 1.3
    }
}

.f-3xl,
.page-under .common-ttl {
    font-size: 7vw;
    letter-spacing: .34vw;
    font-weight: 500
}

@media screen and (min-width:821px) {

    .f-3xl,
    .page-under .common-ttl {
        font-size: 2.68vw;
        letter-spacing: .36vw
    }
}

body,
html {
    font-family: "M", ryo-gothic-plusn, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 62.5%;
    font-weight: 400;
    line-height: 1.75;
    color: #262523;
    background: #f4f3ef;
    width: 100%;
    min-height: 100vh;
    height: auto
}

@media screen and (min-width:821px) {

    body,
    html {
        width: 100%;
        min-height: 100vh;
        height: auto
    }
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none
}

#wrapper {
    position: relative;
    z-index: 2;
    overflow-x: hidden
}

#op {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 105;
    background: #f4f3ef
}

#op .logo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 10;
    overflow: hidden;
    width: 63.1vw;
    height: 23.2vw
}

@media screen and (min-width:821px) {
    #op .logo {
        width: 37.1vw;
        height: 9.2vw
    }
}

#op .logo svg {
    transform: translateX(0) translateY(100%) translateZ(0)
}

#op .imgs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vw;
    transform: translateX(0) translateY(0) translateZ(0) scale(1.1)
}

@media screen and (min-width:821px) {
    #op .imgs {
        width: 50vw;
        height: 50vw
    }
}

#op .imgs .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: none
}

#op .imgs .img[data-num="0"] {
    width: 52.2vw;
    height: 69vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="0"] {
        width: 25.2vw;
        height: 33.6vw
    }
}

#op .imgs .img[data-num="1"] {
    width: 44.5vw;
    height: 66.7vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="1"] {
        width: 28.5vw;
        height: 42.7vw
    }
}

#op .imgs .img[data-num="2"] {
    width: 71.8vw;
    height: 53.5vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="2"] {
        width: 44.8vw;
        height: 33.5vw
    }
}

#op .imgs .img[data-num="3"] {
    width: 49.7vw;
    height: 74.3vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="3"] {
        width: 24.2vw;
        height: 36.3vw
    }
}

#op .imgs .img[data-num="4"] {
    width: 65.1vw;
    height: 36.3vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="4"] {
        width: 26.1vw;
        height: 14.7vw
    }
}

#op .imgs .img[data-num="5"] {
    width: 78.1vw;
    height: 67vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="5"] {
        width: 31.1vw;
        height: 26.8vw
    }
}

#op .imgs .img[data-num="6"] {
    width: 65.1vw;
    height: 43.4vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="6"] {
        width: 41.1vw;
        height: 27.3vw
    }
}

#op .imgs .img[data-num="7"] {
    width: 77.1vw;
    height: 51.4vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="7"] {
        width: 36.1vw;
        height: 24vw
    }
}

#op .imgs .img[data-num="8"] {
    width: 44.1vw;
    height: 65.8vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="8"] {
        width: 22vw;
        height: 32.8vw
    }
}

#op .imgs .img[data-num="9"] {
    width: 71.1vw;
    height: 47.4vw
}

@media screen and (min-width:821px) {
    #op .imgs .img[data-num="9"] {
        width: 33.8vw;
        height: 22.6vw
    }
}

#op small {
    position: absolute;
    bottom: 6vw;
    left: 0;
    text-align: center;
    width: 60%;
    font-size: 3.2vw;
    letter-spacing: .04vw;
    overflow: hidden
}

@media screen and (max-width:821px) {
    #op small {
        right: 0;
        margin: auto
    }
}

@media screen and (min-width:821px) {
    #op small {
        width: 100%;
        bottom: 3.2vw;
        font-size: .9vw;
        letter-spacing: .04vw
    }
}

#op small i {
    transform: translateX(0) translateY(100%) translateZ(0)
}

#cursor {
    position: fixed;
    z-index: 105;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .6px;
    text-transform: uppercase;
    pointer-events: none
}

@media screen and (max-width:821px) {
    #cursor {
        bottom: 24vw;
        right: 0;
        left: 0;
        margin: auto
    }
}

@media screen and (min-width:821px) {
    #cursor {
        width: 80px;
        height: 80px;
        top: -60px;
        left: -40px
    }
}

#cursor.is-loading .loading {
    opacity: 1
}

#cursor.is-scroll .scroll {
    opacity: 1
}

#cursor.is-more .more {
    transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

#cursor.is-close .close {
    transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

#cursor .loading {
    width: 80%;
    height: 80%;
    position: absolute;
    border-top: 1px solid rgba(0, 0, 0, .5);
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 100%;
    transition: opacity .3s;
    animation: 1s linear infinite r;
    opacity: 0
}

@keyframes r {
    0% {
        transform: translateX(0) translateY(0) translateZ(0) rotate(0)
    }

    100% {
        transform: translateX(0) translateY(0) translateZ(0) rotate(360deg)
    }
}

#cursor .scroll {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s
}

#cursor .scroll i {
    display: block
}

#cursor .scroll svg {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
    fill: transparent;
    stroke: #000
}

#cursor .scroll svg .path {
    stroke-dashoffset: 328.545;
    stroke-dasharray: 328.545px, 503.725px
}

#cursor .scroll svg .path-base {
    opacity: .1
}

#cursor .close,
#cursor .more {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(0) translateY(0) translateZ(0) scale(0);
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 100%;
    transition: transform .3s
}

#cursor .close i,
#cursor .more i {
    color: #111
}

#h {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100
}

#h .logo {
    position: absolute;
    top: 5.8vw;
    left: 5vw;
    width: 19vw;
    height: 4.9vw
}

@media screen and (min-width:821px) {
    #h .logo {
        top: 3.6vw;
        left: 5vw;
        width: 7.1vw;
        height: 1.8vw
    }
}

#h .logo span {
    display: none
}

#h .logo a {
    width: 100%;
    height: 100%
}

#h .lang {
    position: absolute;
    top: 6.53vw;
    right: 20vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}

@media screen and (min-width:821px) {
    #h .lang {
        top: 4vw;
        right: 12vw
    }
}

#h .lang a {
    display: none
}

#h .lang a.visible {
    display: block
}

#h #btn-menu {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 1vw;
    width: 16vw;
    height: 16vw
}

@media screen and (min-width:821px) {
    #h #btn-menu {
        top: 1.4vw;
        right: 3.5vw;
        width: 6vw;
        height: 6vw
    }
}

@media screen and (min-width:821px) {
    #h #btn-menu:hover span:before {
        transform: translateX(100%) translateY(0) translateZ(0);
        transition-delay: 0s
    }

    #h #btn-menu:hover span:after {
        transform: translateX(0) translateY(0) translateZ(0);
        transition-delay: .1s
    }

    #h #btn-menu:hover span:last-child:before {
        transition-delay: .1s
    }

    #h #btn-menu:hover span:last-child:after {
        transition-delay: .2s
    }
}

#h #btn-menu span {
    width: 50%;
    height: 2px;
    position: absolute;
    top: 7vw;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden
}

@media screen and (min-width:821px) {
    #h #btn-menu span {
        top: 2.6vw
    }
}

#h #btn-menu span:before {
    display: block;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .6s;
    transition-delay: .1s
}

#h #btn-menu span:after {
    display: block;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%) translateY(0) translateZ(0);
    transition: transform .6s
}

#h #btn-menu span:last-child {
    top: auto;
    bottom: 7vw
}

@media screen and (min-width:821px) {
    #h #btn-menu span:last-child {
        bottom: 2.6vw
    }
}

#h #btn-menu span:last-child:before {
    transition-delay: .1s
}

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #f4f3ef;
    opacity: 0;
    pointer-events: none
}

#menu .in-tg {
    opacity: 0
}

#menu .l {
    position: relative;
    margin-left: 10vw;
    padding-top: 20vw
}

@media screen and (min-width:821px) {
    #menu .l {
        margin-left: 20vw;
        padding-top: 6.3vw;
        height: 100%
    }
}

@media screen and (min-width:821px) {
    #menu .l .main {
        width: 20%
    }
}

#menu .l .main a {
    padding-bottom: 3.4vw
}

@media screen and (min-width:821px) {
    #menu .l .main a {
        padding-bottom: 1.6vw
    }
}

#menu .l .main a:last-child {
    padding-bottom: 0
}

@media screen and (min-width:821px) {
    #menu .l .main a:hover span {
        transform: translateX(20px) translateY(0) translateZ(0)
    }
}

#menu .l .main a span {
    font-size: 5.4vw;
    transition: transform .3s
}

@media screen and (min-width:821px) {
    #menu .l .main a span {
        font-size: 1.5vw
    }
}

@media screen and (max-width:821px) {
    #menu .l .sns {
        margin-top: 16vw
    }
}

@media screen and (min-width:821px) {
    #menu .l .sns {
        position: absolute;
        bottom: 2.1vw;
        left: 0;
        width: 20%
    }
}

#menu .l .sns a {
    padding-bottom: 3.6vw
}

@media screen and (min-width:821px) {
    #menu .l .sns a {
        padding-bottom: .8vw
    }
}

#menu .l .sns a:last-child {
    padding-bottom: 0
}

@media screen and (min-width:821px) {
    #menu .l .sns a:hover span {
        transform: translateX(10px) translateY(0) translateZ(0)
    }
}

#menu .l .sns a span {
    transition: transform .3s
}

#menu .b {
    position: absolute;
    bottom: 6vw;
    right: 0;
    width: 100%;
    display: flex
}

@media screen and (max-width:821px) {
    #menu .b {
        justify-content: space-between;
        padding: 0 10vw
    }
}

@media screen and (min-width:821px) {
    #menu .b {
        bottom: 2.3vw;
        right: 0;
        width: 46.6%
    }
}

@media screen and (min-width:821px) {
    #menu .b a {
        width: 39%
    }
}

@media screen and (min-width:821px) {
    #menu .b a:hover span {
        transform: translateX(20px) translateY(0) translateZ(0)
    }
}

#menu .b a span {
    transition: transform .3s
}

@media screen and (min-width:821px) {
    #menu .b small {
        width: 61%
    }
}

#menu #btn-close {
    position: absolute;
    top: 0;
    right: 1vw;
    width: 16vw;
    height: 16vw;
    cursor: pointer
}

@media screen and (min-width:821px) {
    #menu #btn-close {
        top: 1.4vw;
        right: 3.5vw;
        width: 6vw;
        height: 6vw
    }
}

@media screen and (min-width:821px) {
    #menu #btn-close:hover span:before {
        transform: translateX(100%) translateY(0) translateZ(0);
        transition-delay: 0s
    }

    #menu #btn-close:hover span:after {
        transform: translateX(0) translateY(0) translateZ(0);
        transition-delay: .1s
    }

    #menu #btn-close:hover span:last-child:before {
        transition-delay: .1s
    }

    #menu #btn-close:hover span:last-child:after {
        transition-delay: .2s
    }
}

#menu #btn-close span {
    overflow: hidden;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: translateX(0) translateY(0) translateZ(0) rotate(30deg)
}

#menu #btn-close span:last-child {
    transform: translateX(0) translateY(0) translateZ(0) rotate(-30deg)
}

#menu #btn-close span:last-child:before {
    transition-delay: .1s
}

#menu #btn-close span:before {
    display: block;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .6s;
    transition-delay: .1s
}

#menu #btn-close span:after {
    display: block;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%) translateY(0) translateZ(0);
    transition: transform .6s
}

#menu .imgs {
    display: none
}

@media screen and (min-width:821px) {
    #menu .imgs {
        position: absolute;
        right: 8.4vw;
        bottom: 7vw;
        width: 20vw;
        height: 26.7vw
    }
}

#menu .imgs .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0
}

#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    opacity: 0;
    pointer-events: none
}

#modal.show {
    pointer-events: visible
}

#modal .modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: rgba(17, 17, 17, .2)
}

#modal .modal-content {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 40px);
    height: calc(100% - 80px);
    z-index: 1;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px
}

@media screen and (max-width:821px) {
    #modal .modal-content {
        bottom: 0;
        left: 0;
        margin: auto
    }
}

@media screen and (min-width:821px) {
    #modal .modal-content {
        width: 60vw;
        height: 100%;
        border-radius: 10px 0 0 10px
    }
}

#modal .modal-content .modal-close {
    position: absolute;
    top: 0;
    right: 1vw;
    width: 16vw;
    height: 16vw;
    z-index: 1;
    cursor: pointer
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-close {
        top: 1.4vw;
        right: 3.5vw;
        width: 6vw;
        height: 6vw
    }
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-close:hover span:before {
        transform: translateX(100%) translateY(0) translateZ(0);
        transition-delay: 0s
    }

    #modal .modal-content .modal-close:hover span:after {
        transform: translateX(0) translateY(0) translateZ(0);
        transition-delay: .1s
    }

    #modal .modal-content .modal-close:hover span:last-child:before {
        transition-delay: .1s
    }

    #modal .modal-content .modal-close:hover span:last-child:after {
        transition-delay: .2s
    }
}

#modal .modal-content .modal-close span {
    overflow: hidden;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: translateX(0) translateY(0) translateZ(0) rotate(30deg)
}

#modal .modal-content .modal-close span:last-child {
    transform: translateX(0) translateY(0) translateZ(0) rotate(-30deg)
}

#modal .modal-content .modal-close span:last-child:before {
    transition-delay: .1s
}

#modal .modal-content .modal-close span:before {
    display: block;
    content: "";
    background: #111;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .6s;
    transition-delay: .1s
}

#modal .modal-content .modal-close span:after {
    display: block;
    content: "";
    background: #111;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%) translateY(0) translateZ(0);
    transition: transform .6s
}

#modal .modal-content .modal-inner {
    padding: 0;
    position: relative;
    opacity: 0;
    width: 100%
}

#modal .modal-content .modal-inner .img {
    width: 60%;
    margin: 0 auto 4.4vw;
    border-radius: 5px;
    overflow: hidden
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-inner .img {
        width: 40%;
        margin: 0 auto 2.6vw
    }
}

#modal .modal-content .modal-inner .txt {
    text-align: center
}

#modal .modal-content .modal-inner .txt .position {
    opacity: .5;
    margin-top: 1vw
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-inner .txt .position {
        margin-top: 1vw
    }
}

#modal .modal-content .modal-inner .txt .profile {
    margin-top: 3vw;
    text-align: justify;
    padding: 0 6vw
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-inner .txt .profile {
        margin-top: 2vw;
        padding: 0 12vw;
        margin-bottom: 4vw
    }
}

#modal .modal-content .modal-nav-wrap {
    position: absolute;
    bottom: 3vw;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-nav-wrap {
        bottom: 3vw
    }
}

#modal .modal-content .modal-nav-wrap .modal-nav {
    width: 9%;
    cursor: pointer
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-nav-wrap .modal-nav:hover img {
        transform: translate3d(10px, 0, 0)
    }
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-nav-wrap .modal-nav {
        width: 4%
    }
}

#modal .modal-content .modal-nav-wrap .modal-nav img {
    vertical-align: middle;
    transition: all .3s
}

#modal .modal-content .modal-nav-wrap .prev {
    transform: translate3d(0, 0, 0) rotate(-180deg)
}

#modal .modal-content .modal-nav-wrap .num {
    margin: 0 5vw
}

@media screen and (min-width:821px) {
    #modal .modal-content .modal-nav-wrap .num {
        margin: 0 3vw
    }
}

#modal .modal-content .modal-nav-wrap .num .modal-current {
    display: inline-block
}

#modal .modal-content .modal-nav-wrap .num .modal-len {
    display: inline-block
}

.btn-common {
    border: 1px solid #262523;
    border-radius: 100px;
    padding: 2.2vw 4.6vw;
    text-transform: uppercase;
    display: inline-block;
    transition: background .3s
}

@media screen and (min-width:821px) {
    .btn-common {
        padding: .7vw 1.6vw
    }
}

@media screen and (min-width:821px) {
    .btn-common:hover {
        background: #262523
    }

    .btn-common:hover span i {
        transform: translateX(0) translateY(-10px) translateZ(0);
        opacity: 0
    }

    .btn-common:hover span i:last-child {
        transform: translateX(0) translateY(0) translateZ(0);
        opacity: 1
    }
}

.btn-common span {
    position: relative
}

.btn-common span i {
    transition: transform .3s, opacity .3s
}

.btn-common span i:last-child {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0) translateY(10px) translateZ(0);
    opacity: 0;
    color: #fff
}

@media screen and (max-width:821px) {
    #h-scroll {
        border-top: 1px solid rgba(0, 0, 0, .1);
        padding-top: 20vw;
        width: 90vw;
        margin: 0 auto 0
    }
}

@media screen and (min-width:821px) {
    #h-scroll {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 216vw;
        z-index: 3;
        transform: translateX(100vw) translateY(0) translateZ(0)
    }
}

@media screen and (min-width:821px) {
    #h-scroll .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 183.4vw;
        position: relative
    }
}

@media screen and (max-width:821px) {
    #h-scroll .inner .cell {
        margin-bottom: 20vw
    }
}

@media screen and (min-width:821px) {
    #h-scroll .inner .cell {
        width: 57.3vw;
        display: flex;
        align-items: center
    }
}

#h-scroll .inner .cell .img {
    border-radius: 5px;
    overflow: hidden;
    width: 60vw;
    margin: 0 auto 6.6666666667vw
}

@media screen and (min-width:821px) {
    #h-scroll .inner .cell .img {
        width: 19.6vw;
        margin: 0
    }
}

@media screen and (max-width:821px) {
    #h-scroll .inner .cell .t-box {
        padding: 0 5vw;
        text-align: center
    }
}

@media screen and (min-width:821px) {
    #h-scroll .inner .cell .t-box {
        width: 23.2vw;
        margin-left: 7vw
    }
}

#h-scroll .inner .cell .t-box strong {
    margin-bottom: 5vw
}

@media screen and (min-width:821px) {
    #h-scroll .inner .cell .t-box strong {
        margin-bottom: 2vw
    }
}

#h-scroll .inner .cell .t-box p {
    margin-bottom: 2vw
}

@media screen and (min-width:821px) {
    #h-scroll .inner .cell .t-box p {
        margin-bottom: 2vw
    }
}

@media screen and (max-width:821px) {
    #h-scroll .inner .cell .t-box .btn-common {
        margin: 6.6666666667vw auto 0
    }
}

@media screen and (max-width:821px) {
    #h-scroll .m-center {
        padding: 10vw 0 30vw
    }
}

@media screen and (min-width:821px) {
    #h-scroll .m-center {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none
    }
}

#h-scroll .m-center strong {
    text-align: center
}

#h-scroll .m-center strong span {
    font-size: 5.6vw;
    font-family: "M"
}

@media screen and (min-width:821px) {
    #h-scroll .m-center strong span {
        font-size: 3.4vw;
        opacity: 0;
        transform: translate3d(20px, 20px, 0)
    }
}

#page-top .mv-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10
}

#page-top .mv-nav .l {
    position: absolute;
    left: 5vw;
    bottom: 5vw
}

@media screen and (min-width:821px) {
    #page-top .mv-nav .l {
        bottom: 3.5vw
    }
}

#page-top .mv-nav .r {
    position: absolute;
    right: 5vw;
    bottom: 5vw;
    width: 27.5vw
}

@media screen and (min-width:821px) {
    #page-top .mv-nav .r {
        right: 3.4vw;
        bottom: 2.9vw;
        width: 11.6vw
    }
}

#page-top .mv-nav .r a .img {
    border-radius: 5px;
    overflow: hidden
}

#page-top .mv-nav .r a .b {
    display: flex;
    justify-content: space-between;
    margin-top: 3vw
}

@media screen and (min-width:821px) {
    #page-top .mv-nav .r a .b {
        margin-top: .6vw
    }
}

@media screen and (min-width:821px) {
    #page-top .s1 {
        min-height: 100vh
    }
}

@media screen and (min-width:821px) {
    #page-top .s1 span {
        height: 200vh;
        max-height: 1600px
    }
}

#page-top .s1 span#s-4 {
    height: 1px
}

@media screen and (min-width:821px) {
    #page-top .s1 span#s-4 {
        height: 50vh
    }
}

#page-top .s1 .flex {
    position: relative
}

@media screen and (min-width:821px) {
    #page-top .s1 .flex {
        position: fixed;
        top: 0;
        left: 10.7vw;
        width: 80vw;
        height: 100vh;
        display: flex;
        align-items: center;
        pointer-events: none
    }
}

#page-top .s1 .flex .video {
    width: 100%;
    position: relative
}

#page-top .s1 .flex .video:after,
#page-top .s1 .flex .video:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

#page-top .s1 .flex .video:before {
    background: linear-gradient(180deg, #f4f3ef 0, rgba(244, 243, 239, 0) 15%, rgba(244, 243, 239, 0) 85%, #f4f3ef 100%)
}

#page-top .s1 .flex .video:after {
    background: linear-gradient(90deg, #f4f3ef 0, rgba(244, 243, 239, 0) 15%, rgba(244, 243, 239, 0) 85%, #f4f3ef 100%)
}

#page-top .s1 .flex .video video {
    width: 100%
}

#page-top .s1 .flex #t-1 .video {
    transform: translate3d(0, 0, 0) scale(0)
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex #t-1 .video {
        position: relative
    }
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex #t-3 h3 {
        margin-bottom: 20vw
    }
}

#page-top .s1 .flex .center {
    position: relative
}

@media screen and (min-width:821px) {
    #page-top .s1 .flex .center {
        position: absolute;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center
    }
}

#page-top .s1 .flex .center em {
    overflow: hidden
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex .center h2 {
        margin-left: 0;
        position: absolute;
        bottom: 33vw;
        left: 0
    }
}

#page-top .s1 .flex .center h2 em {
    margin-bottom: 3.2vw;
    opacity: 0;
    transform: translate3d(20px, 20px, 0)
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex .center h2 em {
        font-size: 7vw
    }
}

@media screen and (min-width:821px) {
    #page-top .s1 .flex .center h2 em {
        margin-bottom: 1.8vw
    }
}

#page-top .s1 .flex .center h2 em:last-child {
    margin-bottom: 0
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex .center h3 {
        padding: 0 10vw;
        margin-top: 10vw;
        margin-bottom: 30vw
    }
}

@media screen and (min-width:821px) {
    #page-top .s1 .flex .center h3 {
        margin-left: .2vw
    }
}

#page-top .s1 .flex .center h3 em {
    opacity: 0;
    transform: translate3d(0, 40px, 0)
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex .center h3 em {
        font-size: 4vw;
        letter-spacing: .15vw
    }
}

@media screen and (max-width:821px) {
    #page-top .s1 .flex .center h3 em {
        display: inline
    }
}

@media screen and (min-width:821px) {
    #page-top .s1 .flex .center h3 em {
        margin-bottom: 1.2vw;
        opacity: 0;
        transform: translate3d(40px, 40px, 0)
    }
}

#page-top .s1 .flex .center h3 em:last-child {
    margin-bottom: 0
}

@media screen and (min-width:821px) {
    #page-top #endline {
        margin-top: 20vw;
        height: 200vh
    }
}

@media screen and (min-width:821px) {
    #page-top #endline #txt-show {
        height: 1px;
        margin-top: 30vh
    }
}

@media screen and (max-width:821px) {
    #page-top .s3 {
        border-top: 1px solid rgba(0, 0, 0, .1);
        padding: 30vw 5vw 0;
        width: 90vw;
        margin: 0 auto 0
    }
}

@media screen and (min-width:821px) {
    #page-top .s3 {
        display: flex;
        justify-content: space-between;
        padding: 4.2vw 5vw;
        margin-bottom: 4.2vw
    }
}

#page-top .s3 .l {
    display: flex
}

@media screen and (max-width:821px) {
    #page-top .s3 .l {
        justify-content: space-between;
        margin-bottom: 10vw
    }
}

@media screen and (min-width:821px) {
    #page-top .s3 .l {
        width: 24vw
    }
}

#page-top .s3 .l h4 {
    font-size: 6.36vw;
    line-height: 1
}

@media screen and (min-width:821px) {
    #page-top .s3 .l h4 {
        font-size: 1.96vw;
        margin-right: 1.8vw
    }
}

#page-top .s3 .l .btn-common {
    margin-top: -.8vw
}

@media screen and (min-width:821px) {
    #page-top .s3 .l .btn-common {
        margin-top: -.4vw
    }
}

@media screen and (min-width:821px) {
    #page-top .s3 .list {
        width: 55vw;
        display: flex;
        flex-wrap: wrap
    }
}

#page-top .s3 .list a {
    margin: 0 auto 16vw
}

@media screen and (min-width:821px) {
    #page-top .s3 .list a {
        width: 45.5%;
        margin: 0 9% 7.6% 0
    }
}

#page-top .s3 .list a:nth-child(2n) {
    margin-right: 0
}

#page-top .s3 .list a .img {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0
}

#page-top .s3 .list a span {
    font-size: 3.3vw;
    margin-top: 4vw;
    margin-bottom: 1.2vw;
    color: rgba(17, 17, 17, .5)
}

@media screen and (min-width:821px) {
    #page-top .s3 .list a span {
        font-size: .77vw;
        margin-top: 1vw;
        margin-bottom: .3vw
    }
}

.page-under .head-common {
    position: relative;
    padding-top: 22.6vw;
    padding-bottom: 3vw;
    width: 90%;
    margin: 0 auto 12vw
}

@media screen and (min-width:821px) {
    .page-under .head-common {
        display: flex;
        width: 90vw;
        padding-top: 11.4vw;
        padding-bottom: 1.2vw;
        align-items: center;
        margin: 0 auto 4vw
    }
}

.page-under .head-common h2 {
    opacity: 0
}

@media screen and (max-width:821px) {
    .page-under .head-common h2 {
        display: none
    }
}

.page-under .head-common span {
    opacity: 0;
    width: 3.2vw;
    height: 1px;
    margin: 2.5vw 1.8vw 0;
    background: #111
}

@media screen and (max-width:821px) {
    .page-under .head-common span {
        display: none
    }
}

@media screen and (min-width:821px) {
    .page-under .head-common span {
        width: 1.7vw;
        margin: -.15vw .9vw 0
    }
}

.page-under .head-common h3 {
    opacity: 0;
    line-height: 1.75
}

.page-under .head-common .in-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 1px;
    background: rgba(17, 17, 17, .1);
    transform: translateX(0) translateY(0) translateZ(0) scaleX(0);
    transform-origin: top left;
    margin: 0;
    display: block
}

.page-under .common-ttl {
    opacity: 0
}

.page-under .common-column {
    padding-top: 10vw
}

@media screen and (max-width:821px) {
    .page-under .common-column {
        padding-left: 5vw;
        padding-right: 5vw
    }
}

@media screen and (min-width:821px) {
    .page-under .common-column {
        display: flex;
        justify-content: space-between;
        padding-top: 4.6vw
    }
}

.page-under .common-column .column-cell-l {
    font-size: 3.8vw;
    display: block
}

@media screen and (max-width:821px) {
    .page-under .common-column .column-cell-l {
        margin-bottom: 6vw
    }
}

@media screen and (min-width:821px) {
    .page-under .common-column .column-cell-l {
        font-size: 1.2vw;
        width: 33.4%
    }
}

@media screen and (min-width:821px) {
    .page-under .common-column .column-cell-r {
        width: 66.7%
    }
}

.page-under .common-column .column-cell-r strong {
    margin-bottom: 5vw
}

@media screen and (min-width:821px) {
    .page-under .common-column .column-cell-r strong {
        margin-bottom: 2.3vw
    }
}

#page-thinking .s1 {
    padding: 0 0 6vw;
    width: 90vw;
    margin: 0 auto;
    border-bottom: 1px solid rgba(17, 17, 17, .1)
}

@media screen and (min-width:821px) {
    #page-thinking .s1 {
        margin: 0 auto
    }
}

#page-thinking .s1 .img {
    width: 120%;
    margin: 0 0 0 -10%;
    position: relative
}

@media screen and (max-width:821px) {
    #page-thinking .s1 .img {
        transform: translate3d(0, 0, 0) scale(0)
    }
}

@media screen and (min-width:821px) {
    #page-thinking .s1 .img {
        width: 56.9vw;
        height: 47.5vw;
        margin: 6vw auto 0
    }
}

#page-thinking .s1 .img .pc-none {
    position: relative
}

@media screen and (min-width:821px) {
    #page-thinking .s1 .img .pc-none {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }
}

#page-thinking .s1 .img .pc-none:after,
#page-thinking .s1 .img .pc-none:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

#page-thinking .s1 .img .pc-none:before {
    background: linear-gradient(180deg, #f4f3ef 0, rgba(244, 243, 239, 0) 15%, rgba(244, 243, 239, 0) 85%, #f4f3ef 100%)
}

#page-thinking .s1 .img .pc-none:after {
    background: linear-gradient(90deg, #f4f3ef 0, rgba(244, 243, 239, 0) 15%, rgba(244, 243, 239, 0) 85%, #f4f3ef 100%)
}

#page-thinking .s1 .img .pc-none video {
    width: 100%
}

@media screen and (min-width:821px) {
    #page-thinking .s1 .img .pc-none video {
        display: none
    }
}

#page-thinking .s2,
#page-thinking .s3 {
    border-bottom: 1px solid rgba(17, 17, 17, .1);
    padding: 20vw 5vw;
    width: 90vw;
    margin: 0 auto
}

@media screen and (min-width:821px) {

    #page-thinking .s2,
    #page-thinking .s3 {
        padding: 5vw 0
    }
}

@media screen and (min-width:821px) {

    #page-thinking .s2 .t-box,
    #page-thinking .s3 .t-box {
        margin-top: -.31vw
    }
}

@media screen and (min-width:821px) {

    #page-thinking .s2 .t-box strong,
    #page-thinking .s3 .t-box strong {
        font-size: 2vw;
        letter-spacing: .16vw
    }
}

@media screen and (min-width:821px) {

    #page-thinking .s2 .t-box p,
    #page-thinking .s3 .t-box p {
        padding-right: 12.2%
    }
}

#page-thinking .s4 {
    width: 90vw;
    margin: 0 auto 15vw;
    padding: 20vw 5vw 0
}

@media screen and (min-width:821px) {
    #page-thinking .s4 {
        padding: 4.6vw 0 0;
        margin: 0 auto 10.9vw;
        width: 90vw
    }
}

#page-thinking .s4 .t-box strong {
    transform: translate3d(0, 0, 0);
    font-family: "B"
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .t-box strong {
        font-size: 2vw;
        letter-spacing: .16vw
    }
}

#page-thinking .s4 .t-box p {
    margin-bottom: 12vw
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .t-box p {
        margin-bottom: 6vw;
        padding-right: 12.2%
    }
}

#page-thinking .s4 .flex {
    margin-bottom: 7vw
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5vw
    }
}

@media screen and (max-width:821px) {
    #page-thinking .s4 .flex:last-child .r {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width:821px) {
    #page-thinking .s4 .flex .l {
        margin-bottom: 6vw
    }
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .l {
        width: 40%
    }
}

#page-thinking .s4 .flex .l .img {
    width: 80%;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .l .img {
        width: 100%;
        border-radius: 10px
    }
}

#page-thinking .s4 .flex .r {
    width: 100%
}

@media screen and (max-width:821px) {
    #page-thinking .s4 .flex .r {
        margin: 0 auto 15vw
    }
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .r {
        width: 50%;
        padding-right: 10%
    }
}

#page-thinking .s4 .flex .r .head {
    display: flex;
    align-items: center;
    line-height: 1
}

@media screen and (max-width:821px) {
    #page-thinking .s4 .flex .r .head {
        width: 100%;
        margin: 0 auto 5vw;
        justify-content: center
    }
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .r .head {
        margin-bottom: 1.9vw
    }
}

#page-thinking .s4 .flex .r .head b {
    font-size: 4vw;
    letter-spacing: .08vw;
    margin-bottom: 0;
    font-family: "B"
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .r .head b {
        font-size: 1.6vw;
        letter-spacing: .08vw
    }
}

#page-thinking .s4 .flex .r .head span {
    padding-left: 4%;
    margin-left: 4%;
    border-left: 1px solid #000
}

#page-thinking .s4 .flex .r p {
    margin-bottom: 0
}

@media screen and (min-width:821px) {
    #page-thinking .s4 .flex .r p {
        padding-right: 4.9%
    }
}

#page-projects .s1 {
    padding: 0 5vw
}

@media screen and (min-width:821px) {
    #page-projects .s1 {
        padding: 0 5vw
    }
}

@media screen and (max-width:821px) {
    #page-projects .s1 .common-column {
        padding-left: 0;
        padding-right: 0
    }
}

@media screen and (min-width:821px) {
    #page-projects .s1 .common-column .column-cell-r {
        padding-right: 8%
    }
}

#page-projects .s1 .tree {
    margin: 10vw auto;
    position: relative
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree {
        margin: 6vw 0 6vw 5.4vw;
        width: 94%
    }
}

#page-projects .s1 .tree .img {
    width: 100%;
    margin: 0 auto 10vw
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .img {
        width: 70%;
        margin: 0
    }
}

#page-projects .s1 .tree .flex {
    width: 90%
}

@media screen and (max-width:821px) {
    #page-projects .s1 .tree .flex {
        margin: 0 auto
    }
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: 52%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        padding: 3vw 0
    }
}

#page-projects .s1 .tree .flex .cell {
    border-top: 1px solid rgba(17, 17, 17, .1);
    position: relative;
    padding-top: 8%;
    width: 100%;
    display: flex;
    justify-content: space-between
}

@media screen and (max-width:821px) {
    #page-projects .s1 .tree .flex .cell {
        margin-bottom: 8%
    }
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex .cell {
        padding-top: 3%;
        padding-left: 54%
    }
}

#page-projects .s1 .tree .flex .cell span {
    font-weight: 500;
    width: 20%;
    line-height: 1;
    font-size: 4.2vw
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex .cell span {
        font-size: 1.4vw
    }
}

#page-projects .s1 .tree .flex .cell .box {
    width: 80%
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex .cell .box {
        width: 80%
    }
}

#page-projects .s1 .tree .flex .cell .box .li {
    position: relative;
    margin: 0 0 4% 0;
    cursor: pointer
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex .cell .box .li {
        margin: 0 0 14% 0
    }
}

#page-projects .s1 .tree .flex .cell .box .li:last-child {
    margin-bottom: 0 !important
}

@media screen and (max-width:821px) {
    #page-projects .s1 .tree .flex .cell .box .li:last-child .ttl {
        margin-bottom: 0 !important
    }
}

@media screen and (min-width:821px) {

    #page-projects .s1 .tree .flex .cell .box .li:hover .subttl,
    #page-projects .s1 .tree .flex .cell .box .li:hover .ttl {
        transform: translate3d(10px, 0, 0)
    }
}

#page-projects .s1 .tree .flex .cell .box .li .ttl {
    font-family: "B";
    line-height: 1;
    transition: transform .3s;
    margin-bottom: 4.4%
}

@media screen and (max-width:821px) {
    #page-projects .s1 .tree .flex .cell .box .li .ttl {
        font-size: 4vw;
        display: inline-block
    }
}

#page-projects .s1 .tree .flex .cell .box .li .subttl {
    line-height: 1;
    transition: transform .3s;
    opacity: .7
}

@media screen and (max-width:821px) {
    #page-projects .s1 .tree .flex .cell .box .li .subttl {
        display: inline-block;
        margin-left: 5%
    }
}

#page-projects .s1 .tree .flex .cell .box .li img {
    position: absolute;
    top: 15%;
    right: 0;
    width: 3%
}

@media screen and (min-width:821px) {
    #page-projects .s1 .tree .flex .cell .box .li img {
        top: 10.6%;
        width: 5%
    }
}

#page-projects .s3 {
    padding: 0 5vw;
    margin-bottom: 10vw
}

@media screen and (min-width:821px) {
    #page-projects .s3 {
        padding: 0 5vw;
        margin-bottom: 10vw
    }
}

#page-projects .s3 .common-column {
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 14vw;
    margin-top: 14vw
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column {
        padding-top: 5vw;
        margin-top: 5vw
    }
}

#page-projects .s3 .common-column .column-cell-l {
    line-height: 1
}

#page-projects .s3 .common-column .column-cell-l i {
    display: inline-block;
    position: relative;
    top: 0;
    margin-right: 4.2vw;
    line-height: 1;
    vertical-align: top
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-l i {
        top: .09vw;
        margin-right: 1.3vw
    }
}

#page-projects .s3 .common-column .column-cell-l p {
    display: inline-block
}

#page-projects .s3 .common-column .column-cell-r {
    margin-top: -.8vw
}

#page-projects .s3 .common-column .column-cell-r strong {
    font-family: "B";
    padding-right: 8vw
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r strong {
        letter-spacing: .01vw
    }
}

#page-projects .s3 .common-column .column-cell-r p {
    margin-bottom: 10vw;
    text-align: justify
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r p {
        padding-right: 12.4%;
        margin-bottom: 3.2vw
    }
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10vw
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap.force-cancel {
    cursor: auto
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .toggle-wrap {
        margin-bottom: 3.2vw
    }
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus {
    position: absolute;
    bottom: .1vw;
    right: 0;
    width: 21px;
    height: 21px;
    background: #111;
    border-radius: 100%;
    transition: all .3s;
    transform: translate3d(0, 0, 0) scale(0)
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus:after,
#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus:before {
    display: block;
    content: "";
    background: #f4f3ef;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus:before {
    width: 7px;
    height: 1px
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus:after {
    width: 1px;
    height: 7px
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .plus.visible {
    transform: translate3d(0, 0, 0) scale(1)
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell {
    margin-bottom: 10vw
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell:nth-last-child(2) {
    margin-bottom: 0
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell {
        margin-bottom: 3.2vw
    }
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .img {
    border-radius: 5px;
    overflow: hidden
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .img {
        border-radius: 10px
    }
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .flex {
    display: flex;
    margin-top: 3vw;
    font-size: 3.2vw;
    opacity: .6
}

@media screen and (max-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .flex {
        padding-right: 40px
    }
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .flex {
        margin-top: 1vw;
        font-size: .8vw
    }
}

#page-projects .s3 .common-column .column-cell-r .toggle-wrap .project-cell .flex span {
    width: 16%
}

#page-projects .s3 .common-column .column-cell-r .align-r {
    display: flex;
    justify-content: flex-end;
    margin-top: 11vw
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .align-r {
        margin-top: 5.3vw
    }
}

#page-projects .s3 .common-column .column-cell-r .align-r a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 60%;
    font-family: "B";
    font-weight: 500
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .align-r a {
        width: 30.8%
    }
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .align-r a:hover span i {
        transform: translateX(0) translateY(-10px) translateZ(0);
        opacity: 0
    }

    #page-projects .s3 .common-column .column-cell-r .align-r a:hover span i:last-child {
        transform: translateX(0) translateY(0) translateZ(0);
        opacity: 1
    }
}

#page-projects .s3 .common-column .column-cell-r .align-r a span {
    position: relative;
    margin-right: 10%;
    letter-spacing: .1vw
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .align-r a span {
        letter-spacing: .1vw
    }
}

#page-projects .s3 .common-column .column-cell-r .align-r a span i {
    transition: opacity .3s, transform .3s
}

#page-projects .s3 .common-column .column-cell-r .align-r a span i:last-child {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(0) translateY(10px) translateZ(0)
}

#page-projects .s3 .common-column .column-cell-r .align-r a i {
    display: flex;
    align-items: center
}

#page-projects .s3 .common-column .column-cell-r .align-r a i img {
    width: 6.6vw;
    vertical-align: middle
}

@media screen and (min-width:821px) {
    #page-projects .s3 .common-column .column-cell-r .align-r a i img {
        width: 2.3vw
    }
}

#page-company .s1 {
    width: 90%;
    margin: 0 auto 15vw
}

@media screen and (min-width:821px) {
    #page-company .s1 {
        width: 90vw;
        margin: 0 auto 6vw;
        display: flex;
        justify-content: space-between
    }
}

#page-company .s1 .common-ttl {
    margin-top: 0
}

@media screen and (max-width:821px) {
    #page-company .s1 .common-ttl {
        margin-bottom: 6vw
    }
}

@media screen and (min-width:821px) {
    #page-company .s1 .common-ttl {
        width: 27%
    }
}

#page-company .s1 .img {
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 0
}

@media screen and (min-width:821px) {
    #page-company .s1 .img {
        width: 61.1%;
        margin-top: .8vw;
        border-radius: 10px
    }
}

#page-company .common-column {
    width: 90%;
    margin: 0 auto 15vw
}

@media screen and (max-width:821px) {
    #page-company .common-column {
        padding-top: 15vw;
        border-top: 1px solid rgba(17, 17, 17, .1)
    }
}

@media screen and (min-width:821px) {
    #page-company .common-column {
        width: 90vw;
        margin: 0 auto 10vw
    }
}

#page-company .common-column .column-cell-l {
    font-weight: 500
}

@media screen and (max-width:821px) {
    #page-company .common-column .column-cell-l {
        font-size: 4vw
    }
}

@media screen and (min-width:821px) {
    #page-company .common-column .column-cell-l {
        width: 30%
    }
}

@media screen and (min-width:821px) {
    #page-company .common-column .list {
        width: 61.1%
    }
}

#page-company .common-column .list li {
    list-style: none;
    display: flex;
    border-bottom: 1px solid rgba(17, 17, 17, .1);
    padding-bottom: 5vw;
    margin-bottom: 5vw
}

@media screen and (max-width:821px) {
    #page-company .common-column .list li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0 solid rgba(17, 17, 17, .1)
    }
}

@media screen and (min-width:821px) {
    #page-company .common-column .list li {
        padding-bottom: 2vw;
        margin-bottom: 2vw
    }
}

#page-company .common-column .list li span {
    width: 30%;
    padding-right: 10px
}

@media screen and (min-width:821px) {
    #page-company .common-column .list li span {
        width: 20%
    }
}

#page-company .common-column .list li p {
    width: 66%
}

@media screen and (min-width:821px) {
    #page-company .common-column .list li p {
        width: 80%
    }
}

#page-company .common-column .list li a {
    text-decoration: underline;
    text-align: left
}

#page-company .s4 {
    width: 90vw;
    margin: 0 auto 15vw
}

@media screen and (min-width:821px) {
    #page-company .s4 {
        width: 90vw;
        margin: 0 auto 10vw
    }
}

#page-company .s4 .member {
    display: flex;
    flex-wrap: wrap
}

@media screen and (min-width:821px) {
    #page-company .s4 .member {
        width: 61.1%
    }
}

#page-company .s4 .member li {
    width: 46.6%;
    margin-right: 6.66%;
    margin-bottom: 12%;
    cursor: pointer;
    list-style: none;
    position: relative
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li {
        width: 20%;
        margin-right: 6.66%;
        margin-bottom: 8%
    }
}

@media screen and (max-width:821px) {
    #page-company .s4 .member li:nth-child(2n) {
        margin-right: 0
    }
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li:nth-child(4n) {
        margin-right: 0
    }
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li:hover .img {
        opacity: 0
    }

    #page-company .s4 .member li:hover .img.back {
        opacity: 1
    }
}

#page-company .s4 .member li .img {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5vw;
    transition: all .6s
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li .img {
        margin-bottom: 1.5vw
    }
}

#page-company .s4 .member li .img:first-child {
    filter: grayscale(1)
}

#page-company .s4 .member li .img.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0
}

#page-company .s4 .member li .txt {
    margin-top: 10%
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li .txt {
        margin-top: 8.4%
    }
}

#page-company .s4 .member li .txt span {
    opacity: .5;
    font-size: 3vw;
    line-height: 1.5;
    letter-spacing: .05vw;
    margin-top: 5.8%
}

@media screen and (min-width:821px) {
    #page-company .s4 .member li .txt span {
        margin-top: 6.2%;
        font-size: .86vw;
        letter-spacing: .05vw
    }
}

#page-company .s4 .member li .txt i {
    display: none
}

#page-career #contact-area {
    display: none !important
}

#page-career .s1 {
    width: 90vw;
    margin: 4vw auto 0
}

@media screen and (max-width:821px) {
    #page-career .s1 {
        padding-bottom: 15vw
    }
}

@media screen and (min-width:821px) {
    #page-career .s1 {
        width: 90vw;
        margin: 0 auto 6vw;
        display: flex;
        justify-content: space-between
    }
}

@media screen and (min-width:821px) {
    #page-career .s1 .common-ttl {
        width: 30%;
        margin-top: 0
    }
}

#page-career .s1 .txt {
    text-align: justify
}

@media screen and (max-width:821px) {
    #page-career .s1 .txt {
        margin-top: 6vw
    }
}

@media screen and (min-width:821px) {
    #page-career .s1 .txt {
        width: 66.6%;
        padding-right: 8%
    }
}

#page-career .s2 {
    width: 90vw;
    margin: 0 auto 10vw
}

@media screen and (max-width:821px) {
    #page-career .s2 {
        padding-top: 15vw;
        border-top: 1px solid rgba(0, 0, 0, .1)
    }
}

@media screen and (min-width:821px) {
    #page-career .s2 {
        width: 90vw;
        padding-top: 0;
        margin: 0 auto 10vw
    }
}

#page-career .s2 .column-cell-r .toggle-wrap {
    padding: 0 0 4vw 0;
    margin: 0 0 4vw 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap {
        padding: 0 0 2vw 0;
        margin: 0 0 2vw 0;
        cursor: pointer;
        transition: all .3s
    }
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap:hover {
        border-bottom: 1px solid #000
    }

    #page-career .s2 .column-cell-r .toggle-wrap:hover:not(.opened) .head p {
        transform: translate3d(20px, 0, 0)
    }
}

#page-career .s2 .column-cell-r .toggle-wrap.opened .head span:after {
    transform: translate3d(0, 0, 0) rotate(90deg)
}

#page-career .s2 .column-cell-r .toggle-wrap .head {
    position: relative
}

#page-career .s2 .column-cell-r .toggle-wrap .head p {
    margin-bottom: 0;
    transition: all .3s
}

#page-career .s2 .column-cell-r .toggle-wrap .head span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 13px;
    height: 13px;
    display: block
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap .head span {
        width: 21px;
        height: 21px
    }
}

#page-career .s2 .column-cell-r .toggle-wrap .head span:after,
#page-career .s2 .column-cell-r .toggle-wrap .head span:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #111
}

#page-career .s2 .column-cell-r .toggle-wrap .head span:before {
    width: 100%;
    height: 1px
}

#page-career .s2 .column-cell-r .toggle-wrap .head span:after {
    width: 1px;
    height: 100%;
    transition: all .3s
}

#page-career .s2 .column-cell-r .toggle-wrap .detail {
    overflow: hidden;
    height: 0
}

#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell {
    padding-top: 3vw
}

#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li {
    display: flex;
    margin-bottom: 1vw
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li {
        margin-bottom: 1vw
    }
}

#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li span {
    width: 30%;
    padding-right: 5%
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li span {
        width: 20%
    }
}

#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p {
    width: 70%
}

@media screen and (min-width:821px) {
    #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p {
        width: 80%
    }
}

#page-career .contact {
    background: #fff;
    border-radius: 5px;
    margin-top: 15vw;
    padding: 10vw
}

@media screen and (max-width:821px) {
    #page-career .contact {
        text-align: center
    }
}

@media screen and (min-width:821px) {
    #page-career .contact {
        border-radius: 10px;
        padding: 5vw;
        margin-top: 6vw;
        display: flex;
        justify-content: space-between
    }
}

#page-career .contact b {
    display: block
}

@media screen and (max-width:821px) {
    #page-career .contact b {
        margin-bottom: 5%
    }
}

@media screen and (min-width:821px) {
    #page-career .contact b {
        width: 20%
    }
}

#page-career .contact .r {
    display: block
}

@media screen and (min-width:821px) {
    #page-career .contact .r {
        width: 76%
    }
}

#page-career .contact .r p {
    margin-bottom: 8%
}

@media screen and (min-width:821px) {
    #page-career .contact .r p {
        margin-bottom: 6%
    }
}

#page-thanks .s1 {
    min-height: 50vw
}

@media screen and (min-width:821px) {
    #page-thanks .s1 {
        min-height: 50vh
    }
}

#page-thanks .btn-common {
    margin-top: 10vw
}

@media screen and (min-width:821px) {
    #page-thanks .btn-common {
        margin-top: 2vw
    }
}

#page-contact .s1,
#page-thanks .s1 {
    width: 90vw;
    margin: 0 auto
}

@media screen and (min-width:821px) {

    #page-contact .s1,
    #page-thanks .s1 {
        width: 90vw;
        margin: 0 auto 6vw;
        display: flex;
        justify-content: space-between
    }
}

@media screen and (min-width:821px) {

    #page-contact .s1 .common-ttl,
    #page-thanks .s1 .common-ttl {
        width: 30%;
        margin-top: 0
    }
}

#page-contact .s1 .txt,
#page-thanks .s1 .txt {
    text-align: justify
}

@media screen and (max-width:821px) {

    #page-contact .s1 .txt,
    #page-thanks .s1 .txt {
        margin-top: 6vw
    }
}

@media screen and (min-width:821px) {

    #page-contact .s1 .txt,
    #page-thanks .s1 .txt {
        width: 61.1%;
        padding-right: 8%
    }
}

#page-contact .s2,
#page-thanks .s2 {
    width: 90vw;
    margin: 0 auto 10vw
}

@media screen and (min-width:821px) {

    #page-contact .s2,
    #page-thanks .s2 {
        width: 90vw;
        margin: 0 auto 10vw
    }
}

#page-contact .s2 .common-column,
#page-thanks .s2 .common-column {
    padding-top: 15vw
}

@media screen and (max-width:821px) {

    #page-contact .s2 .common-column,
    #page-thanks .s2 .common-column {
        padding-left: 0;
        padding-right: 0
    }
}

@media screen and (min-width:821px) {

    #page-contact .s2 .common-column,
    #page-thanks .s2 .common-column {
        padding-top: 0
    }
}

@media screen and (max-width:821px) {

    #page-contact .s2 .column-cell-l,
    #page-thanks .s2 .column-cell-l {
        display: none
    }
}

#page-contact .s2 .column-cell-r,
#page-thanks .s2 .column-cell-r {
    position: relative
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r,
    #page-thanks .s2 .column-cell-r {
        width: 61.1%
    }
}

#page-contact .s2 .column-cell-r .screen-reader-response,
#page-thanks .s2 .column-cell-r .screen-reader-response {
    display: none
}

#page-contact .s2 .column-cell-r .wpcf7-response-output,
#page-thanks .s2 .column-cell-r .wpcf7-response-output {
    color: #c15b5b;
    border: none;
    padding: 0
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .wpcf7-response-output,
    #page-thanks .s2 .column-cell-r .wpcf7-response-output {
        position: absolute;
        left: 0;
        bottom: 1.3vw
    }
}

#page-contact .s2 .column-cell-r .wpcf7-spinner,
#page-thanks .s2 .column-cell-r .wpcf7-spinner {
    display: none !important
}

#page-contact .s2 .column-cell-r .form-wrap .cell,
#page-thanks .s2 .column-cell-r .form-wrap .cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid rgba(17, 17, 17, .1);
    padding: 5.2vw 0
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell,
    #page-thanks .s2 .column-cell-r .form-wrap .cell {
        padding: .5vw 0
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell.last .head,
#page-thanks .s2 .column-cell-r .form-wrap .cell.last .head {
    margin: 3vw 0 1vw
}

#page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap,
#page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap {
    border-top: 0 solid rgba(17, 17, 17, .1);
    cursor: pointer
}

@media screen and (max-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap {
        padding: 0
    }
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap {
        justify-content: flex-end
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p,
#page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p {
    width: 100%;
    cursor: pointer;
    transform: translate3d(0, 0, 0)
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p {
        width: 20%;
        max-width: 300px
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
#page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input {
    background: #111;
    color: #fff;
    border-radius: 5px;
    padding: 6% 0;
    outline: 0;
    border: none;
    text-align: center !important;
    cursor: pointer;
    border: 1px solid transparent
}

@media screen and (max-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input {
        font-size: 3.8vw
    }
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input {
        transition: all .3s;
        padding: 10% 0
    }
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input:hover,
    #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input:hover {
        color: #111;
        background-color: #f4f3ef;
        border: 1px solid #111
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .head,
#page-thanks .s2 .column-cell-r .form-wrap .cell .head {
    width: 35%
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .head,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .head {
        width: 30%
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area {
    width: 65%
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .area,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area {
        width: 70%
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area p span,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area p span {
    position: relative
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    color: #c15b5b;
    padding: 2.05vw 0
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip {
        padding: 1.45vw 0
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area input,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area input {
    border: none;
    outline: 0;
    padding: 1.5vw 0
}

@media screen and (max-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .area input,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area input {
        font-size: 3.8vw
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area.select p,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p {
    position: relative
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area.select p:before,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.7vw;
    margin: auto;
    width: 1.7vw;
    height: 1.7vw;
    border-bottom: 1px solid #111;
    border-right: 1px solid #111;
    transform: translate3d(0, -1vw, 0) rotate(45deg)
}

@media screen and (min-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .area.select p:before,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p:before {
        right: 1vw;
        width: .5vw;
        height: .5vw;
        transform: translate3d(0, -.2vw, 0) rotate(45deg)
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span select,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span select {
    width: 100%;
    padding: 1.5vw 0;
    background: 0 0;
    outline: 0;
    border: none;
    color: #111
}

@media screen and (max-width:821px) {

    #page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span select,
    #page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span select {
        font-size: 3.8vw
    }
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea {
    width: 100%
}

#page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea {
    background-color: transparent;
    border: 1px solid rgba(17, 17, 17, .1)
}

#page-policy .s1 {
    width: 90vw;
    margin: 0 auto 15vw;
    padding-top: 0
}

@media screen and (min-width:821px) {
    #page-policy .s1 {
        margin: 0 auto 10vw
    }
}

@media screen and (max-width:821px) {
    #page-policy .s1 .column-cell-l {
        font-size: 6vw;
        font-weight: 500
    }
}

@media screen and (min-width:821px) {
    #page-policy .s1 .column-cell-r .detail {
        padding-right: 10%
    }
}

@media screen and (min-width:821px) {
    #page-policy .s1 .column-cell-r .detail .lead {
        margin-bottom: 2vw
    }
}

#page-policy .s1 .column-cell-r .detail strong {
    letter-spacing: 0;
    margin: 8vw 0 2vw 0
}

@media screen and (min-width:821px) {
    #page-policy .s1 .column-cell-r .detail strong {
        margin: 3vw 0 .6vw 0
    }
}

#page-policy .s1 .column-cell-r .detail ul {
    margin: 3vw 0 0 0
}

@media screen and (min-width:821px) {
    #page-policy .s1 .column-cell-r .detail ul {
        margin: .6vw 0 0 0
    }
}

#page-policy .s1 .column-cell-r .detail ul li {
    list-style: auto;
    margin: 0 0 0 4vw
}

@media screen and (min-width:821px) {
    #page-policy .s1 .column-cell-r .detail ul li {
        margin: 0 0 0 1.3vw
    }
}

#page-policy .s1 .column-cell-r .detail a {
    display: inline;
    text-decoration: underline
}

#contact-area {
    border-radius: 5px;
    background: #fff;
    width: 90vw;
    margin: 20vw auto 0;
    padding: 9.5vw 10vw 16vw;
    position: relative
}

@media screen and (min-width:821px) {
    #contact-area {
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 96.7vw;
        padding: 9.5vw 8.4vw 9.5vw 8vw
    }
}

#contact-area .l {
    width: 105%
}

@media screen and (max-width:821px) {
    #contact-area .l {
        text-align: center !important;
        margin-top: 35vw
    }
}

@media screen and (min-width:821px) {
    #contact-area .l {
        width: 26%
    }
}

@media screen and (max-width:821px) {
    #contact-area .r {
        text-align: center
    }
}

@media screen and (min-width:821px) {
    #contact-area .r {
        width: 68.8%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between
    }
}

#contact-area .r strong {
    line-height: 1;
    font-size: 4.94vw;
    letter-spacing: .02vw
}

@media screen and (max-width:821px) {
    #contact-area .r strong {
        position: absolute;
        top: 17vw;
        left: 0;
        text-align: center;
        width: 100%;
        font-size: 10.34vw;
        letter-spacing: .02vw;
        padding: 0 12vw
    }
}

@media screen and (min-width:821px) {
    #contact-area .r strong {
        font-size: 4.94vw;
        letter-spacing: .02vw
    }
}

@media screen and (max-width:821px) {
    #contact-area .r .btn-common {
        margin-top: 8vw
    }
}

@media screen and (min-width:821px) {
    #contact-area .r .btn-common {
        margin-bottom: .9vw
    }
}

#f {
    padding: 5vw
}

@media screen and (min-width:821px) {
    #f {
        padding: 1.3vw 1.7vw
    }
}

#f .w {
    background: #fff;
    border-radius: 5px;
    padding: 14vw 10vw
}

@media screen and (min-width:821px) {
    #f .w {
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 4.8% 8.6%
    }
}

#f .w .l {
    width: 100%
}

@media screen and (min-width:821px) {
    #f .w .l {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 30.7%
    }
}

@media screen and (max-width:821px) {
    #f .w .l ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }
}

#f .w .l ul li {
    list-style: none
}

@media screen and (max-width:821px) {
    #f .w .l ul li {
        width: 50%
    }
}

#f .w .l ul li a span {
    transition: transform .3s
}

@media screen and (min-width:821px) {
    #f .w .l ul li a:hover span {
        transform: translateX(10px) translateY(0) translateZ(0)
    }
}

@media screen and (max-width:821px) {
    #f .w .l .social {
        margin-top: 5vw
    }
}

@media screen and (max-width:821px) {
    #f .w .l .social li a {
        line-height: 1.82
    }
}

#f .w .r {
    display: flex;
    justify-content: space-between
}

@media screen and (max-width:821px) {
    #f .w .r {
        margin-top: 13vw
    }
}

@media screen and (min-width:821px) {
    #f .w .r {
        margin-bottom: .6vw;
        width: 33.4%
    }
}

@media screen and (max-width:821px) {
    #f .w .r a {
        width: 50%
    }
}

#f .w .r a span {
    transition: transform .3s
}

@media screen and (min-width:821px) {
    #f .w .r a:hover span {
        transform: translateX(10px) translateY(0) translateZ(0)
    }
}

#f .w .r small {
    display: block
}

@media screen and (max-width:821px) {
    #f .w .r small {
        width: 50%
    }
}

.is-tablet #cursor {
    display: none !important
}

@media screen and (min-width:768px) and (max-width:1023px) {
    .is-tablet #menu .l {
        padding-top: 12vw !important
    }

    .is-tablet #menu .l .main a span {
        font-size: 4vw !important
    }

    .is-tablet #page-top .s1 .flex .center h2 {
        bottom: 26vw !important;
        left: 2.4vw !important
    }

    .is-tablet #page-top .s1 .flex .center h2 em {
        font-size: 5.4vw !important
    }

    .is-tablet #op .imgs .img[data-num="0"] {
        width: 38.5vw;
        height: 54.7vw
    }
}

.condensed,
.ja #contact-area .l,
.ja #f .w .l .pages li a,
.ja #h-scroll .inner .cell .t-box p,
.ja #h-scroll .inner .cell .t-box strong,
.ja #modal .modal-content .modal-inner .txt .position,
.ja #modal .modal-content .modal-inner .txt .profile,
.ja #page-career .contact .r p,
.ja #page-career .contact b,
.ja #page-career .s1 .txt p,
.ja #page-career .s2 .column-cell-l,
.ja #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p i,
.ja #page-career .s2 .column-cell-r .toggle-wrap .head p i,
.ja #page-company .common-column .column-cell-l,
.ja #page-company .common-column .list li i,
.ja #page-company .s4 .member li .txt span,
.ja #page-projects .s1 .tree .flex .cell .subttl,
.ja #page-projects .s1 .tree .flex .cell span,
.ja #page-projects .s3 .common-column .column-cell-l p,
.ja #page-thinking .s2 .t-box p,
.ja #page-thinking .s2 .t-box strong,
.ja #page-thinking .s3 .t-box p,
.ja #page-thinking .s3 .t-box strong,
.ja #page-thinking .s4 .flex .r .head span,
.ja #page-thinking .s4 .flex .r p,
.ja #page-thinking .s4 .t-box p,
.ja #page-thinking .s4 .t-box strong,
.ja #page-top .s1 .flex,
.ja #page-top .s3 .list a p,
.ja .page-under .common-column .column-cell-r p,
.ja .page-under .common-ttl,
.ja .page-under .head-common h3 {
    transform: translate3d(0, 0, 0) scaleX(.95);
    transform-origin: center left;
    text-align: justify
}

.ja #h-scroll .inner .cell .t-box strong {
    width: 105%
}

@media screen and (max-width:821px) {
    .ja #h-scroll .inner .cell .t-box strong {
        text-align: center !important
    }
}

.ja #h-scroll .inner .cell .t-box p {
    width: 105%
}

@media screen and (max-width:821px) {
    .ja #h-scroll .inner .cell .t-box p {
        letter-spacing: .2vw
    }
}

@media screen and (max-width:821px) {
    .ja #page-top .s1 .flex {
        width: 105%
    }
}

.ja #page-top .s1 .flex .center h2 em:first-child {
    letter-spacing: 1.575vw;
    text-indent: -.2vw
}

@media screen and (min-width:821px) {
    .ja #page-top .s1 .flex .center h2 em:first-child {
        letter-spacing: .975vw;
        text-indent: -.2vw
    }
}

.ja #page-top .s1 .flex .center h2 em:nth-child(2) {
    letter-spacing: 1.74vw;
    text-indent: -.2vw
}

@media screen and (min-width:821px) {
    .ja #page-top .s1 .flex .center h2 em:nth-child(2) {
        letter-spacing: 1.04vw;
        text-indent: -.2vw
    }
}

.ja #page-top .s1 .flex .center h2 em:last-child {
    letter-spacing: 2.05vw
}

@media screen and (min-width:821px) {
    .ja #page-top .s1 .flex .center h2 em:last-child {
        letter-spacing: 1.21vw
    }
}

.ja #page-top .s1 .flex .center h3 em {
    font-weight: 500
}

.ja #page-top .s3 .list a p {
    width: 105%
}

@media screen and (max-width:821px) {
    .ja .page-under .head-common h3 {
        width: 105%
    }
}

.ja .page-under .common-ttl {
    width: 105%
}

.ja .page-under .common-column .column-cell-r p {
    width: 105%
}

@media screen and (max-width:821px) {

    .ja #page-thinking .s2 .t-box strong,
    .ja #page-thinking .s3 .t-box strong {
        letter-spacing: .56vw
    }
}

@media screen and (max-width:821px) {

    .ja #page-thinking .s2 .t-box strong,
    .ja #page-thinking .s3 .t-box strong,
    .ja #page-thinking .s4 .t-box strong {
        line-height: 1.9
    }
}

.ja #page-thinking .s2 .t-box p,
.ja #page-thinking .s2 .t-box strong,
.ja #page-thinking .s3 .t-box p,
.ja #page-thinking .s3 .t-box strong,
.ja #page-thinking .s4 .t-box p,
.ja #page-thinking .s4 .t-box strong {
    width: 105%
}

@media screen and (max-width:821px) {
    .ja #page-thinking .s4 .flex .r .head span {
        line-height: 1.4 !important
    }
}

.ja #page-thinking .s4 .flex .r p {
    width: 105%
}

.ja #page-company .common-column .list li p {
    transform: translate3d(0, 0, 0) !important
}

.ja #page-company .common-column .list li i {
    width: 110%
}

.ja #page-company .s4 .member li .txt span {
    width: 105%
}

.ja #page-career .s1 .txt p {
    width: 105%
}

.ja #page-career .s2 .column-cell-r .toggle-wrap .head p i {
    width: 105%
}

.ja #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p {
    transform: translate3d(0, 0, 0)
}

.ja #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p i {
    width: 105%
}

@media screen and (max-width:821px) {
    .ja #page-career .contact b {
        width: 105%;
        text-align: center
    }
}

.ja #modal .modal-content .modal-inner .txt .position {
    transform-origin: center;
    text-align: center
}

.ja #modal .modal-content .modal-inner .txt .profile {
    transform-origin: center
}

.ja #f .w .l .pages li a {
    width: 105%
}

#contact-area .en .l,
#f .w .l .social li .en a,
#f .w .l ul li .en a,
#f .w .r .en a,
#f .w .r .en small,
#h-scroll .inner .cell .t-box .en p,
#modal .modal-content .modal-inner .txt .en .profile,
#modal .modal-content .modal-nav-wrap .en .num,
#page-career .contact .r .en p,
#page-career .s1 .en .txt,
#page-career .s2 .column-cell-r .en .nothing,
#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li .en p,
#page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li .en span,
#page-company .common-column .en .column-cell-l,
#page-company .common-column .list li .en a,
#page-company .common-column .list li .en p,
#page-company .common-column .list li .en span,
#page-contact .s1 .en .txt,
#page-contact .s2 .column-cell-r .en .wpcf7-response-output,
#page-contact .s2 .column-cell-r .form-wrap .cell .area .en input,
#page-contact .s2 .column-cell-r .form-wrap .cell .area p .en .wpcf7-not-valid-tip,
#page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span .en select,
#page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea p span .en textarea,
#page-contact .s2 .column-cell-r .form-wrap .cell .en .area,
#page-contact .s2 .column-cell-r .form-wrap .cell .en .head,
#page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p .en input,
#page-policy .s1 .column-cell-r .detail .en a,
#page-policy .s1 .column-cell-r .detail .en p,
#page-policy .s1 .column-cell-r .detail .en strong,
#page-policy .s1 .column-cell-r .detail ul .en li,
#page-projects .s1 .tree .flex .cell .box .li .en .subttl,
#page-projects .s1 .tree .flex .cell .box .li .en .ttl,
#page-projects .s3 .common-column .column-cell-l .en i,
#page-projects .s3 .common-column .en .column-cell-l,
#page-thanks .s1 .en .txt,
#page-thanks .s2 .column-cell-r .en .wpcf7-response-output,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area .en input,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area p .en .wpcf7-not-valid-tip,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span .en select,
#page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea p span .en textarea,
#page-thanks .s2 .column-cell-r .form-wrap .cell .en .area,
#page-thanks .s2 .column-cell-r .form-wrap .cell .en .head,
#page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p .en input,
#page-thinking .s4 .flex .r .en p,
#page-thinking .s4 .flex .r .head .en span,
#page-top .s3 .list a .en p,
.en #contact-area .l,
.en #f .w .l .social li a,
.en #f .w .l ul li a,
.en #f .w .r a,
.en #f .w .r small,
.en #h-scroll .inner .cell .t-box p,
.en #modal .modal-content .modal-inner .txt .profile,
.en #modal .modal-content .modal-nav-wrap .num,
.en #page-career .contact .r p,
.en #page-career .s1 .txt,
.en #page-career .s2 .column-cell-r .nothing,
.en #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li p,
.en #page-career .s2 .column-cell-r .toggle-wrap .detail .toggle-cell li span,
.en #page-company .common-column .column-cell-l,
.en #page-company .common-column .list li a,
.en #page-company .common-column .list li p,
.en #page-company .common-column .list li span,
.en #page-contact .s1 .txt,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .area,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .area input,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .area.select p span select,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
.en #page-contact .s2 .column-cell-r .form-wrap .cell .head,
.en #page-contact .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
.en #page-contact .s2 .column-cell-r .wpcf7-response-output,
.en #page-policy .s1 .column-cell-r .detail a,
.en #page-policy .s1 .column-cell-r .detail p,
.en #page-policy .s1 .column-cell-r .detail strong,
.en #page-policy .s1 .column-cell-r .detail ul li,
.en #page-projects .s1 .tree .flex .cell .box .li .subttl,
.en #page-projects .s1 .tree .flex .cell .box .li .ttl,
.en #page-projects .s3 .common-column .column-cell-l,
.en #page-projects .s3 .common-column .column-cell-l i,
.en #page-thanks .s1 .txt,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .area,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .area input,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .area p .wpcf7-not-valid-tip,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .area.select p span select,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .area.textarea p span textarea,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell .head,
.en #page-thanks .s2 .column-cell-r .form-wrap .cell.btn-wrap p input,
.en #page-thanks .s2 .column-cell-r .wpcf7-response-output,
.en #page-thinking .s4 .flex .r .head span,
.en #page-thinking .s4 .flex .r p,
.en #page-top .s3 .list a p,
.en .f-m,
.en .f-s,
.en .ja #page-top .s3 .list a p,
.en .page-under .common-column .column-cell-r p,
.en .page-under .head-common h2,
.en .page-under .head-common h3,
.ja #page-top .s3 .list a .en p,
.page-under .common-column .column-cell-r .en p,
.page-under .head-common .en h2,
.page-under .head-common .en h3 {
    letter-spacing: 0
}

.en #h-scroll .inner .cell .t-box strong {
    font-weight: 600
}

@media screen and (min-width:821px) {
    .en #h-scroll .inner .cell .t-box strong {
        letter-spacing: .05vw
    }
}

.en #h-scroll .inner .cell .t-box p {
    text-align: left;
    line-height: 1.8
}

.en #page-top .s1 .flex .center h2 em {
    letter-spacing: 0
}

.en #page-top .s1 .flex .center h3 em {
    letter-spacing: 0
}

.en .page-under .common-ttl {
    letter-spacing: 0;
    font-family: "B";
    line-height: 1.3
}

.en .page-under .common-column .column-cell-r p {
    line-height: 1.8
}

.en #page-thinking .s2 .t-box strong,
.en #page-thinking .s3 .t-box strong {
    font-family: "B";
    letter-spacing: 0
}

@media screen and (min-width:821px) {

    .en #page-thinking .s2 .t-box strong,
    .en #page-thinking .s3 .t-box strong {
        font-size: 2vw
    }
}

.en #page-thinking .s4 .flex .r p {
    text-align: left;
    line-height: 1.8
}

.en #page-projects .s1 .tree .flex .cell span {
    font-family: "B";
    width: 30%
}

@media screen and (min-width:821px) {
    .en #page-projects .s1 .tree .flex .cell span {
        width: 30%;
        font-size: 1.17vw
    }
}

.en #page-projects .s1 .tree .flex .cell .box {
    width: 70%
}

@media screen and (min-width:821px) {
    .en #page-projects .s1 .tree .flex .cell .box {
        width: 70%
    }
}

@media screen and (max-width:821px) {
    .en #page-projects .s1 .tree .flex .cell .box .li {
        margin-bottom: 4vw
    }
}

@media screen and (max-width:821px) {
    .en #page-projects .s1 .tree .flex .cell .box .li .ttl {
        display: block;
        margin-bottom: 4.4% !important
    }
}

@media screen and (min-width:821px) {
    .en #page-projects .s1 .tree .flex .cell .box .li .ttl {
        font-size: 1vw
    }
}

@media screen and (max-width:821px) {
    .en #page-projects .s1 .tree .flex .cell .box .li .subttl {
        display: block;
        margin-left: 0
    }
}

.en #page-projects .s3 .common-column .column-cell-r p {
    text-align: left
}

.en #page-company .common-column .list li a,
.en #page-company .common-column .list li p,
.en #page-company .common-column .list li span {
    line-height: 1.8
}

@media screen and (max-width:821px) {
    .en #page-company .common-column .list li span {
        width: 35%
    }
}

.en #page-company .common-column .list li p {
    text-align: left
}

@media screen and (max-width:821px) {
    .en #page-company .common-column .list li p {
        width: 65%
    }
}

.en #page-career .s1 .txt {
    text-align: left;
    line-height: 1.8
}

@media screen and (min-width:821px) {
    .en #page-career .s1 .txt {
        margin: .8vw 0 0
    }
}

.en #page-career .contact b {
    font-weight: 600
}

.en #page-career .contact .r p {
    line-height: 1.8
}

.en #modal .modal-content .modal-inner .txt .profile {
    text-align: left !important;
    line-height: 1.6 !important
}