/*
Theme Name: Lightning Child
Theme URI: https://lightning.vektor-inc.co.jp/
Template: lightning
Description: lightningの子テーマ
Author: design hearts
Version: 0.5.1
*/
@charset "utf-8";

/************************************************
 * 独自のデザインを必要に応じて書き足す
 ************************************************/

@font-face {
  font-family: "Lovelo";
  src: url("/wp/wp-content/themes/lightning-child/font/Lovelo-LineBold.eot")
      format("eot"),
    url("/wp/wp-content/themes/lightning-child/font/Lovelo-LineBold.woff")
      format("woff"),
    url("/wp/wp-content/themes/lightning-child/font/Lovelo-LineBold.woff2")
      format("woff2");
}

/* 色とフォントの定義 */
:root {
  /* アクセントカラー(差し色) */
  --color-accent: #fff;
  /* メインカラー */
  --color-main: #000;
  /* サブカラー */
  --color-sub: #edfcff;
  /* 黒 */
  --color-blk: rgb(51, 51, 51);
  /* メインフォント */
  --font-main: "Noto Sans JP", sans-serif;
  /* サブフォント */
  --font-sub: "Dela Gothic One", "Noto Sans JP", sans-serif;
  /* サブフォント */
  --font-title: "Lovelo", "Dela Gothic One", "Noto Sans JP", sans-serif;
}

body {
  font-size: 16px;
  font-family: var(--font-main);
  color: var(--color-accent);
}

a,
.entry-meta-data-list dd a {
  color: #bdd4ff;
}

/* スマホ表示 */
.sp {
  display: none;
}

/* PC＋タブレット表示 */
.pc {
  display: inline-block;
}

.pc-text-right {
  text-align: right;
}

@media screen and (max-width: 768px) {
  /* タブレット＋スマホの改行 */
  .tb-br,
  span.tb-br,
  p span.tb-br {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  /* スマホの改行 */
  .sp-br,
  span.sp-br,
  p span.sp-br {
    display: block;
  }
  .btn03 span.sp-br {
    padding: 0;
  }
  .sp-text-left {
    text-align: left;
  }
  .sp-text-right {
    text-align: right;
  }
  .sp {
    display: inline-block;
  }
  .pc {
    display: none;
  }
}

/* 黄色マーカー */
.border-yellow {
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

/* 打ち消し線 */
del.line-through {
  background-image: linear-gradient(#000, #000);
  background-position: 0 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
  color: #888;
  margin: 0 0.4em;
  text-decoration: none;
}

/* reCAPTCHAマークは非表示に */
.grecaptcha-badge {
  visibility: hidden;
}

/************************************************
 * トップのスプラッシュ
 ************************************************/
#splash-logo img {
  width: 150px;
}

#splash-logo h1 {
  font-size: 3rem;
  font-family: var(--font-sub);
}

@media screen and (max-width: 430px) {
  #splash-logo h1 {
    font-size: 2.5rem;
  }
}

.splashbg {
  border-color: #fff; /* 拡大する四角の色 */
}

/*SVGの可変*/
#splash #splash-logo svg {
  width: 150px;
}

/*アニメーション前のパスの指定*/
#splash svg path {
  fill-opacity: 0; /*最初は透過0で見えない状態*/
  transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/
  fill: none; /*塗りがない状態*/
  stroke: #fff; /*線の色*/
}

/*アニメーション後に.doneというクラス名が付与された時のパスの指定*/
#splash svg.done path {
  fill: #fff; /*塗りの色*/
  fill-opacity: 1; /*透過1で見える状態*/
  stroke: none; /*線の色なし*/
}

/************************************************
 * トップのヘッダー
 ************************************************/
#top-header {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* width: 100%; */
  width: auto;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -2;
  background: #000;
}

/* 背景画像設定 */
#header-img {
  position: fixed; /*背景を固定するためfixedをかける*/
  z-index: -1; /*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0; /*topの位置がJSで変化*/
  /*以下画面で背景画像を表示させるための指定*/
  width: 100%;
  height: 100vh;
  /* background: url(/wp/wp-content/uploads/2022/03/top_01.jpg) no-repeat top center; */
  /* background-size: cover;
  transform-origin: center;
  opacity: 0.7; */
}

