@charset "utf-8";
/*
Theme Name: VERTEX251218
Description: 
Author: COSMICGEAR
Version: 2.0
*/

/*-root*/
:root {
  --fnt-base: "Noto Sans JP", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --fnt-serif: "Noto Serif JP", serif;
  --fnt-cap: capitolina, "Noto Serif JP", serif;
  --fc-base: #333333;

  --head1: min(3.2rem, calc(100vw / 18));
  --head2_wid: clamp(2rem, 1.591rem + 4.55vw, 5rem);
  /*25-50*/
  --head2: min(4.5rem, calc(100vw / 18));
  --head3: clamp(1.9rem, 1.827rem + 0.36vw, 2.1rem);
  /*19-21*/

  --clr-navy: #304b7c;
  --clr-red: #ff401f;
  --clr-blue: #337ca6;
  --clr-wblue: #35adcf;
  --clr-gry: #9d9d9d;

  --bdr-gry: #bababa;

  --wall-beg: #faf7f0;
  --wall-gry: #f4f4f4;
  --wall-wblue: #e9f6f9;
  --gra-navy: linear-gradient(var(--clr-navy), var(--clr-wblue));
  --hvr-gra-navy: linear-gradient(var(--clr-wblue), var(--clr-navy));
  --gra-lblue: linear-gradient(90deg, #d6eff8, #f4f4f4);
  --gra-red: linear-gradient(#ff8c78, var(--clr-red));
  --hvr-gra-red: linear-gradient(var(--clr-red), #ff8c78);
  --box-sdw: 0 2px 4px rgba(0, 0, 0, 0.16);
  --box-sdw_wid: 0 3px 6px rgba(0, 0, 0, 0.16);
  --bdr-gry: #cecece;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: 0.3s var(--easing);
}

/*base=====*/
html {
  font-size: 62.5%;
}

body {
  font-family: var(--fnt-base);
  font-size: min(1.6rem, 3.6vw);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  color: var(--fc-base);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: opacity var(--transit);
  opacity: 0;
}

body.is-load {
  opacity: 1;
}

.fnt-serif {
  font-family: var(--fnt-serif);
}

.fnt-cap {
  font-family: var(--fnt-cap);
}

.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.fl.jc_c {
  justify-content: center;
}

.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.fl_c.ai_c {
  -ms-align-items: center;
  align-items: center;
}

figure {
  margin-bottom: 0 !important;
}

.pagetop_wrap {
  pointer-events: none;
  width: min(1440px, 100%);
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  padding-right: min(2rem, 3vw);
  padding-bottom: min(2rem, 3vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

#pagetop {
  width: min(4.5rem, 15vw);
  pointer-events: auto;
  cursor: pointer;
}

/*container
========================================================*/

#container {
  width: 100%;
  min-height: 100dvh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}

#container>* {
  width: 100%;
}

a.cvr {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/*hum
=====================================*/
#hum-btn {
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  width: min(4.2rem, 15vw);
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  translate: 0 -50%;
}

#hum-btn button {
  width: 60%;
  height: 3px;
  background: var(--gra-navy);
  position: relative;
  -webkit-transition: background var(--transit);
  -o-transition: background var(--transit);
  transition: background var(--transit);
}

#hum-btn button::before,
#hum-btn button::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: var(--gra-navy);
  -webkit-transition: transform var(--transit);
  -o-transition: transform var(--transit);
  transition: transform var(--transit);
  transform-origin: center;
}

#hum-btn button::before {
  top: -0.8rem;
}

#hum-btn button::after {
  bottom: -0.8rem;
}

#hum-btn.open {
  background: var(--clr-navy);
}

#hum-btn.open button {
  background: none;
}

#hum-btn.open button::before,
#hum-btn.open button::after {
  top: calc(50% - 2px);
  background: #fff;
}

#hum-btn.open button::before {
  transform: rotate(-45deg);
}

#hum-btn.open button::after {
  transform: rotate(45deg);
}

#l-nav {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: all var(--transit);
  -o-transition: all var(--transit);
  transition: all var(--transit);
}

