@charset "UTF-8";

/*!
Theme Name: FUKUDA THEME
Theme URI: http://example.com/
Description: child theme for the Xeory
Author: バズ部
Author URI: http://bazubu.com/
Template: xeory_extension
Version: 0.6.4
*/

/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,700&family=Montserrat:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600&display=swap');

/* @font-face {
  font-family: "siteseeing";
  src: url(./kaitai/font/siteseeing.ttf) format("truetype");
}
@font-face {
  font-family: "gothicpro";
  src: url(./kaitai/font/A-OTF-GothicMB101Pro-Bold.otf) format("opentype");
} */

/* COMMON RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video, button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
input::placeholder{
	color: #ccc;
}
input::-ms-input-placeholder{
	color: #ccc;
}
input:-ms-input-placeholder{
	color: #ccc;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

/* SETTING */
:root {
  /* COLOR */
  --color-base: #3B3B3B;
  --color-theme: #1B4182;
  --color-skyblue: #44BDEC;
  --color-bg: #46BBE9;

  /* FONT FAMILY */
  --font-base: "Noto Sans JP", "游ゴシック", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-serif: "Noto Serif JP", "游明朝体", "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;
  --font-montserrat: "Montserrat", "游ゴシック", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-lora: "Lora", "游明朝体", "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;

  /* FONT WEIGHT */
  --font-weight-extraLight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semiBold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;
  --font-weight-black: 900;

  --letter-spacing: .07em;

  --delay: .05s;
  --transition: .3s;
  --opacity: .7;

  --wrap: 1240px;
  --wide-wrap: 1680px;
  --space: calc((100vw - var(--wrap))/2);

  /* PX - SETTING */
  --px1: calc(100vw / 1920);
  
  /* LAYOUT */
  --px300: clamp(150px, calc(var(--px1) * 300), 300px);
  --px250: clamp(125px, calc(var(--px1) * 250), 250px);
  --px200: clamp(100px, calc(var(--px1) * 200), 200px);
  --px150: clamp(75px, calc(var(--px1) * 150), 150px);
  --px120: clamp(60px, calc(var(--px1) * 120), 120px);
  --px100: clamp(50px, calc(var(--px1) * 100), 100px);
  --px80: clamp(40px, calc(var(--px1) * 80), 80px);
  --px60: clamp(30px, calc(var(--px1) * 60), 60px);
  --px50: clamp(30px, calc(var(--px1) * 50), 50px);
  --px40: clamp(30px, calc(var(--px1) * 40), 40px);

  /* FONT SIZE */
  --px54: clamp(42px, calc(var(--px1) * 54), 54px);
  --px48: clamp(36px, calc(var(--px1) * 48), 48px);
  --px42: clamp(32px, calc(var(--px1) * 42), 42px);
  --px38: clamp(26px, calc(var(--px1) * 38), 38px);
  --px36: clamp(28px, calc(var(--px1) * 36), 36px);
  --px32: clamp(24px, calc(var(--px1) * 32), 32px);
  --px30: clamp(22px, calc(var(--px1) * 30), 30px);
  --px28: clamp(20px, calc(var(--px1) * 28), 28px);
  --px24: clamp(18px, calc(var(--px1) * 24), 24px);
  --px20: clamp(16px, calc(var(--px1) * 20), 20px);
  --px18: clamp(16px, calc(var(--px1) * 18), 18px);
  --px16: clamp(14px, calc(var(--px1) * 16), 16px);
  --px14: clamp(12px, calc(var(--px1) * 14), 14px);
  --px12: clamp(10px, calc(var(--px1) * 12), 12px);
}

/* SLIDER SETTING */
.swiper.linear .swiper-wrapper {
  transition-timing-function: linear;
}

