/* ##############################################################################

    KEYFRAMES

############################################################################## */
  @keyframes slide-to_rgt {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(0%); }
  }
  @keyframes slide-rev_rgt {
    0% { transform: translateX(0%); }
    100% { transform: translateX(110%); }
  }
  @keyframes slide-to_lft {
    0% { transform: translateX(110%); }
    100% { transform: translateX(0%); }
  }
  @keyframes slide-rev_lft {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-110%); }
  }
  @keyframes slide-to_top {
    0% { transform: translateY(-110%); }
    100% { transform: translateY(0%); }
  }
  @keyframes slide-rev_top {
    0% { transform: translateY(0%); }
    100% { transform: translateY(110%); }
  }
  @keyframes slide-to_btm {
    0% { transform: translateY(110%); }
    100% { transform: translateY(0%); }
  }
  @keyframes slide-rev_btm {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-110%); }
  }
  @keyframes line_mov {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  .line-mov {
    display: block;
    position: relative;
    width: 96px;
    height: 1px;
    overflow: hidden;
    background-color: #cbcacb;
    transition: .4s cubic-bezier(.07, .51, .12, 1);
    pointer-events: none;
  }
  .line-mov::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    animation-name: line_mov;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-iteration-count: infinite;
  }


/* ##############################################################################

    COMMON

############################################################################## */
  html {
    height: 100%;
    overflow-y: scroll;
  }
  body {
    height: 100%;
    background: #eeedee;
  }

/* layout
**************************************** */

  /* --- inner --- */
  .inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .inner-sm { max-width: 960px; }
  .inner-lg { max-width: calc(100% - 160px); }

  /* --- sect_pdg --- */
  .sect_pdg {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .sect_pdg-sm {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .sect_pdg-btm_no {
    padding-bottom: 0;
  }

  @media screen and  (max-width: 1200px) {
    .inner-lg {
      max-width: 90%;
    }
  }
  @media screen and  (max-width: 1200px) {
    .lgpc-none { display: block; }
    .lgpc-none-inline { display: inline-block; }
    .smpc-none { display: none; }
  }
  @media screen and  (max-width: 768px) {
    .inner { width: calc(100% - 32px); }
    .sect_pdg {
      padding-top: 48px;
      padding-bottom: 48px;
    }
    .sect_pdg-sm {
      padding-top: 32px;
      padding-bottom: 32px;
    }
  }

/* bg
**************************************** */
  .bg-wht {
    position: relative;
    background-color: rgba(255,255,255,.5);
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .bg-wht .tri {
    position: absolute;
    z-index: 1;
  }
  .bg-wht .tri:nth-child(1) {
    top: 0;
    right: 0;
  }
  .bg-wht .tri:nth-child(2) {
    bottom: 0;
    left: 0;
  }
  @media screen and (max-width: 768px) {
    .bg-wht {
      padding-top: 16px;
      padding-bottom: 16px;
      padding-left: 24px;
      padding-right: 24px;
    }
    .bg-wht .tri {
      width: 16px;
      height: 18px;
    }
  }

/* ttl
**************************************** */

  /* --- page_ttl --- */
  .page_ttl {
    background: #eee;
    padding-top: 184px;
    padding-bottom: 104px;
    text-align: center;
  }
  .page_ttl .fnt-en {
    text-transform: uppercase;
  }

  /* --- sect_ttl --- */
  .sect_ttl {
    font-size: 462%;
    font-weight: normal;
    line-height: 1;
    letter-spacing: .15em;
    font-weight: 700;
  }
  .sect_ttl span.fnt-jp {
    display: block;
    margin-top: 24px;
    letter-spacing: .15em;
    font-size: 26.5%;
  }
  .sect_ttl-jp span {
    display: block;
    line-height: 1.6em;
    letter-spacing: .05em;
  }
  .sect_ttl-jp span.fnt-jp {
    font-size: 307%;
    margin-bottom: 16px;
  }
  .sect_ttl-jp span.fnt-en {
    font-size: 170%;
  }
  .section_catch {
    text-align: center;
    font-size: 120%;
    font-weight: 700;
  }
  
  /* --- heading --- */
  .head1 {
    font-size: 246%;
    color: #a2c73c;
    line-height: 1.6em;
  }
  .head2 {
    font-size: 139%;
    line-height: 1.8em;
  }
  .head2 span {
    display: block;
  }
  .head2 span.fnt-en {
    font-size: 144%;
    letter-spacing: .15em;
    margin-bottom: 2px;
  }
  .head2 span.fnt-jp {
    font-size: 83%;
    letter-spacing: .2em;
  }
  .head3 { font-size: 120%; }
  .head4 { font-size: 100%; }
  @media screen and (max-width: 1200px) {
    .sect_ttl {
      font-size: 370%;
    }
    .page_ttl {
      padding-bottom: 64px;
    }
    .sect_ttl.page_ttl {
      font-size: 430%;
    }
    .head1 {
      font-size: 231%;
    }
  }
  @media screen and (max-width: 768px) {
    .page_ttl {
      padding-top: 128px;
    }
    .sect_ttl.page_ttl {
      font-size: 260%;
    }
    .sect_ttl {
      font-size: 200%;
    }
    .sect_ttl span.fnt-jp {
      margin-top: 12px;
      font-size: 55%;
    }
    .sect_ttl-jp span.fnt-jp {
      font-size: 170%;
      line-height: 1.8em;
      margin-bottom: 8px;
    }
    .sect_ttl-jp span.fnt-en {
      font-size: 139%;
    }
    .head1 {
      font-size: 150%;
    }
    .head2 {
      font-size: 123%;
    }
    .head3 {
      font-size: 116%;
    }
  }

/* txt
**************************************** */
  .fnt-lg {
    font-size: 108%;
  }
  .fnt-xl {
    font-size: 116%;
    line-height: 2.4em;
  }
  .fnt-sm {
    font-size: 93%;
  }
  .fnt-xs {
    font-size: 85%;
  }
  .txt-attention {
    font-size: 93%;
    line-height: 1.8em;
    opacity: .5;
  }
  .fnt-en {
    font-family: 'Roboto', sans-serif;
  }
  .fnt-bebar {
    font-family: 'Bebas Neue', cursive;
  }
  .fnt-bld {
    font-weight: 700;
  }
  @media screen and (max-width: 768px) {
    .fnt-xl {
      line-height: 2.2em;
      font-size: 109%;
    }
  }

/* table & list
**************************************** */
  table { width: 100%; }
  
  /* --- tbl_def --- */
  .tbl_def th, 
  .tbl_def td {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 40px;
    padding-right: 40px;
    vertical-align: middle;
  }
  .tbl_def th {
    border-bottom: 1px dotted rgba(0,0,0,.5);
  }
  .tbl_def td {
    border-bottom: 1px dotted rgba(0,0,0,.5);
    border-left: 8px solid #eeedee;
    line-height: 1.8em;
  }
  @media screen and (max-width: 768px) {
    .tbl_def th,
    .tbl_def td {
      display: block;
      text-align: center;
      margin-left: 0;
      padding-left: 16px;
      padding-right: 16px;
    }
    .tbl_def th {
      padding-top: 12px;
      padding-bottom: 0;
      border-bottom: none;
      opacity: .35;
    }
    .tbl_def td {
      padding-top: 0;
      padding-bottom: 12px;
      border-left: none;
    }
    .tbl_def td.txt-lft {
      text-align: left;
    }
  }

/* btn
**************************************** */
  .btn-more a {
    position: relative;
    z-index: 0;
    display: block;
    max-width: 300px;
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: #a2c73c;
    color: #fff;
    text-align: center;
    letter-spacing: .35em;
    line-height: 1;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    white-space: nowrap;
  }
  .btn-more a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
  }
  .btn-more a > .tri {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  .btn-more a > .tri:nth-of-type(1) {
    top: -5px;
    left: -5px;
  }
  .btn-more a > .tri:nth-of-type(2) {
    right: -5px;
    bottom: -5px;
  }
  .btn-more .arrow {
    margin-left: 10px;
  }
  .btn-ctr a {
    margin-left: auto;
    margin-right: auto;
  }
  .btn-more.btn-wht a {
    color: #000;
  }
  .btn-more.btn-wht a::before {
    background-color: #fff;
  }
  .btn-more.btn-sm a {
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 200px;
    font-size: 80%;
  }
  /* --- btn-lg --- */
  .btn-more.btn-xl a {
    max-width: calc(100% - 24px);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 130%;
  }
  .btn-more.btn-xl a span {
    letter-spacing: .2em;
  }
  .btn-more .ico-search {
    fill: #fff;
    margin-right: 16px;
    width: 20px;
    height: 20px;
  }

  @media screen and (min-width: 769px) {
    .btn-more a,
    .btn-more a::before,
    .btn-more a .tri,
    .btn-more a .arrow {
      transition: .6s cubic-bezier(.07, .51, .12, 1);
    }
    .btn-more a:hover::before {
      transform: translateX(100%);
    }
    .btn-more a:hover > .tri:nth-of-type(1) {
      transform: translate(4px,4px);
    }
    .btn-more a:hover > .tri:nth-of-type(2) {
      transform: translate(-4px,-4px);
    }
    .btn-more.btn-sm a:hover > .tri:nth-of-type(1) {
      transform: translate(2px,2px);
    }
    .btn-more.btn-sm a:hover > .tri:nth-of-type(2) {
      transform: translate(-2px,-2px);
    }
    .btn-more a:hover .arrow {
      margin-left: 16px;
    }
  }
  @media screen and (max-width: 768px) {
    .btn-more.btn-xl a {
      padding-top: 16px;
      padding-bottom: 16px;
      font-size: 115%;
    }
    .btn-more .ico-search {
      margin-right: 12px;
      width: 16px;
      height: 16px;
    }
  }

/* arrow
**************************************** */
  .arrow {
    position: relative;
    display: inline-block;
    width: 12px;
    border-bottom: 1px solid #fff;
    height: 5px;
  }
  .arrow .tri {
    fill: #fff;
    position: absolute;
    bottom: -1px;
    right: 0;
    transform: rotate(90deg);
  }
  .arrow.arrow-blk {
    border-color: #000;
  }
  .arrow.arrow-blk .tri {
    fill: #000;
  }
  
/* tri
**************************************** */
  .tri {
    fill: #cdcdcd;
    pointer-events: none;
  }
  .tri-wht {
    fill: #fff;
  }
  .tri-grn {
    fill: #a2c73c;
  }
  .tri-gry {
    fill: #eeedee;
  }
  .no_img {
    position: relative;
    z-index: -1;
  }
  .no_img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url(../images/common/no_img_txt@2x.png);
    background-repeat: no-repeat;
    background-size: 294px;
    width: 294px;
    height: 111px;
  }
  @media screen and (max-width: 768px) {
    .no_img::before {
      background-size: 110px;
      background-position: center;
      background-image: url(../images/common/no_img_txt-sm@2x.png);
    }
  }

/* ico
**************************************** */
  .ico-out_link {
    margin-left: 6px;
  }
/* mouse stalker
**************************************** */
  #cursor {
    position: fixed;
    z-index: 100000;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    pointer-events: none;
  }
  #cursor.active {
    transform: scale(0);
  }
  #stalker {
    position: fixed;
    z-index: 100000;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.3);
    width: 32px;
    height: 32px;
    border-radius: 100%;
    transition: .2s;
    pointer-events: none;
  }
  #stalker.active {
    transform: translate(-50%,-50%) scale(1.5);
    background: #a2c73c;
    opacity: .3;
    /*mix-blend-mode: difference;*/
  }

  .mov_wrap {
    overflow: hidden;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .mov_wrap video {
    transform: scale(1.03);
    max-width: 100%;
    height: auto;
  }

/* pop
*************************************************** */
  .pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
  }
  .pop.is_show {
    opacity: 1;
    pointer-events: all;
  }
  .pop .layer,
  .pop--cont::before,
  .pop--cont .close::before,
  .pop--cont .close::after {
    content: '';
    position: absolute;
    z-index: -1;
  }
  .pop--cont {
    background-color: rgba(255,255,255,.65);
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: 64px;
    padding-right: 64px;
  }
  .pop--cont::before {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-color: rgba(255,255,255,.8);
  }
  .pop .layer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
  }
  .pop--cont .attn {
    color: #ce0d2e;
    font-weight: bold;
    border-bottom: 3px double;
  }
  .pop--cont .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
  }
  .pop--cont .close::before,
  .pop--cont .close::after {
    top: 50%;
    left: 10%;
    width: 80%;
    height: 1px;
    background-color: #000;
    transform: translate;
    transition: .4s all
  }
  .pop--cont .close::before {
    transform: rotate(45deg);
  }
  .pop--cont .close::after {
    transform: rotate(-45deg);
  }
  @media screen and (min-width: 961px) {
    .pop .close:hover {
      transform: rotate(360deg);
    }
    .pop .close:hover::before,
    .pop .close:hover::after {
      background-color: #a2c73c;
    }
  }
  @media screen and (max-width: 560px) {
    .pop .pop--cont {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
      max-width: calc(100% - 48px);
    }
    .pop .pop--cont .head2 {
      margin-bottom: 12px;
    }
    .pop .pop--cont p {
      text-align: left;
    }
    .pop--cont .close {
      top: 12px;
      right: 12px;
    }
    .pop--cont .close::before,
    .pop--cont .close::after {
      left: 20%;
      width: 60%;
    }
  }


/* ##############################################################################

    HEADER

############################################################################## */

/* header
**************************************** */
  .header {
    position: fixed;
    z-index: 10000;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 56px;
    padding-right: 56px;
  }
  .header--shadow {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(rgba(237,238,237,1)0%,rgba(237,238,237,.5)40%,rgba(237,238,237,0)100%);
  }
  @media screen and (max-width: 768px) {
    .header {
      padding-left: 12px;
      padding-right: 12px;
    }
    .header--logo {
      width: 95px;
    }
  }