#video-area {
  position: fixed;
  z-index: -1; /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

.header-area {
  position: fixed;
  top: calc(50vh - 11rem);
  width: 100%;
  z-index: -1;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 5px #3e3e4a;
}

.home .header-area h2 {
  display: block;
  letter-spacing: 0;
  padding: 0 10px;
  font-family: var(--font-sub);
  /* animation-delay: 3s; */
}

.home .header-area h2 .sub {
  font-size: 3.4rem;
  animation-delay: 2s;
  text-shadow: 1px 1px 10px #000000;
}

.home .header-area h2 .sub span {
  display: inline-flex;
  font-size: 3.4rem;
  font-family: var(--font-sub);
  text-shadow: 1px 1px 10px #000000;
  font-weight: normal;
  text-transform: none;
}

.home .header-area h2 .main {
  display: inline-flex;
  margin-top: -16px;
}

.home .header-area h2 .main span {
  display: inline-flex;
  font-size: 6rem;
  font-family: var(--font-sub);
  text-shadow: 1px 1px 10px #000000;
  font-weight: normal;
}

/* .header-area .sub {
  font-size: 2.1rem;
  letter-spacing: 0.4em;
  font-family: var(--font-sub);
} */

@media screen and (max-width: 430px) {
  .header-area {
    top: calc(50vh - 7rem);
  }
  .home .header-area h2 .sub,
  .home .header-area h2 .sub span {
    font-size: 1.7rem;
  }
  .home .header-area h2 .main {
    margin-top: -4px;
  }
  .home .header-area h2 .main span {
    font-size: 3rem;
  }
}

/*スクロールダウン全体の場所*/
.scrolldown {
  /*描画位置※位置は適宜調整してください*/
  position: fixed;
  bottom: 10px;
  left: 50%;
  z-index: -1;
}

/*Scrollテキストの描写*/
.scrolldown span {
  /*描画位置*/
  position: absolute;
  right: -30px;
  bottom: 13px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation: circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* 線の描写 */
.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 50px;
  background: #eee;
}

/************************************************
 * トップのメニュー
 ************************************************/

#site-header {
  display: none;
}

#top-menu {
  position: fixed;
  height: 70px;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 990px) {
  #top-menu {
    height: 75px;
  }
}

.scrolled #top-menu {
  background: #000;
}

#top-menu h2 {
  display: block;
  text-transform: uppercase;
  font-size: 1.5rem;
  position: absolute;
  bottom: auto;
  top: auto;
  left: 5%;
  line-height: 1;
  letter-spacing: 0.2em;
  font-family: var(--font-sub);
  color: #fff;
  margin-bottom: 0;
}

.home #top-menu h2 {
  display: none;
}

body.scrolled #top-menu h2 {
  display: block;
}

@media screen and (max-width: 550px) {
  #top-menu h2 {
    font-size: 1.2rem;
    top: 32%;
  }
}

#top-menu h2 a {
  color: #fff;
}

#top-menu h2 img {
  width: auto;
  height: 60px;
}

#pc-nav {
  position: absolute;
  right: 110px;
}

.scrolled #pc-nav li a {
  color: #fff;
  font-family: var(--font-sub);
}

#g-nav li a {
  color: #fff;
  font-family: var(--font-sub);
}

#g-nav.panelactive li:last-child a {
  border: 2px solid #fff;
}

/* .openbtn.active div {
  display: none;
} */

#page-top a {
  background: var(--color-sub);
}

@media screen and (max-width: 480px) {
  #top-menu h2 img {
    padding-top: 5px;
    width: 250px;
    height: auto;
  }
}

#pc-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  margin: 0 0 0 5%;
}

#pc-nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 0 15px;
  transition: all 0.3s;
  font-weight: bold;
  text-shadow: 0px 0px 5px #3e3e4a;
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: normal;
}

#g-nav ul {
  display: block;
  justify-content: space-around;
  flex-wrap: wrap;
}

#g-nav.panelactive li a {
  width: 220px;
  text-align: center;
}

/* モバイルメニュー */
.vk-mobile-nav-menu-btn {
  border: none;
  background: url("/wp/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-white.svg")
    center 50% no-repeat var(--vk-color-primary);

  width: 50px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
}