.l-nav_inner {
  width: 100%;
  max-height: 100%;
  padding: min(10rem, 25vw) 20px min(5rem, 10vw);
  background: var(--clr-navy);
  translate: 0 -100%;
  -webkit-transition: all var(--transit);
  -o-transition: all var(--transit);
  transition: all var(--transit);
}

#l-nav.is-view {
  opacity: 1;
  visibility: visible;
}

#l-nav.is-view .l-nav_inner {
  translate: 0 0;
}

.l-nav__menu li {
  background: #fff;
}

.l-nav__menu li:not(:first-child) {
  margin-top: 5px;
}

.l-nav__menu li a {
  display: block;
  padding: min(1.5rem, 3vw);
  font-weight: 500;
  font-size: min(1.5rem, 4vw);
}

/*header
=====================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(infinity);
  background: #fff;
  transition: all var(--transit);
}

#unfixed_header {
  transition: translate var(--transit);
  background: #fff;
}

#fixed_header {
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 -100%;
  transition: translate var(--transit);
  background: #fff;
  height: 100%;
}

.head-inner {
  display: grid;
  height: 100%;
  grid-template-columns: min(26.7rem, 20%) auto;
  gap: min(2.7rem, 3vw);
}

.head_logo {
  display: grid;
  place-content: center;
}

.head_logo img {
  transition: scale var(--transit);
}

.head_logo .text {
  font-size: min(1.125rem, 3vw);
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
  display: block;
  transition: all var(--transit);
  padding-bottom: 8px;
}

.head-nav {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: min(2.5rem, 3vw);
}

.head-nav__about {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-end;
  -ms-align-items: baseline;
  align-items: baseline;
  gap: 0 min(1rem, 2.5vw);
  line-height: calc(21 / 15);
  transition: all var(--transit);
  padding-top: min(1.5rem, 2.5vw);
}

.head-nav__about .address {
  font-size: min(1.5rem, 3.2vw);
  padding-left: 1.25em;
}

.head-nav__about .address::before {
  content: "";
  width: 0.85em;
  aspect-ratio: 1/1.5957;
  background: url("images/icon/pin.svg") no-repeat center/auto 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.head-nav__about .dial {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: baseline;
  align-items: baseline;
  gap: min(0.8rem, 2.5vw);
}

.head-nav__about .dial a {
  font-size: min(2.2rem, 3.6vw);
  font-weight: 600;
  color: var(--clr-red);
  padding-left: 1em;
  word-break: keep-all;
}

.head-nav__about .dial a::before {
  content: "";
  width: 0.8em;
  aspect-ratio: 1/1;
  background: url("images/icon/dial.svg") no-repeat center/100%;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -40%;
}

.head-nav__about .dial .time {
  font-size: min(1.2rem, 3vw);
  margin-left: auto;
}

#g-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

#g-nav>li:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: var(--bdr-gry);
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
}

#g-nav>li>a {
  display: grid;
  font-size: min(1.7rem, 3.6vw);
  grid-template-columns: 1fr;
  place-content: center;
  place-items: center;
  padding-bottom: 1em;
  gap: 1rem;
  transition: color var(--transit);
}

#g-nav>li>a>span {
  font-size: 0.7647em;
  font-family: var(--fnt-cap);
  color: var(--clr-navy);
  font-weight: 500;
  transition: color var(--transit);
}

#g-nav>li::after {
  content: "";
  width: 100%;
  height: 0.3rem;
  background: var(--gra-navy);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}

body.home #g-nav li.nav-home::after,
body.page-service #g-nav li.nav-service::after,
body.page-service-child #g-nav li.nav-service::after,
body.page-company #g-nav li.nav-company::after,
body.page-facility #g-nav li.nav-facility::after,
body.page-contact #g-nav li.nav-contact::after,
body.page-contact-child #g-nav li.nav-contact::after {
  opacity: 1;
}

.js-pdn__in {
  position: absolute;
  z-index: 1;
  bottom: 4px;
  left: 0;
  width: 100%;
  translate: 0 100%;
  background: #fff;
  display: none;
  padding: 1rem;
  box-shadow: var(--box-sdw_wid);
}

.js-pdn__in::after {
  content: "";
  width: 100%;
  height: 5px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  translate: 0 -50%;
}

.js-pdn__in>li a {
  display: block;
  padding: min(1.3rem, 3vw);
  background: #f4f4f4;
  text-align: center;
}

.js-pdn__in>li:not(:first-child) {
  margin-top: 5px;
}

@media (hover) {

  #g-nav>li:hover>a,
  #g-nav>li:hover>a>span {
    color: var(--clr-gry);
  }
}

/*fixed ++++++++*/

