@charset "UTF-8";

a,
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,
main,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0
}

* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

html {
    font-size: 62.5%
}

body {
    font-size: 1.6rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

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

article,
aside,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}

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

img {
    border-style: none;
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

iframe,
video {
    max-width: 100% !important
}

blockquote,
q {
    quotes: none
}

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

[hidden] {
    display: none !important
}

[disabled] {
    cursor: not-allowed
}

:focus:not(:focus-visible) {
    outline: 0
}

html {
    height: 100%;
    min-height: 100%
}

body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    height: 100%;
    overflow: auto;
    min-width: 320px
}

p {
    line-height: 1.5;
    margin-bottom: 1.5em
}

p:last-child {
    margin-bottom: 0
}

.l-container {
    background-color: #edeeee;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.l-container.is-nav-active {
    position: fixed;
    overflow: hidden
}

.l-container-overlay {
    background-color: #ffffff;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.l-header {
    background-color: #ffffff;
    height: 50px;
    padding: 0 8px;
    position: relative;
    width: 100%;
    z-index: 999
}

.l-header-logo {
    display: inline-block;
    margin: 5px 0
}

.l-header-nav-button {
    display: inline-block;
    height: 30px;
    position: absolute;
    right: 8px;
    top: 10px;
    width: 30px
}

.l-header-nav-button-inner:after,
.l-header-nav-button-inner:before,
.l-header-nav-button-line {
    background-color: #fff;
    display: block;
    height: 2px;
    position: absolute;
    left: 2px;
    right: 2px;
    -webkit-transition: .15s ease-out;
    transition: .15s ease-out
}

.l-header-nav-button-line {
    top: 14px
}

.l-header-nav-button-inner:after,
.l-header-nav-button-inner:before {
    content: ""
}

.l-header-nav-button-inner:before {
    top: 6px
}

.l-header-nav-button-inner:after {
    top: 22px
}

.l-header-nav {
    background-color: #ffffff;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 999
}

.l-header-nav>ul {
    font-size: 0
}

.l-header-nav-item {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 700
}

.l-header-nav-item:hover .l-header-nav-text {
        background-position: -100% 0;
        color: #ffffff;
    }

.l-header-nav-text {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffffff), color-stop(50%, #1eb3e9));
    background-image: linear-gradient(to right, #ffffff 50%, #1eb3e9 50%);
    background-position: 0 0;
    background-size: 200% auto;
    color: #1eb3e9;
    display: block;
    line-height: 1.5;
    padding: 13px 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out
}

.is-nav-active .l-header-nav-button-line {
    opacity: 0;
    -webkit-transition: translateX(20px) rotate(90deg);
    transition: translateX(20px) rotate(90deg);
    width: 0
}

.is-nav-active .l-header-nav-button-inner:before {
    -webkit-transform: translateY(8px) rotate(-135deg);
    transform: translateY(8px) rotate(-135deg)
}

.is-nav-active .l-header-nav-button-inner:after {
    -webkit-transform: translateY(-8px) rotate(135deg);
    transform: translateY(-8px) rotate(135deg)
}

.l-contents {
    padding-bottom: 264px;
    position: relative
}

.l-footer {
    color: #fff;
    overflow: hidden;
    padding: 40px 16px 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 0
}

.l-footer:before {
    background-color: #1eb3e9;
    border-radius: 50% 50% 0 0;
    content: "";
    display: block;
    height: 100%;
    padding-top: 68%;
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 156%;
    z-index: -1
}

.l-footer-sns {
    margin-bottom: 32px;
    text-align: center
}

.l-footer-copy {
    text-align: center
}

.l-article {
    padding: 80px 16px
}

.l-article-inner {
    margin: auto;
    max-width: 1080px
}

.l-article.theme1 {
    background-color: #edeeee;
    color: #1b1b1b
}

.l-article.theme1 .heading {
    color: #1eb3e9
}

.l-article.theme1 .linktext {
    color: #1eb3e9
}

.l-article.theme2 {
    background-color: #fff;
    color: #1b1b1b
}

.l-article.theme2 .heading {
    color: #1eb3e9
}

.l-article.theme2 .linktext {
    color: #1eb3e9
}

.l-article.theme3 {
    background-color: #137da3;
    color: #fff
}

.l-article.theme3 .heading {
    color: #fff
}

.l-article.theme3 .svg-dots {
    stroke: #fff
}

.l-article.theme3 .linktext {
    color: #fff
}

.aboutus-activity>ul {
    margin: auto;
    max-width: 392px
}

.l-section {
    margin: 72px auto
}

.l-section-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 616px
}

