@charset "utf-8";
/* =========================================================
   Base
   ========================================================= */
:root {
  --text-color: #4C4948;
  --bc-d_yel: #FFE027;
  --bc-l_yel: #FFFFDB;
  --bc-d_grn: #00A9B4;
  --bc-l_grn: #DBF3F2;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
a { color: var(--bc-d_grn); }
em { font-style: normal; }
h2, h3, h4 { margin: 0 0 .5em; line-height: 1.4; font-weight: 700; }
button:hover { opacity: .7; }
.inblock { display: inline-block; }
.mb0 { margin-bottom: 0 !important; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* anchor offset for the fixed header */
#Web-Design, #Graphic-Design, #Video-Production, #EC-Agency, #Works, #FAQ {
  position: relative;
  padding-top: 100px;
}

.bc-contents-width {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.bc-con-space { height: 50px; }

.gb-y-ttl {
  display: inline;
  padding: 5px;
  letter-spacing: -.02em;
  line-height: 1.5;
  background: linear-gradient(transparent 0%, var(--bc-d_yel) 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-msg p {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--bc-d_grn);
  font-family: Roboto, "Noto Sans JP", sans-serif;
}
.btn-msg p::before,
.btn-msg p::after {
  width: 1px;
  height: 24px;
  background: var(--bc-d_grn);
  content: '';
}
.btn-msg p::before { transform: rotate(-45deg); margin-right: 10px; }
.btn-msg p::after  { transform: rotate(45deg);  margin-left: 10px; }
.btn-msg p em { font-size: 22px; }

.bc-cv-btn,
.bc-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 48px;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity .2s;
}
.bc-cv-btn {
  background: var(--bc-d_grn);
  border: 3px solid var(--bc-d_grn);
  color: #fff;
}
.bc-link-btn {
  background: #fff;
  border: 3px solid var(--bc-d_grn);
  color: var(--bc-d_grn);
}
.bc-cv-btn .ico,
.bc-link-btn .ico { width: 1.3em; height: 1.3em; flex: none; }
.ico { display: inline-block; fill: currentColor; }

.cv-area {
  text-align: center;
  margin-bottom: 0;
  padding: 50px 0 80px;
}
.cv-area h4 {
  background: none;
  font-size: 20px;
  margin-bottom: 1.5em;
}
.cv-block {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 50px;
}
.cv-block__btn.bc-cv { order: 2; }
.cv-block__btn.bc-link { order: 1; }

/* =========================================================
   Header
   ========================================================= */
.bc-header {
  display: flex;
  align-items: center;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  box-shadow: 0 4px 4px 0 #00000026;
  z-index: 9999;
}
.bc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}
.bc-logo { width: 250px; }
.bc-logo figure { width: 100%; max-width: 250px; }
.bc-logo img { display: block; width: 100%; }

.bc-nav-wrapper { display: flex; justify-content: flex-end; }
.bc-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc-nav > li { margin-left: 1rem; overflow: hidden; }
.bc-nav > li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 700;
}
.bc-nav > li a:hover { opacity: .7; }

.bc-nav-button-container {
  display: none;
  position: relative;
  height: 30px;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#bc-nav-toggle { display: none; }
.bc-nav-button,
.bc-nav-button::before,
.bc-nav-button::after {
  display: block;
  background-color: var(--text-color);
  position: absolute;
  height: 3px;
  width: 25px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}
.bc-nav-button::before { content: ''; margin-top: -8px; }
.bc-nav-button::after  { content: ''; margin-top: 8px; }
#bc-nav-toggle:checked + .bc-nav-button-container .bc-nav-button::before {
  margin-top: 0;
  transform: rotate(405deg);
}
#bc-nav-toggle:checked + .bc-nav-button-container .bc-nav-button {
  background: rgba(255,255,255,0);
}
#bc-nav-toggle:checked + .bc-nav-button-container .bc-nav-button::after {
  margin-top: 0;
  transform: rotate(-405deg);
}

.bc-header-btn .btn-msg p { display: none; }
.bc-header-btn a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 17px;
  border-radius: 30px;
  background: var(--bc-d_grn);
  color: #fff !important;
  cursor: pointer;
  white-space: nowrap;
}
.bc-header-btn a .ico { width: 1.3em; height: 1.3em; flex: none; }
.bc-header-btn a:hover { opacity: .7; }

