@charset "UTF-8";
:root {
  /* カラー
  ====================== */
  --sbs-red: #B9103C;
  --sbs-red-lt01: #B90F3C;
  --sbs-red-lt02: #FFCFDB;
  --sbs-orange: #E55A00;
  --font-color: #000;
  --sub-color: #FFF6AA;

  /* テキスト
  ====================== */
  --font-family-base: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, "Font Awesome 5 Free", sans-serif;
  --font-family-pre: "Helvetica Neue", Arial,"Hiragino Sans", Meiryo, "Font Awesome 5 Free", sans-serif;

  /* --font-size-base: 16px;
  --ttl-l-base: clamp(20px,5.33vw,40px);
  --ttl-m-base: clamp(18px,4.8vw,36px);
  --ttl-s-base: 24px;
  --txt-l-base: 22px;
  --txt-m-base: 18px;
  --txt-s-base: 14px;
  --txt-xs-base: 12px; */

  --font-size-base: clamp(8px,1.17vw,16px);
  --ttl-l-base: clamp(20px,5.33vw,40px);
  --ttl-m-base: clamp(18px,4.8vw,36px);
  --ttl-s-base: 24px;
  --txt-l-base: clamp(11px,1.61vw,22px);
  --txt-m-base: clamp(9px,1.32vw,18px);
  --txt-s-base: clamp(7px,1.02vw,14px);
  --txt-xs-base: clamp(6px,0.88vw,12px);

  --sp-font-size-base: clamp(16px,3.73vw,28px);/* 本文 */
  --sp-ttl-l-base: clamp(20px,5.33vw,40px);/* 大見出し */
  --sp-ttl-m-base: clamp(18px,4.8vw,36px);/* 小見出し */
  --sp-ttl-s-base: clamp(16px,4.26vw,32px);/* 小小見出し */
  --sp-txt-s-base: clamp(12px,3.2vw,24px);/* サブテキストや注記 */
}

/* 共通
======================== */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-family-base);
  position: relative;
}
img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: inline-block;
}
a {
  text-decoration: none;
  transition: all .4s;
}
a:hover {
  opacity: .6;  
  transition: all .4s;
}
.l-grid {
  display: grid;
}
.pc-on{
  display: block;
}
.sp-on{
  display: none;
}
.c-gradation {
  background: linear-gradient(45deg, var(--sbs-orange),var(--sbs-red));
}
header {
  width: 100vw;
  overflow: hidden;
}
header .inner{
  width: 100%;
  max-width: 1100px;
  margin: min(3.29vw,45px) auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
header .l-logo {
  width: min(17.35vw,237px);
  height: auto;
  aspect-ratio: 237/38;
}
header .l-logo img.-sbsg{
  width: 100%;
  height: 100%;
  /* aspect-ratio: 237/38; */
}
header.fixed {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 60px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 5;
  background: #fff;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  transition: all .3s;
}
header.fixed .inner {
  position: relative;
  margin: 0;
}
nav ul{
  display: flex;
  justify-content: flex-start;
  gap: min(1.46vw,20px);
}
nav li a{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
nav li a::after{
  content: "";
  width: min(0.88vw,12px);
  height: auto;
  aspect-ratio: 12/7;
  display: inline-block;
  background: url(../img/ion-arrow-down.svg)no-repeat center center / 100%;
}
footer {
  background: var(--sbs-red);
  text-align: center;
  padding-bottom: 168px;
}
footer small {
  font-size: var(--txt-xs-base);
  color: #fff;
  line-height: calc(50/12);
}
.inner {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1100px) {
  .inner {
    max-width: 92.73vw;
  }
}
@media screen and (max-width: 768px) {
  .pc-on{
    display: none;
  }
  .sp-on{
    display: block;
  }
  .inner {
    max-width: 92.53vw;
  }
  nav {
    display: none;
  }
  header .inner {
    /* margin: 5.6vw 0 0 4.4vw; */
    padding: 5.6vw 0 0 4.4vw;
    max-width: unset;
  }
  header .l-logo {
    width: 39.73vw;
    height: auto;
    aspect-ratio: 298/47;
  }
  header.fixed {
    margin: 0;
  }
  footer {
    padding-bottom: 20vw;
  }
  footer small {
    font-size: 2.67vw;
    line-height: calc(50/20);
  }
}
@media(min-width: 415px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}
.c-btn {
  font-size: clamp(15px,2.2vw,30px);
  font-weight: 900;
  line-height: calc(44/30);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 4px solid #fff;
  box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.4);
  background: linear-gradient(to right, var(--sbs-orange),var(--sbs-red));
  position: relative;
}
.c-btn::after{
  content: "";
  display: block;
  width: min(2.2vw,30px);
  height: auto;
  aspect-ratio: 1/1;
  background: url(../img/icon-arrow-right-circle.svg)no-repeat center center / 100%;
}
@media screen and (max-width: 768px) {
  .c-btn {
    font-size: 4vw;
    line-height: calc(44/30);
    gap: 1.6vw;
    border-radius: 1.33vw;
    border: 0.53vw solid #fff;
    box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.4);
  }
  .c-btn::after{
    width: 4vw;
  }
}