@media (min-width: 769px) {
  body.home .vk-mobile-nav-menu-btn {
    display: none;
  }
}

body.device-mobile.home .vk-mobile-nav-menu-btn {
  display: none;
}
body.device-mobile.home.header_scrolled .vk-mobile-nav-menu-btn {
  display: block;
}

/* ==================================================
 * 5-2-8 3本線が横方向に回転して×に
 * ===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
  position: fixed; /*ボタン内側の基点となるためrelativeを指定*/
  top: 10px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

/*ボタン内側*/
.openbtn .openbtn-area {
  transition: all 0.6s; /*アニメーションの設定*/
  width: 50px;
  height: 50px;
}

.openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
  top: 15px;
}

.openbtn span:nth-of-type(2) {
  top: 23px;
}

.openbtn span:nth-of-type(3) {
  top: 31px;
}

/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn.active .openbtn-area {
  transform: rotate(360deg);
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

/*===========================================================*
 * TOP上ボタン  ページの指定の高さを超えたら右から出現
 *===========================================================*/

/*リンクの形状 */
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  width: 60px;
  height: 50px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s;
  font-family: var(--font-sub);
}

#page-top a:hover {
  background: #777;
}

/* リンクを右下に固定 */
#page-top {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* はじめは非表示 */
  opacity: 0;
  transform: translateX(100px);
}

/* 左の動き */

#page-top.LeftMove {
  animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右の動き */

#page-top.RightMove {
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(100px);
  }
}

/************************************************
 * モバイル
 ************************************************/
#vk-mobile-nav-menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  #pc-nav {
    display: none;
  }
}

/************************************************
 * ホーム
 ************************************************/

.home .veu_socialSet {
  display: none;
}

/**********************
 * 全般
 **********************/
h2 {
  text-align: center;
  margin: 0 0 15px 0;
  font-size: 1.3rem;
  line-height: 1.5;
  font-family: var(--font-sub);
}

h3 {
  font-size: 1.17em;
}

h2 span {
  font-size: 1.6rem;
  text-transform: uppercase;
  display: block;
  font-family: var(--font-title);
}

a,
li a,
.comments-area a {
  color: #bdd4ff;
}

a:hover {
  color: #1e73be;
}

.home h2 {
  margin-bottom: 50px;
}

.home h2 span {
  font-size: 3rem;
  text-transform: uppercase;
  display: block;
}

@media screen and (max-width: 768px) {
  .home h2 {
    font-size: 1.1rem;
  }

  .home h2 span {
    font-size: 2rem;
  }
}

.home .entry-title--post-type--page,
.home h2 {
  border: none;
  line-height: 1.5;
  font-weight: normal;
}

.home .entry-title--post-type--page,
.home h2 span {
  font-weight: normal;
  font-size: 4rem;
}

/* .home h2 span b {
  font-weight: normal;
  font-size: 5rem;
} */

@media screen and (max-width: 430px) {
  .home h2 span b,
  .home h2 span b span {
    font-size: 2rem;
  }
}

/**********************
 * About
 **********************/
#about {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 64px calc(50px + 5%);
  /* background-image: url(/wp/wp-content/uploads/2022/04/about_04_00.jpg),
    url(/wp/wp-content/uploads/2022/04/about_03.jpg);
  background-size: auto 200px, 300px auto;
  background-repeat: no-repeat; 
  background-position: left calc(130px + 15%) bottom 0,
    left calc(100px + 10%) bottom 160px;  */
}

@media screen and (max-width: 430px) {
  #about {
    padding: 64px 5%;
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
      linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
      url(/wp/wp-content/uploads/2022/04/about_04.jpg),
      url(/wp/wp-content/uploads/2022/04/about_03.jpg);
    background-size: auto 120px, 250px auto;
    background-position: left 30px bottom -10px, right 20px bottom 188px; */
  }
}

#about h2 {
  padding-top: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

#about h2 span {
  /* padding-top: 16px; */
  color: #fff;
}

#about .about-info {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  
}

@media screen and (max-width: 768px) {
  #about .about-info {
    display: block;
  }
}

#about img {
  max-width: 360px;
  object-fit: cover;
  flex-basis: 33.33%;
  margin-right: 30px;
}

#about p {
  margin: 0;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 40px;
}