/* gnav
**************************************** */
  .gnav_btn {
    display: none;
  }
  .gnav--item:not(:last-child) {
    margin-right: 40px;
  }
  .gnav--item a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    letter-spacing: .2em;
    opacity: .5;
  }
  .gnav--item.current a {
    opacity: 1;
  }
  .gnav .header--logo,
  .gnav--item-jp,
  .gnav--item .arrow {
    display: none;
  }
  .gnav_sub {
    background-color: rgba(255,255,255,.5);
    box-shadow: 0 4px 10px rgb(0 0 0 / 2%);
  }
  .gnav_sub::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background-color: #fff;
    z-index: -1;
  }
  .gnav_sub--ttlarea {
    padding-top: 48px;
    padding-bottom: 54px;
    padding-left: 72px;
    padding-right: 72px;
  }
  .gnav_sub--ttlarea .ttl {
    letter-spacing: .15em;
    margin-bottom: 24px;
  }
  .gnav_sub--ttlarea .ttl a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .gnav_sub--ttlarea .ttl span {
    display: block;
    line-height: 1em;
  }
  .gnav_sub--ttlarea .ttl .fnt-en {
    font-size: 171%;
    margin-bottom: 12px;
  }
  .gnav_sub--ttlarea .ttl .fnt-jp {
    font-size: 79%;
  }
  .gnav_sub--ttlarea .txt {
    line-height: 1.8em;
    margin-bottom: 28px;
    font-size: 86%;
  }
  .gnav_sub--ttlarea .lines,
  .gnav_sub--ttlarea .lines .line {
    position: absolute;
  }
  .gnav_sub--ttlarea .lines {
    top: 24px;
    left: 24px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    pointer-events: none;
  }
  .gnav_sub--ttlarea .lines .line {
    overflow: hidden;
  }
  .gnav_sub--ttlarea .lines .line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eeedee;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.07, .51, .12, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(odd) {
    left: 0;
    width: 100%;
    height: 2px;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(even) {
    top: 0;
    width: 2px;
    height: 100%;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(1) { top: 0; }
  .gnav_sub--ttlarea .lines .line:nth-of-type(1)::before {
    transform: translateX(-110%);
    animation-name: slide-rev_rgt;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(2) { right: 0; }
  .gnav_sub--ttlarea .lines .line:nth-of-type(2)::before {
    transform: translateY(-110%);
    animation-name: slide-rev_top;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(3) { bottom: 0; }
  .gnav_sub--ttlarea .lines .line:nth-of-type(3)::before {
    transform: translateX(110%);
    animation-name: slide-rev_lft;
  }
  .gnav_sub--ttlarea .lines .line:nth-of-type(4) { left: 0; }
  .gnav_sub--ttlarea .lines .line:nth-of-type(4)::before {
    transform: translateY(110%);
    animation-name: slide-rev_btm;
  }
  .gnav_sub--plan {
    flex: 1;
    padding-left: 0;
    padding-right: 56px;
    padding-top: 28px;
    padding-bottom: 32px;
  }
  .gnav_sub--plan > .ttl {
    line-height: 1em;
    letter-spacing: .15em;
    margin-bottom: 16px;
    padding-left: 16px;
    font-size: 93%;
  }
  .gnav_sub--plan > .ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 4px);
    border-color: #eeedee;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left-width: 4px;
    border-right-width: 0;
  }
  .gnav_sub--plan > .ttl a {
    color: #898989;
  }
  .gnav_sub_list--item {
    width: 32%;
    padding-top: 22px;
    padding-bottom: 24px;
    padding-left: 18px;
    padding-right: 18px;
    background-color: rgba(238,237,238,.5);
    overflow: hidden;
  }
  .gnav_sub_list--item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .gnav_sub_list--item .tri {
    position: absolute;
  }
  .gnav_sub_list--item .tri-01 {
    top: 0;
    left: 0;
    transform: translate(-6px,-6px);
  }
  .gnav_sub_list--item .tri-02 {
    right: 0;
    bottom: 0;
    transform: translate(6px,6px);
  }
  .gnav_sub_list--item .tri-03 {
    right: 0;
    top: 0;
  }
  .gnav_sub_list--item .logo {
    margin-bottom: 16px;
    background-color: rgba(255,255,255,.95);
    border-radius: 3px;
  }
  .gnav_sub_list--item .logo a {
    display: flex;
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .gnav_sub_list--item .logo a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .gnav_sub_list--item .logo img {
    display: block;
  }
  .gnav_sub_list--item .logo .logo_txt {
    font-size: 71%;
    opacity: 0.5;
    margin-top: 8px;
    line-height: 1em;
  }
  .gnav_sub_list--item .catch {
    margin-bottom: 12px;
    line-height: 1.6em;
    font-size: 93%;
    white-space: nowrap;
  }
  .gnav_sub_list--item .catch .line {
    position: absolute;
    bottom: 0;
    left: calc(50% - 12px);
    width: 24px;
    height: 2px;
    overflow: hidden;
  }
  .gnav_sub_list--item .catch .line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    transform: translateX(-110%);
  }
  .gnav_sub_list--item .ttl {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    border-width: 1px;
    border-style: solid;
    line-height: 1.4em;
    font-size: 71%;
    opacity: .35;
  }
  @media screen and  (min-width: 1060px) {
    .loaded .gnav--list li {
      transition: .8s cubic-bezier(.07, .51, .12, 1);
    }
    .gnav--list:hover > li {
      opacity: .35;
    }
    .gnav--list:hover > li:hover,
    .gnav--list:hover > li:hover a {
      opacity: 1;
    }
    .gnav_sub {
      position: absolute;
      width: 960px;
      margin-top: -4px;
      padding: 5px;
      left: 50%;
      transform: translate(-50%,8px);
      pointer-events: none;
      opacity: 0;
    }
    .gnav_sub--ttlarea:hover .lines .line:nth-of-type(1)::before {
      animation-name: slide-to_rgt;
    }
    .gnav_sub--ttlarea:hover .lines .line:nth-of-type(2)::before {
      animation-name: slide-to_top;
      animation-delay: .1s;
    }
    .gnav_sub--ttlarea:hover .lines .line:nth-of-type(3)::before {
      animation-name: slide-to_lft;
      animation-delay: .2s;
    }
    .gnav_sub--ttlarea:hover .lines .line:nth-of-type(4)::before {
      animation-name: slide-to_btm;
      animation-delay: .3s;
    }
    .gnav--list:hover > li:hover .gnav_sub {
      pointer-events: all;
      opacity: 1;
      transform: translate(-50%,0);
    }
    .gnav_sub_list--item:hover::before {
      opacity: 1;
    }
    .gnav_sub_list--item:hover .tri-01 {
      transform: translate(-1px,-1px);
    }
    .gnav_sub_list--item:hover .tri-02 {
      transform: translate(1px,1px);
    }
    .gnav_sub_list--item:hover .ttl .line::before {
      transform: translateX(0);
    }
    .gnav_sub_list--item:hover .catch,
    .gnav_sub_list--item:hover .ttl {
      color: #fff;
    }
    .gnav_sub_list--item:hover .ttl {
      opacity: .75;
    }
    .gnav_sub--ttlarea:hover .btn-more a::before {
      transform: translateX(100%);
    }
    .gnav_sub--ttlarea:hover .btn-more.btn-sm a > .tri:nth-of-type(1) {
      transform: translate(2px,2px);
    }
    .gnav_sub--ttlarea:hover .btn-more.btn-sm a > .tri:nth-of-type(2) {
      transform: translate(-2px,-2px);
    }
  }
  @media screen and (min-width: 561px) and (max-width: 1060px) {
    .gnav_sub--ttlarea {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      max-width: 660px;
      margin-bottom: 32px;
    }
    .gnav_sub--ttlarea::before {
      content: '';
      position: absolute;
      top: 50px;
      left: calc(50% - 230px);
      z-index: -1;
      width: 460px;
      height: 1px;
      background-color: #000;
      opacity: .25;
    }
    .gnav_sub--ttlarea .ttl,
    .gnav_sub--ttlarea .txt {
      margin-bottom: 0;
      background-color: #fff;
      text-align: left;
    }
    .gnav_sub--ttlarea .ttl {
      padding-right: 16px;
    }
    .gnav_sub--ttlarea .txt {
      padding-left: 16px;
    }
  }
  @media screen and  (max-width: 1060px) {
    .gnav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-left: 16px;
      padding-right: 16px;
      padding-top: 16px;
      padding-bottom: 32px;
      background-color: rgba(255,255,255,.975);
      opacity: 0;
      pointer-events: none;
      transition: .6s cubic-bezier(.07, .51, .12, 1);
      overflow-y: scroll;
    }
    .gnav .header--logo {
      transform: translateX(-4px);
      margin-bottom: 40px;
      display: block;
    }
    .gnav--item:not(:last-child) {
      margin-right: 0;
    }
    .gnav--item a {
      padding-top: 24px;
      padding-bottom: 24px;
      padding-left: 8px;
      padding-right: 32px;
    }
    .gnav--list {
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .gnav--list > li {
      border-bottom: 1px dotted rgba(0,0,0,.2);
    }
    .gnav--list > li:not(.gnav--item-service) {
      width: 48.5%;
    }
    .gnav--item-jp,
    .gnav--item .arrow {
      display: block;
    }
    .gnav--item-en,
    .gnav--item-jp {
      line-height: 1;
    }
    .gnav--item-en {
      display: block;
      font-size: 114%;
      line-height: 1em;
      margin-bottom: 8px;
    }
    .gnav--item-jp {
      opacity: .5;
      font-size: 71%;
      letter-spacing: .15em;
    }
    .gnav--list li .arrow {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
    }
    .gnav--item.current .gnav--item-jp {
      opacity: .8;
    }
    .gnav--item {
      order: 2;
    }
    .gnav--item.gnav--item-service {
      order: 1;
      width: 100%;
      margin-bottom: 10px;
      border-bottom: none;
    }
    .gnav--item-service > a {
      display: none;
    }
    .gnav_sub {
      position: relative;
      width: 100%;
      padding-top: 29px;
      padding-bottom: 88px;
      padding-left: 29px;
      padding-right: 29px;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      background-color: rgba(240,240,240,.5);
    }
    .gnav_sub::before {
      z-index: 0;
    }
    .gnav_sub a {
      opacity: 1;
      padding: 0;
    }
    .gnav_sub--ttlarea {
      position: static;
      width: 100%;
      padding: 0;
    }
    .gnav_sub--ttlarea .ttl {
      margin-bottom: 16px;
    }
    .gnav_sub--ttlarea .ttl .fnt-en {
      margin-bottom: 8px;
    }
    .gnav_sub--ttlarea .ttl a {
      color: #000;
    }
    .gnav_sub--ttlarea .ttl a::before {
      content: none;
    }
    .gnav_sub--ttlarea .txt {
      margin-bottom: 20px;
    }
    .gnav_sub--ttlarea .btn {
      position: absolute;
      bottom: 29px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 220px;
    }
    .gnav_sub--ttlarea .btn a {
      margin-left: auto;
      margin-right: auto;
    }
    .gnav_sub--plan {
      padding: 0;
      width: 100%;
      max-width: 660px;
    }
    .gnav_btn {
      display: flex;
      position: fixed;
      top: 24px;
      right: 40px;
      width: 52px;
      height: 42px;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 10px;
      padding-right: 10px;
      z-index: 9999;
    }
    .gnav_btn p {
      line-height: 1;
      font-size: 75%;
    }
    .gnav_btn--lines {
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 10px;
      right: 10px;
    }
    .gnav_btn--lines span {
      transition: .6s cubic-bezier(.07, .51, .12, 1);
      box-sizing: border-box;
    }
    .gnav_btn--lines span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #000;
    }
    .gnav_btn--lines span:nth-of-type(1) {
      top: 0;
    }
    .gnav_btn--lines span:nth-of-type(2) {
      bottom: 16px;
    }
    .gnav_btn p {
      position: absolute;
      bottom: 6px;
      left: 10px;
        letter-spacing: .15em;
    }
    .header.active .gnav {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
    .header.active .gnav_btn {
      color: #a2c73c;
    }
    .header.active .gnav_btn--lines span {
      background-color: #a2c73c;
    }
  }
  @media screen and (min-width: 769px) {
    .gnav_btn .gnav_btn--lines span,
    .gnav_btn p {
      transition: .6s cubic-bezier(.07, .51, .12, 1);
    }
    .header.active .gnav_btn .gnav_btn--lines span:nth-of-type(2),
    .gnav_btn:hover .gnav_btn--lines span:nth-of-type(2) {
      transform: translateY(16px);
    }
    .header.active .gnav_btn p,
    .gnav_btn:hover p {
      transform: translateY(-9px);
    }
  }
  @media screen and (max-width: 768px) {
    .gnav_btn {
      top: 16px;
      right: 10px;
    }
    .header.active .gnav_btn--lines span:nth-of-type(1) {
      transform: rotate(25deg);
      top: 3px;
    }
    .header.active .gnav_btn--lines span:nth-of-type(2) {
      transform: rotate(-25deg);
      bottom: 22px;
    }
  }
  @media screen and (max-width: 560px) {
    .gnav_sub {
      padding-left: 17px;
      padding-right: 17px;
    }
    .gnav_sub--plan > .ttl {
      font-size: 86%;
      padding-left: 14px;
      margin-bottom: 12px;
    }
    .gnav_sub_list--item {
      width: 100%;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .gnav_sub_list--item:not(:last-child) {
      margin-bottom: 8px;
    }
    .gnav_sub_list--item .logo {
      width: 124px;
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 16px;
      margin-bottom: 0;
    }
    .gnav_sub_list--item .logo a {
      height: 80px;
    }
    .gnav_sub_list--item .catch {
      margin-bottom: 8px;
      text-align: left;
      line-height: 1.5em;
      font-size: 87%;
    }
    .gnav_sub_list--item .ttl {
      margin-left: 0;
    }
    .gnav_sub_list--item .ttl br {
      display: none;
    }
  }
  @media screen and (min-width: 415px) and (max-width: 560px) {
    .gnav_sub_list--item .catch br {
      display: none;
    }
  }
  @media screen and (max-width: 374px) {
    .gnav_sub_list--item .logo {
      padding-left: 8px;
      padding-right: 8px;
      margin-right: 12px;
      width: 88px;
    }
    .gnav_sub_list--item .ttl {
      padding-left: 6px;
      padding-right: 6px;
    }
  }


/* ##############################################################################

    FOOTER

############################################################################## */

/* contact
*************************************************** */
  #contact .btn-contact {
    border: 4px solid;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
  }
  #contact .btn-contact .sect_ttl {
    font-size: 308%;
    margin-left: 46px;
  }
  #contact .btn-contact .line-mov {
    transform: rotate(180deg);
    margin-left: 40px;
    margin-right: 40px;
  }
  #contact .btn-contact .line-mov {
    width: 64px;
    height: 2px;
  }
  #contact .btn-contact .tries .tri {
    position: absolute;
  }
  #contact .btn-contact .tries .tri:nth-child(1) {
    top: -12px;
    left: -12px;
  }
  #contact .btn-contact .tries .tri:nth-child(2) {
    right: -12px;
    bottom: -12px;
  }
  @media screen and (min-width: 769px) {
    #contact .btn-contact {
      transition: .8s cubic-bezier(.07, .51, .12, 1);
    }
    #contact .btn-contact .tries .tri {
      transition: .4s cubic-bezier(.07, .51, .12, 1);
    }
    #contact .btn-contact:hover {
      background-color: #fff;
    }
    #contact .btn-contact:hover .tries .tri:nth-child(1) {
      top: -4px;
      left: -4px;
    }
    #contact .btn-contact:hover .tries .tri:nth-child(2) {
      right: -4px;
      bottom: -4px;
    }
  }
  @media screen and (max-width: 768px) {
    #contact .btn-contact .sect_ttl {
      margin-left: 0;
      margin-bottom: 20px;
      font-size: 231%;
    }
    #contact .btn-contact p {
      text-align: center;
      margin-top: 24px;
    }
    #contact .btn-contact .tries .tri {
      width: 32px;
      height: 48px;
    }
  }

/* footer
*************************************************** */
  .footer {
    padding-top: 184px;
    padding-bottom: 80px;
  }
  .footer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 80px;
    border-left: 1px dotted rgba(0,0,0,.5);
  }
  .footer--link li {
    margin-left: 16px;
    margin-right: 16px;
  }
  .footer--link li a {
    letter-spacing: .2em;
    opacity: .8;
  }
  .footer--copyright {
    text-align: center;
    opacity: .8;
    letter-spacing: .2em;
  }
  @media screen and (max-width: 768px) {
    .footer {
      padding-top: 80px;
      padding-bottom: 32px;
    }
    .footer::before {
      height: 40px;
    }
    .footer--link li {
      width: 33.3333%;
      margin-right: 0;
      margin-left: 0;
      text-align: center;
      margin-bottom: 6px;
    }
  }


/* ##############################################################################

    INDEX

############################################################################## */

/* hero
*************************************************** */
  .hero {
    padding-top: 48px;
  }
  .hero .inner {
    height: 100vh;
  }
  .hero--ttl {
    line-height: 1.6em;
    letter-spacing: .075em;
  }
  .hero--imgs {
    position: absolute;
    right: -88px;
    top: 50%;
    z-index: -1;
    transform: translateY(-50%);
    width: 698px;
    height: 625px;
  }
  .hero--img {
    position: absolute;
    z-index: -1;
    background-color: #000;
    width: 330px;
    height: 370px;
    overflow: hidden;
  }
  .hero--slide_in {
    background-size: cover;
    background-position: center;
    height: 370px;
    top: -1px !important;
  }
  .hero--img01 {
    top: 8px;
    left: 8px;
  }
  .hero--img02 {
    top: 102px;
    left: 362px;
    background-color: #a2c73c;
  }
  .hero--scroll,
  .hero--url {
    position: absolute;
    line-height: 1;
    transform-origin: center;
    top: 50%;
  }
  .hero--scroll {
    left: -20px;
    transform: translateY(-50%) rotate(-90deg);
  }
  .hero--scroll--txt {
    margin-left: 16px;
  }
  .hero--url {
    position: absolute;
    right: -20px;
    transform: translateY(-50%) rotate(90deg);
  }
  .hero--news {
    position: absolute;
    bottom: 64px;
    right: 0;
    z-index: 1;
    background-color: #fff;
    width: 366px;
    height: 105px;
  }
  .hero--news > div {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .hero--news_ttl {
    margin-left: 24px;
    line-height: 1;
  }
  .hero--news_ttl a {
    transform: translateY(-2px);
  }
  .hero--news_ttl .arrow {
    margin-left: 8px;
    margin-top: -1px;
  }
  .hero--news .post {
    padding-right: 40px;
    line-height: 1;
  }
  .hero--news .post--date {
    margin-right: 24px;
    transform: translateY(1px);
  }
  .hero--news .post--ttl {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero--news .slick-dots {
    position: absolute;
    bottom: -32px;
    left: -62px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .hero--news .slick-dots button {
    position: relative;
    width: 11px;
    height: 11px;
    background-color: transparent;
    color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    cursor: pointer;
  }
  .hero--news .slick-dots button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,.15);
    transform: translate(-50%,-50%);
    transition: .6s cubic-bezier(.07, .51, .12, 1);
  }
  .hero--news .slick-dots .slick-active button::before {
    background-color: #a2c73c;
  }
  .hero--news .slick-vertical .slick-slide {
    display: flex;
  }
  .hero--news > .tri {
    position: absolute;
    left: -94px;
    top: -1px;
    pointer-events: none;
  }
  @media screen and (min-width: 769px) {
    .hero--news .slick-dots li:not(.slick-active) button:hover::before {
      background-color: rgba(0,0,0,.6);
    }
  }
  @media screen and (max-width: 1200px) {
    .hero .inner-sm {
      max-width: 760px;
    }
    .hero--imgs {
      width: 550px;
      height: 490px;
    }
    .hero--img,
    .hero--slide_in {
      width: 262px;
      height: 300px;
    }
    .hero--img02 {
      left: 272px;
    }
  }
  @media screen and (max-width: 1060px) {
    .hero {
      padding-top: 24px;
    }
  }
  @media screen and (max-width: 425px) {
    .hero .inner {
      height: auto;
      display: block;
    }
    .hero--txtarea {
      margin-top: 176px;
    }
    .hero--txtarea p br {
      display: none;
    }
    .hero--imgs {
      width: 350px;
      height: 313px;
      top: -138px;
      transform: inherit;
    }
    .hero--img,
    .hero--slide_in {
      width: 162px;
      height: 184px;
    }
    .hero--img02 {
      left: 181px;
      top: 52px;
    }
    .hero--news {
      position: relative;
      bottom: 0;
      width: 85%;
      margin-left: auto;
      margin-top: 56px;
      height: 88px;
    }
    .hero--news > .tri {
      width: 109px;
      height: 89px;
      left: -93px;
    }
    .hero--news .slick-dots {
      bottom: -30px;
      left: -46px;
    }
  }

/* home_message
*************************************************** */
  .home_message .inner {
    padding-left: 48px;
    padding-right: 48px;
  }
  .home_message .txtarea {
    margin-left: 56px;
  }
  .home_message .btn-more {
    margin-left: 160px;
  }
  .home_message .tries .tri {
    position: absolute;
    z-index: -1;
  }
  .home_message .tries .tri-wht {
    top: -66px;
    left: -200px;
  }
  .home_message .tries .tri-gry {
    top: 30px;
    right: -48px;
  }
  .home_message .tries img {
    position: absolute;
    z-index: -2;
    top: 32px;
    right: -48px;
  }
  @media screen and (max-width: 1200px) {
    .home_message .inner {
      padding-left: 180px;
    }
    .home_message .tries .tri-wht {
      top: -16px;
      left: -40px;
      width: 420px;
    }
    .home_message .tries .tri-gry,
    .home_message .tries img {
      right: 32px;
      top: 80px;
      width: 324px;
    }
    .home_message .tries .tri-gry {
      height: 364px;
    }
  }
  @media screen and (max-width: 768px) {
    .home_message .inner {
      padding-top: 120px;
      padding-left: 24px;
      padding-right: 0;
    }
    .home_message .txtarea {
      margin-left: 16px;
    }
    .home_message .txtarea br {
      display: none;
    }
    .home_message .tries .tri-wht {
      top: auto;
      top: initial;
      bottom: 0;
      width: 230px;
      height: 250px;
    }
    .home_message .tries .tri-gry,
    .home_message .tries img {
      right: -28px;
      top: 48px;
      width: 190px;
    }
    .home_message .tries .tri-gry {
      height: 214px;
    }
    .home_message .btn-more {
      margin-left: 40px;
    }
  }

/* voice - home_voice
*************************************************** */
  .voice_list {
    margin-top: -64px;
  }
  .voice_list--item {
    width: calc(50% - 32px);
    margin-top: 64px;
  }
  .voice_list--item::before,
  .voice_list--item .txtarea .txts::before {
    content: '';
    position: absolute;
    border: 2px solid #fff;
    z-index: -1;
    pointer-events: none;
  }
  .voice_list--item::before {
    right: 0;
    bottom: 0;
    width: calc(100% - 200px);
    height: 50%;
    border-top: 0;
  }
  .voice_list--item .logoarea {
    background-color: #fff;
    width: 216px;
    height: 216px;
    margin-right: 24px;
  }
  .voice_list--item .logoarea img {
    max-width: 160px;
    max-height: 72px;
    width: auto;
    height: auto;
  }
  .voice_list--item .txtarea {
    flex: 1;
  }
  .voice_list--item .txtarea .subttl {
    font-size: 72%;
    letter-spacing: .4em;
    opacity: .5;
    line-height: 1em;
  }
  .voice_list--item .txtarea .ttl {
    font-size: 184%;
    line-height: 1.4em;
  }
  .voice_list--item .txtarea .txts {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 24px;
    text-align: justify;
  }
  .voice_list--item .txtarea .txts::before {
    top: 0;
    left: -40px;
    width: calc(100% + 40px);
    height: 100%;
    border: 2px solid #fff;
    border-bottom: none;
  }
  .voice_list--item .txtarea .txts .arrow {
    position: absolute;
    width: 20px;
    height: 12px;
    left: 32px;
    bottom: 100%;
  }
  .voice_list--item .txtarea .txts .arrow::before,
  .voice_list--item .txtarea .txts .arrow::after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 12px 10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
  }
  .voice_list--item .txtarea .txts .arrow::before {
    top: 0;
    z-index: -1;
    border-bottom-color: #fff;
  }
  .voice_list--item .txtarea .txts .arrow::after {
    top: 3px;
    z-index: 0;
    border-bottom-color: #eeedee;
  }
  .voice_list--item .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 180px;
  }
  .voice_list--item .logoarea .tries {
    z-index: 1;
    transform: scale(-1,1);
  }
  .voice_list--item .logoarea .tries .tri {
    position: absolute;
  }
  .voice_list--item .logoarea .tries .tri:nth-child(1) {
    top: -1px;
    left: -1px;
  }
  .voice_list--item .logoarea .tries .tri:nth-child(2) {
    bottom: -1px;
    right: -1px;
  }
  .home_voice .tri01 {
    position: absolute;
    top: 0;
    right: -200px;
  }
  @media screen and (max-width: 1064px) {
    .voice_list {
      display: block;
      margin-top: 0;
    }
    .voice_list--item {
      width: 100%;
      margin-right: 0;
    }
  }
  @media screen and (max-width: 560px) {
    .voice_list--item {
      margin-top: 40px;
    }
    .voice_list--item::before {
      content: none;
    }
    .voice_list--item .logoarea {
      width: 120px;
      height: 120px;
      margin-right: 16px;
    }
    .voice_list--item .logoarea img {
      max-width: 88px;
      max-height: 44px;
    }
    .voice_list--item .logoarea .tries .tri {
      width: 20px;
      height: 23px;
    }
    .voice_list--item .txtarea .ttl {
      font-size: 138%;
      margin-bottom: 20px;
    }
    .voice_list--item .txtarea .txts {
      margin-bottom: 52px;
      font-size: 93%;
      line-height: 1.8em;
    }
    .voice_list--item .txtarea .txts .arrow {
      left: 16px;
    }
    .voice_list--item .txtarea .txts::before {
      left: -32px;
      width: calc(100% + 32px);
      border-bottom: 2px solid #fff;
    }
    .voice_list--item .btn {
      left: auto;
      left: inherit;
      right: 0;
    }
  }