/* COMMON */
*,
*::before,
*::after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p,span,a,div {
  letter-spacing: var(--letter-spacing);
}
html {
  scroll-behavior: smooth;
}
body {
  color: var(--color-base);
  font-family: var(--font-base);
  letter-spacing: var(--letter-spacing);
  /* word-break: auto-phrase; */
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}
.wide-wrap {
  width: 100%;
  max-width: var(--wide-wrap);
  margin-inline: auto;
}
.wide-wrap-inner {
  max-width: 1520px;
  margin-inline: auto;
}
a {
  display: inline-block;
  color: var(--color-base);
  transition: var(--transition);
  &:hover {
    opacity: var(--opacity);
    text-decoration: none;
  }
}
section {
  position: relative;
}
span {
  display: inline-block;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.grid {
  display: grid;
}
.center {
  text-align: center;
}
.inline-block {
  display: inline-block;
}
.ps-re {
  position: relative;
}
.ps-ab {
  position: absolute;
}
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  white-space: nowrap;
}
.tab-only {
  display: none;
}
.sp-only {
  display: none;
}
.sp-small-only {
  display: none;
}
.palt {
  font-feature-settings: "palt";
}
.pagetop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 50px;
  bottom: 50px;
  width: 60px;
  height: 60px;
  background: var(--color-theme);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  &.active {
    opacity: 1;
    visibility: visible;
  }
  &:hover {
    opacity: .7;
  }
}
.pagetop::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}

/* COMMON CUSTOM */
.lora {
  font-family: var(--font-lora);
}
body {
  min-width: var(--wrap);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  background: var(--color-bg);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/common/bg-skyblue.webp) no-repeat center / cover;
  z-index: -1;
  mix-blend-mode: normal;
}
section {
  overflow: hidden;
}
.white {
  color: #fff;
}
.blue {
  color: var(--color-theme);
}
.fs20 {
  font-size: var(--px20);
}
.fs18 {
  font-size: var(--px18);
}
.fs16 {
  font-size: var(--px16);
}
.fwm {
  font-weight: var(--font-weight-medium);
}