@media screen and (max-width: 768px) {
  #about .about-info {
    display: block;
  }
  #about p {
    margin-top: 60px;
    text-align: center;
  }
}

@media screen and (max-width: 430px) {
  #about p {
    font-size: 15px;
  }
}

#about .content {
  text-align: left;
}

.about-area {
  margin-top: -10px;
  flex-basis: 66.66%;
  max-width: 610px;
}


h2 b {
  color: rgb(238, 246, 255);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #6644ff, 0 0 0.5em #6644ff,
    0 0 0.1em #6644ff, 0 10px 3px #000;
  display: inline-flex;
  letter-spacing: 8px;
}

h2 b span {
  animation: blink linear infinite 2s;
}

h2 b span:nth-of-type(2) {
  animation: blink linear infinite 3s;
}

@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #333;
  }
  80% {
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

#about .btn {
  display: block;
}

.btn a {
  --color-accent: #f403c0;
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: var(--color-accent);
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  font-size: 1.1rem;
  font-family: var(--font-sub);
}

.btn a:hover {
  background: var(--color-accent);
  color: #050801;
  box-shadow: 0 0 5px var(--color-accent), 0 0 25px var(--color-accent),
    0 0 50px var(--color-accent), 0 0 200px var(--color-accent);
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.btn a:nth-child(1) {
  filter: hue-rotate(270deg);
}
.btn a:nth-child(2) {
  filter: hue-rotate(110deg);
}
.btn a span {
  position: absolute;
  display: block;
}
.btn a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
  animation: animate1 1s linear infinite;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
.btn a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--color-accent));
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
.btn a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, var(--color-accent));
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.btn a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--color-accent));
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

/**********************
 * Vision
 **********************/
#vision {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 64px calc(80px + 10%);
  padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
  #vision {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 430px) {
  #vision {
    padding: 64px 5%;
    padding-bottom: 40px;
  }
}

#vision h2 {
  padding-top: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

#vision h2 span {
  /* padding-top: 16px; */
  color: #fff;
}

#vision .vision-info {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  
}

#vision img {
  max-width: 360px;
  object-fit: cover;
  flex-basis: 33.33%;
  margin-left: 60px;
}

#vision p {
  margin: 0;
  color: #fff;
  line-height: 40px;
  width: 404px;
}

#vision .content {
  text-align: left;
}

.vision-area {
  margin-top: -10px;
}

#vision h2 b {
  color: rgb(255, 246, 238);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff7f44, 0 0 0.5em #ff7f44,
    0 0 0.1em #ff7f44, 0 10px 3px #000;
}

@media screen and (max-width: 768px) {
  #vision img {
    margin-left:0;
    margin-top: 30px;
  }
  #vision .vision-info {
    display: block;
  }
  #vision p {
    text-align: center;
    width: auto;
  }
}


/**********************
 * 業務内容
 **********************/
#business-info {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 64px calc(50px + 5%);
  /* background-image: url(/wp/wp-content/uploads/2022/03/about_02.jpg); */
  background-size: 500px auto;
  background-repeat: no-repeat; /* 背景の繰り返し設定 */
  background-position: left calc(50px + 10%) bottom 160px; /* 背景の位置指定 */
}

@media screen and (max-width: 430px) {
  #business-info {
    padding: 64px 5%;
  }
}

#business-info h2 {
  padding-top: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

#business-info h2 span {
  /* padding-top: 16px; */
  color: #fff;
}

#business-info h2 b {
  --color-accent: #f4033f;
  color: rgb(255, 238, 238);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em var(--color-accent),
    0 0 0.5em var(--color-accent), 0 0 0.1em var(--color-accent),
    0 10px 3px #000;
}

#business-info .business-info-sub p {
  margin: 0;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.8rem;
  text-align: center;
}

#business-info .business-info-sub {
  margin-top: -10px;
  text-align: center;
  margin-bottom: 56px;
}

#business-info .business-info-area h3 {
  color: #fff;
  margin-top: 16px;
  border-bottom: none;
}

#business-info .business-info-area p {
  color: #fff;
}

@media screen and (max-width: 1200px) {
  #business-info .business-info-area p {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 430px) {
  #business-info .business-info-area p .no-sp-br {
    display: none;
  }
}