/* =========================================================
   Hero
   ========================================================= */
.bc-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  padding: 100px 0 80px;
  color: var(--text-color);
}
.bc-main__txt { width: 450px; }
.bc-main__txt h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 38px;
  border: none;
  padding: 0;
  margin: 0 0 10px;
}
.bc-main__msg p {
  font-weight: 700;
  font-size: 48px;
  line-height: 70px;
  margin: 0 0 .2em;
}
.bc-main__msg p em {
  background: var(--bc-d_yel);
  padding: 0 5px 0 10px;
  margin-right: 5px;
}
.bc-main__sup { margin-top: 1.5em; }
.bc-main__sup p {
  font-weight: 700;
  font-size: 18px;
  line-height: 31px;
}
.bc-main__sup p em {
  display: inline-block;
  font-size: 23px;
  color: var(--bc-d_grn);
  letter-spacing: -.02em;
}
.bc-main__img { width: calc(100% - 480px); }
.bc-main__img ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bc-main__img li {
  width: calc(100% / 2 - 1em);
  position: relative;
}
.bc-main__img li img { width: 100%; }
.bc-main__img li p {
  display: inline-block;
  background: #F9F9F9;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  line-height: 31px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 8px;
}
.bc-main__btn {
  position: absolute;
  width: 450px;
  text-align: center;
  bottom: 90px;
}
.bc-main__btn .bc-cv-btn { margin: 0 auto; }

/* =========================================================
   con1 : Worries
   ========================================================= */
.con1 {
  background: #EFEFEF;
  text-align: center;
  margin-bottom: 0;
  color: var(--text-color);
}
.con1 h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  text-align: center;
  margin: 2em auto;
  padding-top: 2em;
}
.worries-box {
  display: flex;
  gap: 20px;
  padding-bottom: 5em;
}
.worries-item {
  background: #fff;
  width: calc((100% - 40px) / 3);
  padding: 50px 10px;
  border-radius: 20px;
}
.worries-item img { width: 100%; max-width: 200px; }
.worries-item p { margin: 0; padding-top: 2em; }

/* =========================================================
   con2 : Solution
   ========================================================= */
.con2 {
  background: #fff;
  text-align: center;
  padding-top: 8vw;
  position: relative;
  color: var(--text-color);
}
.con2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  border-right: calc(8vw - 10px) solid transparent;
  border-left: calc(8vw - 10px) solid transparent;
  border-top: 5vw solid #EFEFEF;
}
.con2 h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  margin: 0 auto 2em;
}
.solution-txt {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5em;
}
.solution-txt img { width: 80px; }
.solution-txt p {
  font-weight: 700;
  font-size: 22px;
  line-height: 38px;
  text-align: center;
  margin-bottom: 0;
}
.solution-txt p em { color: var(--bc-d_grn); }

/* =========================================================
   icon boxes
   ========================================================= */
.icon-box {
  display: flex;
  gap: 20px;
  padding-bottom: 5em;
  flex-wrap: wrap;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  width: calc((100% - 60px) / 4);
  gap: 20px;
  padding: 50px 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
}
/*3カラムの場合*/
.col3 > .icon-item {width: calc((100% - 60px) / 3);}
.icon-item figure { width: 100%; max-width: 82px; padding-bottom: 20px; }
.icon-item h3 {
  border: none;
  font-weight: 700;
  font-size: 22px;
  text-align: left;
  margin: 0 0 10px;
  width: 100%;
}
.icon-item ul,
.icon-item li,
.icon-item p { text-align: left; }
.icon-item ul { margin: 0; width: 100%; }
.icon-item p { width: 100%; margin: 0; }
.icon-item .num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 36px;
  line-height: 28px;
  text-align: center;
}

.step-h3 { display: flex; flex-direction: column; width: 100%; }
.step-h3 h3 { margin-left: 0; }
.icon-item-step {
  display: inline-block;
  align-self: flex-start;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  text-align: center;
  background: var(--bc-d_yel);
  margin: 0 0 10px;
  padding: 0 5px;
  width: auto!important;
}

/* =========================================================
   Section headings
   ========================================================= */
.bc-h2 { text-align: left; }
.bc-h2 p {
  font-weight: 700;
  font-size: 22px;
  line-height: 38px;
  margin: 0 0 3px;
}
.bc-h2 h2 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 80px;
  line-height: 1.1;
  text-align: left;
  margin: 0 0 .5em;
  padding-top: .1em;
}