header.fixed #unfixed_header {
  translate: 0 -100%;
}

header.fixed #fixed_header {
  translate: 0 0;
}

header.fixed {
  box-shadow: var(--box-sdw_wid);
  height: 8.3rem;
}

#fixed_header .head-nav {
  align-content: flex-end;
}

/* #fixed_header .head_logo {
  padding-bottom: min(1.2rem, 2.5vw);
} */
#fixed_header .head_logo img {
  scale: 0.7;
}

header.nav-open {
  box-shadow: var(--box-sdw_wid);
}

/*main
=====================================*/
main {
  flex: 1;
  padding-bottom: min(10rem, 15vw);
}

.inner {
  width: min(144rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(7rem, 4vw);
  padding-right: min(7rem, 4vw);
}

.in-text {
  line-height: calc(28 / 16);
}

/*button setting*/
.rect-btn {}

.rect-btn a {
  display: grid;
  place-content: center;
  color: #fff;
  background: var(--gra-navy);
  border-radius: 0.5rem;
  font-weight: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.rect-btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--hvr-gra-navy);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity var(--transit);
}

.rect-btn.red a {
  background: var(--gra-red);
}

.rect-btn.red a::before {
  background: var(--hvr-gra-red);
}

.rect-btn.min {
  width: min(27.3rem, 100%);
  height: 6rem;
}

.rect-btn.more a span {
  padding-right: 2em;
}

.rect-btn.more a span::before {
  content: "";
  width: 1.25em;
  aspect-ratio: 1/1;
  background: url("images/icon/btn-arrow.svg") no-repeat center/cover;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}

/*form button*/
.form-btn a span {
  padding-left: 2.55em;
  font-size: min(1.6rem, 3.6vw);
  z-index: 1;
}

.form-btn a span::before {
  content: "";
  width: 2.1538em;
  aspect-ratio: 1/1;
  background: url("images/icon/airplane.svg") no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

@media (hover) {
  .rect-btn:not(.back) a:hover::before {
    opacity: 1;
  }
}

.rect-btn.back {
  width: min(40rem, 100%);
  height: 6.5rem;
}

.rect-btn.back a {
  background: #fff;
  border: 1px solid var(--clr-navy);
  color: var(--fc-base);
  font-weight: 400;
  font-size: min(1.5rem, 3.6vw);
}

/*list setting +++++++++++++++*/

.dot-list>li {
  padding-left: 1em;
  line-height: calc(28 / 16);
}

.dot-list>li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.dot-list.d-wblue li::before {
  color: var(--clr-blue);
}

/*#hero
============================*/

.hero_title {
  width: calc(100% - min(5rem, 4vw));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16));
}

.hero_title p {
  clip-path: polygon(min(3rem, 4vw) 0%,
      100% 0%,
      calc(100% - min(3rem, 4vw)) 100%,
      0% 100%);
  background: #fff;
}

.hero_title p span {
  display: block;
  font-size: min(2.4rem, calc(100vw / 19));
  color: var(--clr-blue);
  padding: min(1.5rem, 2.5vw) min(2.5em, 10vw);
  font-weight: 600;
  word-break: keep-all;
  line-height: calc(28 / 24);
  text-align: center;
}

/*#index content
============================*/
#content {
  display: grid;
  grid-template-columns: auto min(32rem, 26%);
  gap: min(8rem, 15vw) min(5rem, 3.5vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}

#content.full-wrapper {
  grid-template-columns: 1fr;
  place-items: center;
}

#content.full-wrapper #l-main {
  width: min(1000px, 100%);
}