/* ハイライト テキスト
======================== */
.l-highlight-block {
  padding: min(3.37vw,46px) 0;
  margin: 0 auto;
  background: url(../img/highlight_block_bk.svg)no-repeat 6.52vw 2.2vw / 87.19vw,linear-gradient(to right, var(--sbs-orange),var(--sbs-red));
  text-align: center;
  color: #fff;
  font-size: min(1.61vw,22px);
  line-height: calc(50/22);
}
.l-highlight-block .u-fs-l {
  font-size: clamp(20px,2.93vw,40px);
  line-height: calc(50/40);
  display: block;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .l-highlight-block {
    width: 100%;
    padding: min(8vw,60px) min(7.33vw,55px);
    text-align: left;
    font-size: min(4.53vw,17px);
    line-height: calc(60/34);
    background: url(../img/highlight_block_bk_sp.svg)no-repeat 2.4vw 4vw  / 93.6vw,linear-gradient(to right, var(--sbs-orange),var(--sbs-red));
  }
  .l-highlight-block .u-fs-l {
    font-size: min(8vw,30px);
    line-height: calc(80/60);
  }
}
/* TOP
======================== */
.l-top {
  background: url(../img/top_bg.jpg)no-repeat bottom center /100%;
  padding: 0 0 min(2.64vw,36px);
  position: relative;
}
.l-top::after {
  content: "";
  width: min(47.95vw,655px);
  height: auto;
  display: block;
  position: absolute;
  aspect-ratio: 655/1054;
  background: url(../img/top_takahashi.png)no-repeat top center / 100%;
  top: min(6.88vw,94px);
  right: 0;
  z-index: 0;
}
.l-top h1{
  font-size: clamp(42px,6.08vw,83px);
  font-weight: 900;
  line-height: calc(120/83);
  color: #fff;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  transform: rotate(-5deg);
  margin: min(9.74vw,133px) auto 0 min(-4.54vw,-62px);
}
.l-top h1 .highlight{
  background: var(--sbs-red-lt01);
  display: inline-block;
  padding: 0 18px 0 11px;
}
.l-top h1 .highlight:nth-child(2){
  margin-left: min(1.61vw,22px);
}
.l-top p{
  font-size: clamp(14px,1.98vw,27px);
  font-weight: 400;
  line-height: calc(39/27);
  color: var(--font-color);
  background: var(--sbs-red-lt02);
  display: inline-block;
  padding: min(0.73vw,10px) 21px min(0.73vw,10px) 14px;/*min(1.54vw,21px) 21px min(0.81vw,11px) 14px*/
  transform: rotate(-5deg);
  margin: 22px 0 0 0;
}
.l-top .top-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  width: min(46.63vw,637px);
  height: auto;
  aspect-ratio: 637/209;
  margin: 0 0 0 min(-1.61vw,-22px);
}
.l-top .l-btn {
  margin-top: min(0.81vw,11px);
}
.l-top .c-btn {
  width: min(38.73vw,529px);
  height: auto;
  aspect-ratio: 529/86;
}
@media screen and (max-width: 768px) {
  .l-top {
    background: url(../img/top_bg_sp.jpg) center bottom / 100% no-repeat;
    padding: 0px 0px min(2.64vw, 36px);
    width: 100%;
    height: auto;
    aspect-ratio: 750/988;
    position: relative;
    overflow: hidden;
  }
  .l-top .inner{
    max-width: unset;
  }
  .l-top::after {
    display: none;
  }
  .l-top h1 {
    margin: 19.33vw 0 0 3.2vw; 
    gap: 0.4vw;
    line-height: 0;
  }
  .l-top h1 .highlight,
  .l-top h1 .sp-highlight {
    background: var(--sbs-red-lt01);
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .l-top h1 .highlight:first-child {
    font-size: 8.93vw;
    line-height: calc(97/67);
  }
  .l-top h1 .highlight:nth-child(2) {
    margin-left: 0;
    background: none;
  }
  .l-top h1 .sp-highlight {
    background: var(--sbs-red-lt01);
    display: inline-block;
    padding: 0 2.13vw 0 1.33vw;
    font-size: 7.47vw;
    line-height: calc(81/56);
    margin-left: 18.13vw;
  }
  .l-top h1 .sp-highlight:first-child {
    font-size: 9.73vw;
    line-height: calc(106/73);
    margin-bottom: 0.4vw;
    height: 14.67vw;
    display: inline-flex;
    align-items: center;
    margin-left: 8.4vw;
    padding: 0 3.2vw 0 1.6vw;
  }
  .l-top h1 .sp-highlight:first-child .u-fs-l {
    font-size: 11.47vw;
    line-height: calc(125/86);
  }
  .l-top p {
    width: 80vw;
    font-size: 3.2vw;
    line-height: calc(35/24);
    background: none;
    padding: min(0.73vw,10px) 21px min(0.73vw,10px) 14px;
    margin: 1.6vw 0 0 0;
    display: flex;
    gap: 1.07vw;
    flex-wrap: wrap;
  }
  .l-top p .sp-highlight {
    height: 7.2vw;
    display: flex;
    align-items: center;
    background: var(--sbs-red-lt02);
    padding: 0 2.13vw 0 1.6vw ;
  }
  .l-top p .sp-highlight:nth-child(2) {
    margin-left: -1.2vw;
  }
  .l-top .top-list {
    width: 93.33vw;
    aspect-ratio: 700/230;
    position: absolute;
    bottom: 4vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}
/* チェックリスト
======================== */
.l-about {
  background: url(../img/about_bg02.svg)no-repeat 1.02vw 4.83vw / 94.88vw ,url(../img/about_bg.jpg)no-repeat top center /100% 100%;
  padding-top: min(6.88vw,94px);
}
.l-about h2 {
  font-size: clamp(17px,2.49vw,34px);
  font-weight: bold;
  line-height: calc(49/34);
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}
.l-about h2 span{
  font-size: clamp(23px,3.29vw,45px);
}
.l-about .checklist {
  width: 100%;
  margin: min(1.98vw,27px) auto min(2.34vw,32px);
}
.l-about .checklist li {
  font-size: clamp(13px,1.9vw,26px);
  font-weight: bold;
  line-height: calc(37/26);
  color: #fff;
  width: 100%;
  position: relative;
  padding: min(1.46vw,20px) 0 min(1.39vw,19px) min(6.44vw,88px);
  background: repeating-linear-gradient(to right,#fff 0,#fff 3px,transparent 3px,transparent 13px)repeat-x bottom left / auto 3px;
  display: grid;
  grid-template-columns: min(3.88vw,53px) 1fr;
  justify-content: left;
  align-items: center;
  gap: min(0.95vw,13px);
}
.l-about .checklist li .u-color {
  color: var(--sub-color);
}
.l-about .checklist li .u-fs-l {
  font-size: clamp(17px,2.42vw,33px);
  line-height: calc(48/33);
}
.l-about .checklist li::before {
  content: "";
  display: block;
  width: min(3.88vw,53px);
  height: auto;
  aspect-ratio: 53/54;
  background: url(../img/icon_checklist.svg)no-repeat center center / 100%;
}
.l-about h2 span{
  font-size: clamp(23px,3.29vw,45px);
}
@media screen and (max-width: 768px) {
  .l-about {
    background: url(../img/about_bg02_sp.svg)no-repeat 0.93vw 6.4vw / 98.27vw ,var(--sbs-red);
    padding-top: min(6.88vw,94px);
  }
  .l-about .inner {
    max-width: unset;
  }
  .l-about h2 {
    font-size: 4.53vw;
    line-height: calc(49 / 34);
  }
  .l-about h2 span {
    font-size: 6vw;
    line-height: calc(65 / 45);
  }
  .l-about .checklist {
    margin-bottom: 0;
  }
  .l-about .checklist li {
    font-size: 4vw;
    line-height: calc(40 / 30);
    padding: 4vw 8.53vw 4vw 5.47vw;
    background: repeating-linear-gradient(to right, #fff 0, #fff 0.4vw, transparent 0.4vw, transparent 1.73vw) repeat-x bottom left / auto 0.4vw;
    grid-template-columns: 7.07vw 1fr;
    gap: 1.73vw;
  }
  .l-about .checklist li::before {
    width: 7.07vw;
  }
  .l-about .checklist li .u-fs-l {
    font-size: 5.07vw;
    line-height: calc(40 / 38);
  }
  .l-about .about-img {
    width: 100vw;
    /* margin-left: calc((-100vw + 92.53vw) / 2); */
  }

}
/* センター
======================== */
.l-center {
  width: 100%;
  position: relative;
  padding: 1.61vw 3.18vw 1.98vw;
  overflow: hidden;
}
.l-center h2{
  width: 100%;
  font-size: clamp(41px,6vw,82px);
  font-weight: 900;
  line-height: calc(119/82);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.l-center h2 .c-area{
  font-size: clamp(14px,2.05vw,28px);
  font-weight: bold;
  line-height: calc(40/28);
  color: #fff;
  background: var(--sbs-red);
  padding: 1px 10px 4px;
  margin-right: 14px;
}
.l-center .inner{
  display: flex;
  flex-wrap: wrap;
  /* max-width: unset; */
}
.l-center .c-ttl {
  font-size: var(--txt-l-base);
  font-weight: bold;
  color: #fff;
  line-height: calc(32/22);
  text-align: center;
  margin-bottom: 1.98vw;
}
.l-center .c-center-about {
  width: 100%;
  margin-bottom: min(2.42vw,32px);
}
.l-center .c-center-about img {
  width: min(50.73vw,693px);
}
.l-center .c-center-performance {
  width: min(41vw,560px);
  max-width: 560px;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 2.49vw 1.83vw 1.9vw;
  aspect-ratio: 560/400;
}
.l-center .c-card-list {
  grid-template-columns: repeat(4, 1fr);
  gap: min(5px,0.98%);

}
.l-center .c-card picture img{
  width: 100%;
  height: auto;
  aspect-ratio: 124/250;
}
.l-center .c-card-ttl {
  font-size: var(--font-size-base);
  font-weight: bold;
  color: #fff;
  line-height: calc(24/16);
  margin-top: 7px;
  text-align: center;
}
.l-center.l-content--right .inner{
  justify-content: right;
  text-align: right;
}
.l-center.l-content--left .inner{
  justify-content: left;
  text-align: left;
}
.l-center video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100vw;
  height: auto;
  /* max-inline-size: fit-content; */
}
.l-center#yao h2 {
  justify-content: left;
}
.l-center#yao h2 .c-area{
  background: var(--sbs-orange);
}
.l-center#yao .c-card-list {
  grid-template-columns: repeat(2, 1fr);
}
.l-center#yao .c-card picture img{
  aspect-ratio: 253/250;
}
@media screen and (max-width: 768px) {
  .l-center{
    position: relative;
    aspect-ratio: 750 / 1359;
    padding: 4vw 4vw 6.53vw;
    overflow: hidden;
  }
  .l-center::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/nodaseto_long.png)no-repeat top left / 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .l-center#yao::before{
    background: url(../img/yao_long.png)no-repeat top left / 100% 100%;
  }
  .l-center .inner{
    position: relative;
  }
  .l-center h2{
    width: 100%;
    font-size: 10.93vw;
    line-height: calc(85/82);
    flex-wrap: wrap;
    margin-bottom: 50vw;
  }
  .l-center h2 span{
    width: 100%;
    order: 1;
  }  
  .l-center h2 .c-area{
    width: fit-content;
    font-size: 6vw;
    line-height: calc(65/45);
    padding: 1px 2.13vw 4px;
    margin-right: 0;
    order: 2;
    text-shadow: none;
    margin-top: 2.13vw;
  }  
  .l-center .c-center-about {
    width: 100%;
    margin-bottom: 1.6vw;
  }
  .l-center .c-center-about img {
    width: 100%;
  }
  .l-center video {
    width: 171.73vw;
    height: auto;
    max-inline-size: fit-content;
    aspect-ratio: 16 / 9;
    display: block;
  }
  .l-center .c-center-performance {
    width: 100%;
    padding: 5.6vw 4vw 4.67vw;
    aspect-ratio: unset;
    background: rgba(0, 0, 0, 0.9);
  }
  .l-center .c-ttl {
    font-size: 3.47vw;
    line-height: calc(37 / 26);
    margin-bottom: 4.8vw;
  }
  .l-center#yao video{
    margin-left: 4vw;
  }
}
/* サービス
======================== */
.l-service {
  background: url(../img/service_bg.jpg)no-repeat top center / cover;
  padding: min(6.66vw,91px) 0 min(7.17vw,98px);
}
.l-service h2{
  font-size: clamp(15px,2.2vw,30px);
  font-weight: bold;
  line-height: calc(44/30);
  color: var(--font-color);
  text-align: center;
  margin-bottom: min(2.27vw,31px);
}
.l-service h2 span {
  font-size: clamp(20px,2.93vw,40px);
  line-height: calc(58/40);
}
.l-service .l-grid {
  grid-template-columns: repeat(2,1fr);
  gap: min(2.34vw,32px);
}
.l-service .c-card-img {
  position: relative;
  margin-bottom: min(1.46vw,20px);
}
.l-service .c-card-ttl {
  position: absolute;
  width: min(15.3vw,209px);
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  bottom: min(-0.73vw,-10px);
  right: min(-0.73vw,-10px);
}
.l-service .c-card-caption {
  font-size: var(--font-size-base);
  line-height: calc(24/16);
}