.con3, .con5 { background: var(--bc-l_grn); }
.con4, .con6 { background: var(--bc-l_yel); }
.con3, .con4, .con5, .con6 {
  text-align: center;
  margin-bottom: 0;
  padding: 60px 0;
  color: var(--text-color);
}
.con3 > .bc-h2, .con4 > .bc-h2,
.con5 > .bc-h2, .con6 > .bc-h2 {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin: 0 auto;
}

/* =========================================================
   num boxes
   ========================================================= */
.num-wrapper { background: #fff; padding: 60px; }
.num-h3 p {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 5px;
  font-family: Roboto, "Noto Sans JP", sans-serif;
}
.num-h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed #4C4948;
}
.num-h3 p::before,
.num-h3 p::after {
  width: 1px;
  height: 24px;
  background: #4C4948;
  content: '';
}
.num-h3 p::before { transform: rotate(-45deg); margin-right: 10px; }
.num-h3 p::after  { transform: rotate(45deg);  margin-left: 10px; }
.num-h3 h3 {
  border-bottom: none;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  text-align: center;
  margin: 0 0 50px;
}
.num-h3 h3 em { font-size: 60px; }

.num-box { display: flex; gap: 30px; flex-wrap: wrap; }
.num-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 50px 35px;
  border-radius: 20px;
  border: 1px solid #CCCCCC;
  position: relative;
}
.num-item.num3 { width: calc((100% - 60px) / 3); }
.num-item.num4 { width: calc((100% - 90px) / 4); }
.num-item .num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -16px;
  left: -16px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bc-d_yel);
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  margin: 0;
}
.num-item figure {
  width: 100%;
  max-width: 100px;
  padding-bottom: 20px;
  margin-top: 0;
}
.num-item h3 {
  border: none;
  font-weight: 700;
  font-size: 22px;
  text-align: left;
  margin: 0 0 10px;
  width: 100%;
}
.num-item li,
.num-item p { width: 100%; text-align: left; margin-top: 0; }
.num-item p:not(.num) { margin-bottom: 0; }

/* =========================================================
   Slider (rebuilt / standalone)
   ========================================================= */
.bc-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 40px;
}
.bc-slider__viewport { overflow: hidden; }
.bc-slider__track {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.bc-slider__item {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bc-slider__item figure {
  width: 100%;
  text-align: left;
}
.bc-slider__item img {
  width: 100%;
  height: auto;
  display: block;
}
.bc-slider__item a { display: block; }
.bc-slider figcaption {
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  padding-top: 8px;
}
.bc-slider figcaption a { color: inherit; }

.bc-slider__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.bc-slider__bullet {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  border: none;
  padding: 0;
  background: #fff;
  opacity: .6;
  cursor: pointer;
  transition: opacity .2s, background .2s;
}
.bc-slider__bullet.is-active {
  background: var(--bc-d_grn);
  opacity: 1;
}

/* =========================================================
   Shopify product slider
   ========================================================= */
.shopify-slider-wrapper {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin: 60px auto 0;
  position: relative;
  overflow: hidden;
}
.shopify-slider {
  display: flex;
  align-items: stretch;
  will-change: transform;
}
.product-item {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  padding: 10px;
  display: flex;
}
.product-item a {
  text-decoration: none;
  color: var(--text-color);
  display: block;
  width: 100%;
}
.product-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.product-item p {
  padding-top: 1em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  border-bottom: none;
  margin: 0;
}
.product-item a:hover { opacity: .7; }
.shopify-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.shopify-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
}
.shopify-dots button.is-active { background: #4C4948; }

/* =========================================================
   con7 : Reasons
   ========================================================= */
.con7 {
  background: var(--bc-d_yel);
  text-align: center;
  margin-bottom: 0;
  padding: 60px 0 30px;
  color: var(--text-color);
}
.reason-txt {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5em;
}
.reason-txt img { width: 130px; }
.reason-txt p {
  width: calc(100% - (130px + 2em));
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 0;
  letter-spacing: initial;
}
.reason-txt p span.l1 {
  font-size: 36px;
  display: inline-block;
  margin-bottom: .5em;
}
.reason-txt p span.l2 { font-size: 22px; }
.reason-txt p em.big-num { font-size: 60px; color: var(--text-color); }
.reason-txt p em:not(.big-num) {
  background: #fff;
  padding: 5px 8px;
  color: var(--bc-d_grn);
  line-height: 150%;
}
.con7 .icon-item {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px;
}
.con7 .icon-item .num { width: 50px; }
.con7 .icon-item h3 { width: calc(100% - 70px); }
.con7 .icon-item p:not(.num) { width: 100%; margin-top: 0; }

/* =========================================================
   con8 : Process
   ========================================================= */
.con8 {
  text-align: center;
  margin-bottom: 0;
  padding: 60px 0;
  color: var(--text-color);
}
.bc-process .icon-item { position: relative; }
.bc-process .icon-item:not(:last-child)::after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--bc-d_yel);
  width: 24px;
  left: 100%;
  top: 35%;
}