.index-contents {
  margin-top: min(9rem, 15vw);
}

/*title setting*/
.intro-title {
  font-size: var(--head2_wid);
  font-family: var(--fnt-serif);
  font-weight: 600;
  line-height: calc(35 / 25);
  word-break: keep-all;
}

.sec-title {
  font-size: var(--head2);
  line-height: calc(35 / 25);
  color: var(--clr-blue);
  font-weight: 500;
}

.sec-title.red-line {
  padding-left: min(2rem, 3vw);
}

.sec-title.red-line::before {
  content: "";
  width: 2px;
  height: 1em;
  position: absolute;
  top: 0.25em;
  left: 0;
  background: var(--clr-red);
}

/*box setting*/

.sec-intro-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(3rem, 5vw);
}

/*index intro ++++++++++++++++++++++++++++*/
.index-intro-blc .in-text {
  margin-top: min(3rem, 5vw);
}

/*index flow +++++++++++++++++++++++++++++*/
.index-flow-blc {
  margin-top: min(10rem, 15vw);
}

.index-flow-list {
  margin-top: min(3rem, 5vw);
}

.index-flow-list::before {
  content: "";
  width: 2px;
  height: calc(100% - ((100% / 7) - min(5.7rem, 8vw)));
  background: var(--gra-navy);
  position: absolute;
  top: 0;
  left: min(5rem, 5%);
}

.flow-items {
  display: grid;
  grid-template-columns: min(10rem, 10%) min(25em, 50%) auto;
  gap: min(3rem, 5vw);
}

.flow-items:not(:first-child) {
  margin-top: min(5.7rem, 8vw);
}

.flow-items .comment .in-title {
  font-size: var(--head3);
  font-weight: 600;
  color: var(--clr-navy);
}

.flow-items .comment .in-text {
  margin-top: 0.5rem;
}

.flow-items:not(:last-child) .tag::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% + 1px);
  width: 1rem;
  aspect-ratio: 1/1;
  border: 2px solid;
  border-color: transparent var(--bdr-clr) var(--bdr-clr) transparent;
  rotate: 45deg;
  translate: -50% 0;
}

.flow-items:nth-child(1) .tag::after {
  --bdr-clr: var(--clr-navy);
}

.flow-items:nth-child(2) .tag::after {
  --bdr-clr: #326491;
}

.flow-items:nth-child(3) .tag::after {
  --bdr-clr: #32739e;
}

.flow-items:nth-child(4) .tag::after {
  --bdr-clr: #3183ab;
}

.flow-items:nth-child(5) .tag::after {
  --bdr-clr: #3494ba;
}

.flow-items:nth-child(6) .tag::after {
  --bdr-clr: #34a4c7;
}

/*index flow +++++++++++++++++++++++++++++*/
.index-works-blc {
  margin-top: min(10rem, 15vw);
}

.index-works-box {
  margin-top: min(3rem, 5vw);
}

.index-works-box>*+* {
  margin-top: min(2rem, 3vw);
}

/* l-side
=============================================================================*/
#l-side {
  padding: min(5rem, 5vw) 0 min(5rem, 5vw) min(5rem, 3vw);
  display: grid;
  grid-template-columns: 1fr;
  gap: min(5rem, 12vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}

#l-side::before {
  content: "";
  /*  width: 100vw;*/
  width: calc(100% + min(7rem, 4vw));
  height: 100%;
  background: var(--wall-beg);
  position: absolute;
  left: 0;
  top: 0;
}

.side-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(1rem, 2vw);
}

.side-title {
  font-size: min(1.5rem, 3.7vw);
  font-weight: 500;
}

.side-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(2rem, 4vw);
}

.side-detail.banner>* {
  border-top: 2px solid var(--bdr-gry);
}

.side-detail.banner a::after,
.side-detail.access::after {
  content: "";
  width: 10%;
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0;
  background: var(--bdr-clr);
}

.side-detail.banner a.bdr-red::after,
.side-detail.access::after,
.side-detail.banner a.bdr-red_full::after {
  --bdr-clr: var(--clr-red);
}