/* HEADER */
#header a {
  color: var(--color-base);
}
#header {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  padding: 0;
}
.header-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
}
.header.over .header-inner {
  height: 60px;
}
.header-logo {
  background: #fff;
  border-radius: 0 0 20px 0;
  overflow: hidden;
}
.header-logo img {
  transition: var(--transition);
}
.header.over .header-logo img {
  width: 150px;
}
.header-logo a {
  display: block;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0 40px;
}
.header.over .header-logo a {
  height: 60px;
  gap: .8em;
}
.header-logo a p {
  font-size: var(--px14);
  color: #000;
  line-height: 1.3;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: .2em;
  position: relative;
  bottom: -.2em;
  transition: var(--transition);
}
.header.over .header-logo a p {
  font-size: var(--px12);
  line-height: 1.2;
  letter-spacing: .1em;
}
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-theme);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.header-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.header-nav-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
  transform: translateY(20px);
  transition: var(--transition);
}
.header-nav.is-open .header-nav-list {
  transform: translateY(0);
}
.header-nav-item {
  text-align: center;
}
.header-nav-item a {
  font-size: var(--px32);
  color: #fff !important;
  font-family: var(--font-montserrat);
  font-weight: var(--font-weight-bold);
  padding: .5em;
  position: relative;
}
.header-nav-item a:hover {
  opacity: 1;
}
.header-nav-item a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #fff;
  transition: var(--transition);
}
.header-nav-item a:hover::before {
  width: 60px;
}
.header-nav-item a span {
  display: block;
  font-size: var(--px16);
  line-height: 1;
  font-weight: var(--font-weight-medium);
}
.hamburger-wrap {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 0 40px;
  border-radius: 0 0 0 20px;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
}
.header.over .hamburger-wrap {
  height: 60px;
  gap: 15px;
  padding: 0 30px;
}
.hamburger-wrap p {
  font-size: var(--px16);
  color: #000;
}
/* ハンバーガー */
.hamburger {
  font-size: 10px;
  width: 4em;
  height: 2em;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transition: var(--transition) ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.is-open span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* FOOTER */
#footer {
  border: none;
  padding: 0;
}
#footer a {
  color: #fff;
}
#footer {
  width: 100%;
  height: auto;
  background: var(--color-theme);
  margin-top: var(--px200);
  color: #fff;
}
.footer-inner {
  width: 100%;
  max-width: var(--wrap);
  padding: var(--px100) 0;
  margin-inline: auto;
}
.footer-inner-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.footer-inner-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 50px;
}
.footer-logo {
  margin-bottom: 0;
}
.footer-logo a {
  display: flex;
  align-items: flex-end;
  gap: 1em;
}
.footer-logo a p {
  font-size: var(--px14);
  line-height: 1.4;
  letter-spacing: .15em;
  position: relative;
  bottom: -.2em;
}
.footer-nav {

}
.footer-nav-list {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
}
.footer-nav-item {
  position: relative;
}
.footer-nav-item::before {
  content: "-";
  font-size: var(--px16);
  font-family: var(--font-montserrat);
  font-weight: var(--font-weight-medium);
  color: #fff;
  position: absolute;
  top: 0;
  left: -.8em;
}
.footer-nav-item a {
  font-size: var(--px16);
  font-family: var(--font-montserrat);
  font-weight: var(--font-weight-bold);
  letter-spacing: .2em;
}
.footer-nav-item a span {
  display: block;
  font-size: var(--px12);
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: .2em;
}
.footer-nav-subItem {
  position: relative;
}
/* .footer-nav-subItem::before {
  content: "-";
  font-size: var(--px12);
  font-family: var(--font-montserrat);
  font-weight: var(--font-weight-medium);
  color: #fff;
  position: absolute;
  top: .5em;
  left: -.8em;
} */
.footer-nav-subItem a {
  font-size: var(--px12);
}
.footer-link-list {
  display: flex;
  gap: 40px;
}
.footer-link-item {

}
.footer-link-item a {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-montserrat);
  font-weight: var(--font-weight-medium);
  letter-spacing: .2em;
  line-height: 1;
}
.copy {
  font-size: 10px;
  letter-spacing: .2em;
}

