@charset "UTF-8";
/*-------- 
util
---------*/
@media (min-width: 751px) {
  .util-sp {
    display: none;
  }
}
@media (max-width: 750px) {
  /*-------- 
  html,body
  ---------*/
  html.add-hidden {
    overflow: hidden !important;
  }
  /*-------- 
  共通
  ---------*/
  #container {
    min-width: auto;
  }
  #wrapper_index .page_block {
    min-width: auto;
  }
  #wrapper_index .page_block .page_content {
    min-width: auto;
    margin: 0 7.0666666667vw;
    padding: 0;
    margin-right: 0;
  }
  .page_content.mod-pen {
    margin-left: 0 !important;
  }
  #wrapper_index #page_opening .block_content {
    position: unset;
    top: 50%;
    left: 0;
    width: 100%;
    height: 230.4vw;
    margin-top: 0;
    padding-right: 0;
  }
  #wrapper_index #page_opening .ttl_maincopy canvas {
    position: unset;
    width: 89.7333333333vw;
    margin-left: 0;
  }
  #wrapper_index #page_opening .ttl_maincopy {
    position: unset;
    margin-left: 0;
    margin-top: 24.6666666667vw;
  }
  #wrapper_index #page_opening .block_message {
    width: 100%;
    float: none;
    margin-top: 11.0666666667vw;
  }
  #wrapper_index #page_opening .block_message .ttl {
    margin-bottom: 0;
    width: 83.6vw;
  }
  #wrapper_index #page_opening .block_message .ttl img {
    width: 100%;
    height: auto;
  }
  #wrapper_index #page_opening .block_message .sentence p {
    line-height: 2.375;
    font-size: 3.2vw;
    margin-top: 11.0666666667vw;
  }
  #wrapper_index #page_opening .site_name {
    position: absolute;
    top: 201.5625vw;
    left: 0;
    margin-left: 0;
    bottom: auto !important;
    opacity: 0;
    transition: opacity 0.8s;
    transition-delay: 0.35s;
  }
  #wrapper_index #page_opening .site_name img {
    width: 46.4vw;
    height: auto;
  }
  #wrapper_index #page_opening .site_name.add-visible {
    opacity: 1;
  }
  #wrapper_index #page_creativemap .block_message .strong {
    font-size: 4.5333333333vw;
  }
  /*-------- 
  実績
  ---------*/
  #wrapper_index #page_creativemap .block_map .line_vertical {
    z-index: 5;
    position: absolute;
    left: 0;
    width: 6px;
    height: 0;
    margin-left: 0;
    background: url("../img/index/line/creativemap_vertical.png?1375703985") repeat-y;
    border-radius: 1.3333333333vw;
  }
  #wrapper_index #page_creativemap .block_message {
    position: fixed;
    top: 20vw;
    left: 12.6666666667vw;
    margin: 0;
    margin-left: 0 !important;
  }
  #wrapper_index #page_creativemap .block_message .text {
    line-height: 2.375;
    font-size: 3.2vw;
  }
  #wrapper_index #page_creativemap .block_map .line_horizontal {
    z-index: 7;
    position: absolute;
    top: 0px;
    left: 0;
    width: 0;
    height: 6px;
    margin: 0;
    background: url("../img/index/line/creativemap_horizontal.png?1375703983") repeat-x;
    border-radius: 1.3333333333vw;
  }
  #wrapper_index #page_creativemap .block_map {
    left: unset;
    z-index: 5;
    width: 100%;
    height: auto !important;
    margin: 0;
    background: none;
  }
  .itm_flag {
    display: none !important;
  }
  .page_content #page_creativemap {
    min-height: 5000px !important;
  }
  .sp_mapWrap {
    background: url("../img/index/bg/sp/creativemap.png") repeat;
    background-size: 100% auto;
    position: relative;
  }
  .sp_works img {
    width: 100%;
  }
  .brush_wrap_div.mod-creativeMap {
    left: auto !important;
    right: 0;
    width: 100% !important;
    height: auto !important;
  }
  .brush_wrap_div.mod-creativeMap canvas {
    width: 100%;
    height: auto;
  }
  #page_creativemap .page_foot_parts {
    display: none;
  }
  /*-------- 
  メンバー
  ---------*/
  #wrapper_index #page_staff .page_content {
    padding-top: 8vw;
    padding-bottom: 6.6666666667vw;
  }
  #wrapper_index #page_staff .block_staffs {
    max-width: 120vw;
    margin: 0 auto;
  }
  #wrapper_index #page_staff .unit_staff {
    position: relative;
    width: 27.0666666667vw;
    margin: 0;
    text-align: center;
    vertical-align: top;
    opacity: 1;
    filter: alpha(opacity=0);
    display: inline-block;
  }
  #wrapper_index #page_staff .unit_staff:not(:nth-child(3n+1)) {
    margin-left: 1.6vw;
  }
  #wrapper_index #page_staff .unit_staff:nth-child(n+4) {
    margin-top: 6.6666666667vw;
  }
  #wrapper_index #page_staff .unit_staff .thm {
    overflow: hidden;
    position: relative;
    width: 27.0666666667vw;
    height: 35.0666666667vw;
    margin: 0 auto 2vw;
  }
  #wrapper_index #page_staff .unit_staff .thm img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 27.0666666667vw;
    height: 35.0666666667vw;
  }
  #wrapper_index #page_staff .unit_staff .thm canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 27.0666666667vw;
    height: 35.0666666667vw;
  }
  #wrapper_index #page_staff .unit_staff .name {
    margin-bottom: 1.0666666667vw;
    color: #7f7f7f;
    font-size: 2.6666666667vw;
    line-height: 1.2;
  }
  #wrapper_index #page_staff .unit_staff .job {
    color: #7f7f7f;
    font-size: 2vw;
    line-height: 1;
  }
  #wrapper_index #page_staffindex .ttl {
    position: absolute;
    top: 50%;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 75.8666666667vw;
    height: auto;
    margin: 0;
    text-align: center;
    white-space: noWrap;
  }
  #wrapper_index #page_staffindex .ttl span {
    display: inline-block;
    height: 26.6666666667vw;
    margin: 0 -1.6vw;
    line-height: 23.4666666667vw;
  }
  #wrapper_index #page_staffindex .ttl .unit img {
    width: auto;
    height: 100%;
  }
  .num_0,
  .num_1,
  .num_2,
  .num_3,
  .num_4,
  .num_5,
  .num_6,
  .num_7,
  .num_8,
  .num_9 {
    width: 16.4vw !important;
    background: url("../img/index/ttl/createvities_num-sd3e1583bf2.png") no-repeat;
    background-size: 16.4vw !important;
  }
  .num_0 {
    background-position: 0 -112vw !important;
  }
  .num_1 {
    background-position: 0 -252vw !important;
  }
  .num_2 {
    background-position: 0 -140vw !important;
  }
  .num_3 {
    background-position: 0 -56vw !important;
  }
  .num_4 {
    background-position: 0 -196vw !important;
  }
  .num_5 {
    background-position: 0 -168vw !important;
  }
  .num_6 {
    background-position: 0 -28vw !important;
  }
  .num_7 {
    background-position: 0 -224vw !important;
  }
  .num_8 {
    background-position: 0 0;
    background-size: 100%;
    height: 26.6666666667vw;
  }
  .num_9 {
    background-position: 0 -84vw !important;
  }
  #wrapper_index #page_staffindex .video_background video {
    inset: 0 !important;
    margin: 0 !important;
    object-fit: cover;
  }
  #wrapper_index #page_staffindex #video_staffindex {
    position: relative;
  }
  #wrapper_index #page_staffindex #video_staffindex::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  /*-------- 
  会社概要
  ---------*/
  #page_company {
    min-height: auto !important;
    opacity: 1;
    transition: opacity 0.3s;
  }
  .company_wrap {
    background-color: #f2f2f2;
  }
  #wrapper_index #page_companymap .block_caption {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 63.7333333333vw;
    height: auto;
    margin: 0;
    color: white;
    line-height: 1.9;
  }
  #wrapper_index #page_companymap .block_caption .site_name {
    margin-bottom: 0px;
    width: 46.6666666667vw;
  }
  #wrapper_index #page_companymap .block_caption .site_name img {
    width: 100%;
    height: auto;
  }
  #wrapper_index #page_company .block_header .site_name {
    position: absolute;
    top: 83.3333333333vw !important;
    left: 0;
    width: 34.2666666667vw;
    bottom: auto !important;
  }
  #wrapper_index #page_company .block_header .site_name img {
    width: 100%;
    height: auto;
  }
  #wrapper_index #page_companymap .block_caption .address .ja {
    margin-bottom: 7.3333333333vw;
    font-size: 3.2vw;
    border: none !important;
  }
  #wrapper_index #page_companymap {
    z-index: 25;
    background: url("/img/index/bg/company.jpg") no-repeat center center/100% 100%;
  }
  #wrapper_index #page_companymap .block_caption .address {
    width: 100%;
    margin-bottom: 2vw;
    border: none !important;
  }
  #wrapper_index #page_companymap .block_caption .googleMapBtn {
    display: inline-block;
    margin-top: 3.0666666667vw;
    width: 36.5333333333vw;
  }
  #wrapper_index #page_companymap .block_caption .googleMapBtn img {
    width: 100%;
    height: auto;
  }
  #page_company .page_content {
    margin: 0 auto 0 !important;
  }
  #page_staffindex .page_content {
    margin: 0 !important;
  }
  #wrapper_index #page_company .block_header {
    position: absolute;
    top: 0vw;
    left: 8vw;
    width: 49.3333333333vw;
    height: 100%;
    margin: 0px 0 0 -0px;
    text-align: center;
    z-index: 100;
    pointer-events: none;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content .block_inner {
    background: transparent;
  }
  #wrapper_index #page_company .block_body {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    margin-left: 0;
  }
  #wrapper_index #page_company .block_body .block_body_itm {
    display: table;
    position: relative;
    width: 100%;
    min-height: auto !important;
    padding-top: 101.3333333333vw;
    padding-bottom: 13.3333333333vw;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content {
    width: 86.6666666667vw;
    margin: 0px auto;
    padding-bottom: 0;
    background: none;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_body_itm_inner {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .block_inner {
    padding: 0;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .content dl > * {
    line-height: 1.7;
    color: #777;
    font-size: 3.2vw;
  }
  .block_body_itm.recruit {
    padding-top: 0 !important;
  }
  .recruit_wrap,
  .contact_wrap {
    background-color: #fff;
  }
  .visual.recruit canvas {
    width: 49.3333333333vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .content dl {
    display: flex;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .content dt span {
    width: max-content !important;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .content dt {
    float: none;
    width: max-content;
  }
  #wrapper_index #page_company .block_body .block_body_itm.company .content dd {
    margin-left: 0 !important;
    padding-left: 0;
    text-indent: 0;
  }
  .letter_7,
  .letter_6,
  .letter_5,
  .letter_4,
  .letter_3,
  .letter_2,
  .letter_1 {
    letter-spacing: 0 !important;
  }
  /*-------- 
  リクルート
  ---------*/
  #wrapper_index #page_company .block_body .block_body_itm .block_content .btn_link a:hover img {
    top: 0 !important;
  }
  .visual.company canvas {
    width: 70.8vw;
    margin-top: 24.6666666667vw;
  }
  .recruit .block_inner {
    position: relative;
    padding: 7.2vw 5.6vw !important;
    background-color: #f2f2f2 !important;
    margin-top: 40.5333333333vw;
  }
  .recruit .block_inner::after {
    content: "";
    display: block;
    background: url(../img/index/bg/company_content_bottom.png) no-repeat bottom center/100% auto !important;
    width: 100%;
    height: 2.4vw;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  #wrapper_index #page_company .block_body .block_body_itm.recruit h3 {
    margin-bottom: 2.9333333333vw;
    padding-left: 6.6666666667vw;
    color: black;
    font-size: 4.4vw;
    font-weight: normal;
    line-height: 1.5;
    background: url("../img/index/ico/recruit_check.png?1375703982") no-repeat;
    background-size: 5.3333333333vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm.recruit .content dl > * {
    line-height: 1.58;
    color: #777;
    font-size: 3.2vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm.recruit .content dt {
    padding-left: 3.3333333333vw;
    background: url("../img/index/ico/recruit_content.png?1375703982") no-repeat 0 50%;
    background-size: 2.5333333333vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm.recruit .content {
    position: relative;
    padding-left: 0;
  }
  #wrapper_index #page_company .block_body .btn_contact {
    margin: 4vw auto 0 !important;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content .btn_link {
    width: 39.2vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content .btn_link a {
    display: block;
    overflow: unset !important;
    position: relative;
    height: auto !important;
    border: none !important;
    border-radius: unset !important;
    text-align: center;
    font-size: 0;
    line-height: normal;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content .btn_link a img {
    position: relative;
    top: 0;
    height: auto;
    width: 100%;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content .btn_link a:hover img {
    top: -8.8vw;
  }
  #wrapper_index #page_company .block_body .block_body_itm.recruit .btn_entry {
    margin: 6.6666666667vw auto 0;
  }
  #wrapper_index #page_company .block_body .block_body_itm .block_content:not(:first-of-type) .block_inner {
    margin-top: 8vw !important;
  }
  /*-------- 
  お問い合わせ
  ---------*/
  .block_body_itm.contact {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 38vw auto 0 !important;
  }
  .visual.contact canvas {
    width: 49.3333333333vw;
  }
  .contact .block_inner {
    padding: 7.6vw !important;
    background-color: #f2f2f2 !important;
  }
  #wrapper_index #page_company .block_body .block_body_itm.contact .sentence p {
    line-height: 1.7;
    color: #777;
    font-size: 3.2vw;
    text-align: center;
  }
  /*-------- 
  end
  ---------*/
  #page_ending .page_content {
    margin-left: 0 !important;
    display: block !important;
  }
  #page_ending .pen_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 44.6666666667vw;
    width: 100%;
  }
  .message {
    position: absolute;
    top: 0% !important;
    left: 50%;
    margin: 0 !important;
    width: 100%;
    transform: translateX(-50%);
  }
  .message canvas {
    width: 135%;
    height: auto;
  }
  #wrapper_index #page_ending .pen {
    top: auto !important;
    left: 50%;
    transform: translate(-50%, 0%) !important;
    margin: 0 !important;
    bottom: 0;
  }
  /*-------- 
  fixボタン
  ---------*/
  .drawBtn {
    position: fixed;
    width: 50.4vw;
    height: 11.4666666667vw;
    background: #fff;
    border-radius: 100px;
    z-index: 80;
    left: 50%;
    bottom: 6.6666666667vw;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4.6666666667vw 0 3.3333333333vw;
    translate: 0 200%;
    transition: translate 0.3s;
  }
  .add-hush .drawBtn {
    translate: 0 0%;
  }
  .add-ending .drawBtn {
    translate: 0 200%;
  }
  .add-drawerMenuOpen .drawBtn {
    translate: 0 200% !important;
  }
  .add-endedHavePen .drawBtn {
    translate: 0 0% !important;
  }
  .add-endingStart .drawBtn {
    translate: 0 200% !important;
  }
  .add-endedHavePen.add-drawerMenuOpen .drawBtn {
    translate: 0 200% !important;
  }
  .add-write.add-firstWrite .drawBtn {
    translate: 0 0%;
  }
  .scrollElm,
  .drawElm {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .scrollElm.add-active,
  .drawElm.add-active {
    text-decoration: underline;
  }
  .scrollElm svg,
  .drawElm svg {
    width: 8.1333333333vw;
  }
  .btnTxt {
    position: relative;
    display: block;
  }
  .add-active .btnTxt::before {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -50%;
    left: 0;
    background-color: #be0018;
  }
  .btnTxt {
    height: 2vw;
    width: auto;
  }
  .btnTxt img {
    width: auto;
    height: 100%;
  }
  .scrollElm {
    width: 20.1333333333vw;
  }
  .drawElm {
    width: 18.5333333333vw;
  }
  .scroll-cls-1,
  .scroll-cls-2 {
    fill: #be0018;
  }
  .scroll-cls-1,
  .scroll-cls-2,
  .scroll-cls-3 {
    stroke-width: 0px;
  }
  .scroll-cls-2,
  .scroll-cls-3 {
    fill-rule: evenodd;
  }
  .scroll-cls-3 {
    fill: #fff;
  }
  .draw-cls-1 {
    clip-path: url(#clippath);
  }
  .draw-cls-2 {
    fill: none;
  }
  .draw-cls-2,
  .draw-cls-3,
  .draw-cls-4,
  .draw-cls-5 {
    stroke-width: 0px;
  }
  .draw-cls-3,
  .draw-cls-6,
  .draw-cls-4 {
    fill: #be0018;
  }
  .draw-cls-6 {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  .draw-cls-4 {
    fill-rule: evenodd;
  }
  .draw-cls-5 {
    fill: #fff;
  }
  .add-active .scroll-cls-3 {
    fill: #be0018 !important;
  }
  .add-active .scroll-cls-1,
  .add-active .scroll-cls-2 {
    fill: #fff;
  }
  .draw-cls-4 {
    fill: #fff !important;
  }
  .add-active .draw-cls-4 {
    fill: #be0018 !important;
  }
  .draw-cls-5 {
    fill: #be0018 !important;
  }
  .add-active .draw-cls-5 {
    fill: #fff !important;
  }
  /*-------- 
  ペン
  ---------*/
  #pen {
    transition: opacity 0.3s;
    opacity: 0 !important;
    z-index: 100 !important;
    display: block !important;
    width: 4vw;
    height: 4vw;
  }
  .add-endingStart #pen {
    opacity: 1 !important;
  }
  .script_draw #pen {
    opacity: 1 !important;
  }
  .add-hush .pen.mod-kv {
    display: none !important;
  }
  #page_ending .pen {
    width: 80.2666666667vw;
  }
  #page_ending .pen img {
    width: 100%;
    height: auto;
  }
  .draw {
    display: none;
    position: absolute;
    top: -205px !important;
    left: 14px !important;
  }
  .script_draw .draw {
    display: block !important;
  }
  .add-endingStart .draw {
    top: -223px !important;
    left: -4px !important;
  }
  .move {
    display: none;
    position: absolute;
  }
  .script_draw .move {
    display: none !important;
  }
  .script_move .move {
    display: block;
  }
  #container.pen_have,
  #container.pen_have * {
    cursor: unset !important;
  }
  .pen_default {
    position: fixed;
    z-index: 51;
    top: 50%;
    right: -250px;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.3s;
    width: 308px;
  }
  .add-notPenHave .pen_default {
    opacity: 0;
  }
  .add-stopScroll .pen_default {
    opacity: 1;
  }
  .script_draw .pen_default {
    opacity: 0;
  }
  body:not(.add-stopScroll) .pen_default {
    opacity: 0;
  }
  /*-------- 
  案件一覧
  ---------*/
  .sp_works {
    padding: 16vw 0;
    position: relative;
  }
  .sp_works:not(.sp_works:first-of-type)::before {
    display: block;
    content: "";
    background: url(/img/index/line/creativemap_horizontal.png) no-repeat center center/100% auto;
    width: 750px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 1px;
  }
  .sp_works:not(.sp_works:first-of-type)::after {
    display: block;
    content: "";
    background: #fff;
    inset: 0;
    pointer-events: none;
    width: 750px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 1px;
    transform: translateX(0%);
    transition: transform 1s linear;
  }
  .sp_works:not(.sp_works:first-of-type).add-inView::after {
    transform: translateX(100%);
  }
  .sp_worksList {
    width: 82.6666666667vw;
    margin-inline: auto;
    display: flex;
    gap: 4.9333333333vw;
    align-items: center;
    flex-wrap: wrap;
  }
  .sp_worksItem {
    width: 24vw;
    position: relative;
    opacity: 0;
    translate: 0 50%;
    transition: translate 0.8s, opacity 0.5s;
  }
  .sp_worksItem:nth-child(n+4) {
    margin-top: 5.3333333333vw;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(1) {
    transition-delay: 0.1s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(2) {
    transition-delay: 0.2s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(3) {
    transition-delay: 0.3s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(4) {
    transition-delay: 0.4s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(5) {
    transition-delay: 0.5s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(6) {
    transition-delay: 0.6s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(7) {
    transition-delay: 0.7s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(8) {
    transition-delay: 0.8s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(9) {
    transition-delay: 0.9s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(10) {
    transition-delay: 1s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(11) {
    transition-delay: 1.1s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(12) {
    transition-delay: 1.2s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(13) {
    transition-delay: 1.3s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(14) {
    transition-delay: 1.4s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(15) {
    transition-delay: 1.5s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(16) {
    transition-delay: 1.6s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(17) {
    transition-delay: 1.7s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(18) {
    transition-delay: 1.8s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(19) {
    transition-delay: 1.9s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(20) {
    transition-delay: 2s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(21) {
    transition-delay: 2.1s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(22) {
    transition-delay: 2.2s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(23) {
    transition-delay: 2.3s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(24) {
    transition-delay: 2.4s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(25) {
    transition-delay: 2.5s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(26) {
    transition-delay: 2.6s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(27) {
    transition-delay: 2.7s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(28) {
    transition-delay: 2.8s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(29) {
    transition-delay: 2.9s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem:nth-child(30) {
    transition-delay: 3s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem {
    opacity: 1;
    translate: 0 0;
  }
  .mod-other.add-inView .sp_worksItem {
    transition-delay: 0.1s;
    opacity: 1;
    translate: 0 0;
  }
  .sp_worksItem.mod-board {
    translate: 0 0 !important;
  }
  .sp_worksItem.mod-board img {
    opacity: 0;
    translate: 0 -80%;
    transition: translate 0.8s, opacity 0.5s;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem.mod-board img {
    opacity: 1;
    translate: 0 0;
  }
  .mod-other.add-inView .sp_worksItem.mod-board img {
    opacity: 1;
    translate: 0 0;
  }
  .sp_worksItem.mod-board img.mod-shadow {
    translate: 0 80%;
    position: absolute;
    bottom: -5.0666666667vw;
    left: 5.3333333333vw;
    z-index: -1;
  }
  .add-horizontalDrawed .mod-first .sp_worksItem.mod-board img.mod-shadow {
    opacity: 1;
    translate: 0 0;
  }
  .mod-other.add-inView .sp_worksItem.mod-board img.mod-shadow {
    opacity: 1;
    translate: 0 0;
  }
  .sp_worksItem:not(.mod-board) {
    aspect-ratio: 1;
  }
  .sp_worksItem:not(.mod-board) .sp_worksItem_link {
    display: block;
    height: 100%;
    background-color: #fff;
  }
  .sp_worksItem:not(.mod-board) .sp_worksItem_link img {
    display: block;
    height: 100%;
    object-fit: cover;
  }
  .add-top .balloon {
    display: none !important;
  }
  #wrapper_index #page_staff .unit_staff .balloon.type_2 {
    background-size: 100%;
  }
  #wrapper_index #page_staff .unit_staff .balloon.type_1 {
    background-size: 100%;
  }
  #wrapper_index #page_staff .unit_staff .balloon {
    top: -20%;
    left: 0%;
    width: 100%;
  }
  #wrapper_index #page_staff .unit_staff .balloon canvas {
    width: 100%;
  }
  #wrapper_index #page_opening .pen {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 80.2666666667vw;
    transform: translate(-50%, -50%);
  }
  #wrapper_index #page_opening .pen img {
    width: 100%;
    height: auto;
  }
  /*-------- 
  opTxt
  ---------*/
  @keyframes scaleUpDown {
    0% {
      transform: scale(0);
    }
    70% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  .op_txtWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transform-origin: center 100%; /* 中央からスケールするように設定 */
    transition: opacity 0.35s;
    transform: scale(0);
    pointer-events: none;
    width: 81.6vw;
    max-width: 320px;
  }
  .op_txtWrap:not(.add-notPenHave .op_txtWrap) {
    opacity: 1;
    animation: scaleUpDown 0.5s forwards; /* アニメーションを適用 */
  }
  .add-write .op_txtWrap {
    transition-delay: 0.3s;
  }
  .add-firstWrite .op_txtWrap {
    opacity: 0 !important;
  }
  .op_txtWrap img {
    width: 100%;
    height: auto;
  }
  .add-hush .op_txtWrap {
    display: none;
  }
  .op_txt {
    position: absolute;
    top: 31%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666666;
    font-size: 3.2vw;
    white-space: noWrap;
  }
  .scrolldown {
    display: none !important;
  }
  .mistake_balloon {
    scale: 0.9 !important;
  }
  /*-------- 
  帯みたいなやつ
  ---------*/
  .page_head_parts.rotate_left.parts_1 {
    display: none;
  }
  .page_head_parts.rotate_right.parts_2 {
    display: none;
  }
  .page_head_parts.rotate_left.parts_3 {
    display: none;
  }
  #page_staff .page_foot_parts.rotate_right {
    display: none;
  }
  #page_opening .page_foot_parts {
    height: 13.3333333333vw;
    bottom: 4vw;
  }
  #page_company .page_foot_parts.rotate_left {
    bottom: -2.6666666667vw;
  }
  /*-------- 
  絵を描いた時に出てくる要素
  ---------*/
  #page_ending .brush_wrap_div {
    display: block !important;
  }
  #page_opening .brush_wrap_div {
    transition: opacity 0.1s;
    transition-delay: 0.05s;
    opacity: 1;
  }
  .add-drawerMenuOpen #page_opening .brush_wrap_div {
    opacity: 0;
  }
  .anc_map {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 92.5vh;
    height: 92.5svh;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  .headerNavigation {
    opacity: 1;
    transition: opacity 0.3s;
  }
  .add-stopScroll .headerNavigation, .add-endingStart .headerNavigation {
    opacity: 0;
    pointer-events: none;
  }
  .add-top .video_background {
    display: none;
  }
  #video_companymap_html5_api {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
  }
}