@media screen and (max-width: 768px) {
  .l-service {
    background: url(../img/service_bg_bk.jpg) no-repeat top center / cover;
    padding: 13.3vw 0;
  }
  .l-service h2 {
    font-size: 4.53vw;
    line-height: calc(49 / 30);
  }
  .l-service h2 span {
    font-size: 6vw;
    line-height: calc(65 / 45)
  }
  .l-service .l-grid {
    grid-template-columns: 1fr;
    gap: 8vw;
  }
  .l-service .c-card-ttl {
    width: 32.27vw;
    bottom: 1.33vw;
    right: 1.33vw;
  }
  .l-service .c-card-img {
    margin-bottom: 2.67vw;
  }
  .l-service .c-card-caption {
    font-size: 3.2vw;
    line-height: calc(35 / 24);
  }
}

/* 実績
======================== */
.l-performance {
  padding: min(6.81vw,93px) 0 min(7.69vw,105px);
  background: #000;
  color: #fff;
  overflow: hidden;
}
.l-performance h2 {
  font-size: clamp(15px,2.2vw,30px);
  font-weight: bold;
  line-height: calc(44/30);
  text-align: center;
  margin-bottom: min(1.68vw,23px);
}
.l-performance .l-grid {
  grid-template-columns: repeat(3,1fr);
  gap: min(2.93vw,40px);
}
.l-performance .c-card-caption {
  margin-top: min(1.06vw,14px);
  font-size: var(--font-size-base);
  line-height: calc(24/16);
}
.l-performance .c-card-ttl {
  font-size: clamp(12px,1.76vw,24px);
  font-weight: normal;
  line-height: calc(35/24);
  margin-bottom: min(0.73vw,10px);
}