.side-detail.banner a.bdr-blue {
  box-shadow: var(--box-sdw);
}

.side-detail.banner a.bdr-blue::after {
  --bdr-clr: var(--clr-wblue);
}

.side-detail.banner a.bdr-red_full {
  border: 1px solid var(--bdr-gry);
}

.side-detail.banner a.bdr-red_full::after {
  width: 100%;
}

.side-detail.access {
  background: #fff;
  padding: min(4rem, 4vw) min(3rem, 3vw);
  border-top: 2px solid var(--bdr-gry);
  box-shadow: var(--box-sdw);
}

.side-detail.access .map-area {
  aspect-ratio: 1/0.6619;
}

.side-detail.access .map-area iframe {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.side-detail.access .comment {
  font-size: min(1.4rem, 3.4vw);
  line-height: calc(24 / 14);
}

.side-detail.access .comment>*+* {
  margin-top: 1rem;
}

/*footer
======================================================================*/
footer {
  background: url("images/wall/pattern.png") no-repeat top center/cover;
}

footer p.copy {
  padding: 1rem;
  text-align: center;
  font-size: min(1rem, 3vw);
  background: var(--fc-base);
  color: #fff;
}

.foot-inner {
  font-size: min(1.4rem, 3.2vw);
  padding-top: min(7rem, 10vw);
  padding-bottom: min(4rem, 5vw);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: min(4.5rem, 8vw) min(2rem, 5vw);
}

.foot-logo {
  width: min(54.352rem, 75vw);
  /* リニューアル（2025/12） */
  grid-area: 1 / 1 / 2 / 2;
}

.foot__about {
  grid-area: 2 / 1 / 3 / 2;
}

.foot__about .comp-name {
  font-weight: 600;
}

.foot__about .add {
  margin-top: min(0.5rem, 2vw);
  line-height: calc(22 / 15);
}

.foot__about .add span:not(.sp-block) {
  display: block;
}

.foot__about .add span.sp-block {
  padding-left: 0.5em;
}

.foot__about .links {
  margin-top: min(1.5rem, 3vw);
}

.foot__about .links>div:not(.spView) {
  display: grid;
  grid-template-columns: 5em auto;
}

.foot__about .links dd {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem 0;
}

.foot__about .links dd a {
  padding: 0 1em;
}

.foot__about .links dd a span {
  padding-right: 1em;
}

.foot__about .links dd a span::after {
  content: "";
  width: 0.7em;
  aspect-ratio: 1/1;
  background: url("images/icon/link-out.svg") no-repeat center/100%;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}

.foot__about .links dd a:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 1em;
  background: var(--fc-base);
  rotate: 20deg;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

.foot__nav {
  grid-area: 3 / 1 / 4 / 2;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: min(1rem, 2vw) min(2.5rem, 4vw);
}

.foot-inquiry {
  width: min(28rem, 50vw);
  grid-area: 1 / 2 / 4 / 3;
  margin-left: auto;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: min(1.5rem, 3vw);
}

.foot-inquiry .in-title {
  width: 100%;
  font-weight: 500;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  font-size: min(1.5rem, 3.2vw);
}

.foot-inquiry .in-title::before,
.foot-inquiry .in-title::after {
  content: "";
  width: calc((100% - 9em) / 2);
  height: 1px;
  background: var(--fc-base);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.foot-inquiry .in-title::before {
  left: 0;
}

.foot-inquiry .in-title::after {
  right: 0;
}

.foot-inquiry .in-text {
  font-size: min(1.5rem, 3.2vw);
}

.foot-inquiry .dial .title {
  padding-left: 2.5em;
  font-weight: 500;
}

.foot-inquiry .dial .title::before {
  content: "";
  width: 2em;
  aspect-ratio: 1/1;
  background: url("images/icon/ccl-dial.svg") no-repeat center/100%;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

.foot-inquiry a.num {
  margin-top: 0.8rem;
  font-size: min(3.9rem, 4vw);
  font-weight: 600;
  display: block;
  word-break: keep-all;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

.foot-inquiry .dial .time {
  margin-top: 0.5rem;
}

/* ==========================================================
 *
 * 💡 リニューアル（2025/12）💡
 *
 * ========================================================== */

/* ----------- 見出しキャラクター ----------- */

.sec-title span {
  display: flex;
  align-items: center;
}

.sub-chara {
  height: 1.5em;
  width: auto;
  vertical-align: middle;
  margin-left: 10px;
}

/*.  ----------設備　マシーン ----------- */

.col {
  margin-top: 30px;
}

.machine-img {
  width: 100%;
  height: auto;
  border: solid 1px var(--bdr-gry);
  margin-bottom: 15px;
}

.machine-title {
  text-align: center;
  font-weight: bold;
  color: var(--clr-navy);
  margin-bottom: 10px;
}

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

/* フードプリント加工（追加ページ） */

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

.print-intro-title {
  font-size: min(3.5rem, calc(100vw / 18));
  font-weight: 500;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  line-height: calc(60 / 45);
  text-align: center;
  gap: min(1rem, 1.5vw);
}

.print-intro-title span.wid {
  font-size: 1.2857em;
  color: var(--clr-blue);
}

.print-intro-title span.mid {
  color: var(--clr-blue);
}

.under-thumb {
  margin-top: 30px;
}

/* ---------- 取り扱いお菓子紹介  --------- */

.food-print-list {
  margin-top: min(3rem, 5vw);
}

.food-print-list>div:not(:first-child) {
  margin-top: min(5rem, 8vw);
}

.food-print-detail {
  margin-top: min(5rem, 10vw);
}

.food-print-detail>*+* {
  margin-top: min(3rem, 6vw);
}

/*.  ----------アイシングクッキー ----------- */

.print-thumb-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* PCでは4列表示 */
  gap: min(3rem, 4vw);
  margin-top: min(5rem, 7vw);
}

.print-thumb-box figure {
  width: 100%;
  padding-top: 100%;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  background-color: var(--wall-wblue);
  display: block;
  overflow: hidden;
}

.print-thumb-box figure picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.print-thumb-box figure img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.print-thumb-box.is-circle figure {
  border-radius: 50%;
}

.food-print-list {
  margin-top: min(3rem, 5vw);
}

.page-food-blc:not(:first-child) {
  margin-top: min(10rem, 15vw);
}

.page-food-flow:not(:first-child) {
  margin-top: min(10rem, 15vw);
}

.cookie-size-container {
  display: flex;
  justify-content: space-between;
  background-color: #fffcef;
  border-radius: 10px;
  margin: 30px auto;
  padding: 20px 0;
  border: 1px solid var(--bdr-gry);
  overflow: hidden;
}

.cookie-item {
  position: relative;
  width: 33.333%;
  /* 3つの項目を均等幅に */
  text-align: center;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}

.cookie-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  background-color: var(--bdr-gry);
  position: absolute;
  right: 0;
  top: -20px;
  bottom: -20px;
}

.cookie-title,
.marsh-title {
  font-size: min(1.5rem, 3.2vw);
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--fc-base);
}

.cookie-spec,
.marsh-spec {
  font-size: min(1.4rem, 3.4vw);
  color: var(--fc-base);
  margin-bottom: 15px;
}

.cookie-image {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cookie-image img {
  max-width: 100%;
  height: auto;
}

.cookie-l .cookie-image img {
  max-width: 70%;
}

.cookie-m .cookie-image img {
  max-width: 58%;
}

.cookie-s .cookie-image img {
  max-width: 47%;
}

/*.  ---------- その他のお菓子へのプリント ----------- */

/* グラデーション枠 */
.food-print-detail .btm-comment {
  margin-top: min(5rem, 8vw);
}

.food-print-detail .btm-comment::before {
  content: "";
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background: var(--gra-navy);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.food-print-detail .btm-comment>.food-other-wrap {
  padding-top: max(15px, 1.5vw);
  padding-bottom: max(15px, 1.5vw);
  padding-left: min(2.5rem, 4vw);
  padding-right: min(2.5rem, 4vw);
  background: #fff;
  position: relative;
  z-index: 2;
}

/* サンプル画像 */
.other-print-sample {
  display: flex;
  gap: 20px;
  margin-top: min(3rem, 5vw);
}

.other-print-sample figure {
  flex: 1 1 33.33%;
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  background-color: #f5e9d9;
  border-radius: 10px;
  overflow: hidden;
}

.other-print-sample picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.other-print-sample .align-bottom picture {
  align-items: flex-end;
}

.other-print-sample img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/*.  ---------- マシュマロサイズ ----------- */

.marsh-size-container {
  display: flex;
  justify-content: space-between;
  background-color: #fffcef;
  border-radius: 10px;
  margin: 30px auto;
  padding: 20px 0;
  border: 1px solid var(--bdr-gry);
  flex-wrap: nowrap;
}

.marsh-item {
  width: 16.66%;
  /* 6列を確保 */
  text-align: center;
  padding: 0 5px;
}

.marsh-image {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.marsh-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* コーポレートキャラクター（追加ページ） */

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

/*.  ---------- タイトル ----------- */

.character-title {
  display: flex;
  text-align: center;
  flex-direction: column;
}

.en-name {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: clamp(1.875rem, -0.478rem + 11.76vw, 6.875rem);
  background: linear-gradient(to bottom, #114371 0%, #00a4cd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-name {
  display: block;
  width: 100%;
  max-width: clamp(60px, 7vw, 98px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px;
  object-fit: contain;
}

/*.  ---------- 画像部分 ----------- */

.page-character-face {
  position: relative;
  width: 100%;
  padding-top: 80%;
  margin-top: clamp(30px, 5.7vw, 57px);
  margin-bottom: min(120px, 15vw);
}

.watercolor-background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 10;
}

.watercolor-background picture,
.watercolor-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 110%;
}

.main-character-img {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-40%);
  width: 50%;
  z-index: 40;
}

.main-character-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- ピンクと水色のバブル ----- */
.bubble-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.bubble {
  position: absolute;
  height: auto;
}

/* 右のピンク */
.bubble-1 {
  top: 18%;
  right: 14%;
  width: clamp(36px, 7.2vw, 54px);
}

/* 左の水色 */
.bubble-2 {
  bottom: 10%;
  left: 1%;
  width: clamp(36px, 7.2vw, 54px);
}

/* 左のピンク */
.bubble-3 {
  bottom: 22%;
  left: 12%;
  width: clamp(30px, 6vw, 45px);
}

/* 右の水色 */
.bubble-4 {
  top: 28%;
  right: 1%;
  width: clamp(46px, 9.65vw, 72px);
}

/* ----- バブルのアニメーション ----- */

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* アニメーション（.bubbleクラスに適用） */
.bubble {
  position: absolute;
  height: auto;
  animation-name: float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}

/* 個別調整（不揃い感の演出） */
/* 右のピンク */
.bubble-1 {
  animation-duration: 4.2s;
  animation-delay: 0.1s;
}

/* 左の水色 */
.bubble-2 {
  animation-duration: 3.5s;
  animation-delay: 0.8s;
}

/* 左のピンク */
.bubble-3 {
  animation-duration: 5s;
  animation-delay: 1.5s;
}

/* 右の水色 */
.bubble-4 {
  animation-duration: 4.6s;
  animation-delay: 0.4s;
}

/* ----- VERTEX corporate character! ----- */
.en-corporate-text {
  position: absolute;
  z-index: 40;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 5vw, 40px);
  text-align: center;
  color: var(--clr-wblue);
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(-80px, -10vw, -40px);
  white-space: nowrap;
  width: max-content;
}

/*.  ---------- 名前の由来 / デザイン ----------- */

.page-character-about {
  margin-top: min(15rem, 20vw);
}

.flex-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.flex-about-flame {
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
  padding: 25px;
  text-align: center;
  background-image: linear-gradient(to bottom right, #dcffff, #8ef4ff);
  border-radius: 15px;
  overflow: visible;
  /* 隠さずにすべて表示する */
}

.flame-icon {
  position: absolute;
  width: 50px;
  height: auto;
  top: -20px;
  right: 10%;
}

.origin-design-title {
  display: block;
  width: 100%;
  max-width: clamp(100px, 15vw, 130px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  object-fit: contain;
}

.origin-keyword {
  padding: 10px 30px;
  margin: 15px auto;
  width: fit-content;
  line-height: 1.6;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  text-align: left;
}

.origin-keyword-text {
  font-weight: bold;
  color: var(--clr-wblue);
}

.origin-formula {
  font-weight: bold;
  color: var(--clr-red);
  font-size: 1.2em;
  display: inline-block;
  margin-top: 1px;
}

.design-box .in-text+.in-text {
  border-top: 1px solid var(--clr-wblue);
  padding-top: 15px;
  margin-top: 15px;
}

/*.  ---------- 動画紹介 ----------- */

.page-character-video {
  margin-top: min(10rem, 15vw);
  padding: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: min(3rem, 5vw);
}

.video-header-blc {
  position: relative;
  background-image: linear-gradient(to bottom, #e9f6f9, #d6eff8 40%);
  padding: 0;
  margin: 0;
  padding-top: min(25px, 5vw);
  padding-bottom: min(calc(1.5rem + 15px), calc(2vw + 15px));
  overflow: hidden;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  object-fit: cover;
  object-position: top;
  opacity: 1;
}

.video-mite {
  position: relative;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 400px;
  object-fit: contain;
  height: auto;
  margin-bottom: 10px;
}

/* --- 動画埋め込みエリア --- */
.video-iframe-area {
  width: min(1000px, 90%);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  margin-top: clamp(0.938rem, 0.79rem + 0.74vw, 1.25rem);
}

.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
}

.youtube-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 15px;
}

.video-wrapper iframe,
.video-wrapper .youtube-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*.  ---------- サポートキャラクター ----------- */

/* VERTEX supporting characters! */
.en-chara-title {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  position: relative;
  margin: 0 auto;
  margin-top: min(7.5rem, 10vw);
  width: max-content;
  white-space: nowrap;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 5vw, 40px);
  color: var(--clr-wblue);
  text-align: center;
}

.en-chara-title .en-chara-svg {
  display: inline-block;
  height: clamp(20px, 5vw, 40px);
  width: auto;
  vertical-align: middle;
}

.en-chara-title .en-chara-svg.left {
  transform: rotate(-20deg);
  margin-right: 0.8em;
}

.en-chara-title .en-chara-svg.right {
  transform: rotate(20deg);
  margin-left: 0.8em;
}

/* 3体-円形 */
.support-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(3rem, 4vw);
  margin-top: min(5rem, 7vw);
  text-align: center;
}

.support-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.support-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: #faf7f0;
  border-radius: 50%;
  overflow: hidden;
}