/* MV */
.mv {
  padding-top: var(--px150);
}
.mv-bg-text {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  text-align: center;
}
.mv-inner {
  max-width: 1560px;
  padding: 0 20px;
  margin-inline: auto;
  position: relative;
}
.mv-img {
  text-align: center;
  position: relative;
}
.mv-img-wrap {
  width: 100%;
  max-width: 770px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.mv-img-item {
  position: absolute;
  top: 0;
  left: 0;
}
.mv-img-item.i1 {
  width: clamp(80px, calc(var(--px1) * 163), 163px);
  top: 30%;
  left: 9%;
}
.mv-img-item.i2 {
  width: clamp(80px, calc(var(--px1) * 145), 145px);
  top: 53%;
  left: 60%;
}
.mv-img-item.i3 {
  width: clamp(80px, calc(var(--px1) * 132), 132px);
  top: 73%;
  left: 33%;
}
/* MV SVG */
.mv-svg {
  width: 100%;
  max-width: calc(100% - 40px);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.mv-svg {
  & .cls-1 {
    fill: none;
  }
  & .cls-2 {
    fill: #1b4182;
  }
  & .cls-3 {
    fill: #e6cea5;
  }
  & .cls-4 {
    fill: #fff;
  }
  & .cls-5 {
    fill: #cdcdcd;
  }
  & .cls-6 {
    fill: #888;
  }
}
.mv-svg .mv-svg-item {
  transition: .6s;
}
.mv-svg-item.hidden {
  opacity: 0;
  visibility: hidden;
}
.mv-svg-item.show {
  opacity: 1;
  visibility: visible;
}
/* MV SLIDER */
.mv-slider-content {
  width: 100%;
  position: relative;
  z-index: -1;
  margin-top: -30px;
}
.mv-slider-wrap {
  padding: 20px 0;
  background: #fff;
}
.mv-slider img,
.mv-slider--en img {
  display: block;
  width: auto;
  height: auto;
}
.mv-slider .swiper-slide {
  width: auto;
  padding-right: 40px;
}
.mv-slider--en .swiper-slide {
  width: auto;
  padding-right: 20px;
}
.mv-slider--en.top {
  position: relative;
  bottom: -2px;
  z-index: -1;
}
.mv-slider--en.bottom {
  position: relative;
  top: -2px;
  z-index: -1;
}

/* CONCEPT */
.concept {
  padding-top: 60px;
  margin-top: var(--px100);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.concept-content {
  padding-bottom: var(--px100);
  position: relative;
}
.concept-content-bg {
  position: absolute;
  pointer-events: none;
}
.concept-content-bg.n1 {
  width: 100%;
  aspect-ratio: 388 / 173;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1920px) {
  .concept-content-bg.n1 {
    bottom: 120px;
  }
}
.concept-content-bg.n2 {
  width: 1920px;
  max-width: calc(var(--wrap) + 290px);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.concept-content h2 {
  width: 100%;
  max-width: clamp(500px, calc(var(--px1) * 1000), 1000px);
  margin-inline: auto;
  margin-bottom: var(--px100);
}
.concept-content .text-top {
  font-size: var(--px30);
  line-height: 1.6;
  margin-bottom: var(--px60);
}
.concept-img {
  width: 100%;
  max-width: clamp(700px, calc(var(--px1) * 1240), 1240px);
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.concept-img-content {
  width: 100%;
  height: auto;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.concept-img-content svg {
  width: 100%;
  max-width: clamp(500px, calc(var(--px1) * 890), 890px);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* SECTION TITLE SLIDER */
.secTitle-slider-wrap {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.secTitle-slider img {
  display: block;
  width: auto;
  height: clamp(95px, calc(var(--px1) * 170), 170px)
}
.secTitle-slider .swiper-slide {
  width: auto;
  padding-right: 40px;
}

/* SECTION TITLE */
.sec-title {
  color: #fff;
  font-size: var(--px48);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semiBold);
  line-height: 1;
  letter-spacing: .2em;
  margin-bottom: var(--px50);
  margin-top: -.05em;
}
.sec-title.blue {
  color: var(--color-theme);
}
.sec-title-bg {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

/* WORKS */
.works {
  padding-top: var(--px120);
  margin-top: var(--px150);
}
.works-slider-wrap {
  margin-top: var(--px60);
}
.works-slider {

}
.works-slide {
  width: 720px;
}
.works-slide-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}
.works-slide-thumb {
  aspect-ratio: 18 / 29;
  border-radius: 280px 280px 10px 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 10px 10px 0px 0px #fff;
  flex: 0 0 360px;
}
.works-slide-info {
  aspect-ratio: 18 / 29;
  border-radius: 280px 280px 10px 10px;
  overflow: hidden;
  box-shadow: 10px 10px 0px 0px #fff;
  position: relative;
  z-index: -1;
  transform: translateX(-200px);
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  transition: .8s;
}
.works-slide.swiper-slide-active .works-slide-info {
  z-index: 1;
  transform: translateX(0);
  flex: 0 0 360px;
  opacity: 1;
}
.works-slide-info__inner {
  width: 70%;
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: .5s;
  transition-delay: .8s;
}
.works-slide.swiper-slide-active .works-slide-info__inner {
  opacity: 1;
}
.works-slide-info__img {
  text-align: center;
  margin-bottom: 20px;
}
.works-slide-info__text {
  color: #fff;
  font-size: var(--px16);
  letter-spacing: .05em;
}
.works-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-top: var(--px60);
  margin-inline: auto;
  position: relative;
}
.works-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 14px;
  mask-image: url(../img/common/icon-form-btn.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background: var(--color-theme);
  transition: var(--transition);
}
.works-btn:hover::before {
  background: #fff;
}
.works-btn a {
  display: block;
  width: 100%;
  font-size: var(--px20);
  color: var(--color-theme);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  background: #fff;
  border: 1px solid var(--color-theme);
  border-radius: 4px;
  padding: 1em 0;
  transition: var(--transition);
}
.works-btn a:hover {
  opacity: 1;
  color: #fff;
  background: var(--color-theme);
}

/* TECHNOLOGY */
.technology {
  color: var(--color-theme);
  margin-top: var(--px150);
}
.technology .secTitle-slider-wrap {
  z-index: 0;
}
.technology-content {
  background: #fff;
  border-radius: var(--px60);
  overflow: hidden;
  padding: var(--px100) 0;
}
.technology-content-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: var(--px60);
}
.technology-content-item {
  padding: 50px 30px;
  border: 1px solid var(--color-skyblue);
  border-radius: 190px 190px 10px 10px;
  overflow: hidden;
  box-shadow: 5px 5px 0px 0px var(--color-skyblue);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition-delay: calc(var(--item) * var(--delay));
}
.technology-content-item__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--px12);
  line-height: 1;
}
.technology-content-item__title {
  font-size: var(--px24);
  font-weight: var(--font-weight-medium);
  text-align: center;
  border-bottom: 2px solid var(--color-skyblue);
  padding-bottom: .4em;
  margin: 1em 0;
}
.technology-content-item__text {

}
.technology-content-item__img {
  margin-top: var(--px30);
  border-radius: 10px;
  overflow: hidden;
}


/* FLOW */
.flow {
  padding-top: var(--px120);
  margin-top: var(--px150);
}
.flow-content {
  position: relative;
}
.flow-content-bg {
  position: absolute;
  top: -2vw;
  z-index: -1;
  width: 100%;
  height: auto;
}
.flow-content-bg img {
  width: 100%;
  height: 100%;
}
.flow-content-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  margin-top: var(--px80);
}
.flow-content-item {
  display: grid;
  place-items: center;
  color: var(--color-theme);
  background: #fff;
  padding: 1.6em 1em;
  border-radius: 10px;
  position: relative;
  transition-delay: calc(var(--item) * var(--delay));
}
.flow-content-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #ffffff;
  border-right: 0;
}
.flow-content-item__num {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--px12);
  line-height: 1;
  padding: 1em 0;
  border-top: 1px solid var(--color-theme);
  border-bottom: 1px solid var(--color-theme);
  margin-bottom: 2em;
}
.flow-content-item__text {
  width: 100%;
  font-size: var(--px18);
  font-weight: var(--font-weight-medium);
  text-align: center;
}
.flow-content-item small {
  display: block;
  font-size: var(--px12);
  text-align: center;
}
.flow-content-text__bottom {
  width: fit-content;
  font-size: var(--px16);
  color: #fff;
  text-align: center;
  line-height: 1.6;
  background: var(--color-theme);
  border-radius: 6px;
  padding: .6em 1.2em;
  margin: 3em auto 0;
}