.business-slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
  padding-left: 0;
}

.business-slider img {
  height: 360px;
  object-fit: cover;
}


.business-slider .mask {
  height: 360px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.business-slider .slick-slide {
  margin: 0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.business-slider .slick-prev,
.business-slider .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff; /*矢印の色*/
  border-right: 2px solid #fff; /*矢印の色*/
  height: 15px;
  width: 15px;
}

.business-slider .slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.business-slider .slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.business-slider .slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.business-slider ul.slick-dots {
  padding-left: 0;
}

.business-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.business-slider .slick-dots button {
  color: transparent;
  outline: none;
  width: 16px; /* ドットボタンのサイズ */
  height: 16px; /* ドットボタンのサイズ */
  display: block;
  border-radius: 50%;
  background: #fff; /* ドットボタンの色 */
}

.business-slider .slick-dots .slick-active button {
  background: #dfdfdf; /* ドットボタンの現在地表示の色 */
}

@media screen and (max-width: 480px) {
  .home #business-info {
    padding-left: 5%;
    padding-right: 5%;
  }

  .home #business-info .business-slider {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/**********************
 * 業務フロー
 **********************/
.business {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 64px calc(50px + 5%);
  /* background-image: url(/wp/wp-content/uploads/2022/03/about_02.jpg); */
  background-size: 500px auto;
  background-repeat: no-repeat; /* 背景の繰り返し設定 */
  background-position: left calc(50px + 10%) bottom 160px; /* 背景の位置指定 */
}

@media screen and (max-width: 430px) {
  .business {
    padding: 64px 5%;
  }
}

.business h2 {
  padding-top: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

.business h2 span {
  /* padding-top: 16px; */
  color: #fff;
}

.business p {
  margin: 0;
  color: #fff;
  margin-bottom: 1rem;
}

@media screen and (max-width: 430px) {
  .business p {
    font-size: 14px;
  }
}

.business .content {
  text-align: center;
  margin-bottom: 56px;
}

.business-area {
  margin-top: -10px;
}

.business h2 b {
  --color-accent: #03f42b;
  color: rgb(255, 246, 238);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em var(--color-accent),
    0 0 0.5em var(--color-accent), 0 0 0.1em var(--color-accent),
    0 10px 3px #000;
}

.business .wp-block-vk-blocks-flow {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.business ul {
  padding: 0;
}
.business li {
  list-style-type: none;
}
.business dd {
  margin-left: 0;
  color: #fff;
  text-align: left;
}

.business .flow {
  padding-left: 120px;
  position: relative;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}

.business .flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 90px;
}

@media screen and (max-width: 430px) {
  .business .flow::before {
    left: 80px;
  }
}

.business .flow > li {
  position: relative;
}

.business .flow > li:not(:last-child) {
  margin-bottom: 8vh;
}

.business .flow > li .icon {
  font-size: 10px;
  background: #fff;
  color: #000;
  font-family: var(--font-sub);
  padding: 8px 10px;
  display: block;
  position: absolute;
  top: 0;
  left: -135px;
  z-index: 100;
}

@media screen and (max-width: 430px) {
  .business .flow > li .icon {
    font-size: 1px;
    padding: 4px 5px;
    margin-left: 10px;
  }
}

.business .flow .flow-info {
  display: flex;
}

@media screen and (max-width: 430px) {
  .business .flow .flow-info {
    display: block;
  }
}

.business .flow i {
  color: #fff;
  margin-top: 10px;
  margin-left: 10px;
  width: 65px;
}

@media screen and (max-width: 430px) {
  .business .flow i {
    margin-left: 0;
    margin-right: 0;
  }
}

.business .flow > li .icon span {
  font-size: 26px;
  display: block;
  line-height: 3rem;
}

@media screen and (max-width: 430px) {
  .business .flow > li .icon span {
    font-size: 25px;
  }
}

.business .flow > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.business .flow > li dl {
  padding-left: 70px;
  position: relative;
}

@media screen and (max-width: 430px) {
  .business .flow > li dl {
    padding-left: 0;
  }
}

.business .flow > li dl::before,
.business .flow > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.business .flow > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #fff;
  border-radius: 50%;
  left: -4px;
}

@media screen and (max-width: 430px) {
  .business .flow > li dl::before {
    left: -16px;
  }
}

.business .flow > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

@media screen and (max-width: 430px) {
  .business .flow > li dl::after {
    width: 30px;
    left: -5px;
  }
}

.business .flow > li dl dt {
  font-size: 1.5rem;
  font-weight: bold;

  color: #fff;
  margin-bottom: 1vh;
  text-align: left;
  border-bottom: solid 2px #fff;
}

@media screen and (max-width: 430px) {
  .business .flow > li dl dt {
    font-size: 1.3rem;
  }
}

/**********************
 * 業務実績
 **********************/
.works {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 80px calc(50px + 5%);
  background-size: 500px auto;
  background-repeat: no-repeat; /* 背景の繰り返し設定 */
  background-position: left calc(50px + 10%) bottom 160px; /* 背景の位置指定 */
}

@media screen and (max-width: 430px) {
  .works {
    padding: 64px 5%;
  }
}

.works h2 {
  padding-top: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

.works h2 span {
  color: #fff;
}

.works p {
  margin: 0;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.8rem;
}

.works .content {
  text-align: center;
  margin-bottom: 56px;
}

.works-area {
  margin-top: -10px;
}

.works h2 b {
  --color-accent: #9403f4;
  color: rgb(255, 246, 238);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em var(--color-accent),
    0 0 0.5em var(--color-accent), 0 0 0.1em var(--color-accent),
    0 10px 3px #000;
}

.works .wp-block-latest-posts.wp-block-latest-posts__list,
.works .poat-summary .wp-block-group__inner-container {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .works .wp-block-latest-posts.wp-block-latest-posts__list,
  .works .poat-summary .wp-block-group__inner-container {
    display: block;
  }

  .works .poat-summary .wp-block-group__inner-container {
    text-align: center;
  }

  .works .wp-block-latest-posts.wp-block-latest-posts__list {
    text-align: center;
  }
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
  display: inline-grid;
}

.works .wp-block-latest-posts li a {
  max-width: 350px;
}

.works .wp-block-latest-posts li > a {
  color: #fff;
  min-height: 65px;
  font-weight: bold;
  font-size: 1.2rem;
}

.works .wp-block-latest-posts__post-excerpt {
  color: #fff;
  max-width: 350px;
}

.works .wp-block-latest-posts__featured-image img {
  object-fit: cover;
  overflow: hidden;
  width: 350px;
  height: 250px;
}

@media screen and (max-width: 1280px) {
  .works .wp-block-latest-posts.wp-block-latest-posts__list li,
  .works .wp-block-latest-posts li a,
  .works .wp-block-latest-posts__post-excerpt,
  .works .wp-block-latest-posts__featured-image img {
    max-width: 310px !important;
  }
  .works .poat-summary .wp-block-group__inner-container {
    justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .works .wp-block-latest-posts.wp-block-latest-posts__list li,
  .works .wp-block-latest-posts li a,
  .works .wp-block-latest-posts__post-excerpt,
  .works .wp-block-latest-posts__featured-image img {
    max-width: 100% !important;
  }
  .works .wp-block-latest-posts__featured-image img {
    width: 450px;
  }

  .works .wp-block-latest-posts__featured-image.alignleft {
    margin-right: 0;
  }
}

.works .wp-block-latest-posts__post-date,
.works .wp-block-latest-posts__post-author {
  color: #fff;
}

.works .btn {
  width: 100%;
}

.works .btn a {
  --color-accent: #f4e403;
  color: var(--color-accent);
}

.works .btn a:hover {
  color: #070108;
}

/**********************
 * 会社概要
 **********************/

#profile {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 64px calc(50px + 5%);
}

@media screen and (max-width: 430px) {
  #profile {
    padding: 64px 5%;
  }
}

#profile h2 b {
  --color-accent: #f4f003;
  color: rgb(255, 246, 238);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em var(--color-accent),
    0 0 0.5em var(--color-accent), 0 0 0.1em var(--color-accent),
    0 10px 3px #000;
}