/* =========================================================
   con9 : Works
   ========================================================= */
.con9 {
  background: var(--bc-l_yel);
  text-align: center;
  margin-bottom: 0;
  padding: 60px 0;
  color: var(--text-color);
}
.con9 > .bc-h2,
.con9 > h3,
.con9 > p {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.con9 p { text-align: left; }
.con9 h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  border-bottom: none;
  text-align: left;
  margin-bottom: 10px;
}
.work-box { display: flex; gap: 30px; }
.work-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc((100% - 60px) / 3);
  padding: 60px 35px 50px;
  border: 1px solid #ccc;
  background: #fff;
  position: relative;
}
.design .work-item { border-radius: 0 20px 20px 20px; }
.other .work-item { border-radius: 20px; }
.work-item .ci,
.work-item .vi,
.work-item .pi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 45px;
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  clip-path: polygon(0 0.5%, 85.9% 0.5%, 85.9% 0, 100% 50%, 85.9% 100%, 85.9% 99.5%, 0 99.5%);
  color: #fff;
}
.work-item .ci { background: var(--bc-d_grn); }
.work-item .vi { background: #00CAAC; }
.work-item .pi { background: #02DC84; }
.work-item figure {
  width: 98%;
  max-width: 300px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.work-item h3 {
  border: none;
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  padding: 0 8px;
  display: inline;
  text-align: center;
}
.work-item p { margin: 0; text-align: left; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-area {
  text-align: left;
  margin-bottom: 0;
  padding: 80px 0 100px;
  color: var(--text-color);
}
.faq-item {
  border-radius: 20px;
  border: 1px solid #CCCCCC;
  padding: 20px;
  margin-bottom: 25px;
}
.faq-item dl { margin: 0; }
.vk_faq_title {
  position: relative;
  padding: .8rem .8rem .8rem 3rem;
  font-size: 16px;
  border-bottom: none;
  cursor: pointer;
  margin: 0;
}
.vk_faq_title::before {
  content: "Q.";
  position: absolute;
  left: .8rem;
  top: .8rem;
  color: #4C4948;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
}
.vk_faq_title p {
  position: relative;
  padding-right: 2em;
  margin: 0;
  font-weight: 700;
}
.vk_faq_title p::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  transition: all .3s ease;
  color: var(--bc-d_yel);
}
.vk_faq_title.open p::after { content: "－"; }
.vk_faq_content {
  display: none;
  margin: 0;
  padding: 0 .8rem .8rem 3rem;
}
.vk_faq_content.open { display: block; }
.vk_faq_content p { margin: 0; }
.vk_faq_content a {
  background: var(--bc-d_yel);
  padding: 5px 8px;
  color: var(--text-color);
  text-decoration: none;
}

/* =========================================================
   Contact
   ========================================================= */
.contsct-area {
  background: var(--bc-d_yel);
  text-align: center;
  margin-bottom: 0;
  padding: 80px 0 100px;
  overflow: hidden;
  position: relative;
}
.contsct-area img {
  width: 280px;
  position: absolute;
  left: 60%;
  bottom: -130px;
}
.contsct-area h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  text-align: center;
  border-bottom: none;
  padding: 0;
}
.contsct-area p.contsct-txt {
  font-weight: 700;
  font-size: 22px;
  line-height: 38px;
  text-align: center;
  margin-bottom: 50px;
}
.contsct-area p.contsct-txt span {
  display: inline-block;
  position: relative;
  padding: 0 .1em .2em;
  color: #333333;
}
.contsct-area p.contsct-txt span::before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--bc-d_grn);
  content: '';
}
.contsct-txt br { display: none; }