/* CONTACT */
.contact {
  color: var(--color-theme);
  margin-top: var(--px150);
}
.contact .secTitle-slider-wrap {
  z-index: 0;
  pointer-events: none;
}
.contact .secTitle-slider-wrap .secTitle-slider img {
  max-height: 160px;
}
.contact .secTitle-slider img {
  height: clamp(100px, calc(var(--px1) * 170), 170px);
}
.contact .sec-title {
  font-size: var(--px38);
}
.contact-content {
  background: #fff;
  border-radius: var(--px60);
  overflow: hidden;
  padding: var(--px120) 0 var(--px200);
}
.contact-content-inner {
  max-width: 1380px;
  margin-inline: auto;
  padding: 0 20px;
} 
.contact-content-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.contact-content-flex__left {
  width: 400px;
}
.contact-content-flex__left p {
  color: var(--color-base);
}
.contact-content-flex__right {
  width: 900px;
}
.contact-form {
  font-weight: var(--font-weight-medium);
}
.form-items {

}
.form-item {

}
.form-item:not(:last-child) {
  margin-bottom: var(--px40);
}
/* FORM */
/* スタイルリセット */
input,
button,
textarea,
select {
  font: inherit;
}
input,
button,
select,
textarea {
  font: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea {
  resize: none;
}
input[type=checkbox],
input[type=radio] {
  display: none;
}
input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-spinner {
	display:none;
}
/* フォーム共通 */
.form-label {
  font-size: var(--px20);
  color: var(--color-base);
  margin-bottom: .5em;
}
.form-label .required {
  font-size: var(--px12);
  color: #fff;
  background: #E30000;
  line-height: 1;
  padding: 5px 10px 6px;
  border-radius: 4px;
  position: relative;
  top: -.15em;
  margin-left: 1em;
}
.form-label .optional {
  font-size: var(--px12);
  color: #fff;
  background: var(--color-base);
  line-height: 1;
  padding: 5px 10px 6px;
  border-radius: 4px;
  position: relative;
  top: -.15em;
  margin-left: 1em;
}
.form-data small {
  font-size: var(--px14);
  color: var(--color-base);
  opacity: .5;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-size: var(--px18);
  color: var(--color-base);
  letter-spacing: 0.1em;
  line-height: 2;
  padding: 0.6875em 1em;
  border-radius: 0.3125em;
  border: 1px solid #BEBEBE;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border: 1px solid var(--color-base);
}
/* プレースホルダー */
::placeholder {
  font-size: var(--px18);
  font-weight: var(--font-weight-light);
  color: #BEBEBE;
  letter-spacing: 0.1em;
  line-height: 2;
}
/* チェックボックス 共通 */
.form-privacy {
  width: fit-content;
}
.form-privacy .wpcf7-list-item {
  margin: 0;
}
.form-privacy .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  font-size: var(--px18);
  color: var(--color-base);
}