/* home_service
*************************************************** */
@media screen and (max-width: 560px) {
  .home_service {
    margin-top: 40px;
  }
}

/* home_services
*************************************************** */
  .service_ico .cls-1 {
    fill: #bbbcbb;
  }
  .service_ico .cls-2 {
    fill: #a1c73c;
  }
  .home_services .services_list {
    margin-top: -8.5%;
  }
  .home_services .services_list--item {
    width: 30%;
    margin-right: 5%;
    margin-top: 8.5%;
  }
  .home_services .services_list--item:nth-of-type(3n+3),
  .home_services .services_list--item:last-child {
    margin-right: 0;
  }
  .home_services .services_list--item .icoarea::before {
    content: '';
    position: absolute;
    top: 75%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 254px 170px 0 170px;
    border-color: #fff transparent transparent transparent;
  }
  .home_services .services_list--item .txtarea {
    z-index: 1;
  }
  .home_services .services_list--item .service_ttl span {
    display: block;
    line-height: 1em;
  }
  .home_services .services_list--item .service_ttl .fnt-jp {
    font-size: 154%;
  }
  .home_services .services_list--item .service_ttl .fnt-en {
    font-size: 72%;
    opacity: .5;
    letter-spacing: .4em;
  }
  .home_services .tri {
    position: absolute;
    z-index: -1;
  }
  .home_services .tri01 {
    top: -40px;
    left: -240px;
    transform: rotate(90deg);
  }
  .home_services .tri02 {
    bottom: 0;
    right: -300px;
  }
  .home_services .tri03 {
    bottom: 320px;
    right: -264px;
  }
  @media screen and (max-width: 1280px) {
    .home_services .services_list {
      margin-top: -6.5%;
    }
    .home_services .services_list--item {
      margin-top: 6.5%;
    }
    .home_services .services_list--item .icoarea {
      margin-bottom: 32px;
    }
    .home_services .services_list--item .icoarea::before {
      border-width: 168px 112px 0 112px;
    }
    .home_services .services_list--item .icoarea svg {
      width: 72px;
      height: 72px;
    }
    .home_services .services_list--item .service_ttl .fnt-jp {
      font-size: 128%;
    }
  }
  @media screen and (max-width: 1064px) {
    .home_services .services_list--item {
      width: 47.5%;
    }
    .home_services .services_list--item,
    .home_services .services_list--item:nth-of-type(3n+3) {
      margin-right: 5%;
    }
    .home_services .services_list--item:nth-of-type(even) {
      margin-right: 0;
    }
    .home_services .tri01 {
      top: 88px;
      left: -120px;
      width: 226px;
      height: 254px;
    }
    .home_services .tri02 {
      bottom: -120px;
      right: -80px;
      width: 245px;
      height: 274px;
    }
    .home_services .tri03 {
      bottom: 58px;
      right: -30px;
      width: 146px;
      height: 165px;
    }
  }
  @media screen and (max-width: 768px) {
    .home_services {
      margin-top: 0%;
    }
    .home_services .tri01 {
      top: 48px;
      left: -80px;
      width: 116px;
      height: 130px;
    }
    .home_services .tri02,
    .home_services .tri03 {
      display: none;
    }
  }
  @media screen and (max-width: 560px) {
    .home_services .services_list--item .icoarea::before {
      border-width: 108px 72px 0 72px;
    }
    .home_services .services_list--item .icoarea svg {
      width: 56px;
      height: 56px;
    }
    .home_services .services_list--item .icoarea {
      margin-bottom: 0;
    }
    .home_services .services_list--item .service_ttl .fnt-jp {
      font-size: 109%;
      line-height: 1.5em;
    }
    .home_services .services_list--item .txtarea p {
      font-size: 88%;
      line-height: 1.8em;
    }
    .home_services .services_list--item .service_ttl .fnt-en {
      letter-spacing: .2em;
    }
    .home_services .services_list--item-recruit .service_ttl .fnt-jp {
      margin-top: 18px;
      margin-bottom: 12px;
    }
  }
  @media screen and (max-width: 374px) {
    .home_services .tri01 {
      left: -104px;
    }
  }