/* =========================================================
   Other services
   ========================================================= */
.other-area {
  background: #092237;
  margin-bottom: 0;
  padding: 100px 0 60px;
  color: #fff;
}
.other-area > .bc-h2,
.other-box {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin: 0 auto;
}
.other-area h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  border-bottom: none;
  text-align: left;
  margin-bottom: 10px;
}
.other-box {
  display: flex;
  gap: 7%;
  align-items: center;
}
.other-box-img { width: 40%; }
.other-box-txt { width: 53%; }
.vk_button_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.5em;
  padding: 14px 32px;
  border-radius: 100px;
  background: var(--bc-d_yel);
  color: #000 !important;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}
.vk_button_link:hover { opacity: .7; }
.vk_button_link .ico { width: 1.3em; height: 1.3em; flex: none; }

/* =========================================================
   Banners / footer
   ========================================================= */
.banner-area {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 32px);
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  padding: 50px 0;
  gap: 24px;
  justify-content: center;
}
.banner-area img { width: 100%; max-width: 320px; }
.banner-area a:hover img { opacity: .7; }

.bc-footer-custom {
  padding: 48px 24px 40px;
  background: #FFF;
}
.bc-footer-custom__inner { max-width: 1180px; margin: 0 auto; }
.bc-footer-custom__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #ccc;
}
.bc-footer-custom__logo img { width: 170px; height: auto; display: block; }
.bc-footer-custom__company {
  font-size: 14px;
  color: #4C4948;
  text-decoration: none;
}
.bc-footer-custom__copyright {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: #4C4948;
}

/* =========================================================
   Media queries
   ========================================================= */
@media screen and (max-width: 1139px) {
  .bc-main { padding: 100px 0 50px; }
  .bc-main__btn {
    position: relative;
    width: 100%;
    text-align: center;
    bottom: 0;
    margin-top: 20px;
  }
  .bc-nav-button-container { display: flex; }
  .bc-nav {
    position: absolute;
    top: 80px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #fff;
  }
  #bc-nav-toggle ~ .bc-nav li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #bc-nav-toggle:checked ~ .bc-nav { height: 100vh; padding-top: 50px; }
  #bc-nav-toggle:checked ~ .bc-nav li {
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
  }
  #bc-nav-toggle:checked ~ .bc-nav li a {
    width: 95%;
    border-bottom: 1px solid #ccc;
    line-height: 49px;
  }
  #bc-nav-toggle:checked ~ .bc-nav li.bc-header-btn {
    flex-direction: column;
    height: 180px;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  #bc-nav-toggle:checked ~ .bc-nav li.bc-header-btn .btn-msg p { display: flex; }
  #bc-nav-toggle:checked ~ .bc-nav li.bc-header-btn a {
    width: 220px;
    padding: 20px;
    line-height: 16px;
    justify-content: center;
    border-bottom: none;
  }
  .num-wrapper { padding: 60px 10px; }
  .num-box { margin: 0; }
}