#profile h2 {
  text-align: center;
  color: #fff;
  margin: 0 0 50px 0;
}

@media screen and (max-width: 550px) {
  #profile h2 {
    margin: 0 0 50px 0;
  }
}

#profile .profile-list {
  width: 96%;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 0;
  color: #fff;
}

@media screen and (max-width: 430px) {
  #profile .profile-list {
    width: 100%;
  }
}

#profile .profile-list li {
  border-bottom: 1px solid #ccc;
  margin: 0 0 15px 0;
  padding: 0;
}

#profile .profile-list dl {
  display: flex;
  justify-content: space-between;
}

#profile .profile-list dt {
  width: 30%;
  padding: 0 0 0 40px;
}

@media screen and (max-width: 590px) {
  #profile .profile-list dt {
    padding: 0 0 0 10px;
  }
}

#profile .profile-list dd {
  width: 65%;
}

@media screen and (max-width: 430px) {
  #profile .profile-list dd {
    font-size: 0.9rem;
  }
}

#profile .access {
  margin-top: 16px;
}

/**********************
 * お問い合わせ
 **********************/

#contact {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), */
  background: url("/wp/wp-content/uploads/2022/04/contact_00.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (max-width: 430px) {
  #contact {
    padding-top: 60px;
  }
}

#contact h2 {
  font-family: var(--font-main);
}