/* チェックボックス カスタム */
.privacy-checkbox {
  display: block;
  width: 1em;
  height: 1em;
  margin-right: 10px;
  border: solid 1px var(--color-base);
  transition: var(--transition);
  border-radius: 2px;
  position: relative;
  bottom: -2px;
}
.privacy-checkbox::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../img/common/icon-check.svg) no-repeat center / contain;
  opacity: 0;
  transition: var(--transition);
}
.form-privacy input[type=checkbox]:checked + .wpcf7-list-item-label .privacy-checkbox::before {
  opacity: 1;
}
.privacy-text {
  color: var(--color-base);
  letter-spacing: 0.1em;
  line-height: 2;
}
.privacy-text a {
  text-decoration: underline;
}
/* 送信ボタン */
.form-btn-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  text-align: center;
  margin-top: var(--px40);
}
.form-btn-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 14px;
  mask-image: url(../img/common/icon-form-btn.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background: var(--color-theme);
  transition: var(--transition);
}
.form-btn-wrap:hover::before {
  background: #fff;
}
input[type="submit"].form-btn {
  width: 100%;
  height: 100%;
  color: var(--color-theme);
  font-size: var(--px20);
  line-height: 1;
  background: #fff;
  border: 1px solid var(--color-theme);
  border-radius: 4px;
  padding: 1em;
  transition: var(--transition);
}
.form-btn-wrap:hover input[type="submit"].form-btn {
  color: #fff;
  background: var(--color-theme);
}