.button {
    border: none;
    display: inline-block;
    padding: 0 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle
}

.button:hover {
    text-decoration: none
}

.button a,
.button a:hover {
    color: currentColor;
    display: block;
    text-decoration: none
}

.button-icon-l {
    position: relative;
    left: -8px;
    vertical-align: middle
}

.button-icon-r {
    position: relative;
    right: -8px;
    vertical-align: middle
}

.button-primary {
    background-color: #1eb3e9;
    color: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.button-primary:hover {
    -webkit-box-shadow: 0 0 24px #616262;
    box-shadow: 0 0 24px #616262
}

.button-general {
    background-color: #1b1b1b;
    color: #fff;
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.button-general:hover {
    -webkit-box-shadow: 0 0 24px #616262;
    box-shadow: 0 0 24px #616262
}

.button-submit {
    background-color: #1eb3e9;
    border: none;
    color: #fff;
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.button-submit:hover {
    -webkit-box-shadow: 0 0 24px #616262;
    box-shadow: 0 0 24px #616262
}

.button-back {
    background-color: #1b1b1b;
    border: none;
    color: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.button-back:hover {
    -webkit-box-shadow: 0 0 24px #616262;
    box-shadow: 0 0 24px #616262
}

.button.size-s {
    font-size: 13px;
    font-size: 1.3rem;
    height: 35px;
    line-height: 35px
}

.button.size-m {
    font-size: 16px;
    font-size: 1.6rem;
    height: 40px;
    line-height: 40px
}

.button.size-l {
    font-size: 18px;
    font-size: 1.8rem;
    height: 50px;
    line-height: 50px
}

.button.wide-s {
    width: 200px
}

.button.wide-m {
    width: 50%
}

.button.wide-l {
    width: 100%
}

.button.r-square {
    border-radius: 0
}

.button.r-round {
    border-radius: 8px
}

.button.r-circle {
    border-radius: 50px
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex.align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
}

.flex .flex-col {
    padding: 5px
}

.flex .col-12 {
    width: 100%
}

.flex .col-10 {
    width: 83.33%
}

.flex .col-9 {
    width: 75%
}

.flex .col-8 {
    width: 66.66%
}

.flex .col-7 {
    width: 58.33%
}

.flex .col-6 {
    width: 50%
}

.flex .col-5 {
    width: 41.66%
}

.flex .col-4 {
    width: 33.33%
}

.flex .col-3 {
    width: 25%
}

.flex .col-2 {
    width: 16.66%
}

.flex .col-1 {
    width: 8.33%
}

.flex-reset-l [class*=col-],
.flex-reset-m [class*=col-],
.flex-reset-s [class*=col-] {
    width: 100%
}

.list-images img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.list-images img:hover {
    opacity: .6
}

.list-images-caption {
    color: #000;
    font-size: 11px;
    font-size: 1.1rem;
    height: 39.6px;
    line-height: 1.2;
    margin-top: 5px
}

.input {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5
}

.input-checkbox {
    display: none
}

.input-checkbox+label {
    display: inline-block;
    min-height: 20px;
    line-height: 1.5;
    position: relative;
    padding-left: 24px
}

.input-checkbox+label:before {
    background-color: #fff;
    border: solid 1px #1b1b1b;
    border-radius: 3px;
    content: "";
    display: block;
    height: 20px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px
}

.input-checkbox:checked+label:before {
    border-color: #1eb3e9
}

.input-checkbox:checked+label:after {
    border: solid 2px transparent;
    border-right-color: #1eb3e9;
    border-bottom-color: #1eb3e9;
    border-radius: 3px;
    content: "";
    display: block;
    height: 16px;
    display: block;
    position: absolute;
    left: 6px;
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px
}

.input-radio {
    display: none
}

.input-radio+label {
    display: inline-block;
    min-height: 20px;
    line-height: 1.5;
    position: relative;
    padding-left: 24px
}

.input-radio+label:before {
    background-color: #fff;
    border: solid 1px #1b1b1b;
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px
}

.input-radio:checked+label:before {
    border-color: #1eb3e9
}

.input-radio:checked+label:after {
    background-color: #1eb3e9;
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    display: block;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px
}

.input-radio:disabled+label {
    pointer-events: none
}

.input-radio:disabled+label:before {
    background-color: #1b1b1b
}

.input-text {
    background-color: #fff;
    border: solid 1px #1b1b1b;
    border-radius: 3px;
    display: block;
    line-height: 1.2;
    padding: 8px 16px
}

.input-text:placeholder-shown {
    color: #878888
}

.input-text::-webkit-input-placeholder {
    color: #878888
}

.input-text:-moz-placeholder {
    color: #878888
}

.input-text:-ms-input-placeholder {
    color: #878888
}

.input-textarea {
    background-color: #fff;
    border: solid 1px #1b1b1b;
    border-radius: 3px;
    display: block;
    line-height: 1.2;
    padding: 8px 16px
}

.input-textarea:placeholder-shown {
    color: #878888
}

.input-textarea::-webkit-input-placeholder {
    color: #878888
}

.input-textarea:-moz-placeholder {
    color: #878888
}

.input-textarea:-ms-input-placeholder {
    color: #878888
}

.input-select-wrap {
    border: solid 1px #1b1b1b;
    border-radius: 3px;
    display: inline-block;
    position: relative
}

.input-select-wrap:after {
    background-color: #fff;
    color: #1eb3e9;
    content: "\f0d7";
    display: block;
    font-family: FontAwesome;
    line-height: 1.8;
    pointer-events: none;
    position: absolute;
    bottom: 1px;
    right: 1px;
    top: 1px;
    text-align: center;
    width: 30px
}

.input-select {
    background-color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    display: block;
    line-height: 1.5;
    padding: .2em .5em
}

.input.wide-xs {
    width: 120px
}

.input.wide-s {
    width: 200px
}

.input.wide-m {
    width: 300px
}

.input.wide-l {
    width: 100%
}

@font-face {
    font-family: "M PLUS 1p";
    src: url("../font/MPLUS1p-ExtraBold.woff") format("woff");
}

.heading {
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
    line-height: 1.5;
    margin-bottom: 1.3em
}

.heading-primary {
    font-size: 32px;
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 1.8em;
    text-align: center
}

.heading-primary-subtext {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 700
}

.heading-secondary {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center
}

.heading-general {
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center
}

.list-square {
    padding-left: 2em
}

.list-square>li {
    line-height: 1.5;
    list-style-type: square;
    margin-bottom: .5em
}

.list-square>li:last-child {
    margin-bottom: 0
}

.list-decimal {
    padding-left: 2em
}

.list-decimal>li {
    line-height: 1.5;
    list-style-type: decimal;
    margin-bottom: .5em
}

.list-decimal>li:last-child {
    margin-bottom: 0
}

.list-dots {
    padding-left: 2em
}

.list-dots>li {
    line-height: 1.5;
    list-style-type: disc;
    margin-bottom: .5em
}

.list-dots>li:last-child {
    margin-bottom: 0
}

.sns-icon {
    background-color: #1b1b1b;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    height: 56px;
    margin: 8px;
    position: relative;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    vertical-align: top;
    width: 56px
}

.sns-icon:hover {
    background-color: #414141
}

.sns-icon>span {
    position: absolute;
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.svg-dots {
    height: 20px;
    stroke: #1eb3e9;
    width: 100%
}

.tbl {
    line-height: 1.5;
    width: 100%
}

.tbl-th {
    display: block;
    padding: 16px;
    text-align: center;
    width: 100%
}

.tbl-td {
    display: block;
    padding: 16px;
    width: 100%
}

.tag {
    display: inline-block;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 0 8px;
    text-align: center
}

.tag.size-s {
    height: 18px;
    line-height: 18px
}

.tag.size-m {
    height: 24px;
    line-height: 24px
}

.tag.size-l {
    height: 30px;
    line-height: 30px
}

.tag.r-square {
    border-radius: 0
}

.tag.r-round {
    border-radius: 3px
}

.tag.r-circle {
    border-radius: 50px
}

.tag.tag-required {
    background-color: #1eb3e9;
    color: #fff
}

.t-big {
    display: inline-block;
    font-size: 1.2em;
    font-weight: inherit
}

.t-small {
    display: inline-block;
    font-size: .8em;
    font-weight: inherit
}

.t-em {
    display: inline-block;
    font-weight: 700
}

.t-strong {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 700
}

.t-sup {
    display: inline-block;
    font-size: .6em;
    vertical-align: super
}

.t-sub {
    display: inline-block;
    font-size: .6em;
    vertical-align: sub
}

.movie {
    margin: auto;
    max-width: 700px
}

.movie-contents {
    padding-bottom: 56.25%;
    position: relative
}

.movie-contents>iframe {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.hero {
    background-color: #1eb3e9;
    padding-bottom: 40px
}

.hero-image {
    background-image: url(../img/Rstudio_topbanner_sm.png);
    background-position: bottom center;
    background-size: cover;
    height: 64vh;
    margin-bottom: 76px;
    position: relative;
    text-align: center
}

.hero-logo {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 32px;
    width: 80%
}

.hero-heading {
    color: #fff;
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
    font-size: 20px;
    font-size: 2rem;
    font-size: 6.4vw;
    font-weight: 900;
    line-height: 1.5;
    padding: 0 8px;
    position: absolute;
    bottom: -36px;
    text-align: center;
    text-shadow: 3px 3px 0 #1eb3e9;
    -webkit-text-stroke: 1.3px #1b1b1b;
    width: 100%
}

.hero-text {
    color: #fff;
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
    padding: 0 16px
}

.breadcrumbs-wrapper {
    padding: 20px 10px 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.85em;
    line-height: 1.7;
  }
  
.breadcrumb li:not(:last-of-type)::after {
    content: "›";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
}

.breadcrumb a {
    color: #000;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}


.works-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.works-list-item {
    margin-bottom: 40px;
    width: 100%
}

.works-list-platform {
    background-color: #1eb3e9;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-right: 4px;
    padding: 4px 16px;
    text-align: center
}

.works-list-category {
    display: inline-block;
    line-height: 29px;
    margin-bottom: 4px;
    font-weight: 700;
    vertical-align: top
}

.works-list-image {
    display: block;
    margin-bottom: 16px
}

.works-list-image:hover {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

.works-list-data dt {
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 8px
}

.works-list-data dd {
    color: #616262;
    line-height: 1.5;
    margin-bottom: 8px
}

.works-list-data a {
    color: #1eb3e9
}

.banner-button {
    border-radius: 10px;
    -webkit-box-shadow: 0 0 8px #878888;
    box-shadow: 0 0 8px #878888;
    display: inline-block;
    margin: 8px;
    padding: 16px;
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.banner-button:hover {
    -webkit-box-shadow: 0 0 24px #878888;
    box-shadow: 0 0 24px #878888
}

.about-activity {
    text-align: center
}

.about-activity .list-dots {
    display: inline-block;
    text-align: left
}

.about-company .tbl {
    margin: auto;
    max-width: 970px;
    color: #fff
}

.about-company .tbl .tbl-th {
    background-color: #1eb3e9;
    color: #fff
}

.gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 720px
}

.gallery-item {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    margin: 8px;
    width: calc((100% - (8px * 4))/ 2)
}

.instagram {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 720px
}

.instagram-post {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    margin: 0 4px 8px;
    width: calc((99.99% - (4px * 6))/ 3)
}

.access-map {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px
}

.access-map-embed {
    margin-bottom: 16px
}

.access-way-unit {
    margin: 0 auto 32px;
    max-width: 616px
}

.access-way-heading {
    background-color: #edeeee;
    color: #1eb3e9;
    border-radius: 50px;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 4px 16px
}

.page-header {
    height: 180px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0
}

.page-header .heading {
    color: #fff;
    position: relative;
    bottom: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.page-header:after,
.page-header:before {
    border-radius: 0 0 50% 50%;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    z-index: -1
}

.page-header:before {
    background-color: #1eb3e9;
    padding-top: 68%;
    bottom: 0;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 120%
}

.page-header:after {
    background-color: #1b1b1b;
    margin: auto;
    padding-top: 86%;
    bottom: 10px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 110%
}

.form-field {
    margin: auto;
    padding: 16px 0;
    max-width: 640px
}

.form-field-label {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px
}

.form-button {
    padding: 16px 0;
    text-align: center
}

.form-button .button {
    margin: 0 4px;
    min-width: 120px
}

.form-guide {
    line-height: 1.5;
    margin: 4px 0
}

.form-guide-error {
    color: #1eb3e9
}

.checkbox-container .checkbox+.checkbox-label {
    padding-left: 1.4em;
    position: relative
}

.checkbox-container .checkbox+.checkbox-label:before {
    background-color: #fff;
    border-radius: 4px;
    content: "";
    display: block;
    height: 1.2em;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.2em
}

.checkbox-container .checkbox+.checkbox-label:after {
    content: "";
    display: block;
    position: absolute
}

.checkbox-container .checkbox:focus+.checkbox-label:before {
    border-color: rgba(135, 136, 136, .5)
}

.checkbox {
    margin-right: .5em;
    cursor: pointer
}

.checkbox-label {
    display: inline-block;
    line-height: 1.5
}

.checkbox-container {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.checkbox-container .checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    position: absolute
}

.checkbox-container .checkbox+.checkbox-label:after {
    border: solid 2.4px transparent;
    border-radius: 2px;
    height: .8em;
    left: .3em;
    top: 45%;
    -webkit-transform: translateY(-45%) rotate(45deg);
    transform: translateY(-45%) rotate(45deg);
    width: .6em
}

.checkbox-container .checkbox:checked+.checkbox-label:before {
    border-color: #1eb3e9
}

.checkbox-container .checkbox:checked+.checkbox-label:after {
    border-bottom-color: #1eb3e9;
    border-right-color: #1eb3e9
}

.checkbox-container .checkbox:disabled+.checkbox-label:before {
    background-color: #edeeee;
    -webkit-box-shadow: none;
    box-shadow: none
}

.estimate-row {
    margin: 40px auto
}

.estimate-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.estimate-item {
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 24px;
    width: 100%
}

.estimate-item-head {
    background: #1eb3e9;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    padding: 8px
}

.estimate-item-body {
    border-bottom: solid 1px #edeeee;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 16px
}

.estimate-item-bottom {
    font-weight: 700;
    padding: 16px;
    text-align: right
}

.estimate-data {
    background: #fff;
    margin-right: 0;
    padding: 16px
}

.estimate-data dt {
    float: left;
    font-weight: 700;
    line-height: 1.5
}

.estimate-data dd {
    margin-left: 60px;
    line-height: 1.5
}

.estimate-data dd:after {
    clear: left;
    content: "";
    display: block
}

.estimate-data-head {
    background: #1b1b1b;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    padding: 8px
}

.u-left {
    text-align: left
}

.u-right {
    text-align: right
}

.u-center {
    text-align: center
}

.clearfix {
    *zoom: 1
}

.clearfix:after {
    content: "";
    display: block;
    clear: both
}

.toggle-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    max-width: 100%
}

.toggle-image>img {
    opacity: 0;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.toggle-image:hover>img {
    opacity: 1
}

.toggle-image-overlay {
    display: inline-block;
    position: relative;
    max-width: 100%
}

.toggle-image-overlay .layer {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.toggle-image-overlay:hover .layer {
    opacity: 1
}

.toggle-image-opacity {
    display: inline-block;
    max-width: 100%
}

.toggle-image-opacity>img {
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.toggle-image-opacity:hover>img {
    opacity: .8
}

.sns-instagram img {
    width: 100%;
    height: 150px;
    object-fit: cover
}

.sns-facebook {
    margin-top: 50px
}

.sr-only {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.u-disp-only-sp {
    display: block
}

.u-disp-only-pc {
    display: none
}

.u-mt0 {
    margin-top: 0
}

.u-mr0 {
    margin-right: 0
}

.u-mb0 {
    margin-bottom: 0
}

.u-ml0 {
    margin-left: 0
}

.u-mt4 {
    margin-top: 4px
}

.u-mr4 {
    margin-right: 4px
}

.u-mb4 {
    margin-bottom: 4px
}

.u-ml4 {
    margin-left: 4px
}

.u-mt8 {
    margin-top: 8px
}

.u-mr8 {
    margin-right: 8px
}

.u-mb8 {
    margin-bottom: 8px
}

.u-ml8 {
    margin-left: 8px
}

.u-mt12 {
    margin-top: 12px
}

.u-mr12 {
    margin-right: 12px
}

.u-mb12 {
    margin-bottom: 12px
}

.u-ml12 {
    margin-left: 12px
}

.u-mt16 {
    margin-top: 16px
}

.u-mr16 {
    margin-right: 16px
}

.u-mb16 {
    margin-bottom: 16px
}

.u-ml16 {
    margin-left: 16px
}

.u-mt20 {
    margin-top: 20px
}

.u-mr20 {
    margin-right: 20px
}

.u-mb20 {
    margin-bottom: 20px
}

.u-ml20 {
    margin-left: 20px
}

.u-mt24 {
    margin-top: 24px
}

.u-mr24 {
    margin-right: 24px
}

.u-mb24 {
    margin-bottom: 24px
}

.u-ml24 {
    margin-left: 24px
}

.u-mt28 {
    margin-top: 28px
}

.u-mr28 {
    margin-right: 28px
}

.u-mb28 {
    margin-bottom: 28px
}

.u-ml28 {
    margin-left: 28px
}

.u-mt32 {
    margin-top: 32px
}

.u-mr32 {
    margin-right: 32px
}

.u-mb32 {
    margin-bottom: 32px
}

.u-ml32 {
    margin-left: 32px
}

.u-mt36 {
    margin-top: 36px
}

.u-mr36 {
    margin-right: 36px
}

.u-mb36 {
    margin-bottom: 36px
}

.u-ml36 {
    margin-left: 36px
}

.u-mt40 {
    margin-top: 40px
}

.u-mr40 {
    margin-right: 40px
}

.u-mb40 {
    margin-bottom: 40px
}

.u-ml40 {
    margin-left: 40px
}

.u-mt44 {
    margin-top: 44px
}

.u-mr44 {
    margin-right: 44px
}

.u-mb44 {
    margin-bottom: 44px
}

.u-ml44 {
    margin-left: 44px
}

.u-mt48 {
    margin-top: 48px
}

.u-mr48 {
    margin-right: 48px
}

.u-mb48 {
    margin-bottom: 48px
}

.u-ml48 {
    margin-left: 48px
}

.u-mt52 {
    margin-top: 52px
}

.u-mr52 {
    margin-right: 52px
}

.u-mb52 {
    margin-bottom: 52px
}

.u-ml52 {
    margin-left: 52px
}

.u-mt56 {
    margin-top: 56px
}

.u-mr56 {
    margin-right: 56px
}

.u-mb56 {
    margin-bottom: 56px
}

.u-ml56 {
    margin-left: 56px
}

.u-mt60 {
    margin-top: 60px
}

.u-mr60 {
    margin-right: 60px
}

.u-mb60 {
    margin-bottom: 60px
}

.u-ml60 {
    margin-left: 60px
}

.u-pt0 {
    padding-top: 0
}

.u-pr0 {
    padding-right: 0
}

.u-pb0 {
    padding-bottom: 0
}

.u-pl0 {
    padding-left: 0
}

.u-pt4 {
    padding-top: 4px
}

.u-pr4 {
    padding-right: 4px
}

.u-pb4 {
    padding-bottom: 4px
}

.u-pl4 {
    padding-left: 4px
}

.u-pt8 {
    padding-top: 8px
}

.u-pr8 {
    padding-right: 8px
}

.u-pb8 {
    padding-bottom: 8px
}

.u-pl8 {
    padding-left: 8px
}

.u-pt12 {
    padding-top: 12px
}

.u-pr12 {
    padding-right: 12px
}

.u-pb12 {
    padding-bottom: 12px
}

.u-pl12 {
    padding-left: 12px
}

.u-pt16 {
    padding-top: 16px
}

.u-pr16 {
    padding-right: 16px
}

.u-pb16 {
    padding-bottom: 16px
}

.u-pl16 {
    padding-left: 16px
}

.u-pt20 {
    padding-top: 20px
}

.u-pr20 {
    padding-right: 20px
}

.u-pb20 {
    padding-bottom: 20px
}

.u-pl20 {
    padding-left: 20px
}

.u-pt24 {
    padding-top: 24px
}

.u-pr24 {
    padding-right: 24px
}

.u-pb24 {
    padding-bottom: 24px
}

.u-pl24 {
    padding-left: 24px
}

.u-pt28 {
    padding-top: 28px
}

.u-pr28 {
    padding-right: 28px
}

.u-pb28 {
    padding-bottom: 28px
}

.u-pl28 {
    padding-left: 28px
}

.u-pt32 {
    padding-top: 32px
}

.u-pr32 {
    padding-right: 32px
}

.u-pb32 {
    padding-bottom: 32px
}

.u-pl32 {
    padding-left: 32px
}

.u-pt36 {
    padding-top: 36px
}

.u-pr36 {
    padding-right: 36px
}

.u-pb36 {
    padding-bottom: 36px
}

.u-pl36 {
    padding-left: 36px
}

.u-pt40 {
    padding-top: 40px
}

.u-pr40 {
    padding-right: 40px
}

.u-pb40 {
    padding-bottom: 40px
}

.u-pl40 {
    padding-left: 40px
}

.u-pt44 {
    padding-top: 44px
}

.u-pr44 {
    padding-right: 44px
}

.u-pb44 {
    padding-bottom: 44px
}

.u-pl44 {
    padding-left: 44px
}

.u-pt48 {
    padding-top: 48px
}

.u-pr48 {
    padding-right: 48px
}

.u-pb48 {
    padding-bottom: 48px
}

.u-pl48 {
    padding-left: 48px
}

.u-pt52 {
    padding-top: 52px
}

.u-pr52 {
    padding-right: 52px
}

.u-pb52 {
    padding-bottom: 52px
}

.u-pl52 {
    padding-left: 52px
}

.u-pt56 {
    padding-top: 56px
}

.u-pr56 {
    padding-right: 56px
}

.u-pb56 {
    padding-bottom: 56px
}

.u-pl56 {
    padding-left: 56px
}

.u-pt60 {
    padding-top: 60px
}

.u-pr60 {
    padding-right: 60px
}

.u-pb60 {
    padding-bottom: 60px
}

.u-pl60 {
    padding-left: 60px
}

@media screen and (min-width:480px) {
    .flex .col-s-12 {
        width: 100%
    }

    .flex .col-s-10 {
        width: 83.33%
    }

    .flex .col-s-9 {
        width: 75%
    }

    .flex .col-s-8 {
        width: 66.66%
    }

    .flex .col-s-7 {
        width: 58.33%
    }

    .flex .col-s-6 {
        width: 50%
    }

    .flex .col-s-5 {
        width: 41.66%
    }

    .flex .col-s-4 {
        width: 33.33%
    }

    .flex .col-s-3 {
        width: 25%
    }

    .flex .col-s-2 {
        width: 16.66%
    }

    .flex .col-s-1 {
        width: 8.33%
    }

    .flex-reset-s {
        display: block
    }
}

@media screen and (min-width:600px) {
    .flex .col-m-12 {
        width: 100%
    }

    .flex .col-m-10 {
        width: 83.33%
    }

    .flex .col-m-9 {
        width: 75%
    }

    .flex .col-m-8 {
        width: 66.66%
    }

    .flex .col-m-7 {
        width: 58.33%
    }

    .flex .col-m-6 {
        width: 50%
    }

    .flex .col-m-5 {
        width: 41.66%
    }

    .flex .col-m-4 {
        width: 33.33%
    }

    .flex .col-m-3 {
        width: 25%
    }

    .flex .col-m-2 {
        width: 16.66%
    }

    .flex .col-m-1 {
        width: 8.33%
    }

    .flex-reset-m {
        display: block
    }

    .heading-primary {
        font-size: 40px;
        font-size: 4rem
    }

    .heading-primary-subtext {
        font-size: 16px;
        font-size: 1.6rem
    }

    .tbl-th {
        display: table-cell;
        width: 30%
    }

    .tbl-td {
        display: table-cell
    }

    .hero-image {
        background-image: url(../img/Rstudio_topbanner_pc.png);
        height: 86vh;
        min-height: 650px
    }

    .hero-heading {
        font-size: 36px;
        font-size: 3.6rem;
        bottom: -54px
    }

    .works-list-item {
        padding: 0 16px;
        width: 50%
    }

    .about-company .tbl tr:first-child {
        border-top: solid 1px #fff
    }

    .about-company .tbl tr:last-child .tbl-th {
        border-bottom: solid 1px #fff
    }

    .about-company .tbl .tbl-th {
        border-bottom: solid 1px #fff
    }

    .about-company .tbl .tbl-td {
        border-bottom: solid 1px #fff;
        border-right: solid 1px #fff
    }

    .access-way-heading {
        font-size: 18px;
        font-size: 1.8rem
    }

    .page-header {
        height: 250px
    }

    .estimate-item {
        margin: 0 24px 24px 0;
        width: calc(50% - 24px * 2 / 2)
    }

    .sns-instagram {
        margin: auto;
        max-width: 970px
    }

    .sns-instagram img {
        height: 200px
    }

    .sns-facebook {
        text-align: center
    }
}

@media screen and (min-width:960px) {
    a:hover {
        text-decoration: none
    }

    .l-header-nav-button {
        display: none
    }

    .l-header-nav {
        background-color: transparent;
        display: block;
        left: auto;
        right: 8px;
        top: 0
    }

    .l-header-nav-item {
        display: inline-block;
        padding: 9px 4px;
        vertical-align: top
    }

    .l-header-nav-text {
        padding: 4px 16px
    }

    .flex .col-l-12 {
        width: 100%
    }

    .flex .col-l-10 {
        width: 83.33%
    }

    .flex .col-l-9 {
        width: 75%
    }

    .flex .col-l-8 {
        width: 66.66%
    }

    .flex .col-l-7 {
        width: 58.33%
    }

    .flex .col-l-6 {
        width: 50%
    }

    .flex .col-l-5 {
        width: 41.66%
    }

    .flex .col-l-4 {
        width: 33.33%
    }

    .flex .col-l-3 {
        width: 25%
    }

    .flex .col-l-2 {
        width: 16.66%
    }

    .flex .col-l-1 {
        width: 8.33%
    }

    .flex-reset-l {
        display: block
    }

    .hero-text {
        margin: auto;
        text-align: center;
        max-width: 800px
    }

    .access-nonoichi {
        text-align: center
    }

    .estimate-item {
        width: calc(33.33% - 24px * 2 / 2)
    }

    .u-disp-only-sp {
        display: none
    }

    .u-disp-only-pc {
        display: block
    }
}