#contact h2::after {
  left: calc(40% + 13px);
}
@media screen and (max-width: 480px) {
  #contact h2::after {
    left: calc(40% + 6px);
  }
}

.contact-detail i.fas {
  position: absolute;
  left: 25px;
  top: 17px;
}

.contact-detail .btn06 {
  border: solid 1px #fff;
  color: #fff;
  background: transparent;
  border-radius: 0;
}

.contact-detail .btnarrow2::after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

@media screen and (max-width: 430px) {
  #contact .contact-detail h2 {
    font-size: 1.1rem;
  }
}

/**********************
 * サイト下
 **********************/
body.home .site-body-bottom {
  display: none;
}

/**********************
 * フッター
 **********************/

.site-footer {
  color: #fff;
  background: #000;
  font-family: var(--font-sub);
}

@media screen and (max-width: 430px) {
  .site-footer {
    text-align: center;
  }
}

.site-footer .footer-nav ul {
  display: flex;
  justify-content: center;
}

.site-footer .nav li a,
.footer-sns li a,
li.menu-item a {
  color: #fff;
}

.footer-address a {
  display: inline-block;
  color: white;
  text-decoration: none;
}

.site-footer .add-sub {
  padding-left: 12px;
}

@media screen and (max-width: 480px) {
  .site-footer .nav li a {
    padding-right: 10px;
  }
}

.site-footer-content {
  padding-top: 16px;
}

.fotter-img {
  width: 160px;
  margin-bottom: 4px;
}
.site-footer-content aside {
  margin-bottom: 0;
}
@media screen and (max-width: 480px) {
  .fotter-img {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-address {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

.footer-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 0;
  padding-top: 10px;
}

@media screen and (max-width: 430px) {
  .footer-sns {
    justify-content: center;
  }
  .footer-sns i {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }
  .site-footer .add-sub {
    padding-left: 0;
  }
}

.widget ul.footer-sns {
  padding-left: 0;
}

.footer-sns li {
  padding: 0 5px; /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.site-footer .widget:last-child,
.site-footer .widget:last-child p {
  margin-bottom: 0;
}

.site-footer-copyright p:nth-child(2) {
  display: none;
}

.site-footer-copyright p {
  font-family: var(--font-sub);
}

@media screen and (max-width: 430px) {
  .widget_nav_menu>div>ul li a {
    padding-left: 0;
  }
}

/************************************************
 * トップページはここまで
 ************************************************/

/************************************************
 * ここから個別ページ
 ************************************************/
.page-header {
  color: #fff;
  /* background: linear-gradient(
    -45deg,
    var(--vk-color-custom-5),
    var(--vk-color-primary)
  ); */
  margin-top: 60px;
  background: var(--color-main);
  display: block;
}

.page-header .page-header-title {
  font-size: 4rem;
  text-transform: uppercase;
  color: rgb(238, 246, 255);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #6644ff, 0 0 0.5em #6644ff,
    0 0 0.1em #6644ff, 0 10px 3px #000;
  display: inline-flex;
  letter-spacing: 8px;
  text-align: center;
  font-family: var(--font-title);
}

@media screen and (max-width: 430px) {
  .page-header .page-header-title {
    font-size: 3rem;
  }
}

#commentform img,
.comment-author img,
.post img {
  width: auto;
}

/***********************
 * ABOUT
 **********************/

#history {
  position: relative;
  padding: 0 70px;
  margin: 0 0 100px 0;
}

#history h2 {
  --color-history: #44ff5d;
  font-weight: normal;
  font-size: 4rem;
  text-transform: uppercase;
  color: rgb(238, 246, 255);
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em var(--color-history),
    0 0 0.5em var(--color-history), 0 0 0.1em #6644ff, 0 10px 3px #000;
  display: block;
  letter-spacing: 8px;
  text-align: center;
  font-family: var(--font-title);
  margin-top: 120px;
}

.history-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 100px;
}