/* PAGE COMMON */
.page-mv {
  margin-top: 100px;
}
.page-mv-inner {
  max-width: 830px;
  margin-inline: auto;
  position: relative;
}
.page-mv-bg {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.page-mv-img {
  max-width: 340px;
  margin-inline: auto;
  position: relative;
  pointer-events: none;
}
.page-mv-title__wrap {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.page-mv-title {
  font-size: var(--px42);
  font-family: var(--font-serif);
  writing-mode: vertical-rl;
  letter-spacing: .2em;
  line-height: 1;
}
.page-mv .secTitle-slider-wrap {
  top: 50%;
  transform: translateY(-50%);
}
.page-content {
  margin-top: var(--px150);
}

/* ARCHIVE WORKS */
.archive-works-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.archive-works-item {
  border-radius: 40px;
  background: url(../img/common/bg-white.webp) no-repeat center / cover;
  padding: 30px 0 var(--px60);
}
.archive-works-item__title {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--px60);
}
.archive-works-item__title p {
  color: var(--color-theme);
  font-size: var(--px16);
  font-weight: var(--font-weight-medium);
  padding-left: 30px;
  position: relative;
}
.archive-works-item__title p::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--color-theme);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.archive-works-item__thumb {
  width: 100%;
  height: clamp(200px, calc(var(--px1) * 400), 400px);
  margin-top: 20px;
}
.archive-works-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive-works-item__detail {
  display: grid;
  grid-template-columns: 1fr 160px;
  color: var(--color-theme);
  padding: 0 var(--px60);
  margin-top: var(--px40);
}
.archive-works-item__detail-text {
  padding-right: var(--px40);
  margin-right: var(--px40);
  position: relative;
}
.archive-works-item__detail-text::after {
  content: "";
  width: 1px;
  height: 275px;
  background: var(--color-theme);
  position: absolute;
  top: 0;
  right: 0;
}
.archive-works-item__detail-text h5 {
  font-size: var(--px20);
  font-weight: var(--font-weight-medium);
  margin-bottom: .2em;
}
.archive-works-item__detail-text p {
  font-size: var(--px16);
}
.archive-works-item__detail-text-box:not(:last-child) {
  margin-bottom: 30px;
}
.archive-works-item__detail-people {

}
.archive-works-item__detail-people-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
}
.archive-works-item__detail-people-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.archive-works-item__detail-people-name {
  font-size: var(--px20);
  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-top: .5em;
}
.archive-works-item__detail-people-name small {
  display: block;
  font-size: var(--px12);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

/* ADD */
.contact-content-flex__left-tel {
  color: var(--color-base);
  margin-top: 1em;
}
.contact-content-flex__left-tel a {
  display: block;
  width: fit-content;
  text-decoration: underline;
}
.footer-btn {
  display: block;
  width: fit-content;
  margin-top: 1em;
  margin-left: auto;
}
.footer-btn a {
  font-size: var(--px16);
  color: var(--color-theme) !important;
  font-weight: var(--font-weight-medium);
  background: #fff;
  border: 2px solid #fff;
  border-radius: 3em;
  padding: .5em 2em;
}
.footer-btn-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.footer-btn-flex svg {
  width: var(--px24);
  fill: var(--color-theme);
  position: relative;
  bottom: -.05em;
  transition: var(--transition);
}
.footer-btn a:hover {
  opacity: 1;
  background: var(--color-theme);
  color: #fff !important;
}
.footer-btn a:hover .footer-btn-flex svg {
  fill: #fff;
}
.coming-soon {
  color: #fff;
  font-size: var(--px54);
  text-align: center;
  font-weight: var(--font-weight-medium);
}
@media screen and (max-width: 767px) {
  .coming-soon {
    font-size: 32px;
  }
}

/* 20260303 add */
.works-slide-info__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--px18);
  color: #fff;
  margin-bottom: 20px;
}
.works-slide-info__title img {
  max-width: 80px;
}
.archive-works-item {
  min-width: 0;
}
.archive-works-item__slider {
  width: 100%;
  height: clamp(200px, calc(var(--px1) * 400), 400px);
  margin-top: 20px;
}
.archive-works-item__slider .swiper-pagination-bullet-active {
  background: var(--color-base);
}