/* home_works
*************************************************** */
  .home_works .work_img {
    position: absolute;
    top: 5.6%;
    left: 4.1%;
    width: 91.25%;
    height: 63.6%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .home_works .posts-home_works .post:not(:first-child) {
    display: none;
  }
  .home_works .posts-home_works.slick-initialized .post:not(:first-child) {
    display: flex;
  }
  .home_works .posts-home_works .post {
    width: 1200px;
    padding-left: 64px;
    padding-right: 64px;
    display: flex;
  }
  .home_works .posts-home_works .post--txtarea {
    flex: 1;
    padding-right: 40px;
  }
  .home_works .posts-home_works .slick-active + .post {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .home_works .posts-home_works .post:not(.slick-active) {
    opacity: .5;
  }
  .works--info_list dt {
    opacity: .5;
    line-height: 1em;
    margin-bottom: 8px;
  }
  .works--info_list dt:first-child {
    margin-bottom: 16px;
  }
  .works--info_list dd {
    line-height: 1.6em;
  }
  .works--info_list dd:not(:last-child) {
    margin-bottom: 32px;
  }
  .works--info_list dd:not(.works--ttl) span:not(:last-child)::after {
    content: '／';
    opacity: .5;
    margin-left: 6px;
    margin-right: 6px;
  }
  .works--info_list .works--name {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 200%;
    line-height: 1.4em;
  }
  .works--info_list .cat__area .cat_txt::after {
    content: '｜';
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
  }
  .archive-works.works_area .works--info_list .cat__area .cat_txt::after,
  .single .works--info_list .cat__area .cat_txt::after {
    content: none;
  }
  @media screen and (max-width: 1400px) {
    .home_works .posts-home_works .post {
      width: 1060px;
    }
  }
  @media screen and (max-width: 1060px) {
    .home_works .posts-home_works .post {
      width: 600px;
      display: block;
    }
    .home_works .posts-home_works.slick-initialized .post:not(:first-child) {
      display: block;
    }
    .home_works .posts-home_works .post .mock {
      margin-bottom: 24px;
    }
    .home_works .posts-home_works .post--txtarea {
      padding-right: 0;
    }
    .works--info_list .works--name {
      font-size: 138%;
    }
    .works--info_list dd:not(:last-child) {
      margin-bottom: 20px;
    }
    .works--info_list dt:first-child {
      margin-bottom: 10px;
    }
    .works--info_list dt {
      margin-bottom: 4px;
    }
    .home_works .posts-home_works .post .btn-more {
      display: table;
      margin-right: auto;
      margin-left: auto;
      min-width: 200px;
    }
  }
  @media screen and (max-width: 768px) {
    .home_works.sect_pdg {
      padding-bottom: 24px;
    }
    .home_works .sect_ttl {
      margin-bottom: 32px;
    }
    .home_works .posts-home_works .post {
      width: 320px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .works--info_list dt:nth-child(n+2),
    .works--info_list dd:nth-child(n+3) {
      display: none;
    }
  }

/* home_blog
*************************************************** */
  .home_blog .inner > .tries .tri {
    position: absolute;
    z-index: -1;
  }
  .home_blog .inner > .tries .tri:nth-child(1) {
    top: -40px;
    left: -260px;
  }
  .home_blog .inner > .tries .tri:nth-child(2) {
    top: -40px;
    left: -380px;
  }
  .home_blog .inner > .tries .tri:nth-child(3) {
    bottom: 24px;
    right: -160px;
  }
  .home_blog .inner > .tries .tri:nth-child(4) {
    bottom: 0px;
    right: -280px;
  }
  .posts-slide_blog::before {
    content: '';
    position: absolute;
    right: calc(100% - 16px);
    top: 0;
    z-index: 1;
    width: 100vw;
    height: 100%;
    background-color: #eeedee;
  }
  .posts-slide_blog .slick-list {
    overflow: visible;
  }
  .posts-slide_blog .slick-track {
    display: flex;
  }
  .posts-slide_blog .slick-slide {
    height: auto !important;
  }
  .posts-slide_blog .post {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
  }
  .posts-slide_blog .post .post--img {
    margin-bottom: 24px;
  }
  .posts-slide_blog .post .no_img::before {
    width: 60%;
    height: 30%;
    background-size: 100%;
  }
  .posts-slide_blog .post .cat_list a:not(:hover) {
    background-color: rgba(0,0,0,.15);
  }
  .posts-slide_blog .post .clear_btn {
    position: absolute;
    right: 0;
    bottom: 0;
    letter-spacing: .35em;
    font-size: 85%;
  }
  .posts-slide_blog .post .clear_btn .arrow {
    margin-left: 6px;
    border-color: #000;
  }
  .posts-slide_blog .post .clear_btn .arrow .tri {
    fill: #000;
  }
  .posts-slide_blog button.slick-prev,
  .posts-slide_blog button.slick-next {
    width: 32px;
    height: 78px;
    top: -64px;
    left: inherit;
    left: auto;
  }
  .posts-slide_blog button.slick-prev {
    right: 96px;
  }
  .posts-slide_blog button.slick-next {
    right: 0;
  }
  @media screen and (min-width: 961px) {
    .posts-slide_blog .post:hover .clear_btn .arrow {
      margin-left: 12px;
      border-color: #a7cc09;
    }
    .posts-slide_blog .post:hover .clear_btn .arrow .tri {
      fill: #a7cc09;
    }
  }
  @media screen and (max-width: 1600px) {
    .home_blog .inner > .tries .tri {
      transform: scale(.6);
    }
    .home_blog .inner > .tries .tri:nth-child(2) {
      top: -72px;
      left: -48px;
    }
    .home_blog .inner > .tries .tri:nth-child(3) {
      bottom: 24px;
      right: 0px;
    }
    .home_blog .inner > .tries .tri:nth-child(4) {
      right: -56px;
    }
  }
  @media screen and (max-width: 1060px) {
    .posts-slide_blog button.slick-prev,
    .posts-slide_blog button.slick-next {
      width: 24px;
      height: 57px;
      top: -40px;
    }
    .posts-slide_blog button.slick-prev {
      right: 72px;
    }
    .posts-slide_blog button.slick-next {
      right: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .posts-slide_blog::before {
      content: none;
    }
    .posts-slide_blog button.slick-prev,
    .posts-slide_blog button.slick-next {
      width: 16px;
      height: 48px;
      top: -4px;
    }
    .posts-slide_blog button.slick-prev {
      right: 48px;
    }
    .posts-slide_blog button.slick-next {
      right: 8px;
    }
    .home_blog .inner > .tries .tri {
      transform: scale(1);
    }
    .home_blog .inner > .tries .tri:nth-child(1) {
      top: -8px;
      left: -100px;
      width: 170px;
      height: 189px;
    }
    .home_blog .inner > .tries .tri:nth-child(2) {
      display: none;
    }
    .home_blog .inner > .tries .tri:nth-child(3) {
      display: none;
    }
    .home_blog .inner > .tries .tri:nth-child(4) {
      bottom: 64px;
      right: -38px;
      width: 70px;
      height: 80px;
    }
  }
  @media screen and (max-width: 560px) {
    .posts-slide_blog {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
    .posts-slide_blog::before {
      content: none;
    }
    .posts-slide_blog button.slick-next {
      right: -8vw;
    }
    .posts-slide_blog button.slick-prev {
      right: calc(-8vw + 48px);
    }
    .posts-slide_blog + .btn a {
      margin-left: auto;
      margin-right: auto;
    }
  }


/* ##############################################################################

    PAGE

############################################################################## */

/* concept
*************************************************** */
  .page-concept .concept_bloc .concept_bloc--txt {
    display: table;
  }
  .page-concept .concept_bloc:nth-child(odd) .concept_bloc--txt {
    margin-right: auto;
  }
  .page-concept .concept_bloc:nth-child(even) .concept_bloc--txt {
    margin-left: auto;
  }
  .page-concept .concept_bloc--img {
    position: absolute;
    top: 50%;
    z-index: -1;
    transform: translateY(-50%);
  }
  .page-concept .concept_bloc--img .num {
    position: absolute;
    font-size: 2770%;
    letter-spacing: -.05em;
    opacity: .3;
    font-weight: bold;
    line-height: .75em;
  }
  .page-concept .concept_bloc .tri,
  .page-concept .concept_bloc .img {
    position: absolute;
  }
  .page-concept .concept_bloc01 .concept_bloc--img {
    right: -80px;
    width: 733px;
    height: 677px;
  }
  .page-concept .concept_bloc01 .concept_bloc--img .tri-grn {
    top: 16px;
    left: 0;
  }
  .page-concept .concept_bloc01 .concept_bloc--img .img {
    right: 0;
    bottom: 0;
  }
  .page-concept .concept_bloc01 .concept_bloc--img .num {
    bottom: 0;
    right: 0;
  }
  .page-concept .concept_bloc01 .tries .tri {
    top: 0;
    right: 115%;
  }
  .page-concept .concept_bloc02 .concept_bloc--img {
    left: -250px;
    width: 653px;
    height: 571px;
  }
  .page-concept .concept_bloc02 .concept_bloc--img .tri-wht {
    bottom: 0;
    left: 200px;
  }
  .page-concept .concept_bloc02 .concept_bloc--img .tri-blk {
    left: 0;
    bottom: 32px;
  }
  .page-concept .concept_bloc02 .concept_bloc--img .img {
    top: 0;
    right: 40px;
  }
  .page-concept .concept_bloc02 .concept_bloc--img .num {
    top: 72px;
    right: 0;
  }
  .page-concept .concept_bloc02 .tries .tri {
    top: 80px;
    right: -316px;
  }
  .page-concept .concept_bloc03 .concept_bloc--img {
    right: -48px;
    width: 650px;
    height: 641px;
  }
  .page-concept .concept_bloc03 .concept_bloc--img .tri-wht {
    bottom: 0;
    right: 0;
  }
  .page-concept .concept_bloc03 .concept_bloc--img .img {
    top: 0;
    left: 0;
  }
  .page-concept .concept_bloc03 .concept_bloc--img .num {
    top: 160px;
    right: 50px;
  }
  .page-concept .concept_bloc03 .tries .tri-grn {
    bottom: 40px;
    left: -384px;
  }
  .page-concept .concept_bloc03 .tries .tri-blk {
    bottom: -24px;
    right: -400px;
  }
  .page-concept .concept_bloc04 .concept_bloc--img {
    left: -98px;
    width: 639px;
    height: 796px;
  }
  .page-concept .concept_bloc04 .concept_bloc--img .tri-blk {
    top: 165px;
    left: 220px;
  }
  .page-concept .concept_bloc04 .concept_bloc--img .img01 {
    top: 0;
    left: 168px;
  }
  .page-concept .concept_bloc04 .concept_bloc--img .img02 {
    bottom: 0;
    left: 0;
  }
  .page-concept .concept_bloc04 .concept_bloc--img .num {
    bottom: 140px;
    right: 0;
  }
  .page-concept .concept_bloc05 .concept_bloc--img {
    right: 100px;
    width: 514px;
    height: 605px;
  }
  .page-concept .concept_bloc05 .concept_bloc--img .tri-blk {
    bottom: 16px;
    left: 0;
  }
  .page-concept .concept_bloc05 .concept_bloc--img .img {
    top: 0;
    right: 0;
  }
  .page-concept .concept_bloc05 .concept_bloc--img .num {
    bottom: 112px;
    right: 0;
  }
  .page-concept .concept_bloc05 .tries .tri-wht {
    top: -38px;
    left: -332px;
  }
  .page-concept .concept_bloc05 .tries .tri-grn {
    top: -145px;
    right: -302px;
  }
  .page-concept .service_concept--bloc {
    width: calc(50% - 40px);
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .page-concept .service_concept--bloc .tri {
    position: absolute;
    z-index: -1;
  }
  .page-concept .service_concept--bloc01 .tri-wht {
    top: 0;
    left: 0;
  }
  .page-concept .service_concept--bloc01 .tri-blk {
    bottom: 0;
    right: 0;
  }
  .page-concept .service_concept--bloc02 {
    position: relative;
    z-index: -1;
    margin-top: 120px;
  }
  .page-concept .service_concept--bloc02 .tri-grn {
    bottom: 447px;
    right: 100%;
  }
  .page-concept .service_concept--bloc02 .tri-wht {
    bottom: 0;
    left: 0;
  }
  .page-concept .service_concept--bloc02 .tri-blk {
    top: 0;
    right: 0;
  }
  @media screen and (max-width: 1400px) {
    .page-concept .service_concept .inner {
      display: block;
    }
    .page-concept .service_concept--bloc {
      width: 85%;
    }
    .page-concept .service_concept--bloc02 {
      margin-left: auto;
      margin-top: 64px;
    }
    .page-concept .service_concept--bloc02 .tri-grn {
      right: auto;
      right: initial;
      left: 0;
      width: 110px;
      height: 124px;
      transform: scale(-1,1);
      fill: #000;
    }
    .page-concept .service_concept--bloc02 .tri-blk {
      fill: #a2c73c;
    }
  }
  @media screen and (max-width: 1200px) {
    .page-concept .concept_bloc--img {
      opacity: .3;
    }
    .page-concept .concept_bloc--img .num {
      font-size: 2154%;
    }
  }
  @media screen and (max-width: 768px) {
    .page-concept .page_ttl {
      padding-bottom: 32px;
    }
    .page-concept .sect_ttl-jp span.fnt-jp {
      font-size: 150%;
    }
    .page-concept .concept_bloc--img {
      top: 0;
      left: auto !important;
      left: inherit !important;
      right: 0 !important;
      transform: inherit;
    }
    .page-concept .concept_bloc--img .num {
      font-size: 1000%;
    }
    .page-concept .concept_bloc--txt p br {
      display: none;
    }
    .page-concept .concept_bloc01 .concept_bloc--img {
      width: 260px;
      height: 238px;
    }
    .page-concept .concept_bloc01 .concept_bloc--img .tri-grn {
      width: 120px;
      height: 127px;
    }
    .page-concept .concept_bloc01 .concept_bloc--img .img {
      width: 60%;
    }
    .page-concept .concept_bloc02 .concept_bloc--img {
      width: 260px;
      height: 227px;
    }
    .page-concept .concept_bloc02 .concept_bloc--img .img {
      width: 67%;
    }
    .page-concept .concept_bloc02 .concept_bloc--img .tri-blk {
      width: 98px;
      height: 111px;
      bottom: -40px;
    }
    .page-concept .concept_bloc02 .concept_bloc--img .tri-wht {
      width: 70px;
      height: 80px;
      left: 70px;
      bottom: -20px;
    }
    .page-concept .concept_bloc03 .concept_bloc--img {
      width: 260px;
      height: 256px;
    }
    .page-concept .concept_bloc03 .concept_bloc--img .num {
      top: 60px;
      right: 20px;
    }
    .page-concept .concept_bloc03 .concept_bloc--img .img {
      width: 67%;
    }
    .page-concept .concept_bloc03 .concept_bloc--img .tri-wht {
      width: 174px;
      height: 194px;
    }
    .page-concept .concept_bloc04 .concept_bloc--img {
      width: 260px;
      height: 323px;
    }
    .page-concept .concept_bloc04 .concept_bloc--img .num {
      bottom: 74px;
    }
    .page-concept .concept_bloc04 .concept_bloc--img .img {
      width: 53%;
      width: 138px;
      height: 154px;
    }
    .page-concept .concept_bloc04 .concept_bloc--img .img01 {
      left: 80px;
    }
    .page-concept .concept_bloc04 .concept_bloc--img .tri-blk {
      left: 100px;
      top: 65px;
      width: 104px;
      height: 116px;
    }
    .page-concept .concept_bloc05 .concept_bloc--img {
      width: 260px;
      height: 306px;
    }
    .page-concept .concept_bloc05 .concept_bloc--img .num {
      bottom: 80px;
      right: 22px;
    }
    .page-concept .concept_bloc05 .concept_bloc--img .img {
      width: 221px;
    }
    .page-concept .concept_bloc05 .concept_bloc--img .tri-blk {
      width: 114px;
      height: 130px;
    }
    .page-concept .service_concept--bloc {
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
      padding-top: 40px;
      padding-bottom: 40px;
    }
    .page-concept .service_concept--bloc p {
      text-align: left;
    }
    .page-concept .service_concept--bloc p br {
      display: none;
    }
    .page-concept .service_concept--bloc02 {
      margin-top: 16px;
    }
    .page-concept .service_concept--bloc01 .tri-wht {
      width: 170px;
      height: 190px;
      left: -40px;
    }
    .page-concept .service_concept--bloc01 .tri-blk {
      width: 70px;
      height: 77px;
    }
    .page-concept .service_concept--bloc02 .tri-grn {
      top: 0;
      width: 60px;
      height: 67px;
      fill: #a2c73c;
    }
    .page-concept .service_concept--bloc02 .tri-wht {
      width: 200px;
      height: 223px;
      left: -100px;
    }
    .page-concept .service_concept--bloc02 .tri-blk {
      width: 122px;
      height: 136px;
      fill: #fff;
      top: 0;
      right: -40px;
    }
  }

/* service
*************************************************** */

  /* --- color --- */
  .clr-ordermade {
    color: #a7cc09;
    fill : #a7cc09;
  }
  .bdr_clr-ordermade,
  .bdr_clr-ordermade-bf::before { border-color: #a7cc09; }
  .bg_clr-ordermade,
  .bg_clr-ordermade-bf::before { background-color: #a7cc09 !important; }
  .clr-marutto {
    color: #4faea2;
    fill : #4faea2;
  }
  .bdr_clr-marutto,
  .bdr_clr-marutto-bf::before { border-color: #4faea2; }
  .bg_clr-marutto,
  .bg_clr-marutto-bf::before { background-color: #4faea2 !important; }
  .clr-otegoro {
    color: #ffd307;
    fill : #ffd307;
  }
  .bdr_clr-otegoro,
  .bdr_clr-otegoro-bf::before { border-color: #ffd307; }
  .bg_clr-otegoro,
  .bg_clr-otegoro-bf::before { background-color: #ffd307 !important; }

  /* --- service_slide --- */
  .service_slide .inner {
    padding-top: 176px;
  }
  .service_slide .slick-list {
    overflow: visible !important;
  }
  .service_slide_list--item {
    border: 8px solid #fff;
    margin-left: 12px;
    margin-right: 12px;
  }
  .service_slide_list--item:not(.slick-active) {
    opacity: .2;
  }
  .service_slide_list--item .item_inner {
    height: 576px;
  }
  .service_slide_list--item .tries .tri {
    position: absolute;
  }
  .service_slide_list--item .tries .tri:nth-of-type(1) {
    top: -1px;
    left: -1px;
  }
  .service_slide_list--item .tries .tri:nth-of-type(2) {
    bottom: -1px;
    right: -1px;
  }
  .service_slide_list--item .cont {
    height: 100%;
  }
  .service_slide_list--item .cont,
  .service_slide_list--item .plan_btns {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .service_slide_list--item .cont .num {
    font-family: 'Bebas Neue', cursive;
    font-size: 577%;
    line-height: 1em;
    line-height: .8em;
    position: absolute;
    top: 40px;
    left: 32px;
  }
  .service_slide_list--item .cont .ttl {
    padding-top: 6px;
    padding-left: 88px;
  }
  .service_slide_list--item .cont .ttl span {
    display: block;
    line-height: 1.6em;
  }
  .service_slide_list--item .cont .ttl .fnt-jp {
    font-size: 200%;
    margin-bottom: 12px;
  }
  .service_slide_list--item .cont .ttl .fnt-en {
    letter-spacing: .4em;
    opacity: .5;
  }
  .service_slide_list--item .cont .txts {
    text-align: justify;
  }
  .service_slide_list--item .cont strong {
    background:linear-gradient(transparent 70%, #a7cc09 70%);
  }
  .service_slide_list--item .ico {
    position: absolute;
    right: 8px;
    opacity: .2;
  }
  .service_slide_list--item .plan_btns .ico {
    bottom: calc(100% + 8px);
  }
  .service_slide_list--item .item_inner > .ico {
    bottom: 0;
  }
  .service_slide_list--item .plan_btns {
    padding-top: 32px;
    border-top: 8px solid #fff;
    margin-top: auto;
  }
  .service_slide_list--item .plan_btns .ttl {
    font-size: 108%;
    padding-left: 16px;
  }
  .service_slide_list--item .plan_btns .ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 3.5px 0 3.5px 5px;
    border-color: transparent transparent transparent #fff;
  }
  .service_slide_list--item .plan_btns_list--item {
    height: 78px;
    width: 32%;
    border-style: solid;
    border-width: 1px;
  }
  .service_slide_list--item .plan_btns_list--item a {
    z-index: 1;
    pointer-events: all;
  }
  .service_slide_list--item .plan_btns_list--item h5 {
    line-height: 1.4em;
  }
  .service_slide_list--item .plan_btns_list--item p {
    opacity: .5;
    line-height: 1.4em;
    font-size: 72%;
    letter-spacing: .2em;
  }
  .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 {
    margin-bottom: 4px;
    font-size: 109%;
  }
  .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 img {
    margin-right: 6px;
  }
  .service_slide_list--item .plan_btns_list--item-ordermade h5 img {
    margin-bottom: 4px;
  }
  .service_slide_list .slick-dots,
  .service_slide_list .slick-dots li {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  .service_slide_list .slick-dots {
    position: absolute;
    bottom: calc(100% + 72px);
    left: 50%;
    transform: translateX(-50%);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .service_slide_list .slick-dots li {
    position: relative;
    min-width: 130px;
  }
  .service_slide_list .slick-dots li .dot_ttl {
    line-height: 1.4em;
    font-size: 72%;
    font-weight: bold;
    height: 28px;
  }
  .service_slide_list .slick-dots svg:focus {
    outline: none;
  }
  .service_slide_list .slick-dots li .active_arrow {
    position: absolute;
    bottom: -40px;
    left: calc(50% + 16px);
    transform: rotate(90deg) translateX(-8px);
    transform-origin: 0 0;
    opacity: 0;
  }
  .service_slide_list .slick-dots li.slick-active .dot_ttl {
    color: #a7cc09;
  }
  .service_slide_list .slick-dots li.slick-active .active_arrow {
    opacity: 1;
    transform: rotate(90deg) translateX(0px);
  }

  .service_slide_list--item .plan_btns_list--item.none {
    border-color: #000;
    opacity: .1;
  }
  .service_slide_list--item .plan_btns_list--item.none a {
    pointer-events: none;
  }
  .service_slide_list--item .plan_btns_list--item.none .tri {
    display: none;
  }
  @media screen and (min-width: 961px) {
    .service_slide_list--item .plan_btns_list--item:not(.none):hover {
      background-color: rgba(255,255,255,.8);
    }
    .service_slide_list .slick-dots li:hover .dot_ttl {
      color: #a7cc09;
    }
  }
  @media screen and (max-width: 1350px) {
    .service_slide .inner {
      max-width: 480px;
    }
    .service_slide_list--item .item_inner {
      height: 576px;
    }
    .service_slide_list button.slick-next {
      left: calc(50% + 270px);
    }
    .service_slide_list button.slick-prev {
      right: calc(50% + 270px);
    }
  }
  @media screen and (max-width: 1280px) {
    .service_slide_list .slick-dots li {
      min-width: 112px;
    }
    .service_slide_list .slick-dots li svg {
      width: 52px;
      height: 52px;
    }
  }
  @media screen and (max-width: 960px) {
    .service_slide .inner {
      padding-top: 218px;
    }
    .service_slide_list .slick-dots {
      width: 522px;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      border: none;
      margin-top: -16px;
      bottom: calc(100% + 24px);
    }
    .service_slide_list .slick-dots li {
      min-width: 124px;
      margin-top: 16px;
    }
    .service_slide_list .slick-dots li::before {
      content: '';
      position: absolute;
      left: 6px;
      top: -9px;
      width: calc(100% - 12px);
      height: 2px;
      background-color: #fff;
    }
    .service_slide_list .slick-dots li:nth-of-type(4n+1) {
      border-left-width: 2px;
    }
    .service_slide_list .slick-dots li:nth-of-type(4n+4) {
      border-right-width: 2px;
    }
    .service_slide_list .slick-dots li .dot_ttl {
      letter-spacing: .05em;
    }
    .service_slide_list .slick-dots li.slick-active .active_arrow {
      display: none;
    }
  }
  @media screen and (max-width: 768px) {
    .service_slide_list--item,
    .service_slide_list--item .item_inner {
      height: auto;
      max-height: inherit;
    }
    .service_slide_list--item .item_inner {
      height: 460px;
    }
    .service_slide_list--item,
    .service_slide_list--item .plan_btns {
      border-width: 6px;
    }
    .service_slide_list--item .cont,
    .service_slide_list--item .plan_btns {
      padding-top: 24px;
      padding-bottom: 24px;
      padding-right: 24px;
      padding-left: 24px;
    }
    .service_slide_list--item .cont .num {
      top: 32px;
      left: 24px;
      font-size: 400%;
    }
    .service_slide_list--item .cont .ttl {
      padding-top: 10px;
      padding-left: 60px;
    }
    .service_slide_list--item .cont .ttl .fnt-jp {
      font-size: 138%;
    }
    .service_slide_list--item .cont .ttl .fnt-en {
      font-size: 80%;
    }
    .service_slide_list--item .plan_btns {
      padding-top: 16px;
    }
    .service_slide_list--item .ico svg {
      width: 140px;
      height: 140px;
    }
    .service_slide_list--item .item_inner > .tries .tri:nth-of-type(1) {
      width: 128px;
      height: 144px;
    }
    .service_slide_list--item .item_inner > .tries .tri:nth-of-type(2) {
      width: 40px;
      height: 44px;
    }
    .service_slide_list button.slick-next {
      left: calc(50% + 224px);
    }
    .service_slide_list button.slick-prev {
      right: calc(50% + 224px);
    }
  }
  @media screen and (max-width: 560px) {
    .service_slide .inner {
      max-width: 340px;
      padding-top: 274px;
    }
    .service_slide_list--item {
      margin-left: 8px;
      margin-right: 8px;
    }
    .service_slide_list--item:not(.slick-active) {
      opacity: .8;
    }
    .service_slide_list--item .item_inner {
      height: 464px;
    }
    .service_slide_list--item .cont,
    .service_slide_list--item .plan_btns {
      padding-top: 16px;
      padding-bottom: 16px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .service_slide_list--item .plan_btns {
      padding-top: 8px;
    }
    .service_slide_list--item .cont .num {
      left: 16px;
      font-size: 350%;
    }
    .service_slide_list--item .cont .ttl {
      padding-top: 0;
      padding-left: 52px;
    }
    .service_slide_list--item .plan_btns_list--item {
      height: 68px;
    }
    .service_slide_list--item .plan_btns_list--item h5,
    .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 {
      font-size: 85%;
    }
    .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 img {
      margin-right: 4px;
    }
    .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 img {
      width: 14px;
    }
    .service_slide_list .slick-dots {
      width: 312px;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
    .service_slide_list .slick-dots li {
      min-width: 104px;
    }
    .service_slide_list .slick-dots li:nth-of-type(4n+1) {
      border-left-width: 1px;
    }
    .service_slide_list .slick-dots li:nth-of-type(4n+4) {
      border-right-width: 1px;
    }
    .service_slide_list .slick-dots li:nth-of-type(3n+1) {
      border-left-width: 2px;
    }
    .service_slide_list .slick-dots li:nth-of-type(3n+3),
    .service_slide_list .slick-dots li:last-child {
      border-right-width: 2px;
    }
    .service_slide_list .slick-dots li svg {
      width: 40px;
      height: 40px;
    }
    .service_slide_list .slick-dots li .dot_ttl {
      letter-spacing: 0em;
    }
    .service_slide_list .slick-dots li .dot_ttl-dtp,
    .service_slide_list .slick-dots li .dot_ttl-logo {
      height: 16px;
    }
    .service_slide_list--item .item_inner > .tries .tri:nth-of-type(1) {
      width: 88px;
      height: 98px;
    }
    .service_slide_list--item .item_inner > .tries .tri:nth-of-type(2) {
      width: 32px;
      height: 34px;
    }
    .service_slide_list button.slick-arrow {
      background-size: 12px;
      height: 60px;
      width: 40px;
    }
    .service_slide_list button.slick-next {
      left: auto;
      left: inherit;
      right: 26px;
      top: -14px;
    }
    .service_slide_list button.slick-prev {
      top: -14px;
      right: 66px;
    }
  }
  @media screen and (max-width: 374px) {
    .service_slide .inner {
      max-width: 288px;
      padding-top: 274px;
    }
    .service_slide_list--item {
      margin-left: 4px;
      margin-right: 4px;
    }
    .service_slide_list--item .item_inner {
      height: 484px;
    }
    .service_slide_list--item .cont,
    .service_slide_list--item .plan_btns {
      padding-left: 10px;
      padding-right: 10px;
    }
    .service_slide_list--item .cont .num {
      top: 16px;
      left: 10px;
    }
    .service_slide_list--item .cont .ttl .fnt-en {
      font-size: 45%;
    }
    .service_slide_list .slick-dots {
      width: 294px;
    }
    .service_slide_list .slick-dots li {
      min-width: 98px;
    }
    .service_slide_list button.slick-prev {
      right: 42px;
    }
    .service_slide_list button.slick-next {
      right: 12px;
    }
    .service_slide_list--item .plan_btns_list--item h5,
    .service_slide_list--item .plan_btns_list--item:not(.plan_btns_list--item-ordermade) h5 {
      font-size: 72%;
    }
  }

  /* --- plans --- */
  .plans {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
  .plans_list--item {
    width: calc(33.333% - 2px);
    background-color: #fff;
    padding-top: 104px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .plans_list--item .plan_head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .plans_list--item .plan_head .ttl {
    color: #fff;
    font-size: 138%;
    font-weight: bold;
    line-height: 1em;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 18px;
    padding-right: 52px;
    overflow: hidden;
  }
  .plans_list--item .plan_head .ttl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 45%;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .05;
    transform: skew(-35deg);
    z-index: -1;
  }
  .plans_list--item .plan_head .ttl svg {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 1;
  }
  .plans_list--item .plan_head .logo {
    width: 148px;
    height: 54px;
    margin-top: 24px;
    margin-right: 24px;
  }
  .plans_list--item .plan_head .logo img {
    max-height: 100%;
  }
  .plans_list--item .plan_ttl {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .plans_list--item .plan_ttl span {
    display: block;
  }
  .plans_list--item .plan_ttl .ttl {
    font-size: 446%;
    line-height: 1em;
  }
  .plans_list--item .plan_ttl .subttl {
    letter-spacing: .3em;
    font-size: 123%;
  }
  .plans_list--item .plan_ttl .fnt-bebar {
    position: absolute;
    left: -20px;
    top: 55%;
    transform: translateY(-50%);
    line-height: 1em;
    font-weight: normal;
    font-size: 800%;
    opacity: .05;
    z-index: -1;
    letter-spacing: .1em;
  }
  .plans_list--item .chart .txtarea {
    text-align: justify;
    margin-right: 16px;
  }
  .plans_list--item .chart .txtarea .ttl {
    display: table;
    font-size: 185%;
    letter-spacing: .4em;
    line-height: 1.4em;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  .plans_list--item .chart .txtarea .ttl::before {
    content: '';
    position: absolute;
    left: 100%;
    bottom: -1px;
    height: 1px;
    width: 112px;
    transform: rotate(40deg);
    transform-origin: 0 0;
  }
  .plans_list--item .chart .txtarea p {
    max-width: 152px;
    margin-left: 16px;
    line-height: 1.8em;
  }
  .plans_list--item .chart .imgarea {
    flex: 1;
  }
  .plans_list--item .sites .ttl {
    font-size: 123%;
    padding-left: 16px;
  }
  .plans_list--item .sites .ttl::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-style: solid;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  .plans_list--item .sites_list {
    margin-top: -1%;
  }
  .plans_list--item .sites_list--item {
    border-style: solid;
    border-width: 1px;
    width: 32.5%;
    margin-top: 1%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .plans_list--item .sites_list--item svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
  }
  .plans_list--item .sites_list--item p {
    font-size: 72%;
    line-height: 1.4em;
    font-weight: bold;
    height: 24px;
  }
  .plans_list--item .sites_list--item.none {
    color: #000;
    opacity: .1;
  }
  .plans_list--item .sites_list--item.none svg {
    fill: #000;
  }
  .plans_list--item .merit_demerit {
    border: 1px dotted rgba(0,0,0,.5);
  }
  .plans_list--item .merit_demerit .merit,
  .plans_list--item .merit_demerit .demerit {
    width: 50%;
    text-align: justify;
    padding-top: 8px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .plans_list--item .merit_demerit .ttl {
    padding-bottom: 6px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  .plans_list--item .merit_demerit .ttl .fnt-jp {
    font-size: 116%;
  }
  .plans_list--item .merit_demerit .ttl .fnt-en {
    font-size: 80%;
    letter-spacing: .4em;
  }
  .plans_list--item .merit_demerit p {
    line-height: 1.8em;
    font-size: 93%;
  }
  .plans_list--item .merit_demerit .demerit {
    border-left: 1px dotted rgba(0,0,0,.5);
  }
  .plans_list--item .merit_demerit .demerit .ttl {
    opacity: .4;
  }
  .plans_list--item .merit_demerit .tries .tri {
    position: absolute;
    opacity: .7;
  }
  .plans_list--item .merit_demerit .tries .tri:nth-of-type(1) {
    top: -4px;
    left: -4px;
  }
  .plans_list--item .merit_demerit .tries .tri:nth-of-type(2) {
    bottom: -4px;
    right: -4px;
  }
  .plans_list--item .price {
    min-height: 100px;
  }
  .plans_list--item .price .txt {
    border-width: 2px;
    border-style: solid;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: center;
    font-size: 138%;
    line-height: 1.8em;
  }
  .plans_list--item .price .ttl {
    font-size: 185%;
    line-height: 1em;
  }
  .plans_list--item .price .line {
    width: 2px;
    height: 100px;
    background-color: #eeedee;
    margin-left: 40px;
    margin-right: 40px;
  }
  .plans_list--item .price .line_arrow {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
  }
  .plans_list--item .price .line_arrow::before,
  .plans_list--item .price .line_arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #eeedee;
  }
  .plans_list--item .price .line_arrow::after {
    left: -3px;
    border-color: transparent transparent transparent #ffffff;
  }
  .plans_list--item .price .num {
    line-height: 1em;
  }
  .plans_list--item .price .num .fnt-bebar {
    display: inline-block;
    font-size: 925%;
    font-weight: normal;
    line-height: 0em;
    transform: translateY(24px);
    text-shadow:
       1px  1px 1px rgba(0,0,0,.5),
      -1px  1px 1px rgba(0,0,0,.5),
       1px -1px 1px rgba(0,0,0,.5),
      -1px -1px 1px rgba(0,0,0,.5),
       1px  0px 1px rgba(0,0,0,.5),
       0px  1px 1px rgba(0,0,0,.5),
      -1px  0px 1px rgba(0,0,0,.5),
       0px -1px 1px rgba(0,0,0,.5);
    opacity: .8;
  }
  .plans_list--item .price .num .unit {
    display: inline-block;
    font-size: 185%;
    margin-left: 8px;
    transform: translateY(20px);
  }
  @media screen and (max-width: 1600px) {
    .plans_list--item {
      padding-top: 80px;
      padding-bottom: 64px;
      padding-left: 32px;
      padding-right: 32px;
    }
    .plans_list--item .plan_ttl {
      padding-top: 24px;
      padding-bottom: 16px;
    }
    .plans_list--item .plan_ttl .ttl {
      font-size: 339%;
      margin-bottom: 24px;
    }
    .plans_list--item .plan_ttl .subttl {
      font-size: 100%;
    }
    .plans_list--item .plan_ttl .fnt-bebar {
      font-size: 600%;
    }
    .plans_list--item .chart .txtarea .ttl {
      font-size: 154%;
      margin-bottom: 16px;
      padding-bottom: 12px;
    }
    .plans_list--item .chart .txtarea .ttl::before {
      width: 80px;
    }
    .plans_list--item .chart .txtarea p {
      font-size: 83%;
      max-width: 128px;
    }
    .plans_list--item .price .line {
      margin-left: 24px;
      margin-right: 32px;
    }
  }
  @media screen and (max-width: 1280px) {
    .plans_list--item .plan_head .ttl {
      font-size: 116%;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 16px;
      padding-right: 48px;
    }
    .plans_list--item .plan_head .logo {
      width: 112px;
      height: 38px;
      margin-top: 16px;
      margin-right: 16px;
    }
    .plans_list--item .plan_ttl {
      margin-bottom: 24px;
    }
    .plans_list--item .plan_ttl .ttl {
      font-size: 246%;
      margin-bottom: 16px;
    }
    .plans_list--item .plan_ttl .subttl {
      font-size: 93%;
      letter-spacing: .15em;
    }
    .plans_list--item .plan_ttl .fnt-bebar {
      font-size: 500%;
    }
    .plans_list--item .chart .txtarea .ttl {
      font-size: 123%;
      margin-bottom: 12px;
      padding-bottom: 8px;
    }
    .plans_list--item .chart .txtarea .ttl::before {
      width: 64px;
    }
    .plans_list--item .chart .txtarea p {
      font-size: 72%;
      max-width: 96px;
    }
    .plans_list--item .sites_list--item {
      width: 49.5%;
      padding-top: 6px;
      padding-bottom: 8px;
    }
    .plans_list--item .sites_list--item svg {
      width: 32px;
      height: 32px;
    }
    .plans_list--item .price .ttl {
      font-size: 154%;
    }
    .plans_list--item .price .line {
      margin-left: 20px;
      margin-right: 28px;
      height: 80px;
    }
    .plans_list--item .price .line_arrow::before,
    .plans_list--item .price .line_arrow::after {
      border-width: 8px 0 8px 8px;
    }
    .plans_list--item .price .txt {
      font-size: 100%;
    }
    .plans_list--item .price .num .fnt-bebar {
      font-size: 650%;
      transform: translateY(18px);
    }
    .plans_list--item .price .num .unit {
      font-size: 155%;
      transform: translateY(16px);
    }
  }
  @media screen and (min-width: 1065px) and (max-width: 1280px) {
    .plans_list--item .merit_demerit .merit,
    .plans_list--item .merit_demerit .demerit {
      width: 100%;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .plans_list--item .merit_demerit .demerit {
      border-left: none;
      border-top: 1px dotted rgba(0,0,0,.5);
    }
    .plans_list--item .merit_demerit .ttl {
      padding-bottom: 2px;
    }
    .plans_list--item .merit_demerit .ttl .fnt-jp {
      font-size: 109%;
    }
    .plans_list--item .merit_demerit p {
      font-size: 88%;
    }
  }
  @media screen and (max-width: 1064px) {
    .plans {
      padding-left: 24px;
      padding-right: 24px;
    }
    .plans_list--item {
      width: 100%;
      padding-top: 40px;
      padding-bottom: 56px;
    }
    .plans_list--item:not(:last-child) {
      margin-bottom: 24px;
    }
    .plans_list--item .plan_head .logo {
      margin-top: 24px;
      margin-right: 24px;
    }
    .plans_list--item .plan_ttl {
      text-align: center;
    }
    .plans_list--item .plan_ttl .fnt-bebar {
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .plans_list--item .chart_sites {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    .plans_list--item .chart_sites .chart {
      width: 58%;
      border-right: 2px solid #eeedee;
      margin-right: 7%;
      padding-right: 7%;
    }
    .plans_list--item .chart_sites .sites {
      width: 35%;
    }
    .plans_list--item .chart .txtarea {
      padding-top: 32px;
    }
    .plans_list--item .chart .txtarea .ttl::before {
      width: 80px;
    }
    .plans_list--item .chart .txtarea p {
      max-width: 96px;
    }
    .plans_list--item .merit_demerit {
      margin-bottom: 24px;
    }
    .plans_list--item .price {
      min-height: auto;
      margin-bottom: 24px;
    }
  }
  @media screen and (max-width: 768px) {
    .plans_list--item .chart_sites {
      display: block;
    }
    .plans_list--item .chart_sites .chart {
      width: auto;
      border: none;
      margin-right: 0;
      padding-right: 0;
    }
    .plans_list--item .chart_sites .sites {
      width: 100%;
    }
    .plans_list--item .sites_list--item {
      width: 32.8%;
    }
    .plans_list--item .chart .txtarea {
      padding-top: 48px;
    }
    .plans_list--item .chart .txtarea .ttl {
      width: 136px;
    }
    .plans_list--item .chart .txtarea p {
      max-width: 120px;
    }
  }
  @media screen and (max-width: 560px) {
    .plans {
      padding-left: 16px;
      padding-right: 16px;
    }
    .plans_list--item {
      padding-top: 56px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
    .plans_list--item .plan_head .ttl {
      font-size: 93%;
    }
    .plans_list--item .plan_head .logo {
      width: 88px;
      height: 32px;
      margin-top: 16px;
      margin-right: 16px;
    }
    .plans_list--item .plan_ttl {
      padding-top: 18px;
      padding-bottom: 10px;
      margin-bottom: 16px;
    }
    .plans_list--item .plan_ttl .ttl {
      font-size: 185%;
      margin-bottom: 8px;
    }
    .plans_list--item .plan_ttl .subttl {
      font-size: 93%;
    }
    .plans_list--item .plan_ttl .fnt-bebar {
      font-size: 400%;
    }
    .plans_list--item .chart .txtarea {
      padding-top: 24px;
    }
    .plans_list--item .chart .txtarea .ttl {
      font-size: 109%;
      width: 96px;
      padding-left: 8px;
      padding-right: 8px;
    }
    .plans_list--item .chart .txtarea p {
      margin-left: 8px;
      max-width: 92px;
    }
    .plans_list--item .sites,
    .plans_list--item .merit_demerit,
    .plans_list--item .price {
      margin-bottom: 20px;
    }
    .plans_list--item .sites .ttl {
      font-size: 109%;
    }
  }
  @media screen and (max-width: 474px) {
    .plans_list--item .plan_head .ttl {
      padding-left: 12px;
      padding-right: 40px;
    }
    .plans_list--item .plan_head .ttl svg {
      width: 38px;
    }
    .plans_list--item .sites_list--item {
      width: 49.5%;
    }
    .plans_list--item .chart .txtarea {
      padding-top: 8px;
    }
    .plans_list--item .chart .txtarea .ttl::before {
      width: 64px;
    }
    .plans_list--item .merit_demerit .merit,
    .plans_list--item .merit_demerit .demerit {
      width: 100%;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .plans_list--item .merit_demerit .demerit {
      border-left: none;
      border-top: 1px dotted rgba(0,0,0,.5);
    }
    .plans_list--item .merit_demerit .ttl {
      padding-bottom: 2px;
    }
    .plans_list--item .merit_demerit .ttl .fnt-jp {
      font-size: 109%;
    }
    .plans_list--item .merit_demerit p {
      font-size: 88%;
      line-height: 1.8em;
    }
    .plans_list--item .price .ttl {
      font-size: 128%;
    }
    .plans_list--item .price .line {
      height: 64px;
      margin-left: 16px;
      margin-right: 24px;
    }
    .plans_list--item .price .num .fnt-bebar {
      font-size: 500%;
      transform: translateY(14px);
    }
    .plans_list--item .price .num .unit {
      font-size: 133%;
      transform: translateY(13px);
    }
    .plans_list--item .btn-more a {
      letter-spacing: .2em;
      font-size: 93%;
    }
  }
  @media screen and (max-width: 374px) {
    .plans_list--item {
      padding-left: 16px;
      padding-right: 16px;
    }
    .plans_list--item .plan_ttl .subttl {
      font-size: 80%;
    }
  }

  /* --- service_flow --- */
  .service_flow--item {
    width: 960px;
    padding: 24px;
    border: 5px solid #fff;
    border: 5px solid #fff;
  }
  .slick-initialized .slick-slide.service_flow--item {
    display: flex;
  }
  .service_flow .txtarea {
    flex: 1;
    margin-left: 24px;
  }
  .service_flow--item .num {
    position: absolute;
    right: 16px;
    bottom: -40px;
    z-index: -1;
    line-height: 1em;
    color: #fff;
    font-weight: 700;
    font-size: 2000%;
    letter-spacing: 0em;
  }
  .service_flow--item p {
    line-height: 2em;
  }
  .service_flow .tri {
    position: absolute;
  }
  .service_flow .tri:nth-child(1) {
    bottom: 0;
    left: 0;
  }
  .service_flow .tri:nth-child(2) {
    top: 0;
    right: 0;
  }
  .service_flow .slick-dots {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90%;
    margin-top: 24px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .service_flow .slick-dots li {
    transition: .8s cubic-bezier(.07, .51, .12, 1);
    opacity: .5;
  }
  .service_flow .slick-dots li:not(:last-child) {
    margin-right: 32px;
  }
  .service_flow .slick-dots li.slick-active {
    opacity: 1;
  }
  .service_flow .slick-dots li.slick-active button {
    color: #a2c73c;
  }
  .service_flow .slick-dots button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    font-size: 200%;
    font-family: 'Roboto', sans-serif;
    appearance: none;
    cursor: pointer;
    font-weight: 700;
  }
  .service_flow .slick-dots button::before {
    content: '0';
  }
  .service_flow button.slick-prev {
    transform: rotate(180deg) translateY(102px);
    right: calc(50% + 504px);
  }
  .service_flow button.slick-next {
    transform: translateY(-102px);
    left: calc(50% + 504px);
  }
  @media screen and (min-width: 769px) {
    .service_flow--item:not(:first-child) {
      display: none;
    }
    .slick-initialized .service_flow--item:not(:first-child) {
      display: flex;
    }
    .service_flow--item:not(:last-child) {
      margin-right: 40px;
    }
    .service_flow--item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      right: -45px;
      width: 40px;
      height: 5px;
      background-color: #fff;
    }
    .service_flow--item:not(:first-child)::before {
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: -45px;
      width: 40px;
      height: 5px;
      background-color: #fff;
    }
    .service_flow--item:not(.slick-current) {
      opacity: .25;
    }
    .service_flow .slick-dots li:hover {
      opacity: 1;
    }
    .service_flow button.slick-prev:hover {
      transform: rotate(180deg) translate(8px,102px);
    }
    .service_flow button.slick-next:hover {
      transform: translate(8px,-102px);
    }
  }
  @media screen and (max-width: 1060px) {
    .service_flow--item {
      width: 680px;
      min-height: 320px;
    }
    .service_flow .txtarea {
      margin-left: 16px;
    }
    .service_flow button.slick-prev {
      right: calc(50% + 364px);
    }
    .service_flow button.slick-next {
      left: calc(50% + 364px);
    }
  }
  @media screen and (max-width: 768px) {
    .service_flow {
      padding-left: 16px;
      padding-right: 16px;
    }
    .service_flow--item {
      width: 100%;
      padding-top: 8px;
      min-height: auto;
    }
    .service_flow--item:not(:last-child) {
      margin-bottom: 24px;
    }
    .service_flow--item img {
      width: 50%;
    }
    .service_flow--item .num {
      font-size: 1000%;
      letter-spacing: -.05em;
      bottom: -24px;
    }
    .service_flow .txtarea {
      margin-left: 0;
    }
    .service_flow--item p small {
      line-height: 1.8em;
      display: inline-block;
      margin-top: 6px;
    }
    .service_flow .txtarea .head2 {
      text-align: center;
    }
    .service_flow .tri:nth-child(1) {
      bottom: -24px;
      left: 49.8%;
      transform: rotate(90deg);
      width: 20px;
      height: 21px;
    }
    .service_flow .tri:nth-child(2) {
      top: initial;
      top: auto;
      bottom: -24px;
      right: 49.8%;
      width: 20px;
      height: 21px;
    }
    .service_flow--item:last-child .tri {
      display: none;
    }
  }

  /* --- service_message --- */
  .service_message--cont {
    border: 1px dotted rgba(0,0,0,.5);
  }
  .service_message--bloc {
    width: 50%;
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: 56px;
    padding-right: 56px;
    font-weight: 700;
  }
  .service_message--bloc:not(:last-child) {
    border-right: 1px dotted rgba(0,0,0,.5);
  }
  .service_message--bloc h4 {
    opacity: .5;
  }
  .service_message .inner > .tries .tri {
    position: absolute;
    z-index: -1;
  }
  .service_message .tri-wht {
    top: 80px;
    left: -160px;
  }
  .service_message .tri-grn {
    bottom: -56px;
    right: -100px;
  }
  @media screen and (max-width: 1060px) {
    .service_message--bloc {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 32px;
      padding-right: 32px;
    }
  }
  @media screen and (max-width: 768px) {
    .service_message--bloc {
      width: 100%;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .service_message--bloc:not(:last-child) {
      border-right: none;
      border-bottom: 1px dotted rgba(0,0,0,.5);
    }
    .service_message .tri-wht {
      top: 70px;
      left: -210px;
    }
  }

/* company
*************************************************** */
  .page-company .company .tri {
    z-index: -1;
  }
  .page-company .company_about .tri,
  .page-company .company_profile  .tri {
    position: absolute;
  }
  .page-company .company_about .tri-wht {
    left: -80px;
    top: 0;
  }
  .page-company .company_about .tri-blk {
    bottom: 0;
    right: -80px;
  }
  .page-company .company_profile .tri-grn {
    left: -420px;
    top: 120px;
  }
  .page-company .company_profile .tri-wht {
    bottom: 80px;
    right: -600px;
  }
  .page-company .company_profile .tri-blk {
    bottom: 20px;
    right: -310px;
  }
  @media screen and (max-width: 1060px) {
    .page-company .company_about h2 {
      margin-bottom: 64px;
    }
    .page-company .company_about h2 img {
      width: 280px;
      height: 100px;
    }
  }
  @media screen and (max-width: 768px) {
    .page-company .company_about h2 {
      margin-bottom: 32px;
    }
    .page-company .company_about h2 img {
      width: 180px;
      height: 66px;
    }
    .page-company .company_about .txtarea {
      text-align: left;
    }
    .page-company .company_about .txtarea br {
      display: none;
    }
    .page-company .company_about .tri-wht {
      left: -250px;
    }
    .page-company .company_about .tri-blk {
      right: -110px;
    }
    .page-company .company_profile .sect_ttl {
      margin-bottom: 8px;
    }
    .page-company .company_profile .tbl_def td {
      padding-bottom: 20px;
    }
  }


/* ##############################################################################

    ARCHIVE

############################################################################## */
  main {
    overflow: hidden;
  }

/* main_column
**************************************** */
  .main_column {
    flex: 1;
    margin-right: 56px;
  }

  /* --- post --- */
  .post { position: relative; }
  .link_area::before,
  .post--link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .posts .post--img {
    overflow: hidden;
    z-index: 0;
  }
  .posts .post--img .tries {
    z-index: 1;
  }
  .posts .post--img .tri {
    position: absolute;
    transform: rotate(90deg);
    z-index: -1;
    transition: .6s cubic-bezier(.07, .51, .12, 1);
  }
  .posts .post--img .tri:first-child {
    top: -18px;
    right: -11px;
  }
  .posts .post--img .tri:last-child {
    bottom: -18px;
    left: -11px;
  }
  .cat_list {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .post .post--img img {
    overflow: hidden;
    transition: 4s cubic-bezier(.07, .51, .12, 1);
  }
  .cat_list a {
    display: inline-block;
    background: rgba(0,0,0,.075);
    color: #000;
    vertical-align: middle;
    font-size: 79%;
    line-height: 1;
    padding: 6px 12px;
    float: left;
    margin-left: 4px;
    white-space: nowrap;
    transition: .8s cubic-bezier(.07, .51, .12, 1);
  }
  .home .cat_list a {
    background: rgba(255,255,255,.3);
    color: #fff;
  }
  .no_post {
    background-color: rgba(255,255,255,.8);
    color: rgba(0,0,0,.3);
    text-align: center;
    padding-top: 64px;
    padding-bottom: 64px;
    font-size: 139%;
  }
  @media screen and (min-width: 769px) {
    .posts .post:hover .post--img .tri:first-child {
      transform: rotate(90deg) translate(-5px,-5px);
    }
    .posts .post:hover .post--img .tri:last-child {
      transform: rotate(90deg) translate(5px,5px);
    }
    .posts .post:hover .post--img:not(.no_img) img {
      transform: scale(1.05);
    }
    .cat_list a:hover {
      background-color: #000;
      color: #fff;
    }
  }
  @media screen and (max-width: 1060px) {
    .main_column {
      width: 100%;
      margin-right: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .posts .post--img .tri {
      width: 18px;
      height: 26px;
    }
    .posts:not(.posts-home_works) .post .tri:last-child {
      bottom: -8px;
      left: 0;
    }
    .posts:not(.posts-home_works) .post .tri:first-child {
      top: -8px;
      right: 0;
    }
  }

  .cat_list.v2 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .cat_list.v2 li {
    display: block;
    border-bottom: 1px dotted rgba(0, 0, 0, .25);
  }
  .cat_list.v2 a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0;
    padding-right: 0;
    column-gap: 8px;
    margin: 0;
    background:transparent;
  }
  .cat_list.v2 a .ico {
    display: block;
    translate: 0 1px;
  }
  .cat_list.v2 a svg {
    opacity: .65;
  }
  @media (any-hover: hover) {
    .cat_list.v2 a:hover {
      color: #000;
    }
    .cat_list.v2 a:hover svg {
      color: #a2c73c;
      opacity: 1;
    }
  }

  .tag_list {
    gap: 12px;
  }
  .tag_list a {
    line-height: 1em;
    column-gap: 2px;
    font-size: 85%;
  }
  .tag_list .ico {
    display: block;
    translate: 0 1px;
  }
  .tag_list .ico svg {
    opacity: .25;
  }
  .single .tag_list {
    margin-top: -8px;
  }
  @media (any-hover: hover) {
    .tag_list a:hover .ico svg {
      color: #a2c73c;
      opacity: 1;
    }
  }
  @media (max-width: 768px) {
    .single .tag_list {
      margin-top: 0;
    }
  }

/* side_column
**************************************** */
  .side_column { width: 280px; }
  .side_section:not(:last-child) {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #fff;
  }
  .side--ttl .fnt-en {
    font-size: 154%;
    letter-spacing: .2em;
    line-height: 1em;
  }
  .side--ttl .fnt-jp {
    font-size: 85%;
    opacity: .5;
    letter-spacing: .15em;
    display: block;
    line-height: 1em;
  }

  /* --- post --- */
  .posts-side .post:not(:last-child) {
    margin-bottom: 16px;
  }
  .posts-side .post--img {
    margin-right: 16px;
    width: 85px;
    height: 56px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .posts-side .txtarea {
    flex: 1;
  }
  .posts-side .post--date {
    margin-bottom: 0;
    font-size: 85%;
    opacity: .5;
    letter-spacing: .1em;
  }
  .posts-side .post--ttl {
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .posts-side .post--img .tri {
    position: absolute;
    transform: rotate(90deg);
    z-index: -1;
  }
  .posts-side .post--img .tri:first-child {
    top: -1px;
    right: -1px;
  }
  .posts-side .post--img .tri:last-child {
    bottom: -1px;
    left: -1px;
  }
  
  /* --- category --- */
  .side_column .cat_list a {
    margin-left: 0;
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 92%;
    transition: .8s cubic-bezier(.07, .51, .12, 1);
  }

  /* --- archive --- */
  .side_column .archive_list {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(0,0,0,.25);
  }
  .side_column .archive_list--ttl::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(135deg);
    transition: .6s cubic-bezier(.07, .51, .12, 1);
    opacity: .5;
  }
  .side_column .archive_list--ttl.active::after {
    transform: rotate(315deg);
  }
  .side_column .archive_month {
    display: none;
  }
  .side_column .archive_month li {
    padding-left: 24px;
  }
  .side_column .archive_month li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    width: 6px;
    height: 6px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: translateY(-50%);
    opacity: .5;
  }

  @media screen and (max-width: 1060px) {
    .side_column {
      width: 100%;
      height: auto !important;
    }
    .side_column--in {
      position: static !important;
      transform: initial !important;
      width: 100% !important;
    }
  }
  @media screen and (max-width: 768px) {
    .side_section:not(:last-child) {
      margin-bottom: 32px;
      padding-bottom: 32px;
    }
    .posts-side .post--img .tri:first-child {
      top: -11px;
      right: -2px;
    }
    .posts-side .post--img .tri:last-child {
      bottom: -11px;
      left: -2px;
    }
  }

  /* --- archive-pd --- */
  .archive-pd {
    position: relative;
    margin-left: auto;
    z-index: 1;
  }
  .archive-pd .archive_list {
    position: relative;
    font-size: 92%;
  }
  .archive-pd .archive_list:not(:last-child) {
    margin-right: 24px;
  }
  .archive-pd .archive_list a {
    display: block;
    padding: 2px 16px;
    text-align: left;
  }
  .archive-pd .archive_list a:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
  .archive-pd .archive_list--label {
    margin-right: 12px;
  }
  .archive-pd .archive_list--btn {
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 32px;
    padding-right: 54px;
    background-color: #fff;
    height: 30px;
    line-height: 30px;
  }
  .archive-pd .archive_list--btn::after {
    content: '';
    position: absolute;
    top: 11px;
    right: 10px;
    display: block;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid rgba(0,0,0,.5);
    border-right: 2px solid rgba(0,0,0,.5);
    transform: rotate(45deg);
    transition: .4s cubic-bezier(.07, .51, .12, 1);
    transform-origin: 50% 50%;
  }
  .archive-pd .active .archive_list--btn::after {
    top: 14px;
    transform: rotate(225deg);
  }
  .archive-pd .archive_list--menu {
    position: absolute;
    z-index: 1;
    width: 100%;
    background: #fff;
    border-top: 1px dotted rgba(0,0,0,.25);
    visibility: hidden;
    opacity: 0;
    transition: .4s cubic-bezier(.07, .51, .12, 1);
  }
  .archive-pd .active .archive_list--menu {
    visibility: visible;
    opacity: 1;
  }
  @media screen and (max-width: 768px) {
    .archive-pd {
      margin-top: 32px;
      margin-bottom: 0;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
    .archive-pd .archive_list {
      width: 100%;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .archive-pd .archive_list--label + div {
      width: calc(100% - 100px);
    }
    .archive-pd .archive_list--btn {
      width: 100%;
    }
    .archive-pd .archive_list--menu {
      top: 30px;
    }
  }

/* blog
**************************************** */
  .posts-blog .post {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 40px;
    padding-right: 40px;
    border: 4px solid #fff;
  }
  .posts-blog .post:not(:last-child) {
    margin-bottom: 32px;
  }
  .posts-blog .post--img {
    width: 300px;
  }
  .posts-blog .post--img.no_img::before {
    background-size: 147px;
    background-position: center;
    background-image: url(../images/common/no_img_txt-sm@2x.png);
  }
  .posts-blog .post--txtarea {
    flex: 1;
    margin-right: 40px;
  }
  .posts-blog .post--date {
    opacity: .5;
  }
  .archive-blog .wp-pagenavi {
    margin-top: 32px;
  }
  @media screen and (min-width: 769px) {
    .posts-blog .post:hover {
      background-color: #fff;
    }
    .posts-blog .post:hover svg {
      fill: #fff;
    }
  }
  @media screen and (max-width: 1060px) {
    .archive-blog .fix_wrap.flx,
    .single-blog .fix_wrap.flx {
      display: block;
    }
    .archive-blog .main_column,
    .single-blog .main_column {
      overflow: visible;
      margin-bottom: 64px;
    }
    .archive-blog .container > .inner,
    .single-blog .container > .inner {
      padding-top: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .posts-blog .post {
      padding: 24px;
    }
    .posts-blog .post--txtarea {
      margin-right: 0;
    }
    .posts-blog .post--img {
      width: 100%;
      margin-bottom: 16px;
    }
    .posts-blog .post--info {
      margin-bottom: 4px;
    }
    .archive-blog .wp-pagenavi {
      margin-top: 24px;
    }
  }

/* works
**************************************** */
  .archive-works .page_ttl {
    padding-bottom: 80px;
  }
  .archive-works main {
    overflow: visible;
  }

  /* --- works_first --- */
  .archive-works .works_first {
    padding-top: 64px;
    background: #000;
  }
  .archive-works .works_first .btn-close,
  .archive-works .works_first-v2 .btn-close { display: none; }
  .archive-works .works_first .inner,
  .archive-works .works_first .post {
    position: static;
  }
  .archive-works .works_first .post {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .archive-works .works_first .post--txtarea {
    margin-right: 80px;
    color: #fff;
  }
  .archive-works .works_first .post--txtarea a {
    color: #fff;
  }
  .archive-works .works_first .post--ttl {
    font-size: 170%;
  }
  .archive-works .post--ttl {
    font-weight: 500;
  }
  .archive-works .works_first .works--info_list .works--name {
    font-size: 154%;
    margin-top: 12px;
    margin-bottom: 8px;
  }
  .archive-works .works_first .works--info_list dt {
    margin-bottom: 6px;
  }
  .archive-works .works_first .works--info_list dd:not(:last-child) {
    margin-bottom: 20px;
  }
  .archive-works .works_first .works--info_list dd span {
    display: inline-block;
  }
  .archive-works .works_first .post--img .tries { display: none; }

  .archive-works .works_first-v2 {
    padding-top: 64px;
    padding-bottom: 56px;
    background-color: #e3e3e3;
  }
  .archive-works .works_first-v2 > .inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    column-gap: 48px;
  }
  .archive-works .works_first-v2 .post {
    width: calc(50% - 24px);
  }

  /* --- works_search --- */
  .archive-works .btn-search {
    position: absolute;
    bottom: 100%;
    left: calc(50% + 406px);
    z-index: 1;
    color: #000;
    letter-spacing: .1em;
    line-height: 1em;
    padding-top: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .archive-works .btn-search svg {
    margin-bottom: 6px;
  }
  .works_search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    display: none;
  }
  .works_search .inner {
    padding-top: 24px;
    padding-bottom: 40px;
    height: 100%;
  }
  .works_search .search_tab {
    border-bottom: 1px dotted rgba(0,0,0,.5);
    margin-bottom: 24px;
  }
  .works_search .search_tab--item {
    line-height: 1em;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 64px;
    opacity: .5;
  }
  .works_search .search_tab--item .fnt-en {
    font-size: 115%;
    margin-bottom: 6px;
  }
  .works_search .search_tab--item .fnt-jp {
    font-size: 85%;
  }
  .works_search .search_list {
    height: calc(100% - 72px);
    overflow: hidden;
  }
  .works_search .search_list--item {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  .works_search .search_list--item:not(.is_show) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }
  .works_search .search_list--item .terms_area {
    padding-right: 16px;
    width: calc(100% + 16px);
  }
  .works_search .search_list--item .terms_area .area_bloc:not(:last-child) {
    margin-bottom: 8px;
  }
  .works_search .search_list--item .terms_area .area_bloc .ttl {
    width: 80px;
  }
  .works_search .search_list--item .terms_area .area_bloc ul {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1;
  }
  .works_search .search_list--item li {
    width: 25%;
    border: 1px solid #fff;
  }
  .works_search .search_list--item li a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    background-color: rgba(0,0,0,.1);
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1.3em;
  }
  .fix_works_search {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }
  .fix_works_search .works_search {
    position: fixed;
    width: calc(100% - 24px);
    height: auto;
    top: auto;
    top: initial;
    left: 12px;
    bottom: 12px;
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  .fix_works_search .works_search .inner {
    padding-bottom: 32px;
  }
  .fix_works_search .btn-close,
  .fix_works_search .btn-close-ico,
  .fix_works_search .btn-close-ico::before,
  .fix_works_search .btn-close-ico::after,
  .fix_works_search .btn-close .fnt-en {
    position: absolute;
  }
  .fix_works_search .btn-close {
    width: 40px;
    height: 40px;
    right: 0;
    bottom: 15px;
    opacity: .5;
  }
  .fix_works_search .btn-close-ico {
    width: 100%;
    height: 24px;
  }
  .fix_works_search .btn-close-ico::before,
  .fix_works_search .btn-close-ico::after {
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: translateY(-50%);
  }
  .fix_works_search .btn-close-ico::before {
    transform: rotate(25deg);
  }
  .fix_works_search .btn-close-ico::after {
    transform: rotate(-25deg);
  }
  .fix_works_search .btn-close .fnt-en {
    left: 0;
    bottom: 0;
    text-align: center;
    font-size: 85%;
    letter-spacing: .15em;
    line-height: 1em;
  }
  /* --- active&is_show --- */
  .works_search .search_tab--item.active {
    color: #a2c73c;
    opacity: 1;
  }
  .archive-works .btn-search.active {
    transform: translateY(65px);
    background-color: #000;
    color: #fff;
  }
  .archive-works .btn-search.active svg {
    fill: #fff;
  }
  .fix_works_search.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  @media screen and (min-width: 561px) {
    .archive-works .works_first-v2 .post--img .tri {
      fill: #e3e3e3;
    }
  }
  @media screen and (min-width: 769px) {
    .archive-works .works_first:hover {
      background: #a2c73c;
    }
    .works_search .search_tab--item:not(.active):hover {
      opacity: 1;
    }
    .archive-works .btn-search:hover {
      background-color: #000;
      color: #fff;
    }
    .archive-works .btn-search:hover svg {
      fill: #fff;
    }
    .fix_works_search .btn-close:hover {
      opacity: 1;
    }
  }
  @media screen and (max-width: 1280px) {
    .works_search .search_list--item .terms_area {
      height: 22vw;
      overflow-y: scroll;
    }
  }
  @media screen and (max-width: 1060px) {
    .archive-works .works_first .post--img {
      width: 60%;
    }
    .archive-works .works_first .works--info_list dt:nth-last-child(2),
    .archive-works .works_first .works--info_list dd:last-child {
      display: none;
    }
    .archive-works .works_first .works--info_list dd:nth-last-child(3) {
      margin-bottom: 0;
    }
    .archive-works .works_first-v2 {
      padding-top: 40px;
      padding-bottom: 32px;
    }
    .archive-works .works_first-v2 > .inner {
      column-gap: 32px;
    }
    .archive-works .works_first-v2 .post {
      width: calc(50% - 16px);
    }
    .archive-works .btn-search {
      left: auto;
      left: initial;
      right: 5%;
    }
  }
  @media screen and (max-width: 768px) {
    .archive-works .page_ttl {
      padding-bottom: 40px;
    }
    .archive-works .works_first {
      background-color: transparent;
      padding-top: 0;
      margin-bottom: 32px;
    }
    .archive-works .btn-search,
    .archive-works .works_first .works_search,
    .archive-works .works_first .post--txtarea dt:first-child {
      display: none;
    }
    .archive-works .works_first .post--img .tries,
    .archive-works .works_first .post {
      display: block;
    }
    .archive-works .works_first .post--img {
      width: 100%;
      overflow: hidden;
    }
    .archive-works .works_first .post--img .tries {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .archive-works .works_first .post--img .tries .tri {
      position: absolute;
      transform: rotate(90deg);
      z-index: -1;
      transition: .6s cubic-bezier(.07, .51, .12, 1);
    }
    .archive-works .works_first .post--img .tries .tri:first-child {
      top: -18px;
      right: -11px;
    }
    .archive-works .works_first .post--img .tries .tri:last-child {
      bottom: -18px;
      left: -11px;
    }
    .archive-works .works_first .post--txtarea,
    .archive-works .works_first .post--txtarea a {
      margin-right: 0;
      color: #000;
    }
    .archive-works .works_first .works--info_list .works--name {
      font-size: 100%;
      margin-bottom: 4px;
    }
    .archive-works .works_first .works--info_list .works--name + div {
      opacity: .5;
      font-size: 85%;
    }
    .archive-works .works_first .works--info_list dd:not(:last-child) {
      margin-bottom: 0;
    }
    .archive-works .works_first-v2 > .inner {
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      column-gap: 0;
      row-gap: 40px;
      max-width: 90%;
    }
    .archive-works .works_first-v2 .post {
      width: 100%;
    }
    .fix_works_search .works_search  {
      overflow: visible;
    }
    .fix_works_search .btn-close {
      top: calc(100% + 152px);
      right: -16px;
      width: calc(100% + 32px);
      height: 32px;
      font-weight: 700;
      opacity: 1;
      background-color: #000;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      cursor: pointer;
    }
    .fix_works_search .btn-close-ico,
    .fix_works_search .btn-close .fnt-en {
      display: inline-block;
      position: relative;
    }
    .fix_works_search .btn-close-ico {
      left: 0;
      top: 0;
      width: 24px;
      height: 18px;
      margin-right: 8px;
      margin-left: -4px;
    }
    .fix_works_search .btn-close-ico::before,
    .fix_works_search .btn-close-ico::after {
      background-color: #fff;
    }
    .fix_works_search .btn-close .fnt-en {
      bottom: -1px;
      left: 0;
      font-size: 108%;
      letter-spacing: .1em;
      color: #fff;
    }
    .fix_works_search .works_search .inner {
      padding-bottom: 44px;
    }
    .works_search .search_tab {
      overflow-x: scroll;
      margin-bottom: 12px;
    }
    .works_search .search_tab--item {
      padding-top: 0;
      padding-bottom: 8px;
      padding-right: 24px;
      padding-left: 24px;
      white-space: nowrap;
      text-align: center;
      font-weight: 700;
      cursor: pointer;
    }
    .works_search .search_tab--item:last-child {
      margin-right: 24px;
    }
    .works_search .search_tab--item .fnt-en {
      font-size: 93%;
      margin-bottom: 2px;
    }
    .works_search .search_tab--item .fnt-jp {
      font-size: 75%;
    }
    .works_search .search_list,
    .works_search .search_list--item {
      height: 128px;
    }
    .works_search .search_list--item .terms_area {
      display: block;
      width: 100%;
      height: 128px;
      padding-right: 0;
    }
    .works_search .search_list--item li {
      width: 50%;
      float: left;
    }
    .works_search .search_list--item li a {
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 6px;
      padding-right: 6px;
      font-size: 85%;
      letter-spacing: 0em;
    }
  }
  @media screen and (max-width: 560px) {
    .works_search .search_list--item .terms_area .area_bloc .ttl {
      width: 64px;
    }
  }

  /* --- works-post --- */
  .archive-works .works_first-v2 .post--img,
  .archive-works .posts-works .post--img,
  .single-works .posts-works .post--img {
    margin-bottom: 16px;
  }
  .archive-works .works_first-v2 .works--info_list .works--name,
  .archive-works .posts-works .works--info_list .works--name,
  .single-works .posts-works .works--info_list .works--name {
    font-size: 100%;
  }
  .archive-works .works_first-v2 .works--info_list dd.works--ttl .works--name,
  .archive-works .posts-works .works--info_list dd.works--ttl .works--name,
  .single-works .posts-works .works--info_list dd.works--ttl .works--name {
    margin-bottom: 4px;
  }
  .archive-works .works_first-v2 .works--info_list dd.works--ttl div:not(.works--name),
  .archive-works .posts-works .works--info_list dd.works--ttl div:not(.works--name),
  .single-works .posts-works .works--info_list dd.works--ttl div:not(.works--name) {
    font-size: 85%;
    opacity: .5;
  }
  .archive-works .works_first-v2 .works--info_list dd:not(:last-child),
  .archive-works .posts-works .works--info_list dd:not(:last-child),
  .single-works .posts-works .works--info_list dd:not(:last-child) {
    margin-bottom: 0;
  }
  @media screen and (max-width: 768px) {
    .archive-works .posts-works .post:not(:last-child) {
      margin-bottom: 32px;
    }
    .archive-works .footer,
    .single-works .footer {
      padding-bottom: 96px;
    }
  }
  @media screen and (max-width: 768px) and (min-width: 561px) {
    .archive-works .posts-works {
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .archive-works .posts-works .post {
      width: calc(50% - 8px);
    }
  }
  @media screen and (max-width: 560px) {
    .archive-works .works_first-v2 {
      background-color: transparent;
      padding-top: 16px;
      padding-bottom: 0;
      margin-bottom: 32px;
    }
    .archive-works .works_first-v2 > .inner {
      row-gap: 32px;
    }
  }

/* news
**************************************** */

  /* --- news--archive --- */
  .news--archive {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #111;
  }
  .news--archive li {
    margin-left: 8px;
    margin-right: 8px;
  }
  .news--archive a {
    color: #fff;
  }

  /* --- news_list --- */
  main .news_list .post {
    padding-bottom: 24px;
    padding-top: 24px;
    margin-bottom: 0;
    border-bottom: 1px dotted rgba(0,0,0,.5);
  }
  main .news_list .post--date {
    background-color: #000;
    color: #fff;
    padding-top: 6px;
    padding: 6px;
    padding-left: 24px;
    padding-right: 24px;
    margin-right: 32px;
  }

  @media screen and (max-width: 768px) {
    main .news_list .post { display: block; }
    main .news_list .post--date {
      display: inline-block;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 16px;
      padding-left: 16px;
      margin-bottom: 8px;
    }
  }


/* ##############################################################################

    SINGLE

############################################################################## */
  .wp-pagenavi {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
  }
  .wp-pagenavi a,
  .wp-pagenavi span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 1px solid;
    font-weight: bold;
    line-height: 1.4;
    padding: 8px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .8s cubic-bezier(.07, .51, .12, 1);
  }
  .wp-pagenavi span.current {
    background-color: #000;
    color: #fff;
  }
  @media  only screen and (min-width: 769px) {
    .wp-pagenavi a:hover {
      background-color: #fff;
      border-color: #fff;
    }
  }
  @media  only screen and (max-width: 768px) {
    .wp-pagenavi {
      margin-bottom: 24px;
    }
  }

/* works
*************************************************** */
  .single-works .head1 {
    color: #000;
  }
  .single-works .single_works .inner-sm {
    max-width: 1000px;
  }
  .single-works .eyecatch .tri {
    position: absolute;
    z-index: -1;
  }
  .single-works .eyecatch .tri:nth-child(1) {
    top: -64px;
    left: -240px;
  }
  .single-works .eyecatch .tri:nth-child(2) {
    top: 400px;
    left: -300px;
  }
  .single-works .eyecatch .tri:nth-child(3) {
    bottom: -180px;
    right: -100px;
  }
  .single-works .eyecatch .tri:nth-child(4) {
    bottom: 80px;
    right: -220px;
  }
  .single-works .sect_ttl-jp span.fnt-jp {
    margin-bottom: 8px;
    font-weight: 500;
  }
  .single-works .detail_img_list {
    margin-top: 80px;
  }
  .single-works .detail_img_list--item {
    overflow: hidden;
  }
  .single-works .detail_img_list--item:not(:last-child) {
    margin-bottom: 64px;
  }
  .single-works .detail_img_list--item img {
    transform: scale(1.005);
  }
  .single-works .bg-wht a {
    text-decoration: underline;
    transition: .4s all;
  }
  .single-works .tbl_def .split_list span:not(:last-child)::after {
    content: '／';
    opacity: .5;
    margin-left: 6px;
    margin-right: 6px;
  }
  .single-works .tbl_def .select_list span {
    display: inline-block;
    width: 24%;
    margin-right: 1%;
    margin-bottom: 1%;
    background-color: #fff;
    font-size: 85%;
    text-align: center;
    line-height: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: .25;
  }
  .single-works .tbl_def .select_list span.selected {
    opacity: 1;
    color: #a2c73c;
  }
  .single-works .tbl_def .partner_cont {
    color: rgba(0,0,0,.5);
    font-size: 85%;
  }
  .single-works .tbl_def .partner_list > div:not(:last-child) {
    margin-bottom: 16px;
  }
  .single-works .other_works .inner {
    max-width: 1440px;
  }
  .single-works .other_works .other_works--cont {
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: 64px;
    padding-right: 64px;
    background-color: rgba(255,255,255,.5);
  }
  .single-works .other_works .other_works--cont > .tries .tri {
    position: absolute;
  }
  .single-works .other_works .other_works--cont > .tries .tri:first-child {
    top: 0;
    right: 0;
  }
  .single-works .other_works .other_works--cont > .tries .tri:last-child {
    bottom: 0;
    left: 0;
  }
  .single-works .other_works .head1 {
    letter-spacing: .1em;
  }
  .single-works .other_works .posts-works {
    margin-top: -24px;
  }
  .single-works .other_works .posts-works .post {
    margin-top: 24px;
    width: 23.5%;
    margin-right: 2%;
  }
  .single-works .other_works .posts-works .post:last-child {
    margin-right: 0;
  }
  .single-works .other_works .posts-works .post--img .tri,
  .single-works .other_works .btn-more a > .tri {
    fill: #f7f6f7;
  }
  .single-works .other_works .bg-wht .posts-works .post a {
    text-decoration: none;
  }
  .single-works .btn-view_page .inner {
    border: 3px solid;
    max-width: 700px;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow: hidden;
    line-height: 1em;
  }
  .single-works .btn-view_page .head2 {
    padding-top: 4px;
  }
  .single-works .btn-view_page .line-mov {
    transform: rotate(180deg);
    margin-left: 40px;
    margin-right: 40px;
  }
  .single-works .btn-view_page .line-mov {
    width: 64px;
    height: 2px;
  }
  .single-works .btn-view_page .tries .tri {
    position: absolute;
  }
  .single-works .btn-view_page .tries .tri:nth-child(1) {
    top: -12px;
    left: -12px;
  }
  .single-works .btn-view_page .tries .tri:nth-child(2) {
    right: -12px;
    bottom: -12px;
  }
  @media screen and (min-width: 769px) {
    .single-works .btn-view_page .inner {
      padding-top: 32px;
      padding-bottom: 32px;
      transition: .8s cubic-bezier(.07, .51, .12, 1);
    }
    .single-works .btn-view_page .tries .tri {
      transition: .4s cubic-bezier(.07, .51, .12, 1);
    }
    .single-works .btn-view_page .inner:hover {
      background-color: #fff;
    }
    .single-works .btn-view_page:hover .tries .tri:nth-child(1) {
      top: -4px;
      left: -4px;
    }
    .single-works .btn-view_page:hover .tries .tri:nth-child(2) {
      right: -4px;
      bottom: -4px;
    }
  }
  @media screen and (min-width: 961px) {
    .single-works .bg-wht a:hover {
      color: #a2c73c;
    }
  }
  @media screen and (max-width: 1280px) {
    .single-works .other_works .other_works--cont {
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  @media screen and (max-width: 960px) {
    .single-works .other_works .other_works--cont {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
    .single-works .other_works .posts-works .post {
      width: 49%;
    }
    .single-works .other_works .posts-works .post:last-child,
    .single-works .other_works .posts-works .post:nth-of-type(even) {
      margin-right: auto;
    }
  }
  @media screen and (max-width: 768px) {
    .single-works .eyecatch {
      width: calc(100% + 32px);
      margin-left: -16px;
    }
    .single-works .sect_ttl-jp span.fnt-jp {
      margin-bottom: 0;
    }
    .single-works .split_list span {
      display: inline-block;
    }
    .single-works .tbl_def td.flx {
      display: flex;
    }
    .single-works .tbl_def .select_list span {
      width: 49.5%;
    }
    .single-works .tbl_def .select_list span:nth-child(even) {
      margin-right: 0;
    }
    .single-works .eyecatch .tries {
      display: none;
    }
    .single-works .detail_img_list {
      margin-top: 56px;
      margin-bottom: 48px;
    }
    .single-works .detail_img_list--item:not(:last-child) {
      margin-bottom: 40px;
    }
    .single-works .tbl_def .partner_list > div:not(:last-child) {
      margin-bottom: 8px;
    }
    .single-works .btn-view_page .sect_ttl {
      margin-left: 0;
      margin-bottom: 20px;
      font-size: 231%;
    }
    .single-works .btn-view_page .head2 {
      padding-top: 0;
      margin-bottom: 8px;
    }
    .single-works .btn-view_page p {
      text-align: center;
      margin-top: 16px;
    }
    .single-works .btn-view_page .tries .tri {
      width: 32px;
      height: 48px;
    }
  }
  @media screen and (max-width: 560px) {
    .single-works .other_works .inner {
      width: calc(100% - 16px);
    }
    .single-works .other_works .other_works--cont {
      padding-left: 16px;
      padding-right: 16px;
    }
    .single-works .posts-works .works--info_list .works--name {
      font-size: 93%;
    }
    .single-works .posts-works .works--info_list dd.works--ttl div:not(.works--name) {
      font-size: 76%;
      line-height: 1.3em;
    }
  }

/* blog
*************************************************** */
  .single-blog .main_column {
    background-color: #fff;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 56px;
    padding-right: 56px;
  }
  .single-blog .mce-content-body strong {
    background:linear-gradient(transparent 70%, #a7cc09 70%);
  }
  .single-blog .main_column .btn-more svg {
    fill: #fff;
  }
  .single-blog .main_column .post--date {
    opacity: .5;
  }
  .single-blog .main_column .sect_ttl-jp span.fnt-jp {
    font-size: 185%;
    line-height: 1.8em;
  }
  @media screen and (max-width: 768px) {
    .single-blog .main_column {
      width: calc(100% + 32px);
      margin-left: -16px;
      padding-top: 32px;
      padding-bottom: 32px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .single-blog .main_column .sect_ttl-jp span.fnt-jp {
      font-size: 154%;
      line-height: 1.7em;
    }
  }


/* ##############################################################################

    CONTACT FORM 7

############################################################################## */

/* COMMON
*************************************************** */
  #cf_form table { width:100%; }
  #cf_form tr {
    border-bottom: 1px dotted rgba(0,0,0,.5);
  }
  #cf_form th,
  #cf_form td {
    line-height: 36px;
    padding-top: 24px;
    padding-bottom: 24px;
    vertical-align: middle;
  }
  #cf_form th {
    width: 256px;
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
  }
  #cf_form td {
    padding-left: 64px;
  }
  #cf_form table input[type="text"],
  #cf_form table input[type="email"],
  #cf_form table input[type="tel"],
  #cf_form table input[type="date"],
  #cf_form table input[type="password"],
  #cf_form table textarea {
    width: 100%;
    vertical-align: bottom;
  }
  #cf_form table input[type="text"],
  #cf_form table input[type="email"],
  #cf_form table input[type="tel"],
  #cf_form table input[type="date"],
  #cf_form table input[type="password"],
  #cf_form select,
  #cf_form textarea {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    height: 38px;
    line-height: 38px;
    border: none;
    font: inherit;
    font-size: 100%;
  }
  #cf_form textarea {
    height: 120px;
    line-height: 1.6em;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #cf_form select { height: 40px; }
  #cf_form ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

/* radio & checkbox
*************************************************** */
  .cf_form .cf_rc input[type="radio"],
  .cf_form .cf_rc input[type="checkbox"] { display: none !important; }
  .cf_form .cf_rc .wpcf7-list-item {
    margin-left: 0;
    display: block;
    margin-right: 16px;
  }
  .cf_form .cf_rc .mwform-radio-field-text,
  .cf_form .cf_rc .mwform-checkbox-field-text {
    line-height: 38px;
    display: block;
    vertical-align: top;
    position: relative;
    padding-left: 28px;
    padding-right: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .cf_form .mw_wp_form .horizontal-item + .horizontal-item {
    margin-left: 0;
  }
  .mwform-radio-field.disabled .mwform-radio-field-text,
  .mwform-checkbox-field.disabled .mwform-checkbox-field-text {
    opacity: .3 !important;
  }
  .cf_form .cf_rc .mwform-radio-field-text:hover { opacity: .7; }
  .cf_form .cf_rc .mwform-radio-field-text::before,
  .cf_form .cf_rc .mwform-checkbox-field-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
  }
  .cf_form .acceptance input[type="checkbox"] {
    position: relative;
    margin-right: 8px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
  }
  .cf_form .cf_rc .mwform-radio-field-text::before,
  .cf_form .cf_rc .mwform-checkbox-field-text::before,
  .cf_form .acceptance input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 1px solid #000;
  }
  .cf_form .cf_rc input[type="radio"] + .mwform-radio-field-text::before { border-radius: 10px; }
  .cf_form .cf_rc input[type="radio"]:checked + .mwform-radio-field-text,
  .cf_form .cf_rc input[type="checkbox"]:checked + .mwform-checkbox-field-text {
    font-weight: bold;
  }
  .cf_form .cf_rc input[type="radio"]:checked + .mwform-radio-field-text::after,
  .cf_form .cf_rc input[type="checkbox"]:checked + .mwform-checkbox-field-text::after,
  .cf_form .acceptance input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
  }
  .cf_form .cf_rc input[type="radio"]:checked + .mwform-radio-field-text::after {
    top: 16px;
    left: 5px;
    width: 8px;
    height: 8px;
    background-color: #a2c73c;
    border-radius: 100%;
  }
  .cf_form .cf_rc input[type="radio"]:checked + .mwform-radio-field-text::before,
  .cf_form .cf_rc input[type="checkbox"]:checked + .mwform-checkbox-field-text::before {
    border-color: #a2c73c;
  }
  .cf_form .cf_rc input[type="checkbox"]:checked + .mwform-checkbox-field-text::after,
  .cf_form .acceptance input[type="checkbox"]:checked::after {
    top: 14px;
    left: 6px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #a2c73c;
    border-bottom: 2px solid #a2c73c;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

/* address
*************************************************** */
  #cf_form table .cf_zip input[type="text"] {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
  }

/* other
*************************************************** */
  
  /* --- support --- */
  .cf_form--support {
    margin-top: 4px;
    line-height: 1.6em;
    opacity: .5;
    font-size: 85%;
  }
  
  /* --- required --- */
  .required {
    float: right;
    border: 2px solid #ce0d2e;
    color: #ce0d2e;
    margin: 6px 0 0 16px;
    font-size: 70%;
    padding: 5px 5px;
    line-height: 1em;
    font-weight: 700;
  }

  /* --- cf_form--btns --- */
  .cf_form--btns {
    padding-top: 48px;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .cf_form--btns input {
    min-width: 220px;
    line-height: 48px;
    height: 48px;
    padding-left: 32px;
    padding-right: 32px;
    margin-right: 4px;
    margin-left: 4px;
    border: none;
    border-radius: 3px;
    letter-spacing: .05em;
    color: #fff;
    font-size: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-size: 123%;
    font-weight: bold;
  }
  .f-form__submit,
  .wpcf7-submit { background-color: #ce0d2e; }
  .f-form__back { background-color: #c7c7c7; }
  .wpcf7c-btn-confirm { background-color: #000; }
  .wpcf7-back { background-color: #000; }
  .wpcf7c-conf { background-color: transparent; }

  /* --- error --- */
  div.wpcf7-response-output {
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  div.wpcf7-validation-errors,
  div.wpcf7-acceptance-missing,
  div.wpcf7-mail-sent-ok {
    font-weight: bold;
  }
  div.wpcf7-validation-errors {
    color: #cd0d2e;
    border-color: #cd0d2e;
  }
  span.wpcf7-not-valid-tip {
    color: #cd0d2e;
    font-size: 85%;
    font-weight: bold;
    line-height: 1.8em;
  }
  div.wpcf7-validation-missing {
    color: #e8a346;
    border-color: #e8a346;
  }
  div.wpcf7-mail-sent-ok,
  .wpcf7 form.sent .wpcf7-response-output {
    color: #000;
    border: none;
    padding-top: 72px;
    padding-bottom: 72px;
    font-size: 139%;
    background-color: rgba(255,255,255,.5);
  }

  /* --- error --- */
  .mw_wp_form .error {
    position: relative;
    margin-top: 8px;
    line-height: 1em;
    padding-left: 18px;
    color: rgb(183,0,0) !important;
    font-size: 80%;
    font-weight: 500;
  }
  .mw_wp_form .error::before {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    content: '!';
    width: 13px;
    line-height: 13px;
    margin-right: 4px;
    border-radius: 100%;
    background-color: rgb(183,0,0);
    color: #fff;
    text-align: center;
    transform: translateY(-50%);
    font-size: 85%;
  }
  .mw_wp_form tr.is-error td input {
    background-color: rgba(183,0,0,.1);
    border-color: rgba(183,0,0,.5);
  }

  /* --- hide --- */
  div.wpcf7 .ajax-loader,
  #cf_form form.sent p,
  #cf_form form.sent table,
  #cf_form form.sent .acceptance,
  #cf_form form.sent div.wpcf7-mail-sent-ok:nth-child(2),
  #cf_form form.sent div.wpcf7-response-output:nth-child(2),
  #cf_form form.sent .cf_form--btns {
    display: none !important;
  }
  
  @media only screen and (max-width: 768px) {
    #cf_form th,
    #cf_form td {
      display: block;
      width: auto;
      padding-left: 0;
      padding-right: 0;
    }
    #cf_form th {
      width: 100%;
      border-bottom:none;
      padding-top: 12px;
      padding-bottom: 0;
      white-space: normal;
      font-weight: bold;
    }
    #cf_form td {
      padding-top: 0;
      padding-bottom: 24px;
      padding-left: 0;
    }
    #cf_form .cf_rc .wpcf7-list-item {
      display: block;
    }
    #cf_form table .cf_zip input[type="text"] {
      width: calc(100% - 23px);
      margin-right: 0;
    }
    .cf_form--btns {
      padding-top: 24px;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .cf_form--btns input {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
      background-size: contain;
      background-position: center;
    }
    .cf_form--btns input:not(:last-child) {
      margin-bottom: 8px;
    }
  }


/* ##############################################################################

    PLUGINS

############################################################################## */

/* slick
*************************************************** */
  button.slick-prev,
  button.slick-next {
    position: absolute;
    width: 64px;
    height: 146px;
    top: 50%;
    z-index: 1;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/common/arrow-slide.svg);
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    cursor: pointer;
  }
  button.slick-prev {
    right: calc(50% + 576px);
    transform: rotate(180deg) translateY(73px);
  }
  button.slick-next {
    left: calc(50% + 576px);
    transform: translateY(-73px);
  }
  @media screen and (min-width: 769px) {
    button.slick-prev,
    button.slick-next {
      transition: .6s cubic-bezier(.07, .51, .12, 1);
    }
    button.slick-prev:hover {
      transform: rotate(180deg) translate(8px,73px);
    }
    button.slick-next:hover {
      transform: translate(8px,-73px);
    }
  }
  @media screen and (max-width: 1400px) {
    button.slick-prev {
      right: calc(50% + 496px);
    }
    button.slick-next {
      left: calc(50% + 496px);
    }
  }
  @media screen and (max-width: 1060px) {
    button.slick-prev {
      right: calc(50% + 296px);
    }
    button.slick-next {
      left: calc(50% + 296px);
    }
  }
  @media screen and (max-width: 768px) {
    button.slick-prev,
    button.slick-next {
      background-size: 24px;
      background-position: center;
      top: 28%;
    }
    button.slick-prev {
      right: calc(50% + 136px);
    }
    button.slick-next {
      left: calc(50% + 136px);
    }
  }


/* ======================================================================================

    MARUTTO

====================================================================================== */

/* common
*************************************************** */
  .marutto {
    overflow: hidden;
  }
  .marutto p {
    line-height: 1.8em;
  }

  /* --- deco --- */
  .skew {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -10;
    width: 120%;
    transform: skewY(-8deg) translateX(-50%);
    background-color: #f3eb3b;
  }
  .skew-flip {
    transform: skewY(8deg) translateX(-50%);
  }
  .circle {
    border-radius: 100%;
    position: absolute;
  }
  .circle-blk {
    background-color: #000;
    opacity: .1;
  }
  .circle-yel {
    background-color: #f3eb3b;
    opacity: .5;
  }
  .circle-dot-blk {
    background-image: url(../images/common/dot-blk.png);
  }
  .circle-dot-yel {
    background-image: url(../images/common/dot-yel.png);
  }

  /* --- ttl --- */
  .page-marutto .page_ttl {
    padding-bottom: 80px;
  }
  .page-marutto .page_ttl .skew {
    top: 88px;
    bottom: 260px;
  }
  .marutto .sect_ttl {
    transform: rotate(-8deg) translateX(-80px);
    letter-spacing: .04em;
    font-size: 400%;
  }

  /* --- fnt --- */
  .fnt-futura {
    font-family: futura-pt-bold, sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  .fnt-a1m {
    font-family: 'A1 Gothic M';
  }
  .fnt-a1b {
    font-family: 'A1 Gothic B';
  }
  .clr-grn {
    color: #4bafa2;
  }

  /* --- bg --- */
  .marutto .bg-wht {
    position: relative;
    z-index: -1;
    background-color: #fff;
    border-radius: 5px;
  }

  @media screen and (min-width: 1801px) {
    .page-marutto .page_ttl .skew {
      top: 48px;
      bottom: 280px;
    }
  }
  @media screen and (min-width: 769px) {
    /* --- sect --- */
    .marutto section > .inner {
      padding-left: 80px;
    }
  }
  @media screen and (max-width: 1800px) {
    .page-marutto .page_ttl .skew {
      top: 64px;
      bottom: 270px;
    }
  }
  @media screen and (max-width: 1600px) {
    .page-marutto .page_ttl .skew {
      top: 74px;
      bottom: 256px;
    }
  }
  @media screen and (max-width: 1400px) {
    .page-marutto .page_ttl .skew {
      top: 96px;
      bottom: 232px;
    }
  }
  @media screen and (max-width: 1200px) {
    .page-marutto .page_ttl .skew {
      top: 112px;
      bottom: 220px;
    }
  }
  @media screen and (max-width: 1024px) {
    .page-marutto .page_ttl .skew {
      top: 124px;
      bottom: 210px;
    }
  }
  @media screen and (max-width: 768px) {
    .page-marutto .page_ttl {
      padding-bottom: 32px;
    }
    .page-marutto .page_ttl .skew {
      top: 58px;
      bottom: 140px;
    }
    .circle {
      background-size: 5px;
    }
  }
  @media screen and (max-width: 425px) {
    .page-marutto .page_ttl .skew {
      top: 76px;
      bottom: 92px;
    }
  }
  @media screen and (max-width: 375px) {
    .page-marutto .page_ttl .skew {
      bottom: 84px;
    }
  }
  @media screen and (max-width: 320px) {
    .page-marutto .page_ttl .skew {
      top: 80px;
      bottom: 72px;
    }
  }

/* rcmd
*************************************************** */
  .rcmd .sect_ttl {
    font-size: 308%;
  }
  .rcmd .sect_ttl .fnt-lg {
    font-size: 150%;
  }
  .rcmd--item--ttl {
    padding-bottom: 20px;
    border-bottom: 3px solid #9d9d9d;
    font-size: 200%;
    line-height: 1.3em;
  }
  .rcmd--item--ttl img {
    margin-right: 16px;
  }
  .rcmd .skew {
    top: 380px;
    height: 660px;
  }
  .rcmd .circle1 {
    bottom: 74%;
    left: 96%;
    width: 194px;
    height: 194px;
  }
  @media screen and (min-width: 1201px) {
    .rcmd--list {
      padding-top: 48px;
      padding-bottom: 48px;
      padding-left: 80px;
      padding-right: 80px;
    }
    .rcmd--item {
      width: calc(50% - 20px);
    }
    .rcmd--item:nth-child(3) {
      margin-bottom: 0;
    }
    .rcmd--item--ttl {
      min-height: 90px;
    }
  }
  @media screen and (max-width: 1200px) {
    .rcmd--list.bg-wht {
      padding-top: 32px;
      padding-bottom: 32px;
    }
    .flx-smpc-blc>*.rcmd--item:not(:last-child) {
      margin-bottom: 24px;
    }
  }
  @media screen and (max-width: 768px) {
    .marutto .sect_ttl {
      font-size: 180%;
      transform: rotate(-4deg) translateX(-8px);
      margin-bottom: 8px;
    }
    .rcmd .sect_ttl {
      margin-top: 16px;
    }
    .rcmd--list.bg-wht {
      padding-top: 24px;
      padding-bottom: 24px;
    }
    .rcmd--item--ttl {
      font-size: 123%;
      padding-bottom: 12px;
    }
    .rcmd--item--ttl img {
      margin-right: 12px;
      max-width: 40px;
    }
    .rcmd--item p {
      font-size: 100%;
    }
    .rcmd .circle1 {
      bottom: 86%;
      left: 91%;
      width: 97px;
      height: 97px;
    }
  }

/* arkr
*************************************************** */
  .arkr {
    z-index: 1;
  }
  .arkr .sect_ttl {
    font-size: 523%;
    margin-top: -120px;
  }
  .arkr .sect_ttl .fnt-xs {
    font-size: 26.5%;
  }
  .arkr--item--ttl {
    height: 64px;
    font-size: 185%;
    line-height: 1.4em;
  }
  .arkr .skew {
    top: 54%;
    height: 340px;
  }
  .arkr .circle {
    z-index: -10;
  }
  .arkr .circle1 {
    bottom: 80%;
    right: 96%;
    width: 310px;
    height: 310px;
  }
  .arkr .circle2 {
    bottom: 70%;
    right: 86%;
    width: 226px;
    height: 226px;
  }
  .arkr .circle3 {
    left: 97%;
    top: 45%;
    width: 150px;
    height: 150px;
  }
  .arkr .circle4 {
    left: 102%;
    top: 53%;
    width: 208px;
    height: 208px;
    opacity: .5;
  }
  @media screen and (min-width: 1201px) {
    .arkr--item {
      width: calc(100%/3 - 16px);
      margin-bottom: 24px;
    }
    .arkr--item:nth-child(n+4) {
      margin-bottom: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .arkr .sect_ttl {
      font-size: 270%;
      margin-top: -40px;
      letter-spacing: 0em;
    }
    .arkr .sect_ttl .fnt-xs {
      font-size: 46%;
    }
    .arkr--item {
      padding-left: 24px;
      padding-right: 24px;
    }
    .arkr--item--ttl {
      font-size: 139%;
    }
    .arkr--item--img img {
      max-height: 65px;
    }
    .arkr--item p {
      line-height: 1.6em;
      font-size: 100%;
    }
    .arkr .circle1 {
      bottom: 78%;
      right: 78%;
      width: 155px;
      height: 155px;
    }
    .arkr .circle4 {
      left: 88%;
      top: 50%;
      width: 104px;
      height: 104px;
    }
  }
  @media screen and (max-width: 425px) {
    .arkr--item--ttl {
      height: auto;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .arkr--item {
      width: 100%;
      margin-right: 0 !important;
    }
  }

/* func
*************************************************** */
  .func {
    z-index: 1;
  }
  .func .sect_ttl {
    line-height: .8em;
    margin-top: -40px;
  }
  .func .sect_ttl .fnt-xs {
    font-size: 40%;
  }
  .func--bloc:not(:first-child) {
    margin-top: -16px;
  }
  .func--bloc_in:nth-child(2) {
    margin-top: 32px;
  }
  .func--bloc_in > * {
    max-width: 450px;
  }
  .func--bloc_page--ttl {
    position: relative;
    z-index: 1;
    background-color: #f3eb3b;
    display: table;
    line-height: 1em;
    font-size: 123%;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .func--bloc_page--ttl > span > span:nth-child(1) {
    margin-right: 4px;
  }
  .func--bloc_page img {
    margin-top: -14px;
    margin-left: 12px;
    width: calc(100% - 12px);
  }
  .func--ex {
    background-color: #efefef;
    border-radius: 5px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 12px;
    padding-bottom: 8px;
  }
  .func--ex h5 {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1em;
    font-size: 139%;
  }
  .func--ex_item {
    width: 30%;
    line-height: 1.8em;
  }
  .func--news_blog .func--bloc_page {
    width: 48%;
  }
  .func--bloc_page_list .func--bloc_page--ttl {
    width: 49%;
    margin-bottom: 2%;
  }
  .func--bloc_page_list .func--bloc_page--ttl>span {
    height: 40px;
  }
  .func--attn li::before {
    content: '※';
    position: absolute;
    top: -3px;
    left: 0;
  }
  .func--attn li {
    padding-left: 1.25em;
  }
  .func .price {
    position: absolute;
    right: -20px;
    bottom: 24px;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .func .price p {
    position: relative;
    left: -50%;
    transform: rotate(-8deg);
    background: #4caea2;
    width: 200%;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #fff;
    font-size: 265%;
  }
  .func .price p .fnt-futura {
    font-size: 175%;
  }
  .func .skew {
    height: 180px;
    top: 70%;
  }
  .func .circle1 {
    top: 20%;
    right: 100%;
    width: 256px;
    height: 256px;
  }
  .func .circle2 {
    top: 97%;
    right: 91%;
    width: 115px;
    height: 115px;
  }
  @media screen and (min-width: 1201px) {
    .func--cont {
      padding-top: 48px;
      padding-bottom: 48px;
      padding-left: 80px;
      padding-right: 80px;
    }
  }
  @media screen and (max-width: 1200px) {
    .func--cont {
      padding-top: 40px;
      padding-bottom: 160px;
    }
    .func--bloc:not(:last-child) {
      margin-bottom: 40px;
    }
    .func--bloc_in:nth-child(2) {
      margin-top: 8px;
    }
    .func--bloc_in > * {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      max-width: 100%;
    }
    .func--news_blog .func--bloc_page {
      width: 100%;
    }
    .func .price {
      width: 34em;
    }
  }
  @media screen and (max-width: 768px) {
    .func--cont {
      padding-bottom: 110px;
    }
    .func .sect_ttl .fnt-xs {
      display: inline-block;
      margin-top: 6px;
      font-size: 60%;
      letter-spacing: -.05em;
    }
    .func--ex {
      padding-left: 20px;
      padding-right: 20px;
      letter-spacing: 0em;
    }
    .func--ex_item {
      width: 48%;
    }
    .func .price {
      right: -12px;
      bottom: 0;
      padding-left: 16px;
      padding-right: 16px;
      width: 20em;
    }
    .func .price p {
      font-size: 145%;
    }
    .func--news_blog .func--bloc_page:not(:last-child) {
      margin-bottom: 24px;
    }
    .func--news_blog .func--bloc_page img {
      border: 1px solid #a0a0a0;
    }
    .func--bloc_page_list .func--bloc_page--ttl {
      width: 100%;
    }
    .func--attn {
      font-size: 93%;
    }
    .func--attn,
    .func--attn p {
      line-height: 1.6em;
    }
    .func--attn li:before {
      top: 0;
    }
    .func .circle1 {
      right: 97%;
      width: 123px;
      height: 123px;
    }
    .func .circle2 {
      top: 97.5%;
      right: 90%;
      width: 80px;
      height: 80px;
    }
  }

/* cost
*************************************************** */
  .cost .sect_ttl {
    display: table;
    line-height: .8em;
    text-align: right;
    margin-bottom: -24px;
  }
  .cost .sect_ttl .fnt-xs {
    display: inline-block;
    font-size: 46%;
    transform: translateX(24px);
  }
  .cost--bloc_ttl {
    font-size: 185%;
    display: table;
    margin-top: -48px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #f4eb3a;
    line-height: 1em;
  }
  .cost .price {
    color: #fff;
    background-color: #4bafa2;
    display: table;
    font-size: 169%;
    line-height: 1em;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    white-space: nowrap;
  }
  .cost--attn {
    opacity: .5;
  }
  .cost--bloc-server .price {
    margin-right: 24px;
  }
  .plan .price {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .plan .price .fnt-futura {
    font-size: 116%;
    margin-right: 4px;
  }
  .plan--bloc {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #fbfaf9;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-radius: 4px;
    width: 31.5%;
  }
  .plan--ttl {
    font-size: 185%;
    line-height: 1em;
  }
  .plan--ttl .fnt-futura {
    font-size: 200%;
  }
  .plan--limit {
    font-size: 154%;
    line-height: 1em;
  }
  .plan--limit .fnt-lg {
    font-size: 150%;
  }
  .plan--bloc-a {
    border-color: #f5a22e;
  }
  .plan--bloc-a .price {
    background-color: #f5a22e;
  }
  .plan--bloc-a .plan--limit {
    color: #f5a22e;
  }
  .plan--bloc-b {
    border-color: #f0854a;
  }
  .plan--bloc-b .price {
    background-color: #f0854a;
  }
  .plan--bloc-b .plan--limit {
    color: #f0854a;
  }
  .plan--bloc-c {
    border-color: #e95954;
  }
  .plan--bloc-c .price {
    background-color: #e95954;
  }
  .plan--bloc-c .plan--limit {
    color: #e95954;
  }
  .cost--bloc-option .cost--bloc_ttl {
    color: #fff;
    background-color: #afafaf;
  }
  .option--list {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
  }
  .option--disp {
    border-bottom: 3px solid #d7d7d7;
    padding-bottom: 6px;
  }
  .option--disp .fnt-futura {
    font-size: 150%;
  }
  .option--item .flx .option--disp {
    width: 48.5%;
  }
  .option--item:not(:last-child) {
    margin-bottom: 12px;
  }
  .option--item:last-child p {
    opacity: .5;
  }
  .cost .skew {
    top: 18%;
    height: 320px;
  }
  .cost .circle {
    width: 183px;
    height: 183px;
  }
  .cost .circle1 {
    left: 94%;
    bottom: 89%;
    z-index: -10;
  }
  .cost .circle2 {
    right: 103%;
    top: 28%;
  }
  .cost .circle3 {
    left: 103%;
    bottom: 24%;
    opacity: .5;
  }
  @media screen and (min-width: 769px) {
    .plan .price {
      min-width: 260px;
    }
  }
  @media screen and (max-width: 1200px) {
    .cost .sect_ttl {
      margin-bottom: 6px;
    }
    .plan--bloc {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
    .plan .price {
      width: auto;
      margin-left: auto;
      margin-right: auto;
    }
  }
  @media screen and (max-width: 768px) {
    .cost--bloc {
      margin-bottom: 40px;
    }
    .cost--bloc:nth-of-type(3) {
      margin-bottom: 12px;
    }
    .cost .sect_ttl {
      margin-bottom: 16px;
      margin-top: -16px;
    }
    .cost .price {
      font-size: 139%;
      padding-left: 16px;
      padding-right: 16px;
      white-space: nowrap;
    }
    .cost--bloc-server .price {
      text-align: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 12px;
      padding-top: 12px;
      padding-bottom: 12px;
      margin-top: 8px;
    }
    .cost--bloc_ttl {
      font-size: 140%;
      margin-top: -36px;
    }
    .plan--bloc {
      width: 100%;
      padding-left: 24px;
      padding-right: 24px;
    }
    .plan .price {
      width: 100%;
      min-width: 100%;
    }
    .plan--ttl .fnt-futura {
      font-size: 160%;
    }
    .option--item .flx .option--disp {
      width: 100%;
    }
    .option--item .flx .option--disp:not(:last-child) {
      margin-bottom: 12px;
    }
    .option--disp {
      padding-bottom: 8px;
      font-size: 93%;
      text-align: center;
    }
    .option--disp p {
      line-height: 1.4em;
    }
    .option--disp p:first-child {
      opacity: .4;
      margin-bottom: 4px;
    }
    .option--item:last-child .option--disp p:last-child {
      font-size: 129%;
    }
    .cost .circle {
      width: 120px;
      height: 120px;
    }
    .cost .circle2 {
      right: 95%;
      top: 37%;
    }
  }

/* flow
*************************************************** */
  .flow {
    padding-bottom: 120px;
  }
  .flow .sect_ttl {
    margin-top: -120px;
  }
  .flow--item {
    line-height: 1.4em;
    font-size: 169%;
    background-color: #f3eb3b;
    height: 96px;
    padding-left: 24px;
    padding-right: 24px;
    min-width: 270px;
  }
  .flow--item::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    transform: rotate(45deg) translateY(-50%);
    background-color: #f3eb3b;
    top: 50%;
    right: -3px;
  }
  .flow--item.bf_none::before {
    content: none;
  }
  .flow--item:not(:last-child) {
    margin-right: 40px;
  }
  .flow--item .fnt-futura {
    font-size: 200%;
    color: #fff;
    margin-right: 16px;
  }
  .flow--item-time {
    background-color: #4FAEA2;
    color: #fff;
    height: 86px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .flow--item-time .time {
    border: 3px solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 24px;
  }
  .flow .skew {
    top: 200px;
    height: 340px;
    background-color: #fff;
  }
  .flow .circle1 {
    bottom: 70%;
    left: 100%;
    width: 80px;
    height: 80px;
  }
  .flow .circle2 {
    bottom: 54%;
    left: 103%;
    width: 115px;
    height: 115px;
  }
  .flow .circle3 {
    right: 90%;
    top: 60%;
    width: 260px;
    height: 260px;
  }
  @media screen and (max-width: 1200px) {
    .flow {
      padding-bottom: 64px;
    }
    .flow .sect_ttl {
      position: relative;
      z-index: 1;
      margin-top: -40px;
      margin-bottom: 16px;
    }
    .flow--item {
      height: 80px;
      font-size: 123%;
      letter-spacing: 0em;
      padding-left: 16px;
      padding-right: 16px;
    }
    .flow--item-time {
      padding-left: 16px;
      padding-right: 16px;
    }
    .flow--item-time .time {
      margin-left: 12px;
      padding-left: 8px;
      padding-right: 8px;
    }
    .flow--item .fnt-futura {
      margin-right: 12px;
    }
    .flow--item:not(:last-child) {
      margin-right: 0;
    }
    .flow--item-time {
      width: 100%;
    }
    .flow--item:before {
      right: auto;
      right: initial;
      left: 8px;
      top: 93%;
    }
    .flow .circle1 {
      bottom: 65%;
      left: 92%;
    }
    .flow .circle2 {
      left: 101%;
    }
    .flow .circle3 {
      right: 95%;
      top: 60%;
      width: 130px;
      height: 130px;
    }
  }