.history-img {
  background: url("/wp/wp-content/uploads/2022/04/history_01.jpg") no-repeat center;
  background-size: cover;
  height: 50vh;
  width: 48%;
}

.history-content {
  width: 45%;
  padding: 0 0 0 0;
}

@media screen and (max-width: 768px) {
  #history {
    padding: 0 30px;
  }
  #history h2 {
    position: relative;
    right: inherit;
    top: 40px;
  }
  .history-img,
  .history-content {
    width: 100%;
  }

  .history-img {
    height: 40vh;
  }

  .history-content {
    padding: 50px 0 0 0;
  }
}

@media screen and (max-width: 430px) {
  .history-img {
    height: 20vh;
  }
}

/*==================================================
 * スクロールをするとエリアの高さに合わせて線が伸びる
 * ===================================*/

/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/

.timeline li {
  /*線の起点とするためrelativeを設定*/
  position: relative;
  list-style: none;
  padding: 0 0 20px 0;
  margin-bottom: 0;
  margin-top: 0;
}

.timeline dl {
  margin: 0 0 20px 3em;
}

/*絶対配置で線を設定*/
.border-line {
  /*線の位置*/
  position: absolute;
  left: 0.2em;
  top: 0;
  width: 2px; /*線の太さ*/
  height: 0; /*はじめは高さを0に*/
  background: var(--color-accent);
  height: 100%;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
}

/***********************
 * お問い合わせフォーム
 **********************/
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  font-size: 16px;
}

.wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"]:hover {
  position: absolute;
  right: calc(40% - 50px);
  left: calc(40% - 50px);
  border: none;
  font-weight: bold;
  border-radius: 0;
  padding: 16px;
  background: #fff;
  color: #000;
  font-size: 16px;
}

.wpcf7-form .confirm {
  font-size: 13px;
}
.wpcf7-form .privacy {
  margin-left: 26px;
}

.wpcf7 form.sent .wpcf7-response-output {
  background: #238d2d;
  color: #fff;
  font-weight: bold;
}

.wpcf7-spinner {
  height: 60px;
}

.wp-block-contact-form-7-contact-form-selector,
.wpcf7-form,
.form-info {
  max-width: 768px;
  margin: auto;
}

.form-info {
  margin-bottom: 30px;
}

.form-info.recap {
  margin-top: 60px;
  font-size: 0.9rem;
}

.wpcf7-form .req {
  background: #c50000;
  color: #fff;
  padding: 1px 5px 3px 7px; /* 上右下左 */
  margin-right: 6px;
  font-size: 0.8rem;
}

.wpcf7-form p {
  margin-bottom: 8px;
  margin-top: 16px;
}

.wpcf7-form .tel,
.wpcf7-form .type {
  width: 50%;
}

/***********************
 * ブログ
 **********************/
.vk_post .vk_post_title a,
.vk_post .vk_post_date {
  color: var(--color-accent);
}

.vk_post_btnOuter a {
  color: var(--color-main);
  background: var(--color-accent);
  padding-top: 8px;
  padding-bottom: 8px;
}

h1.archive-header-title,
h1.entry-title {
  font-family: var(--font-main);
}

h2.comments-title,
h2.comments-title span {
  font-size: 0.8rem;
  font-family: var(--font-main);
}

h2.comments-title span {
  display: inline-block;
}

.vk_post_imgOuter_singleTermLabel {
  width: 100%;
  text-align: center;
}