@media (max-width: 991px) {
  .bc-h2, .bc-h2 p, .bc-h2 h2,
  .num-h3, .num-h3 h3, .num-box,
  .con9 h3, .con9 p, .work-box {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .con3 > .bc-h2, .con4 > .bc-h2,
  .con5 > .bc-h2, .con6 > .bc-h2,
  .con9 > .bc-h2, .other-area > .bc-h2 { width: 100%; }
  .bc-slider__item { flex-basis: 33.3333%; width: 33.3333%; max-width: 33.3333%; padding: 0 15px; }
  .product-item { flex-basis: 33.3333%; width: 33.3333%; max-width: 33.3333%; }
  .num-item { padding: 35px 20px; }
  .bc-main__txt {
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .bc-main__msg p { font-size: 36px; line-height: 50px; }
  .bc-main__sup p { font-size: 16px; }
  .bc-main__sup p em { font-size: 22px; }
  .bc-main__img { width: calc(100% - 350px); }
  .icon-box, .num-box { gap: 2em; }
  .icon-item { width: calc((100% - 6em) / 4); }
  /*3カラムの場合*/
  .col3 > .icon-item {width: calc((100% - 4em) / 3);}
  .num-item.num3 { width: calc((100% - 4em) / 3); }
  .num-item.num4 { width: calc(100% / 2 - 1em); padding: 30px 10px; }
  .icon-item h3 { font-size: 20px; }
  .icon-item li, .icon-item p { font-size: 14px; }
  .reason-txt img { width: 100px; }
  .reason-txt p { width: calc(100% - (100px + 2em)); }
  .icon-box.bc-process, .work-box {
    flex-direction: column;
    align-items: center;
  }
  .icon-box.bc-process .icon-item { width: 100%; max-width: 600px; }
  .bc-process .icon-item:not(:last-child)::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 100%;
  }
  .work-item { width: 100%; max-width: 480px; padding: 20px 35px 35px; }
  .work-item .ci, .work-item .vi, .work-item .pi {
    width: 45px;
    height: 55%;
    clip-path: polygon(0 0, 0 90%, 50% 100%, 100% 90%, 100% 0, 50% 0);
  }
  .work-item figure { width: 95%; }
  .contsct-area { padding: 80px 0; }
  .contsct-area img {
    width: 80px;
    position: relative;
    left: auto;
    bottom: auto;
    margin-bottom: 1em;
  }
  .other-box {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 40px;
  }
  .other-box-img, .other-box-txt { width: 100%; margin: 0 auto; }
  .other-box-txt { width: calc(100% - 32px); max-width: 600px; }
  .other-box-txt .vk_button { text-align: center; }
}

@media (max-width: 781px) {
  .cv-block { flex-direction: column; align-items: center; gap: 24px; }
  .bc-main { justify-content: center; }
  .bc-main__txt, .bc-main__img { width: 100%; max-width: 600px; }
  .bc-main__img { margin-top: 2em; }
  .bc-main__img ul { gap: 1em; }
  .bc-main__img li { width: calc(100% / 2 - .5em); }
  .bc-main__btn .bc-cv-btn { font-size: 16px; padding: 12px 24px; }
  .cv-block__btn.bc-cv { order: 1; }
  .cv-block__btn.bc-link { order: 2; }
  .bc-cv-btn, .bc-link-btn { font-size: 16px; padding: 20px 36px; }
  .icon-item { width: calc(100% / 2 - 1em); padding: 30px 10px; }
  .con7 .icon-item { width: 100%; max-width: 600px; margin: 0 auto; }
  .solution-txt p, .reason-txt p { width: 100%; text-align: center; }
  .reason-txt p span.l1 { font-size: 26px; }
  .reason-txt p span.l2 { font-size: 20px; }
  .reason-txt p em.big-num { font-size: 40px; }
  .worries-box { gap: 1em; }
  .worries-item { width: calc(100% / 3 - .8em); padding: 16px; }
  .bc-h2 p { font-size: 14px; }
  .bc-h2 h2 { font-size: 42px; }
  .con1 h2, .con2 h2, .num-h3 h3, .con9 h3, .contsct-area h3 { font-size: 26px; line-height: 1.5; }
  .num-item {
    flex-direction: row;
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto;
    gap: 10px;
  }
  .num-item figure { width: 30%; }
  .num-item h3 { width: calc(100% - (100px + 10px)); font-size: 20px; }
  .num-item p { width: 100%; }
  .num-item .num {
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
  }
  .num-item p:not(.num) { display: none; margin-top: .5em; }
  .num-item p:not(.num).open { display: block; }
  .num-item h3 {
    position: relative;
    cursor: pointer;
    padding-right: 2em;
  }
  .num-item h3::before {
    content: "＋";
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    font-size: 1.1em;
    color: var(--bc-d_yel);
  }
  .num-item h3.open::before { content: "－"; }
  .bc-footer-custom { padding: 40px 24px 32px; }
  .bc-footer-custom__logo img { width: 150px; }
  .bc-footer-custom__copyright { margin: 24px 0 0; font-size: 10.5px; line-height: 1.8; }
}

@media (max-width: 599px) {
  .bc-slider__item { flex-basis: 50%; width: 50%; max-width: 50%; padding: 0 10px; }
  .product-item { flex-basis: 50%; width: 50%; max-width: 50%; }
  .contsct-txt br { display: block; }
  .num-item h3 { width: calc(100% - (60px + 10px)); }
  .num-item figure { width: 60px; }
}

@media (max-width: 480px) {
  .other-box-txt .vk_button_link { font-size: 16px; }
  .worries-item p { font-size: 13px; }
}