.support-chara {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.staff-role {
  margin-bottom: 0.5rem;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: min(1.5rem, 3.2vw);
  font-weight: bold;
  color: var(--clr-navy);
}

/* テキスト */
.page-character-support .in-text {
  margin-top: 50px;
  text-align: center;
}

/* 環境とキャラクター */
.support-3chara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.2rem, 1.6vw);
  margin-top: min(2.5rem, 3.5vw);
}

.support-item {
  border-radius: 0;
  overflow: hidden;
}

.support-icon {
  width: 100%;
  height: auto;
  display: block;
}

/* PC時 (3列) の角丸設定 */
.support-3chara .support-item:nth-child(1) {
  border-radius: 10px 0 0 10px;
}

.support-3chara .support-item:nth-child(3) {
  border-radius: 0 10px 10px 0;
}

/*.  ---------- LINE紹介 ----------- */

.page-character-line {
  margin-top: min(8rem, 12vw);
  padding: 0;
  width: 100%;
}

.page-line {
  width: min(1000px, 100%);
  margin: 0 auto;
  text-align: center;
}

.page-line .in-text {
  margin-bottom: min(15px, 4vw);
}

.line-bnr {
  display: inline-block;
  overflow: hidden;
  border-radius: min(20px, 4vw);
  transition: opacity 0.3s ease-in-out;
}

.line-bnr:hover {
  opacity: 0.8;
}

.line-bnr img {
  width: 100%;
  height: auto;
  display: block;
}