.l-performance .c-card-txt + ul {
  position: relative;
}
.l-performance .c-card-txt + ul::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(to right,#fff 0,#fff 3px,transparent 3px,transparent 9px)repeat-x bottom left / auto 1px;
  padding: min(0.81vw,11px) 0 0;
  margin-bottom: min(0.88vw,12px);
}

@media screen and (max-width: 768px) {
  .l-performance {
    padding: 13.3vw 0;
  }
  .l-performance h2 {
    font-size: 6vw;
    line-height: calc(65 / 45);
    margin-bottom: 8vw;
  }
  .l-performance .l-grid {
    overflow-x: auto;
    gap: 7.73vw;
  }
  .l-performance .l-grid-item {
    width: 57.47vw;
  }
  .l-performance .c-card-caption {
    margin-top: 4vw;
  }
  .l-performance .c-card-ttl {
    font-size: 4.53vw;
    line-height: calc(49 / 34);
    margin-bottom: 4vw 15.6px;
  }
  .l-performance .c-card-caption {
    margin-top: 4vw;
    font-size: 3.2vw;
    line-height: calc(35 / 24);
  }
  .l-performance .c-card-txt + ul::before {
    background: repeating-linear-gradient(to right, #fff 0, #fff 3px, transparent 3px, transparent 9px) repeat-x bottom left / auto 1px;
    padding: 2.93vw 0 0;
    margin-bottom: 2.93vw;
  }
}
/* 流れ
======================== */
.l-flow {
  background: url(../img/flow_bg.jpg)no-repeat top center / cover;
  padding: min(6.66vw,91px) 0 min(7.17vw,98px);
}
.l-flow .inner .c-txt{
  font-size: clamp(11px,1.61vw,22px);
  line-height: calc(50/22);
  margin-top: min(1.9vw,26px);
  text-align: center;
}
.l-flow h2{
  font-size: clamp(15px,2.2vw,30px);
  font-weight: bold;
  line-height: calc(44/30);
  color: var(--font-color);
  text-align: center;
  margin-bottom: min(2.27vw,31px);
}
.l-flow h2 span {
  font-size: clamp(20px,2.93vw,40px);
  line-height: calc(58/40);
}
.l-flow .l-flow-list {
  width: min(65.89vw,900px);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(1.46vw,20px);
}
.l-flow .l-flow-item {
  width: 100%;
  background: #fff;
  padding: min(2.05vw,28px) min(2.34vw,32px) min(2.05vw,28px) min(4.32vw,59px);
  border-radius: 10px;
  position: relative;
}
.l-flow .l-flow-item:not(:last-child)::before {
  content: "";
  width: 0;
  height: 0;
  border-left: calc(2.71vw/2) solid transparent;
  border-right: calc(2.71vw/2) solid transparent;
  border-top: 1.17vw solid var(--sbs-orange);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.l-flow .c-flow-ttl {
  display: inline-flex;
  justify-content: left;
  align-items: center; 
  gap: min(1.24vw,17px); 
  font-size: clamp(15px,2.2vw,30px);
  line-height: calc(44/30);
}
.l-flow .c-flow-ttl::before {
  content: "";
  width: min(4.25vw,58px);
  height: auto;
  aspect-ratio: 1/1;
}
.l-flow .-flow01 .c-flow-ttl::before {
  background: url(../img/icon_flow01.svg)no-repeat center center / 100%;
}
.l-flow .-flow02 .c-flow-ttl::before {
  background: url(../img/icon_flow02.svg)no-repeat center center / 100%;
}
.l-flow .-flow03 .c-flow-ttl::before {
  background: url(../img/icon_flow03.svg)no-repeat center center / 100%;
}
.l-flow .-flow04 .c-flow-ttl::before {
  background: url(../img/icon_flow04.svg)no-repeat center center / 100%;
}
.l-flow .l-grid {
  grid-template-columns: 1fr min(35.87vw,490px);
  gap: min(1.46vw,20px);
}
.l-flow .c-flow-txt {
  width: min(35.87vw,490px);
  font-size: var(--font-size-base);
  line-height: calc(24/16);
}
@media screen and (max-width: 768px) {
  .l-flow {
    background: url(../img/flow_bg_sp.jpg)no-repeat top center / cover;
    padding: 13.3vw 0;
  }
  .l-flow .inner .c-txt{
    font-size: clamp(11px,1.61vw,22px);
    line-height: calc(49/34);
    margin-top: min(1.9vw,26px);
    text-align: center;
  }
  .l-flow h2{
    font-size: 4.53vw;
    line-height: calc(49/34);
    margin-bottom: 5.33vw;
  }
  .l-flow h2 span {
    font-size: 6vw;
    line-height: calc(65/40);
    display: block;
  }
  .l-flow .l-flow-list {
    width: 100%;
    gap: 4.8vw;
  }
  .l-flow .l-flow-item:not(:last-child)::before {
    border-left: calc(4.93vw / 2) solid transparent;
    border-right: calc(4.93vw / 2) solid transparent;
    border-top: 2.13vw solid var(--sbs-orange);
    top: calc(100% + 1.33vw);
  }
  .l-flow .l-grid {
    grid-template-columns: 1fr;
    gap: 2vw;
  }
  .l-flow .c-flow-ttl {
    justify-content: center;
    gap: 2.27vw;
    font-size: 4vw;
    line-height: calc(44 / 30);
  }
  .l-flow .c-flow-txt {
    width: 100%;
    font-size: 3.2vw;
    line-height: calc(35 / 24);
  }
  .l-flow .l-flow-item {
    padding: 4.67vw 6.27vw;
  }
  .l-flow .inner .c-txt {
    font-size: 4.53vw;
    line-height: calc(60 / 34);
    margin-top: 5.33vw;
    text-align: left;
  }
}
/* 追従バナー
======================== */
.l-banner {
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(8.05vw,110px);
  overflow: hidden;
  transition: transform 0.3s ease;
  position: fixed;
  bottom: 0;
}
.l-banner .l-grid {
  width: min(62.96vw,860px);
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: min(1.39vw,19px);
  align-items: center;
}
.l-banner .c-tel {
  font-size: clamp(24px,3.51vw,48px);
  font-weight: bold;
  line-height: calc(70/48);
  position: relative;
  display: flex;
}
.l-banner .c-tel::before {
  content: "";
  width: min(2.27vw,31px);
  height: auto;
  aspect-ratio: 1/1;
  display: inline-block;
  background: url(../img/icon_phone_call.svg)no-repeat center center / 100%;
  margin-right: min(1.02vw,14px);
}
.l-banner .c-notes {
  font-size: clamp(10px,0.88vw,12px);
  line-height: calc(17/12);
  text-align: center;
}
.l-banner .c-btn {
  aspect-ratio: 449/76;
  background: linear-gradient(45deg, #F47C06,#DD2001);
}
.l-banner.hidden {
  transform: translateY(100%);
}

.l-banner.visible {
  transform: translateY(0%);
}
@media screen and (max-width: 768px) {
  .l-banner {
    height: 14.67vw;
  }  
  .l-banner .inner{
    max-width: unset;
  }  
  .l-banner .l-grid {
    width:100%;
    margin: 0 auto;
    grid-template-columns: 26.67vw 1fr;
    gap: 0;
    align-items: center;
  }
  .l-banner .l-tel {
    position: relative;
  }
  .l-banner .l-tel::after {
    content: "";
    width: 1px;
    height: 14.67vw;
    background: #fff;
    position: absolute;
    top: -1.8vw;
    right: 0;
  }
  .l-banner .c-tel {
    font-size: 3.2vw;
    line-height: calc(27/24);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .l-banner .c-tel::before {
    width: 4.13vw;
    margin-right: 1.33vw;
  }
  .l-banner .c-notes {
    font-size: 1.33vw;
    line-height: calc(15 / 10);
  }
  .l-banner .l-btn {
    margin: auto;
  }
  .l-banner .c-btn {
    border: 0.53vw solid #fff;
    aspect-ratio: 524/76;
    width: 69.87vw;
  }
}