/* main への指定を削除し、こちらに差し替え */
#wrap {
  overflow-x: clip; /* hidden よりもスクロール計算を壊しにくい最新の指定 */
}
/*----------------------------------------------------
main
-----------------------------------------------------*/
main {
  clip-path: inset(0);
}
/* foreBox */
#index .foreBox .pubBox {
  padding: 12px 0 50px 0;
}
#index .foreBox .pubHeading01 {
  margin-bottom: 70px;
  font-size: 4.6rem;
  line-height: 1.46;
  text-align: left;
}
#index .foreBox .pubHeading02 {
  margin-bottom: 36px;
  font-size: 2.8rem;
  line-height: 1.46;
  text-align: left;
}
#index .foreBox .pubTextBox {
  max-width: inherit;
  margin-top: 0px;
}
#index .foreBox .smlTitle {
  margin-bottom: 24px;
}
#index .foreBox .pubBtn {
  margin-top: 24px;
}
#index .foreBox .pubBtn a,
#index .ourBox .pubBtn a {
  border-color: #000;
}
#index .foreBox .photo {
  width: 200px;
  position: absolute;
  top: 200px;

  /* right: 0; を削除し、左からの位置で制御します */
  left: calc(48% + 320px);

  /* 画面幅が狭まっても左に食い込みすぎないように制限 */
  min-left: 600px;
}

/* 【解説】
left: calc(50% + 150px);
画面の真ん中(50%)を起点にして、そこから右へ150pxの位置に写真の左端を固定します。
これにより、画面の外側が削れても「中央のテキストエリア」との距離が一定に保たれます。
*/


@media only screen and (max-width: 700px) {
  #index .foreBox .photo .fvlogo01 {
    display: block;
    width: 280px;
    height: auto;
    margin-top: -146px;
    margin-left: -250px;
  }
}

@media only screen and (min-width: 700px) {
  #index .foreBox .reduceTxt {
    font-size: 80%;
    max-width: 640px;
    text-align: justify;
    text-justify: inter-ideograph;/* ie対応 */
  }
  #index .foreBox .pubBtn.reduce a {
    width: calc(198px * 0.9);
    height: calc(34px * 0.9);
    font-size: calc(1.6rem * 0.9);
    gap: calc(14px * 0.9);
  }
  #index .foreBox .pubBtn.reduce .icon {
    width: calc(49px * 0.9);
    height: calc(10px * 0.9);
  }
}








@media only screen and (max-width: 700px) {
  #index .foreBox p  {
    margin-bottom: 0;
    letter-spacing: -0.01em;
  }
  #index .foreBox .pubHeading01 {
    margin-bottom: 15px;
    font-size: 2.9rem;
    line-height: 1.48;
    letter-spacing: 0;
  }
  #index .foreBox .pubHeading02 {
    margin-top: 420px;
    margin-bottom: 15px;
    font-size: 1.9rem;
    line-height: 1.48;
    letter-spacing: 0;
  }
  #index .foreBox .pubBox {
    padding: 50px 0 0px;
  }
  #index .foreBox .smlTitle {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }
  #index .foreBox .pubTextBox {
    font-size: 1.8rem;
    line-height: 1.94;
  }
  #index .foreBox .pubBtn {
    margin-top: 26px;
  }
}

/* companiesBox */
#index .featuredImg {
  width: 216px;
  position: absolute;
  top: 5px;
  right: 6px;
}
/*----------------------------------------------------
FV logo　配置
-----------------------------------------------------*/

/* 装飾用のロゴ画像すべてに対して、マウス反応・選択・ドラッグを完全に無効化する */
#index .differenceBox .featuredImg[class*="fvlogo"] {
  pointer-events: none; /* クリックやホバーを透過させる */

  /* 以下を追加：選択とドラッグを禁止する */
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* 標準プロパティ（テキスト選択を禁止） */

  -webkit-user-drag: none;   /* ドラッグを禁止 */
  user-drag: none;

  z-index: 1;
}

/* 親要素の指定 */
#index .foreBox .photo .fvlogo01 {
  display: block;
  width: 450px;
  height: auto;
  margin-top: -120px;
  margin-left: -180px;
}



/* 中の画像に対する指定（ここが重要です） */
#index .foreBox .photo .fvlogo01 img {
  width: 100%;
  height: auto;
  display: block;
}

#index .differenceBox .featuredImg.fvlogo02 {
  width: 600px;
  left: 690px;
  top: 175px;
  opacity: 0.35;
}

#index .differenceBox .featuredImg.emblem01 {
  width: 270px;
  left: 56%;
  top: 57px;
}

#index .differenceBox .featuredImg.fvlogo03 {
  width: 280px;
  left: -308px;
  top: 447px;
}

#index .differenceBox .featuredImg.fvlogo04 {
  width: 580px;
  left: -520px;
  top: 70px;
}
#index .differenceBox .featuredImg.fvlogo05 {
  width: 1000px;
  left: 320px;
  top: 900px;
  opacity: 0.20;
}
#index .differenceBox .featuredImg.fvlogo06 {
  width: 800px;
  left: -700px;
  top: 8px;
}
#index .differenceBox .featuredImg.fvlogo07 {
  width: 300px;
  left: 815px;
  top: 573px;
}
#index .differenceBox .featuredImg.fvlogo08 {
  width: 280px;
  left: -308px;
  top: -4px;
}
#index .differenceBox .featuredImg.fvlogo09 {
  width: 850px;
  left: 450px;
  top: 320px;
  opacity: 0.2;
}
#index .differenceBox .featuredImg.fvlogo10 {
  width: 300px;
  left: 880px;
  top: 80px;
}
#index .differenceBox .featuredImg.fvlogo11 {
  width: 1000px;
  left: -900px;
  top: 300px;
  opacity: 0.20;
}



#index .companiesBox {
  background-color: #E8E7DB;
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
  #index .companiesBox .featuredImg {
    width: 173px;
    top: 70px;
    right: 0;
  }
  #index .companiesBox .pubBox {
    padding: 54px 230px 51px 0;
  }
}
@media only screen and (max-width: 700px) {
  #index .companiesBox {
    min-height: 100vh;
  }
  #index .featuredStyle {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto 31px;
    width: 127px;
  }
  #index .companiesBox .pubBox {
    padding: 20px 0;
  }
}

/* showBox */
#index .showBox .txtBox {
  height: 225px;
  overflow: hidden;
  text-align: justify;
  letter-spacing: -0.02em;
  --innerH: 100px
}
#index .showBox.on .txtBox {
  height: var(--innerH);
  height: 330px !important;
}
@media only screen and (max-width: 750px) {
  #index .showBox .txtBox {
    height: auto;
    overflow: inherit;
  }
}


/* differenceBox */
#index .differenceBox {
  color: #fff;
  background-color: #537390;
}
#index .differenceBox .featuredImg {
  width: 440px;
  aspect-ratio: 340/205;
  left: -400px;
  right: 0;
  top: 23px;
  mix-blend-mode: multiply;
}
#index .differenceBox .featuredImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#index .differenceBox .pubTextBox .txtUl li::before {
  background-color: #fff;
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
  #index .differenceBox .featuredImg {
    width: 274px;
    left: -102px;
    right: 0;
    top: 106px;
  }
}
@media only screen and (max-width: 700px) {
  #index .differenceBox .featuredImg img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    margin-top: -15px;
    margin-left: 28px;
  }
  #index .differenceBox .featuredImg {
    width: 200px;
  }
}



#index .color1 {
  color: #000;
  background-color: #fdf7ed;
}

/* 白 */
#index .color2 {
  color: #000;
  background-color: #fff;
}
#index .color3 {
  color: #000;
  background-color: #fbeff8;
}
/* 黄色 */
#index .color4 {
  color: #000;
  background-color: #fcffe2;
}
/* 水色 */
#index .color5 {
  color: #000;
  background-color: #edf8ff;
}

/* companyBox */
#index .companyBox .image {
  text-align: center;
}
#index .companyBox .image img {
  width: 990px;
}
#index .companyBox .imgUl {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -14px 0 -42px;
}
#index .companyBox .imgUl + .imgUl {
  margin-top: 42px;
}
#index .companyBox .imgUl li {
  padding: 0 10px;
  width: 25%;
  height: 77px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}
#index .companyBox .imgUl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
  #index .companyBox .imgUl li {
    height: 53px;
  }
  #index .companyBox .imgUl + .imgUl {
    margin-top: 66px;
  }
  #index .companyBox .imgUl {
    margin: 0 -14px 0 -30px;
  }
  #index .companyBox .pubBox {
    padding: 57px 0 48px;
  }
}
@media only screen and (max-width: 750px) {
  #index .companyBox {
    min-height: 100vh;
  }
  #index .companyBox .pubBox {
    padding: 59px 0 49px;
  }
  #index .companyBox .imgUl {
    display: flex;
    margin: 0 -10px 0;
  }
  #index .companyBox .imgUl li {
    width: 50%;
    height: 50px;
  }
  #index .companyBox .imgUl + .imgUl {
    margin-top: 35px;
  }
}

/* solutionBox */
#index .solutionBox {
  color: #fff;
  position: relative;
  overflow: hidden;
}
#index .solutionBox::after {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../images/top_new/bg03.jpg") no-repeat right center / cover;
  z-index: 9;
  content: "";
}
#index .solutionBox::before {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  z-index: 10;
}
#index .solutionBox .pubBox {
  z-index: 20;
}
#index .solutionBox .pubTextBox {
  padding-right: 0;
}
#index .solutionBox .photo {
  width: 702px;
  margin: -128px 0 0 auto;
  position: relative;
}
#index .solutionBox .photo img {
  width: 100%;
  aspect-ratio: 351/128;
}
#index .solutionBox .featuredImg {
  width: 245px;
  z-index: 30;
  top: 10px;
  right: calc(50% - 50vw);
}
#index .solutionBox .link {
  width: 20.1%;
  height: 72.8%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #537390;
  z-index: 20;
}
#index .solutionBox .link li {
  height: calc(100% / 4);
  border-top: 1px solid #fff;
}
#index .solutionBox .link a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background-color: #537390;
  text-align: center;
  line-height: 1.25;
  font-size: 1.6rem;
  letter-spacing: -0.1em;
}

@media only screen and (min-width: 751px) {
  #index .solutionBox .link a:hover {
    background-color: #3e4445;
  }
}
@media only screen and (min-width: 701px) and (max-width: 1049px) {
  #index .solutionBox .photo {
    margin: -90px -230px 0 auto;
    text-align: center;
    width: 490px;
  }
  #index .solutionBox .photo img {
    aspect-ratio: 1404/512;
  }
  #index .solutionBox .featuredImg {
    width: 196px;
  }
  #index .solutionBox .pubBox {
    padding: 0 230px 0 0;
  }
  #index .solutionBox .link a {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 700px) {
  #index .solutionBox .featuredImg {
    width: 168px;
    height: 94px;
  }
  #index .solutionBox .pubHeading01 {
    margin-bottom: 32px;
  }
  #index .solutionBox .photo {
    width: auto;
    margin: 39px -1px 0;
  }
  #index .solutionBox .photo img {
    width: 100%;
    aspect-ratio: 702/334;
  }
  #index .solutionBox::after {
    background-image: url("../images/top_new/bg03_sp.jpg");
    background-position: center center;
  }
  #index .solutionBox .pubBox {
    padding: 20px 0;
  }
  #index .solutionBox .link a {
    line-height: 1.3;
    font-size: 1.85vw;
  }
}


/* ourBox */
#index .ourBox {
  position: relative;
  overflow-x: clip;
}

#index .ourBox .pubBox {
  z-index: 50;
}
#index .ourBox .pubBox .photo {
  position: absolute;
  top: 66px;
  right: 0;
  width: 44.4rem;
}
#index .ourBox .pubBox .photo .link {
  display: block;
  width: 30.5%;
  position: absolute;
  top: 0;
  left: 0;
}
#index .ourBox .pubBox .photo .link img {
  width: 100%;
  transition: .3s;
}
#index .ourBox .pubBox .photo .link01 {
  left: 50%;
  transform: translateX(-50%);
}
#index .ourBox .pubBox .photo .link02 {
  top: 50%;
  left: auto;
  right: 0;
  transform: translateY(-50%);
  margin-top: -3.1rem;
}
#index .ourBox .pubBox .photo .link03 {
  top: auto;
  bottom: 0;
  left: auto;
  right: 12.7%;
}
#index .ourBox .pubBox .photo .link04 {
  top: auto;
  bottom: 0;
  left: 12.7%;
}
#index .ourBox .pubBox .photo .link05 {
  margin-top: -2.9rem;
  top: 50%;
  transform: translateY(-50%);
}
#index .ourBox .featuredImg {
  margin-left: -94px;
  width: 313px;
  z-index: 30;
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
}
#index .ourBox .featuredImg img {
  transform: translateX(-50%);
}
@media only screen and (min-width: 701px) {
  #index .ourBox .pubBox .photo .link:hover img {
    transform: scale(1.2);
  }
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
  #index .ourBox .pubBox .photo {
    top: 70px;
    right: -1px;
    width: 297px;
  }
  #index .ourBox .featuredImg {
    margin-left: -48px;
    width: 250px;
  }
}
@media only screen and (max-width: 700px) {
  #index .ourBox .pubBox {
    padding: 20px 0;
    display: block;
  }
  #index .ourBox .pubBox .photo {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 37px 0 42px;
  }
  #index .ourBox .pubBox .photo img {
    width: 100%;
  }
  #index .ourBox .pubHeading01 {
    margin-bottom: 29px;
  }
  #index .ourBox .featuredImg {
    margin-left: 0;
    width: 192px;
    bottom: 0;
    left: 20px;
  }
  #index .ourBox .featuredImg img {
    transform: translateX(0);
  }
  #index .ourBox .pubBox .photo .link02 {
    margin-top: -2.3rem;
  }
  #index .ourBox .pubBox .photo .link05 {
    margin-top: -2.2rem;
  }
}

#index .relativeBox {
  overflow: hidden;
}

/* brandBox */
#index .brandBox {
  background-color: #e6ff00;
  position: relative;
  z-index: 30;
}
#index .brandBox .pubBox {
  padding: 58px 0 60px;
}
#index .brandBox .pubHeading02 {
  font-size: 3.8rem;
  margin-bottom: 60px;
}
#index .brandBox .listUl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 80px;
}
#index .brandBox .listUl li {
  width: 276px;
}
#index .brandBox .listUl .pubBtn {
  margin: 0;
}
#index .brandBox .listUl .pubBtn a {
  margin: 0 auto;
  width: 100%;
  height: 65px;
  color: #424647;
  background-color: #ff0000;
  border: none;
  font-size: 2.2rem;
  font-weight: 500;
}
#index .brandBox .listUl .pubBtn.tel a {
  font-size: 3rem;
  font-weight: 300;
  font-family: "Ubuntu";
}
#index .brandBox .listUl .image img {
  width: 62px;
}
#index .brandBox .listUl .image {
  margin-bottom: 22px;
}
#index .brandBox .featuredImg {
  width: 190px;
  top: -63px;
  right: -50px;
}
@media only screen and (min-width: 701px) {
  #index .brandBox .listUl .pubBtn a:hover {
    background-color: #424647;
    color: #fff;
  }
}
@media only screen and (min-width: 701px) and (max-width: 1049px) {
  #index .brandBox .featuredImg {
    width: 152px;
    top: -50px;
    right: -34px;
  }
  #index .brandBox .listUl .pubBtn br.sp {
    display: block !important;
  }
  #index .brandBox .listUl .pubBtn a {
    height: 105px;
    line-height: 1.59;
  }
  #index .brandBox .listUl li {
    width: 200px;
  }
  #index .brandBox .listUl .pubBtn.tel a {
    font-size: 2.9rem;
  }
  #index .brandBox .listUl {
    gap: 35px;
    margin: 0 -20px;
  }
  #index .brandBox .pubHeading02 {
    margin-bottom: 47px;
  }
}
@media only screen and (max-width: 700px) {
  #index .brandBox .pubHeading02 {
    font-size: 2.3rem;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  #index .brandBox .listUl .pubBtn a {
    height: 55px;
    font-size: 1.4rem;
    line-height: 1.44;
  }
  #index .brandBox .listUl li {
    width: 108px;
  }
  #index .brandBox .pubBox {
    padding: 52px 0 60px;
  }
  #index .brandBox .featuredImg {
    width: 116px;
    top: -39px;
    right: -1px;
  }
  #index .brandBox .listUl {
    gap: 10px;
    margin: 0 -10px;
  }
  #index .brandBox .listUl .image img {
    width: 48px;
  }
  #index .brandBox .listUl .pubBtn.tel a {
    font-size: 1.7rem;
  }
  #index .brandBox .listUl .image {
    margin-bottom: 17px;
  }
}


/* faqBox */
#index .faqBox {
  overflow-x: clip;
  position: relative;
}
#index .faqBox .pubBox {
  position: relative;
  max-width: 740px;
}
#index .faqBox .pubHeading02 {
  margin-bottom: 63px;
}
#index .faqBox .faqUl li {
  margin-bottom: 23px;
  background-color: #ff96d5;
  border-radius: 20px;
  font-size: 2.2rem;
  line-height: 1.59;
}
#index .faqBox .faqUl li:last-child {
  margin-bottom: 0;
}
#index .faqBox .faqUl .item02 {
  background-color: #47d4ff;
}
#index .faqBox .faqUl .item03 {
  background-color: #ffc784;
}
#index .faqBox .faqUl .item04 {
  background-color: #dca3f9;
}
#index .faqBox .faqUl .item05 {
  background-color: #a1ff99;
}
#index .faqBox .faqUl .title {
  font-size: 2.8rem;
  position: relative;
  line-height: 1.375;
  padding: 22px 80px 20px 120px;
  cursor: pointer;
}
#index .faqBox .faqUl .title::before,
#index .faqBox .faqUl .innerBox::before {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 23px;
  left: 53px;
  background: url("../images/top_new/faq_icon01.png") no-repeat left top / 100% 100%;
  content: "";
}
#index .faqBox .faqUl .title::before {
  top: 50% !important;
  margin-top: 2px;
  transform: translateY(-50%);
}
#index .faqBox .faqUl .title::after {
  margin-top: -8px;
  width: 30px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 48px;
  background: url("../images/top_new/faq_icon03.png") no-repeat left top / 100% 100%;
  content: "";
}
#index .faqBox .faqUl .title.on::after {
  transform: rotate(180deg);
}
#index .faqBox .faqUl .innerBox::before {
  background-image: url("../images/top_new/faq_icon02.png");
}
#index .faqBox .faqUl .innerBox {
  padding: 0 120px 20px;
  position: relative;
}
#index .faqBox .faqUl .innerBox {
  display: none;
}
#index .faqBox .faqUl .borBox {
  padding-top: 24px;
  border-top: 1px solid #fff;
}
#index .faqBox .faqUl p {
  margin-bottom: 19px;
}
#index .faqBox .faqUl p:last-child {
  margin-bottom: 0 !important;
}
#index .faqBox .featuredImg {
  width: 176px;
  top: auto;
  bottom: -1px;
  right: auto;
  left: calc((50vw - 370px) / 2);
  aspect-ratio: 352/418;
  margin-left: -88px;
}
#index .faqBox .featuredImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 751px) {
  #index .faqBox .faqUl.reduce li {
    margin-bottom: calc(23px * 0.75);
    border-radius: calc(20px * 0.75);
    font-size: calc(2.2rem * 0.75);
  }
  #index .faqBox .faqUl.reduce .title {
    font-size: calc(2.8rem * 0.75);
    padding: calc(22px * 0.75) calc(80px * 0.75) calc(20px * 0.75) calc(120px * 0.75);
  }
  #index .faqBox .faqUl.reduce .title::before,
  #index .faqBox .faqUl.reduce .innerBox::before {
    width: calc(35px * 0.75);
    height: calc(35px * 0.75);
    top: calc(23px * 0.75);
    left: calc(53px * 0.75);
  }
  #index .faqBox .faqUl.reduce .title::after {
    margin-top: calc(-8px * 0.75);
    width: calc(30px * 0.75);
    height: calc(16px * 0.75);
    right: calc(48px * 0.75);
  }
  #index .faqBox .faqUl .title::before {
    margin-top: calc(2px * 0.75);
  }
  #index .faqBox .faqUl.reduce .innerBox {
    padding: 0 calc(120px * 0.75) calc(20px * 0.75);
  }
  #index .faqBox .faqUl.reduce .borBox {
    padding-top: calc(24px * 0.75);
  }
  #index .faqBox .faqUl.reduce p {
    margin-bottom: calc(19px * 0.75);
  }
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
  #index .faqBox .featuredImg {
    width: 121px;
    top: auto;
    bottom: -1px;
    right: auto;
    margin: 0;
    left: -6px;
  }
  #index .faqBox .faqUl.reduce .innerBox::before {
    top: calc(27px * 0.75);
  }
}
@media only screen and (max-width: 750px) {
  #index .faqBox {
    min-height: 100vh;
  }
  #index .faqBox .faqUl li {
    border-radius: 14px;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  #index .faqBox .faqUl {
    margin-right: 0;
  }
  #index .faqBox .faqUl .title {
    font-size: 1.8rem;
    line-height: 1.5;
    min-height: 71px;
    padding: 11px 60px 11px 69px;
    display: flex;
    align-items: center;
  }
  #index .faqBox .faqUl .title::before,
  #index .faqBox .faqUl .innerBox::before {
    width: 29px;
    height: 29px;
    top: 22px;
    left: 22px;
  }
  #index .faqBox .faqUl .title::before {
    top: 50%;
  }
  #index .faqBox .faqUl .title::after {
    margin-top: -7px;
    width: 28px;
    height: 15px;
    right: 18px;
  }
  #index .faqBox .faqUl .innerBox {
    padding: 0 50px 24px 70px;
    text-align: justify;
  }
  #index .faqBox .faqUl .borBox {
    padding-top: 11px;
  }
  #index .faqBox .faqUl .innerBox::before {
    top: 12px;
  }
  #index .faqBox .pubBox {
    padding: 58px 0 126px;
  }
  #index .faqBox .featuredImg {
    width: 102px;
    top: auto;
    bottom: -1px;
    right: auto;
    left: 63px;
    margin: 0;
  }
}

/* featuresBox */
#index .featuresBox {
  position: relative;
  clip-path: inset(0);
  overflow: hidden;
}
#index .featuresBox::before {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #b9e6fd url("../images/top_new/bg02.jpg") no-repeat center bottom;
  background-size: max(100%,1366px) auto;
  content: "";
  transform: scale(calc(1 + 0.3*var(--num)));
  transform-origin: bottom center;
}
#index .featuresBox.nofixed::before {
  position: absolute;
}
#index .featuresBox .pubBtn {
  margin-top: 80px;
}
#index .featuresBox .pubBtn a {
  margin: 0 auto;
}
#index .featuresBox .listUl {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#index .featuresBox .listUl li {
  padding: 0 0 33px;
  width: calc((100% - 60px) / 3);
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  display: flex;
  align-items: center;
  aspect-ratio: 312/309;
}
#index .featuresBox .listUl .num {
  margin-bottom: 27px;
  color: #b1a648;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
}
@media only screen and (min-width: 961px) and (max-width: 1020px) {
  #index .featuresBox .listUl .num {
    margin-bottom: 27px;
    color: #b1a648;
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
  }
}
@media only screen and (min-width: 701px) and (max-width: 960px) {
  #index .featuresBox .listUl .num {
    margin-bottom: 27px;
    color: #b1a648;
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1;
  }
}
@media only screen and (min-width: 811px) and (max-width: 900px) {
  #index .featuresBox .listUl .num {
    margin-bottom: 27px;
    color: #b1a648;
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
  }
}
@media only screen and (min-width: 751px) and (max-width: 810px) {
  #index .featuresBox .listUl .num {
    margin-bottom: 27px;
    color: #b1a648;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
  }
}
@media only screen and (min-width: 701px) and (max-width: 750px) {
  #index .featuresBox .listUl .num {
    margin-bottom: 27px;
    color: #b1a648;
    font-size: 4.0rem;
    font-weight: 700;
    line-height: 1;
  }
}

@media only screen and (min-width: 1021px) {
  #index .featuresBox .listUl .title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}


@media only screen and (min-width: 961px) and (max-width: 1020px) {
  #index .featuresBox .listUl .title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}

@media only screen and (min-width: 701px) and (max-width: 960px) {
  #index .featuresBox .listUl .title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}
@media only screen and (min-width: 811px) and (max-width: 900px) {
  #index .featuresBox .listUl .title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}
@media only screen and (min-width: 751px) and (max-width: 810px) {
  #index .featuresBox .listUl .title {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}
@media only screen and (min-width: 701px) and (max-width: 750px) {
  #index .featuresBox .listUl .title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 10px;
  }
}
#index .featuresBox .listUl .title.no_period {
  padding-left: 5px;
}
#index .featuresBox .listUl .subInner {
  width: 100%;
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
  #index .featuresBox .pubHeading02 br.sp {
    display: block !important;
  }
  #index .featuresBox .pubHeading02 {
    margin-bottom: 48px;
    line-height: 1.6;
  }
  #index .featuresBox .pubBox {
    padding: 49px 0 92px;
  }
  #index .featuresBox .listUl {
    justify-content: space-between;
    gap: 40px 0;
  }
  #index .featuresBox .listUl li {
    width: calc(50% - 15px);
    aspect-ratio: 312/312;
  }
  #index .featuresBox .pubBtn {
    margin-top: 38px;
  }
}




@media only screen and (max-width: 700px) {
  #index .featuresBox .pubBox {
    padding: 0px 0 0px;
  }
  #index .featuresBox .pubHeading02 {
    margin-bottom: 0px;
    line-height: 1.6;
  }
  #index .featuresBox .listUl {
    justify-content: space-between;
    gap: 44px 0;
  }
  #index .featuresBox .listUl li {
    padding: 29px 0 40px;
    width: calc(50% - 10px);
  }
  #index .featuresBox .listUl .title {
    font-size: 2.0rem;
    line-height: 1.68;
    margin: 0 -10px;
    padding-left: 12px;
    font-weight: 700;
  }
  #index .featuresBox .listUl .num {
    margin-bottom: 15px;
    font-size: 3.5rem;
  }
  #index .featuresBox::before {
    background-image: url("../images/top_new/bg02_sp.jpg");
    background-size: 100% auto;
  }
}


/* brandBox02 */
#index .brandBox02 .pubBox {
  padding: 58px 0 53px;
}
#index .brandBox02 .pubHeading02 {
  margin-bottom: 43px;
}
#index .brandBox02 .subTxt {
  margin-bottom: 60px;
  font-size: 2.2rem;
}
#index .brandBox02 .listUl .txt {
  margin-top: 35px;
  font-size: 1.7rem;
  line-height: 1.58;
  font-weight: 700;
}
#index .brandBox02 .featuredImg {
  width: 277px;
  top: -85px;
  right: -85px;
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
  #index .brandBox02 .featuredImg {
    width: 222px;
    top: -61px;
    right: -30px;
  }
  #index .brandBox02 .pubHeading02 {
    margin-bottom: 39px;
  }
  #index .brandBox02 .subTxt {
    margin-bottom: 57px;
  }
  #index .brandBox02 .listUl .txt br.pc {
    display: none !important;
  }
  #index .brandBox02 .listUl .txt br.sp {
    display: block !important;
  }
  #index .brandBox02 .listUl .txt br.padNone {
    display: none !important;
  }
}
@media only screen and (max-width: 700px) {
  #index .brandBox02 .pubBox {
    padding: 52px 0 48px;
  }
  #index .brandBox02 .featuredImg {
    width: 173px;
    top: -57px;
    right: -1px;
  }
  #index .brandBox02 .subTxt {
    margin-bottom: 34px;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  #index .brandBox02 .pubHeading02 {
    margin-bottom: 27px;
  }
  #index .brandBox02 .listUl .txt {
    margin-top: 16px;
    font-size: 1.3rem;
    line-height: 1.66;
  }
}

/* caseBox */
#index .caseBox {
  padding: 57px 0 22px;
  position: relative;
  z-index: 10;
}
#index .caseBox .reportUl {
  margin-bottom: 0;
}

@media only screen and (max-width: 700px) {
  #index .caseBox {
    padding: 61px 0 39px;
  }
  #index .caseBox .reportList {
    margin-bottom: 62px;
  }
}


/* brandingBox */
#index .brandingBox {
  padding: 58px 0;
  border-top: 1px solid #cccccc;
  overflow: hidden;
}
#index .brandingBox .featuredImg {
  width: 162px;
  right: -160px;
  top: 50px;
  aspect-ratio: 324/506;
}
#index .brandingBox .featuredImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#index .brandingBox .pubHeading02 {
  margin-bottom: 20px;
}
#index .brandingBox .contentDl {
  overflow: hidden
}
#index .brandingBox .contentDl dt {
  padding-top: 40px;
  padding-bottom: 0;
  font-size: 1.5rem
}
#index .brandingBox .contentDl dd {
  padding: 40px 0 55px;
  border-bottom: 1px solid #E0E0E0
}
#index .brandingBox .contentDl dd:first-of-type {
  padding-top: 40px
}
#index .brandingBox .contentDl dd:last-of-type {
  padding-top: 40px;
  padding-bottom: 0;
  border-bottom: none
}
#index .brandingBox .contentDl dd>*:last-child {
  margin-bottom: 0
}
#index .brandingBox .contentDl dd .cat {
  font-family: "Hiragino Kaku Gothic W4 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 400;
  margin-bottom: 18px;
  padding: 7px 2px 6px;
  display: inline-block;
  min-width: 150px;
  color: #000;
  font-size: 1.3rem;
  text-align: center;
  background: #00B89A
}
#index .brandingBox .contentDl ul {
  margin-bottom: 42px
}
#index .brandingBox .contentDl li {
  position: relative;
  padding-right: 340px;
  font-size: 1.5rem;
  line-height: 1.6em;
  font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 300
}
#index .brandingBox .contentDl li:last-child {
  padding-bottom: 0
}
#index .brandingBox .contentDl li a {
  color: #000;
  display: inline-block;
  text-indent: -1.35em;
  padding-left: 1.35em
}
#index .brandingBox .contentDl .text-box li a {
  margin-bottom: -36px
}
#index .brandingBox .contentDl li .txt {
  font-family: "Hiragino Kaku Gothic g JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 0;
  color: #aaaaaa
}
#index .brandingBox .link {
  margin-top: 59px;
  font-size: 1.5rem;
  text-align: right
}
#index .brandingBox .link a {
  display: inline-block;
  color: #000
}
@media only screen and (min-width:701px) {
  #index .brandingBox .contentDl li a:hover {
    color: #00B89A
  }
  #index .brandingBox .link a:hover {
    color: #00B89A
  }
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
  #index .brandingBox .contentDl li {
    padding-right: 240px;
  }
  #index .brandingBox .featuredImg {
    width: 130px;
    right: -48px;
    top: 8px;
  }
}
@media only screen and (max-width:750px) {
  #index .brandingBox {
    padding: 58px 0 30px;
  }
  #index .brandingBox .contentDl {
    margin: 0 0 48px
  }
  #index .brandingBox .contentDl dt {
    padding-top: 40px;
    float: none;
    font-size: 1.25rem
  }
  #index .brandingBox .contentDl dd {
    padding: 18px 0 32px;
    border-bottom: 2px solid #f5f5f5
  }
  #index .brandingBox .contentDl dd .cat {
    margin-bottom: 18px;
    padding: 7px 2px 5px;
    font-size: 1.25rem;
    min-width: 152px
  }
  #index .brandingBox .contentDl .text-box li a {
    margin-bottom: 16px
  }
  #index .brandingBox .contentDl ul {
    margin-bottom: 22px
  }
  #index .brandingBox .contentDl li {
    margin-bottom: 36px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.6em
  }
  #index .brandingBox .contentDl .text-box li {
    margin-bottom: 0
  }
  #index .brandingBox .contentDl li:last-child {
    margin-bottom: 0
  }
  #index .brandingBox .contentDl li a {
    margin-bottom: 12px
  }
  #index .brandingBox .contentDl li a:hover {
    color: #000
  }
  #index .brandingBox .contentDl li .txt {
    padding-right: 8px;
    position: static;
    display: block;
    text-align: right
  }
  #index .brandingBox .link {
    margin: 0 auto;
    max-width: 400px;
    font-size: 1.3rem;
    text-align: center
  }
  #index .brandingBox .link a {
    padding: 20px 10px 19px;
    display: block;
    letter-spacing: .02em;
    border: 1px solid #3C4446;
    font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 300
  }
  #index .brandingBox .link a:hover {
    color: #000
  }
  #index .brandingBox .featuredImg {
    width: 104px;
    right: -33px;
    top: 28px;
  }
  #index .brandingBox .pubHeading02 {
    margin-bottom: 47px;
  }
}


/* worksBox */
#index .worksBox {
  color: #fff;
  background-color: #b1a648;
  --ind: 0;
}
#index .worksBox .pubBox {
  position: sticky;
  top: 0;
  width: auto;
  padding: 20px 0;
  max-width: initial;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
#index .worksBox .pubBox::before,
#index .worksBox .pubBox::after {
  content: "";
  flex: 1;
}
#index .worksBox .pubBox::after {
  flex: 1.5;
}
#index .worksBox .imgBox {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
#index .worksBox .imgBox .photo {
  margin: 0 auto;
  width: 512px;
  height: 512px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: none !important;
}
#index .worksBox .imgBox .photo.nodely {
  transition: 0s !important;
}
#index .worksBox .imgBox .photo .image {
  padding-bottom: 200px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  clip-path: inset(0);
  position: relative;
  box-sizing: content-box;
}
#index .worksBox .imgBox .photo .image:last-child {
  padding-bottom: 0;
}
#index .worksBox .imgBox .photo .image .blur {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s;
}
#index .worksBox .imgBox .photo .image.isBlur .blur {
  opacity: 1;
}

#index .worksBox .imgBox .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#index .worksBox .imgBox .textBox {
  flex: 1;
  margin: -7px 0 0 0;
  position: relative;
}
#index .worksBox .numTxt {
  margin-top: 340px;
  position: absolute;
  right: 110px;
  font-size: 6.7rem;
  font-weight: 300;
  font-family: "Helvetica", "Shin Go Regular", "A-OTF 新ゴ Pro R", "ヒラギノ角ゴシック StdN W3", "游ゴシック", "YuGothic", "Hiragino Kaku Gothic W3 JIS2004", "HGゴシックE", "ＭＳ Ｐゴシック", sans-serif;
  transform: translateY(-50%);
}
#index .worksBox .numTxt span.num {
  display: flex;
  flex-wrap: wrap;
  height: 1em;
  overflow: hidden;
}
#index .worksBox .numTxt span {
  display: block;
}
#index .worksBox .numTxt span.left span,
#index .worksBox .numTxt span.right span {
  transition: .5s linear;
  transform: translateY(calc(-100% * var(--ind)));
}
#index .worksBox .numTxt span.right span {
  transition-delay: .2s;
}
#index .worksBox .numTxt .sml {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #fff;
  font-size: 2rem;
  text-align: right;
}
#index .worksBox .title {
  margin-bottom: 11px;
  font-weight: 700;
  font-size: 2.6rem;
}
#index .worksBox .pubTextBox:nth-child(n+2) {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
#index .worksBox .pubTextBox {
  padding-right: 0;
  transition: .5s;
  font-size: 2.1rem;
  line-height: 1.5;
}
#index .worksBox .pubTextBox:not(.active) {
  opacity: 0;
  user-select: none;
  pointer-events: none;
}
#index .worksBox .smlTitle {
  margin-bottom: 32px;
}
#index .worksBox .pubHeading01 {
  /*
  margin-bottom: 55px;
  */
  min-height: 190px;
}
#index .worksBox .pubBtn {
  margin-top: 26px;
}

@media only screen and (max-width: 700px) {
  #index .worksBox .pubBtn {
    margin-top: 26px;
    display: flex;
    align-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 120px;
    gap: 15px;
  }
}

#index .worksBox .iconList li {
  opacity: 0;
  visibility: hidden;
  width: 152px;
  position: absolute;
  bottom: -35px;
  left: calc(25% + 122px);
}
#index .worksBox .iconList li.active {
  opacity: 1;
  visibility: visible;
  z-index: 11111;
}
@media only screen and (min-width: 751px) {
  #index .worksBox .textBox {
    margin-right: 30px !important;
  }
  #index .worksBox .imgBox .leftBox {
    width: 50%;
    padding: 0 30px;
  }
}
@media only screen and (min-width: 751px) and (max-width: 1300px) {
  #index .worksBox .imgBox .photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  #index .worksBox .imgBox .photo .image.isFixed:not(:last-child) img {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  #index .worksBox .pubBox {
    padding: 59px 0 59px 0;
  }
  #index .worksBox .pubBox::before,
  #index .worksBox .pubBox::after {
    display: none;
  }
  #index .worksBox .iconList li {
    left: calc(50% - 176px);
    width: 130px;
  }
  #index .worksBox .title {
    font-size: 2.1rem;
  }
}

@media only screen and (max-width:920px) {
  #index .worksBox .iconList li {
    left: calc(50% - 176px);
    width: 100px;
    top: 450px;
  }
}
@media only screen and (max-width:850px) {
  #index .worksBox .iconList li {
    left: calc(50% - 176px);
    width: 80px;
    top: 390px;
  }
}
@media only screen and (max-width:750px) {
  #index .worksBox .imgBox {
    flex-direction: column;
    height: calc(100vh - 120px);
    width: 70%;
  }
  #index .worksBox .imgBox .textBox {
    margin: 30px 0 0;
    padding-top: 0;
    flex: 1;
    width: 100%;
  }
  #index .worksBox .imgBox .photo {
    width: 60%;
    height: auto;
    aspect-ratio: 1;
  }
  #index .worksBox .imgBox .photo .image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  #index .worksBox .imgBox .photo .image.isFixed:not(:last-child) img {
    width: calc(100vw - 40px);
    height: auto;
    aspect-ratio: 1;
  }
  #index .worksBox .pubBox {
    padding: 60px 0 60px 0;
    max-width: inherit;
    overflow: hidden;
  }
  #index .worksBox .smlTitle {
    margin-bottom: 16px;
  }
  #index .worksBox .title {
    font-size: 1.8rem;
    margin-bottom: 14px;
  }
  #index .worksBox .pubTextBox {
    font-size: 1.4rem;
    line-height: 1.57;
  }

  #index .worksBox .numTxt .sml {
    margin-top: 6px;
    padding-top: 4px;
    font-size: 1.246rem;
  }
  #index .worksBox .numTxt {
    margin-top: 0;
    top: auto;
    right: 0;
    font-size: 4.2rem;
    transform: translateY(0);
    bottom: 45px;
  }
  #index .worksBox .imgBox .leftBox {
    width: 100%;
    padding: 0;
  }
}

@media only screen and (max-width:700px) {
  #index .worksBox .numTxt {
    margin-top: 0;
    top: auto;
    right: 0;
    font-size: 4.2rem;
    transform: translateY(0);
    bottom: 188px;
  }
  #index .worksBox .title {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  #index .worksBox .pubBox {
    padding: 0px 0 60px 0;
    max-width: inherit;
    overflow: hidden;
  }
  #index .worksBox .imgBox .photo {
    width: 60%;
    height: auto;
    aspect-ratio: 1;
  }
}
@media only screen and (max-width:700px) {
  #index .worksBox .imgBox .textBox {
    margin: 20px 0 0;
    padding-top: 0;
    flex: 1;
    width: 100%;
  }
}
/* flexSec */
#index .flexSec {
  height: 632px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b1a648;
}
#index .flexSec .pubBox {
  z-index: 20;
}
@media only screen and (max-width:750px) {
  #index .flexSec {
    padding-bottom: 15px;
  }
}

/* whoBox */
#index .whoBox {
  position: relative;
  background-color: transparent;
  clip-path: inset(0);
}
#index .whoBox .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
#index .whoBox .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#index .whoBox::before {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  z-index: 10;
}
@media only screen and (max-width: 389px) {
  #index .brandBox .listUl li {
    width: 100px;
  }
  #index .brandBox .listUl .pubBtn a {
    font-size: 1.2rem;
  }
  #index .brandBox .listUl .pubBtn.tel a {
    font-size: 1.3rem;
  }
  #index .brandBox02 .listUl .txt {
    font-size: 1.1rem;
  }
  #index .brandBox02 .featuredImg {
    width: 136px;
  }
  #index .featuresBox .listUl .title {
    font-size: 1.4rem;
  }
}

/* loading */
body#index {
  --winH: 100vh;
  overflow: unset !important;
}
body#index.loadOver {
  padding-top: 0;
  transition: .5s;
}
#loading {
  --width: min(100vh,100vw);
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--winH);
  background: rgba(255,255,255,1);
  z-index: 9998 !important;
  overflow: hidden;
}
#header {
  z-index: 9999 !important; /* ヘッダーとメニューを最前面に */
}
/* メニュー展開時の背景 */
.is-active #header-nav {
  z-index: 10000 !important;
}
#loading.hide {
  display: none;
}
#loading.over {
  background: rgba(255,255,255,0);
  user-select: none;
  pointer-events: none;
}
#loading .loadinginner {
  display: flex;
  position: absolute;
  bottom: 0;
  right: calc(50% - min(50vh,50vw));
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--width) * 0.9);
  transition: 3s;
  z-index: 1;
}
#loading.small {
  --width: 55px;
}
#loading .row {
  display: flex;
  justify-content: center;
  gap: calc(var(--width) * 1.1);
  transition: 3s;
}
#loading .box {
  position: relative;
  width: var(--width);
  height: var(--width);
  background-color: rgba(177, 166, 72, 1);
  transition: 3s;
}
#loading.small .box {
  transform: translateX(150px);
}
#loading.goldIn .box {
  background-color: rgba(255,255,255,0.3);
  transition: .5s;
}
#loading.over .box {
  background-color: rgba(177, 166, 72, 0.3);
  transition: .5s;
}
#loading .box .img {
  width: 30%;
  position: absolute;
  right: 10%;
  bottom: 0;
}
#loading .box .img img {
  transform: translateY(100%);
}
#loading .box .img.in img {
  animation: bottomIn .7s ease-out forwards;
  animation-delay: .5s;
}
@keyframes bottomIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
#loading.small .box .img {
  opacity: 0;
  transition: 2s;
  transition-delay: 1s;
}
#loading .box img {
  width: 100%;
}
#loading .goldBox {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: rgba(177, 166, 72, 1);
  text-align: center;
  transition: 1s;
  clip-path: inset(0 0 0 0);
}
#loading .goldBox::after {
  flex: 1;
}
#loading.over .goldBox {
  clip-path: inset(0 0 100% 0);
}
#loading.goldIn .goldBox {
  top: 0;
}
#loading .loadingTtl {
  display: flex;
  flex-direction: column;
  gap: 80px;
  color: #fff;
  font-family: "Ubuntu";
}
#loading .loadingTtl .en {
  font-size: 6rem;
  opacity: 0;
  transition: 1s;
  transition-delay: 1s;
  transform: translateY(4rem);
  line-height: 1;
  font-weight: 500;
}
#loading .loadingTtl .jp {
  font-size: 24px;
  opacity: 0;
  transition: 1s;
  transition-delay: 1.5s;
  transform: translateY(4rem);
  font-weight: 500;
}
#loading.goldIn .goldBox .en,
#loading.goldIn .goldBox .jp {
  opacity: 1;
  transform: translateY(0);
}
@media only screen and (min-width:1291px){
  #loading.small .loadinginner {
    right: max(165px,calc(50% - min(50vh,50vw)));
  }
}
@media only screen and (min-width:701px) and (max-width: 1290px){
  #loading.small .loadinginner {
    right: 15px;
  }
  #loading.small .box {
    transform: translateX(0);
  }
}
@media only screen and (max-width:700px) {
  #loading.small {
    --width: 40px;
  }
  #loading .goldBox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body {
    padding-top: 0 !important;
  }
  #loading.small .box {
    transform: translateX(-15px);
  }
  #loading .loadingTtl {
    gap: 50px;
  }
  #loading .loadingTtl .en {
    font-size: 3rem;
  }
  #loading .loadingTtl .jp {
    font-size: 1.6rem;
  }
}
  /*----------------------------------------------------
#index #wrap {
  padding-top: 0;
}
  -----------------------------------------------------*/

.scrollBox {
  clip-path: inset(0);
}
.scrollBox.firstFixed .scrollInner,
.scrollBox.isTopFixed .scrollInner {
  position: fixed;
  top: 0;
  width: 100%;
}
.scrollBox.isTopFixed.maxH:not(.firstFixed) .scrollInner {
  position: fixed;
  top: auto;
  bottom: 0;
}
.fadeInUp {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s;
}
.fadeRight {
  opacity: 0;
  transform: translateX(40px);
  transition: 1s;
}
.fadeLeft {
  opacity: 0;
  transform: translateX(-40px);
  transition: 1s;
}
body.loadOver .animate.isShow .dely02,
body.loadOver .scrollBox.isShow:not(.isHide) .dely02 {
  transition-delay: .2s;
}
body.loadOver .animate.isShow .dely03,
body.loadOver .scrollBox.isShow:not(.isHide) .dely03 {
  transition-delay: .4s;
}
body.loadOver .animate.isShow .dely04,
body.loadOver .scrollBox.isShow:not(.isHide) .dely04 {
  transition-delay: .6s;
}
body.loadOver .animate.isShow .dely05,
body.loadOver .scrollBox.isShow:not(.isHide) .dely05 {
  transition-delay: .8s;
}
body.loadOver .animate.isShow .dely06,
body.loadOver .scrollBox.isShow:not(.isHide) .dely06 {
  transition-delay: 1s;
}
body.loadOver .animate.isShow .dely07,
body.loadOver .scrollBox.isShow:not(.isHide) .dely07 {
  transition-delay: 1.2s;
}
body.loadOver .animate.isShow .fadeInUp,
body.loadOver .scrollBox.isShow:not(.isHide) .fadeInUp {
  opacity: 1;
  transform: none;
}
body.loadOver .animate.isShow .fadeRight,
body.loadOver .scrollBox.isShow:not(.isHide) .fadeRight {
  opacity: 1;
  transform: none;
}
body.loadOver .animate.isShow .fadeLeft,
body.loadOver .scrollBox.isShow:not(.isHide) .fadeLeft {
  opacity: 1;
  transform: none;
}
body.loadOver .scrollBox.isShow.isHide .fadeInUp {
  transform: none;
}
body.loadOver .scrollBox:not(.isHide) .foreBox .fadeInUp {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}
#index .scrollBox:not(.isHide) .foreBox .pubTextBox p,
#index .scrollBox:not(.isHide) .foreBox .pubHeading01 {
  transition-delay: .5s;
  transform: translateY(0);
}
#index .foreBox .pubBtn {
  transform: translateY(0);
}
#index .scrollBox:not(.isHide) .foreBox .pubBtn {
  transition-delay: .7s;
}
#index .scrollBox:not(.isHide) .foreBox .photo {
  transition-delay: .9s;
}
#index main > div:not(.notHidden) {
  overflow: hidden;
}
#index .foreBox {
  min-height: 100vh;
}
#index .whoBox::before {
  opacity: 0;
  transition: 1s;
}
#index .isShow .whoBox::before {
  opacity: 1;
}
#index .solutionBox::after {
  transform: scale(calc(1 + 0.3*var(--num)));
  transform-origin: top center;
}
#index .featuresBox .pubBtn,
#index .featuresBox .listUl li {
  transform: none !important;
}
main .successful {
  position: relative;
  z-index: 10;
}
@media only screen and (min-width:701px) {
  #index .flexSec {
    height: auto;
    display: block;
  }
  .reduceTxt {
    font-size: 80%;
    max-width: 764px;
    text-align: justify;
  }
}
@media only screen and (max-width:750px) {
  #index .foreBox {
    display: flex;
    align-items: center;
  }
}


.contentBox {
  padding-top: 100px;
  padding-bottom: 100px
}

@media only screen and (max-width:750px) {
  .contentBox {
    padding-top: 60px;
    padding-bottom: 60px
  }
}

/*----------------------------------------------------
実績追加分
-----------------------------------------------------*/

.outLinkBox {
  position: relative;
  z-index: 5;
}
.outLinkBox .linkUl {
  display: flex;
  flex-wrap: wrap;
}
.outLinkBox .linkUl li {
  width: calc(100% / 3);
}
.outLinkBox .linkUl li a {
  padding-bottom: 7px;
  min-height: 33.33vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.outLinkBox .linkUl li .pho {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.outLinkBox .linkUl li .pho img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.outLinkBox .linkUl li .subBox {
  position: relative;
  z-index: 5;
  color: #000;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.outLinkBox .linkUl li .subBox > span {
  display: block;
}


@media only screen and (min-width: 1220px) {
  .outLinkBox .linkUl li .subBox .ttl {
    margin-bottom: 16px;
    font-size: 2.0rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 1125px) and (max-width: 1219px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 1.9rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 950px) and (max-width: 1124px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 1.8rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 860px) and (max-width: 949px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 1.6rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 770px) and (max-width: 859px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 1.5rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 751px) and (max-width: 769px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 1.4rem;
    font-weight: bold;
  }
}
@media only screen and (max-width: 750px) {
  .outLinkBox .linkUl li .subBox .ttl {
    font-size: 2.0rem;
    font-weight: bold;
  }
}





































.outLinkBox .linkUl li .subBox .txt {
  font-size: 1.6rem;
}
.outLinkBox .linkUl li .subBox .txt.mb01 {
  margin: -5px 0 23px;
}
.outLinkBox .linkUl li .subBox .txt .big {
  margin-right: 5px;
  color: #FFF;
  font-size: 4.8rem;
  font-weight: 700;
  font-family: "Ubuntu";
  font-style: italic;
  line-height: 1;
}
.outLinkBox .linkUl li .subBox .price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.outLinkBox .linkUl li .subBox .price .num {
  font-style: italic;
  font-family: "Ubuntu";
}
.outLinkBox .linkUl li .subBox .price .lSub {
  padding: 6px 32px 0 0;
  font-size: 2rem;
  position: relative;
}
.outLinkBox .linkUl li .subBox .price .lSub::before {
  margin-top: 4px;
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 16px;
  transform: translateY(-50%);
  background: url(../images/top/top_icon01.png) no-repeat left top / 100%;
  content: '';
}
.outLinkBox .linkUl li .subBox .price .lSub .num {
  margin-right: 5px;
  font-size: 2.4rem;
}
.outLinkBox .linkUl li .subBox .price .rSub {
  font-size: 2.2rem;
  font-weight: bold;
}
.outLinkBox .linkUl li .subBox .price .rSub .num {
  margin-right: 5px;
  font-size: 3.2rem;
  font-weight: bold;
}
@media only screen and (min-width: 751px) {
  .outLinkBox .linkUl li a:hover .pho img,
  .sec02 .linkUl li a:hover .pho img {
    transform: scale(1.05);
  }
  .pageTop a:hover,
  .sec01 .imgBox .textBox .text a:hover {
    opacity: 0.7;
  }
  .sp {
    display: none !important;
  }
}

@media only screen and (max-width: 750px) {
  .outLinkBox .linkUl li {
    width: calc(100% / 2);
  }
  .outLinkBox .linkUl li a {
    padding-bottom: 0;
    min-height: 50vw;
    display: flex !important;
  }
  .outLinkBox .linkUl li a::before {
  }
  .outLinkBox .linkUl li .subBox .ttl {
    margin-bottom: 12px;
    font-size: 1rem;
  }
  .outLinkBox .linkUl li .subBox .txt {
    font-size: 1rem;
  }
  .outLinkBox .linkUl li .subBox .txt.mb01 {
    margin: -3px 0 17px;
  }
  .outLinkBox .linkUl li .subBox .txt .big {
    margin-right: 5px;
    font-size: 3.4rem;
  }
  .outLinkBox .linkUl li .subBox .price .lSub {
    margin-right: 3px;
    padding: 2px 24px 0 0;
    font-size: 1.4rem;
  }
  .outLinkBox .linkUl li .subBox .price .lSub::before {
    margin-top: 2px;
    width: 17px;
    height: 11px;
    background: url(../images/top/top_icon01_sp.png) no-repeat left top / 100%;
  }
  .outLinkBox .linkUl li .subBox .price .lSub .num {
    margin-right: 5px;
    font-size: 1.7rem;
  }
  .outLinkBox .linkUl li .subBox .price .rSub {
    font-size: 1.5rem;
  }
  .outLinkBox .linkUl li .subBox .price .rSub .num {
    margin: 2px 5px 0 0;
    font-size: 2.1rem;
    display: inline-block;
  }
}
@media only screen and (max-width: 359px) {
  .outLinkBox .linkUl li .subBox .price .lSub .num {
    font-size: 1.5rem;
  }
  .outLinkBox .linkUl li .subBox .price .lSub {
    font-size: 1.2rem;
  }
  .outLinkBox .linkUl li .subBox .price .rSub .num {
    font-size: 1.9rem;
  }
  .outLinkBox .linkUl li .subBox .price .rSub {
    font-size: 1.3rem;
  }
}

/* stickBox */
#index .stickBox .stickInner {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
#index .stickBox.isStick .stickInner {
  position: fixed;
}
#index .stickBox.isBottom .stickInner {
  top: auto;
  bottom: 0;
}
/*----------------------------------------------------
追加
-----------------------------------------------------*/

#index .scrollBox:not(.isHide) .foreBox .pubTextBox p>a.top_message {
  color: #aca450;
}
#index .scrollBox:not(.isHide) .foreBox .pubTextBox a>.top_message {
  color: #aca450;
}




a.top_message {
  color: #aca450;
}
a .top_message {
  color: #aca450;
}
.top_message a{
  color: #aca450;
}
.top_message a {
  color: #aca450;
}
.top_message {
  color: #aca450;
}


/*----------------------------------------------------
piller_cluster
-----------------------------------------------------*/
p.library-piller {
  font-size: 17.5px;
  font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 300;
  margin-top: 52px;
  margin-bottom: 36px;
  line-height: 1.59;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 750px) {
  p.library-piller {
    font-size: 12.8px;
    font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 300;
    margin-top: 52px;
    margin-bottom: 36px;
    line-height: 1.59;
    -webkit-font-smoothing: antialiased;
  }
}


p.text-banner {
  font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #000;
  padding-left: 0em;
  text-align: left;
}

@media only screen and (max-width: 750px) {
  p.text-banner {
    font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.75;
    color: #000;
    padding-left: 0em;
    text-align: left;
  }
}
.text-banner a {
  color: #000;
  display: inline-block;
}
.text-banner a:hover {
  color: #aca450;
}
.text-banner-bold {
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 700;
  color: #000;
}


.txt_bk {
  color: #000;
}

@media only screen and (max-width:1020px) {
  .visible-narrow {
    display: block
  }
}


/*----------------------------------------------------
piller_cluster
-----------------------------------------------------*/

/* companiesBox */
#index .our_approach {
  width: 500px;
  position: absolute;
  top: 66px;
  right: 6px;
}

@media only screen and (max-width: 700px) {
  #index .our_approach {
    width: 350px;
    position: absolute;
    top: 320px;
    right: 0px;
  }
}


#index .our_approach_Box {
  background-color: #fff;
}
@media only screen and (max-width: 700px) {
  #index .our_approach_Box {
    min-height: 100vh;
  }
}



/* approachBox */
#index .approachBox .pubBox {
  display: flex;
}
#index .approachBox .pubTextBox {
  flex: 1;
}
#index .approachBox .rightBox {
  width: 500px;
  margin-top: 68px;
}
#index .approachBox .listUl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 16px;
  transition: transform 0.3s ease;
}
#index .approachBox .listUl li {
  width: 242px;
  background-color: #47d2fd;
  text-align: center;
  font-size: 1.6rem;
  aspect-ratio: 1/1;
}
#index .approachBox .listUl .inner {
  padding: 30px 10px 0;
}
#index .approachBox .listUl .item02 {
  background-color: #d8a0f7;
}
#index .approachBox .listUl .item03 {
  background-color: #fcc680;
}
#index .approachBox .listUl .item04 {
  background-color: #9eff96;
}
#index .approachBox .listUl p {
  margin: 0 -10px;
  line-height: 1.625;
  letter-spacing: 0;
}
#index .approachBox .listUl strong {
  font-weight: 700;
  display: block;
}
#index .approachBox .listUl .title {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1.3888;
  font-weight: 700;
  background: url("../images/top_new/approach_bg01.png") no-repeat center center / 100% 100%;
}
#index .approachBox .listUl .item02 .title {
  background-image: url("../images/top_new/approach_bg02.png");
}
#index .approachBox .listUl .item03 .title {
  background-image: url("../images/top_new/approach_bg03.png");
}
#index .approachBox .listUl .item04 .title {
  background-image: url("../images/top_new/approach_bg04.png");
}
#index .approachBox .pubBox {
  padding: 100px 0 100px;
}
@media only screen and (max-width: 700px){
  #index .approachBox .pubBox {
    padding: 60px 0 60px;
  }
}
#index .approachBox .listUl .txt {
  padding: 12px 0 18px;
  height: calc(100% - 112px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 851px) and (max-width: 1000px) {
  #index .approachBox .listUl .txt.approachBoxBox {
    font-size: 112%;
    padding: 12px 0 18px;
    height: calc(100% - 112px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 701px) and (max-width: 1049px) {
  #index .approachBox .pubBox {
    display: block;
  }
  #index .approachBox .rightBox {
    width: auto;
  }
  #index .approachBox .pubTextBox {
    padding-right: 0;
  }
  #index .approachBox .listUl {
    gap: 14px 6px;
  }
  #index .approachBox .listUl li {
    font-size: 1.4rem;
    width: calc((100% - 36px)/3);
  }
  #index .approachBox .listUl .title {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 851px) and (max-width: 1049px) {
  #index .approachBox .listUl li {
    font-size: 1.6rem;
  }
  #index .approachBox .listUl .title {
    font-size: 1.9rem;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1049px) {
  #index .approachBox .listUl li {
    width: calc((100% - 50px)/4);
  }
  #index .approachBox .listUl li {
    font-size: 1.4rem;
  }
  #index .approachBox .listUl .title {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width:700px) {
  #index .approachBox .pubBox {
    display: block;
  }
  #index .approachBox .rightBox {
    width: auto;
    margin-top: 46px;
  }
  #index .approachBox .listUl .title {
    font-size: 1.26rem;
    line-height: 1.39;
    height: 53px;
  }
  #index .approachBox .listUl .txt {
    height: calc(100% - 65px);
    padding: 6px 0 14px;
  }
  #index .approachBox .listUl li {
    width: calc(50% - 5px);
    font-size: 1.12rem;
  }
  #index .approachBox .listUl .inner {
    padding: 12px 7px 0;
  }
  #index .approachBox .listUl p {
    margin: 0 -7px;
    line-height: 1.6;
  }
  #index .approachBox .listUl {
    gap: 9px 0;
  }
  #index .approachBox .pubHeading01 {
    margin-bottom: 18px;
  }
  #index .approachBox .pubTextBox .smlTitle {
    margin-bottom: 6px;
  }
}
@media only screen and (max-width: 374px) {
  #index .approachBox .listUl .title {
    font-size: 1rem;
    height: 43px;
  }
  #index .approachBox .listUl .txt {
    height: calc(100% - 43px);
  }
  #index .approachBox .listUl li {
    font-size: 0.9rem;
  }
}
/*----------------------------------------------------
common_new　commonと共通
-----------------------------------------------------*/
/* pubBox */
.pubBox {
  margin: 0 auto;
  width: calc(100% - 60px);
  max-width: 996px;
  position: relative;
}

@media only screen and (min-width: 751px) and (max-width: 1049px) {
  .padNone-top {
    display: none !important;
  }
}
@media only screen and (min-width: 751px) and (max-width: 999px) {
  .padNone {
    display: none !important;
  }
  .padBlock {
    display: block !important;
  }
}
@media only screen and (min-width: 751px) {
  .pubSp {
    display: none !important;
  }
  .pubReduce {
    font-size: 75%;
  }
}
@media only screen and (max-width: 750px) {
  .pubBox {
    margin: 0 20px;
    width: auto;
    max-width: inherit;
  }
  .pubPc {
    display: none !important;
  }
  .padBlock.visible-sp {
    display: block;
  }
}
/*----------------------------------------------------
最新版からのデザイン差分統合 (2026/02/04実施)-gemini
-----------------------------------------------------*/
/* 1. ブランドボックスの幅調整 */
.pubBrandBox .listUl li {
  width: 275px;
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
  .pubBrandBox02 .listUl .txt br.padNone {
    display: none !important;
  }
}
@media only screen and (max-width: 750px) {
  #index .brandBox .listUl li {
    width: 108px ;
  }
  }/* 2. & 3. ブランドボックス02の余白調整 */
@media only screen and (min-width: 701px) {
  #index .brandBox02 .listUl .txt {
    margin: 35px -10px 0 !important; /* スマホで窮屈だった場合の調整 */
  }
  }

  /* 4. サブテキストの余白追加 */
  #index .brandBox02 .subTxt {
    margin-bottom: 57px;
    line-height: 1.5em;
  }

  /* 5. 〜 11. バナー用クラス名の更新（-top を付与） */
  p.text-banner-top,
  p.text-banner { /* 2/2時点のhtmlも考慮して両方記載 */
    font-family: "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.75;
    color: #000;
    text-align: left;
  }

  @media only screen and (max-width: 750px) {
    p.text-banner-top, p.text-banner { font-size: 1.25rem; }
  }

  .text-banner-top a, .text-banner a { color: #000; display: inline-block; }
  .text-banner-top a:hover, .text-banner a:hover { color: #aca450 !important; }

  .text-banner-top-bold, .text-banner-bold {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 700;
    color: #000;
  }
  .text-banner-top-bold a, .text-banner-top-bold a:hover { display: inline-block; color: #aca450 !important; }

  /* 12. & 13. レスポンシブ表示の制御 */
  @media only screen and (min-width: 750px) {
    .pubSp { display: none !important; }
  }
  @media only screen and (min-width: 751px) and (max-width: 1049px) {
    .pubSp { display: block !important; }
  }

  /* --- 【最重要】左右のアキを維持する記述 --- */
  @media screen and (max-width: 750px) {
    body#top section.branding,
    body#top section.solution,
    body#top section.new,
    .area {
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
    }
  }
  /*----------------------------------------------------
  CTAエリアのレイアウト調整 gemini
  -----------------------------------------------------*/

  /* PC・共通設定 */
  p.text-banner-top {
    display: block;
    width: 100%;
    margin: 0 auto;
    word-break: break-word;
  }

  /* 改行コントロール用のクラス */
  p.text-banner-top br {
    display: block;
  }

  /* スマホ版（750px以下）の微調整 */
  @media screen and (max-width: 750px) {
    p.text-banner-top {
      font-size: 1.4rem; /* 少し大きくして可読性アップ */
      line-height: 1.8;
      padding: 0 10px;
      box-sizing: border-box;
    }

    /* スマホで改行を維持したい箇所の制御 */
    .sp-br {
      display: block;
      content: "";
      margin-top: 0.5em;
    }
  }
  /*----------------------------------------------------
  JSが読み込まれる一瞬の「チラつき」防止
  -----------------------------------------------------*/

  @media screen and (max-width: 750px) {
    #loading {
      display: none !important;
    }
    body {
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
  /*----------------------------------------------------
  フォアビスタが選ばれる理由
  -----------------------------------------------------*/
  .pubHeading02.midashi {
    font-family: "Hiragino Kaku Gothic W5 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: 22px;
    line-height: 1.6em;
  }
  @media only screen and (max-width: 750px) {
    .pubHeading02.midashi {
      font-size: 1.5rem;
      margin-bottom: 22px !important;
      line-height: 1.6em;
    }
  }

  /*----------------------------------------------------
  実績　縮小時
  -----------------------------------------------------*/

  @media only screen and (max-width: 1100px) {
    .pubHeading01 {
      font-size: 3.6rem;
    }
  }
  @media only screen and (max-width: 1038px) {
    .pubHeading01 {
      font-size: 3.4rem;
    }
  }
  @media only screen and (max-width: 985px) {
    .pubHeading01 {
      font-size: 3.2rem;
    }
  }
  @media only screen and (max-width: 930px) {
    .pubHeading01 {
      font-size: 3.0rem;
    }
  }
  @media only screen and (max-width: 1100px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.7rem;
    }
  }
  @media only screen and (max-width: 1038px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.6rem;
    }
  }
  @media only screen and (max-width: 985px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.5rem;
    }
  }
  @media only screen and (max-width: 930px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.4rem;
    }
  }
  @media only screen and (max-width: 895px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.3rem;
    }
  }
  @media only screen and (max-width: 860px) {
    .pubTextBox .smlTitle.works {
      font-size: 2.2rem;
    }
  }

  /*----------------------------------------------------
  ハンバーガーメニュー正常化のための強制修正
  -----------------------------------------------------*/


  /* 1. メニュー本体(vivifynavi)を最前面へ */
  .vivifynavi {
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important; /* JSで制御している場合はここを調整 */
  }

  /*----------------------------------------------------
　　2. ヘッダー（ロゴと三本線）も埋もれないようにする
  #header {
    z-index: 10000 !important;
    position: relative;
  }
  -----------------------------------------------------*/

  /* 3. ローディング画面が邪魔をしている場合に備え、完了後は完全に消す */
  body.loadOver #loading {
    display: none !important;
    z-index: -1 !important;
  }

  /* 4. メニュー展開時のスクロール固定などが干渉している場合への対策 */
  body.is-fixed {
    overflow: hidden;
  }

  /* --- ハンバーガーメニュー表示の強制修正 --- */

  /* 1. メニューが開いた時、中身を確実に「見える状態」にする */
  .is-active .vivifynavi {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 9999 !important;
    background-color: #fff !important; /* 背景が透明で後ろが透けるのを防ぐ */
  }

  /* 2. メニュー展開中、ローディング画面が邪魔をしないように完全に隠す */
  .is-active #loading {
    display: none !important;
  }

  /* 3. SNSアイコンなどの浮き上がり・ズレ防止 */
  /* メニューを閉じた際、位置が固定されてしまうのを防ぎます */
  .sns_icon_block,
  .side_sns {
    transform: none !important;
    transition: all 0.3s ease;
  }

  /* 4. メニューボタン（三本線）自体を常に最前面に */
  .header__hamburger {
    z-index: 10000 !important;
  }
  /* --- SNSアイコンの重なりと位置ズレを解消 --- */

  /* 1. SNSを含むフッター要素をメニューより下に配置 */
  .footer3 {
    position: relative; /* または static */
    z-index: 1 !important; /* メニュー(9999)より圧倒的に低く設定 */
  }

  /* 2. メニューが開いている間（bodyにis-active等がついている時）、SNSを完全に隠す */
  /* ※JSでbodyに付与されるクラス名に合わせて調整してください */
  .is-active .footer3,
  .is-open .footer3 {
    display: none !important;
  }

  /* 3. アイコン画像が意図せずスライドするのを防ぐ */
  .footer-inner3 img {
    transform: none !important;
    transition: none !important;
  }
  /* メニューが開いている間、SNSアイコンを完全に消し去る */
  body.is-active .footer3 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* メニューボタン（三本線）がSNSより上に来るように念押し */
  .header__hamburger {
    z-index: 10001 !important;
  }
  /* SNSとコピーライトの「勝手な移動」を禁止する */
  .footer3,
  .copyright {
    position: static !important; /* 位置計算をブラウザ標準に戻す */
    transform: none !important;  /* JSによる移動を無効化 */
    margin-top: 0 !important;
    background-color: #fff;
    position: relative;
    z-index: 10;
  }

  /* メニューが開いている間、絶対に画面に出さない */
  body.is-active .footer3,
  body.is-active .copyright,
  body.is-active footer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /*----------------------------------------------------
  ブランディングの費用と進め方　脚注
  -----------------------------------------------------*/
  p.btm0 {
    margin-bottom: unset;
  }
  li.TextBox{
    list-style: none;
    margin-bottom: 0.4rem;
    text-indent: -1.05em;
    line-height: 3.2rem;
    margin-left: -1.2em;
  }
  li.TextBox.small{
    font-size: 14px;
    list-style: none;
    text-indent: -1.2em;
    line-height: 1.6em;
    margin-left: -48px;
  }
  li.TextBox .bold{
    font-weight: 700;
  }
  div.TextBox{
    margin: 20px 0px 20px 40px;
  }
  /*----------------------------------------------------
  ブランディングの費用と進め方　ぶら下がりインデント
  -----------------------------------------------------*/
  .indent-cell {
    padding-left: 2.1em;
    text-indent: -1.3em;
    text-align: left;
    background: #fff;
    /* デベロッパーツールの 400（標準）を上書き */
    vertical-align: middle;
  }
  .indent-cell2 {
    padding-left: 2.1em;
    text-indent: -1.3em;
    text-align: left;
    background: #fff;
    /* デベロッパーツールの 400（標準）を上書き */
    vertical-align: middle;
    word-break: auto-phrase;
  }
  /*----------------------------------------------------
  ブランディング会社の選び方　ぶら下がりインデント
  -----------------------------------------------------*/
  /* --- テーブル内 箇条書きインデント（改行対応版） --- */
  .showBox table tbody td.table-indent {
    text-align: left;
    vertical-align: middle;
    padding: 15px 12px 15px 15px; /* 親のパディングは標準に戻す */
    background: #fff;
  }

  /* tdの中の各項目(span)に対する設定 */
  .showBox table tbody td.table-indent span {
    display: block;          /* 各項目を独立したブロックにする */
    padding-left: 0em;    /* 左側に余白を作る */
    text-indent: -0.9em;     /* ●をその余白分だけ左に突き出させる */
    line-height: 1.6;
    margin-bottom: 0.4em;    /* 項目ごとの隙間（お好みで調整） */
  }

  .showBox table tbody td.table-indent span:last-child {
    margin-bottom: 0;        /* 最後の項目の下マージンは消す */
  }

  /* スマホ表示の際の微調整 */
  @media only screen and (max-width: 750px) {
    .showBox table tbody td.table-indent span {
      adding-left: 0em;
      text-indent: -0.9em;
      font-size: 1.1rem;
    }
  }
  /*----------------------------------------------------
  lpを流用
  -----------------------------------------------------*/
  #index .brandBox {
    background-color: #3e4445;
    position: relative;
    z-index: 30;
  }
  #index .brandBox.brandBox03 .pubBox {
    padding: 60px 0 80px;
  }
  #index .brandBox.brandBox03 .pubHeading02 {
    margin-bottom: 20px;
  }
  #index .brandBox .pubHeading02 {
    font-size: 3.8rem;
  }
  .content {
    margin: 0 auto;
    width: 800px;
    max-width: 80%;
  }
  #index .problems .whiteBox {
    margin: 0 auto 43px;
    width: 479px;
    padding: 23px 34px 25px;
  }
  @media only screen and (min-width: 751px) {
    #index .problems .sub01 .textList li {
      margin-bottom: 12px;
      margin-right: 0;
      font-weight: 500;
      padding-left: 41px;
      letter-spacing: -0.03em;
    }
  }
  #main .problems .sub01 .textList li {
    margin-bottom: 15px;
    margin-right: -3em;
    padding-left: 34px;
    position: relative;
    font-size: 2rem;
    line-height: 1.55;
    font-weight: 500;
  }
  #index .problems .sub01 .textList li::before {
    width: 30px;
    top: 5px;
    height: auto;
    aspect-ratio: 60 / 63;
    background-image: url(../images/lp/corporate_branding/icon02_new.png);
  }
  #main .problems .sub01 .textList li::before {
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 10px;
    background: url(../images/lp/icon01.png) no-repeat center center / auto 100%;
    content: '';
  }
  #index .problems .bold {
    color: #938853;
  }
  #main .problems .bold {
    font-size: 2.8rem;
    line-height: 1.55;
    font-weight: 700;
    color: #b1a648;
    padding-left: 8px;
  }

  #index .brandBox.brandBox03 .subTxt {
    margin-bottom: 30px;
  }
  #index .brandBox02 .subTxt {
    margin-bottom: 60px;
    font-size: 2.2rem;
  }
  #index .brandBox02 .subTxt {
    margin-bottom: 57px;
    line-height: 1.5em;
  }
  #index .brandBox02 .subTxt {
    margin-bottom: 60px;
    font-size: 2.2rem;
    text-align: center;
  }
  .white_txt {
    color: #fff !important;
  }
  #index .brandBox.brandBox03 .pubBtn {
    margin-top: 58px;
  }
  @media only screen and (min-width: 751px) {
    #index .brandBox.brandBox03 .pubBtn a {
      height: 74px;
    }
  }

  #index .brandBox.brandBox03 .listUl .pubBtn.tel {
    border-radius: 50px;
  }
  #index .brandBox .listUl .pubBtn {
    margin: 0;
  }
  #index .brandBox.brandBox03 .pubBtn {
    margin-top: 48px;
    justify-items: center;
  }
  #index .brandBox .listUl .pubBtn {
    margin: 0;
  }
  .pubBtn {
    margin-top: 36px;
  }

  @media only screen and (min-width: 751px) {
    #index .brandBox.brandBox03 .listUl .pubBtn a {
      font-size: min(2.6vw, 22px) !important;
    }
  }
  @media only screen and (min-width: 751px) {
    #index .brandBox.brandBox03 .listUl .pubBtn a {
      font-size: min(2.6vw, 22px) !important;
    }
  }
  @media only screen and (min-width: 751px) {
    #index .brandBox.brandBox03 .listUl .pubBtn a {
      font-size: 14px;
    }
  }
  #index .brandBox .listUl .pubBtn a {
    margin: 0 auto;
    width: 100%;
    height: 65px;
    color: #000;
    background-color: #e6ff00;
    border: none;
    font-size: 2.2rem;
    font-weight: 500;
  }
  @media only screen and (min-width: 751px) {
    #index .brandBox.brandBox03 .pubBtn a {
      height: 50px;
      margin:auto;
    }
  }
  #index .brandBox .listUl .pubBtn a {
    margin: 0 auto;
    width: 100%;
    height: 65px;
    color: #000;
    background-color: #fff !important;
    border: none;
    font-size: 2.2rem;
    font-weight: 500;
  }
  #index .brandBox .listUl .pubBtn a:hover {
    background-color: #e6ff00 !important;
    color: #000 !important;
  }
  /*----------------------------------------------------
  lpを流用ここまで
  -----------------------------------------------------*/
  a .bold {
    color: #0000ee;
    font-weight: 700;
  }

  a .bold:hover {
    color: #aca450;
  }


  /*----------------------------------------------------
  table
  -----------------------------------------------------*/

  table {
    border: 1px solid rgb(140 140 140);
    font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
    width: 100%;
  }

  thead > tr,
  tfoot > tr {
    background-color: #eaeef2;
  }

  th,
  td {
    border: 1px solid rgb(160 160 160);
  }

  caption, th, td {
    text-align: left;
    font-weight: 400;
    vertical-align: middle;
    padding: 0.5em 0.5em;
  }

  td {
    background: #fff
  }
  th.white {
    background: #fff
  }


  .table_title_center {
    font-size: 14px;
    text-align: center;
    font-weight: 700;
  }

  .table_center {
    text-align: center;
  }
  .raise {
    padding-bottom: 18px;
  }
  table.center-all td,
  table.center-all th {
    text-align: center;
  }

  .table_small {
    font-size: 14px;
  }

  .size_middle{
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-size: 30px;
    font-weight: 700;
    -webkit-text-stroke: 1px;
  }

  .size_large{
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
    font-weight: 700;
    -webkit-text-stroke: 1px;
  }

  /*----------------------------------------------------
  企業ブランディングのステップ
  -----------------------------------------------------*/



  #steps2 .featuresBox2 .pubBox {
    padding: 98px 0 260px;
  }
  #steps2 .featuresBox2 .featuredImg {
    position: absolute;
    width: 222px;
    bottom: 0;
    right: -88px;
  }

  #steps2 .featuresBox2 .listUl {
    margin-left: 5px;
  }
  #steps2 .featuresBox2 .listUl li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
  #steps2 .featuresBox2 .listUl .title {
    font-family: "Hiragino Kaku Gothic W5 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
  }
  #steps2 .featuresBox2 .listUl .textBox {
    margin: 0 0 0 ;
    flex: 1;
    font-size: calc(1.6rem * 1.1);
    line-height: 1.75;
  }
  #steps2 .featuresBox2 .listUl .textBox p {
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }

  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .listUl .textBox p {
      margin-top: 5px;
      margin-bottom: 20px;
      line-height: 1.7;
    }
  }

  #steps2 .featuresBox2 .listUl .textBox p:last-child {
    margin-bottom: 0;
  }
  #steps2 .featuresBox2 .featuredImg {
    overflow: hidden;
  }
  #steps2 .featuresBox2 .featuredImg img {
    display: block;
    transform: translateX(40px);
    opacity: 0;
  }
  #steps2 .featuresBox2 .featuredImg.show img {
    opacity: 1;
    transform: translateX(0);
    transition: 1s;
  }

  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .pubBox {
      padding: 94px 0 174px;
    }
    #steps2 .featuresBox2 .pubHeading02 {
      margin-bottom: 93px;
      line-height: 1.6;
    }
    #steps2 .featuresBox2 .listUl {
      margin: 0 -5px;
    }
    #steps2 .featuresBox2 .listUl .title {
      font-family: "Hiragino Kaku Gothic W5 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
      font-weight: 500;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.6;
      color: #fff;
    }
    #steps2 .featuresBox2 .listUl .textBox {
      margin: 32px 0 0 0;
      font-size: 1.5rem;
      line-height: 2;
      text-align: justify;
      letter-spacing: -0.05em;
    }
    #steps2 .featuresBox2 .listUl li {
      display: block;
      margin-bottom: 50px;
    }
    #steps2 .featuresBox2 .featuredImg {
      width: 142px;
      bottom: 2px;
      right: 0;
    }
  }
  #steps2 .steps_title {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 700;
    margin-bottom: 50px;
    font-size: 2.6rem;
    line-height: 1.46;
    text-align: left;
    color: #000;
  }
  @media only screen and (max-width: 750px) {
    #steps2 .steps_title {
      margin-bottom: 50px;
      font-size: 1.6rem;
      line-height: 1.46;
      text-align: left;
    }
  }


  /*----------------------------------------------------
  企業ブランディングのステップ
  -----------------------------------------------------*/


  #steps2 .featuresBox2 .pubHeading02 {
    margin-bottom: 98px;
  }
  #steps2 .featuresBox2 .pubBox {
    padding: 98px 0 120px;
  }
  #steps2 .featuresBox2 .featuredImg {
    position: absolute;
    width: 222px;
    bottom: 0;
    right: -88px;
  }

  #steps2 .featuresBox2 .listUl {
    margin-left: 5px;
  }
  #steps2 .featuresBox2 .listUl li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #steps2 .featuresBox2 .listUl li:last-child {
    margin-bottom: 0;
  }
  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .listUl li:last-child {
      margin-top: 50px;
    }
  }
  #steps2 .featuresBox2 .listUl .leftBox {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color:#b1a648;
    text-align: center;
    margin-right: 40px;
  }
  #steps2 .featuresBox2 .listUl .num {
    font-family: "Ubuntu";
    font-weight: 500;
    margin-right: 10px;
    color: #b1a648;
    font-size: 2rem;
    line-height: 1;
  }

  #steps2 .featuresBox2 .listUl .num .num_num {
    font-weight: 300;
    font-family: "Helvetica", "Shin Go Regular", "A-OTF 新ゴ Pro R", "ヒラギノ角ゴシック StdN W3", "游ゴシック", "YuGothic", "Hiragino Kaku Gothic W3 JIS2004", "HGゴシックE", "ＭＳ Ｐゴシック", sans-serif;
    margin-top: 38px;
    margin-bottom: 20px;
    color: #b1a648;
    font-size: 8rem;
    line-height: 1;
    letter-spacing: -0.05em;
  }
  .num_num {
    font-weight: 300;
    font-family: "Helvetica", "Shin Go Regular", "A-OTF 新ゴ Pro R", "ヒラギノ角ゴシック StdN W3", "游ゴシック", "YuGothic", "Hiragino Kaku Gothic W3 JIS2004", "HGゴシックE", "ＭＳ Ｐゴシック", sans-serif;
    color: #b1a648;
    margin-right: 70px;
    font-size: 8rem;
    line-height: 1;
    letter-spacing: -0.05em;
  }
  @media only screen and (max-width: 750px) {
    .num_num {
      margin-right: 70px;
      font-size: 5.5rem;
      line-height: 1;
      letter-spacing: -0.05em;
      margin-left: 28px;
      margin-top: -35px;
    }
  }
  #steps2 .featuresBox2 .listUl .title {
    font-family: "Hiragino Kaku Gothic W5 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 54px 0 0;
  }
  #steps2 .featuresBox2 .listUl .title.long_title {
    margin: 54px 0 0 5px;
    letter-spacing: -0.04em;
  }
  .long_title {
    margin: 54px 0 0 9px;
    letter-spacing: -0.07em;
  }

  @media only screen and (max-width: 750px) {
    .long_title {
      margin: 54px 0 0 9px;
      letter-spacing: -0.1em;
    }
  }

  #steps2 .featuresBox2 .listUl .title.first {
    margin: 48px 0 0;
  }
  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .listUl .title.first {
      margin: -5px 0 0;
    }
  }
  #steps2 .featuresBox2 .listUl .textBox {
    margin: 23px 0 0 40px;
    flex: 1;
    font-size: calc(1.6rem * 1.1);
    line-height: 1.75;
  }
  #steps2 .featuresBox2 .listUl .textBox p:last-child {
    margin-bottom: 0;
  }
  #steps2 .featuresBox2 .featuredImg {
    overflow: hidden;
  }
  #steps2 .featuresBox2 .featuredImg img {
    display: block;
    transform: translateX(40px);
    opacity: 0;
  }
  #steps2 .featuresBox2 .featuredImg.show img {
    opacity: 1;
    transform: translateX(0);
    transition: 1s;
  }

  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .pubBox {
      padding: 40px 0 120px;
    }
    #steps2 .featuresBox2 .pubHeading02 {
      margin-bottom: 93px;
      line-height: 1.6;
    }
    #steps2 .featuresBox2 .listUl {
      margin: 0 -5px;
      justify-self: center;
      margin: auto;
    }
    #steps2 .featuresBox2 .listUl .leftBox {
      padding: 34px 0 50px;
      margin: 0 auto;
      width: 112px;
      height: 112px;
      letter-spacing: -0.05em;
      margin-top: -80px;
      margin-left: 70px;
    }
    #steps2 .featuresBox2 .listUl .title {
      font-family: "Hiragino Kaku Gothic W5 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
      font-weight: 500;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.6;
      color: #fff;
      letter-spacing: -0.03em;
      margin: -1px 0 0;
    }
    #steps2 .featuresBox2 .listUl .num {
      font-family: "Ubuntu";
      font-weight: 500;
      color: #b1a648;
      font-size: 1.2rem;
      line-height: 1;
      margin-right: 0px;
      margin-left: -5px;
    }
    #steps2 .featuresBox2 .listUl .textBox {
      margin: -102px -10px 0 190px;
      font-size: 1.5rem;
      line-height: 2;
      text-align: justify;
      letter-spacing: -0.05em;
    }
    #steps2 .featuresBox2 .listUl li {
      display: block;
      margin-bottom: 65px;
    }
    #steps2 .featuresBox2 .featuredImg {
      width: 142px;
      bottom: 2px;
      right: 0;
    }
  }
  /*----------------------------------------------------
  くわしく見る挙動調整
  -----------------------------------------------------*/
  /* JSが「消そう」としても、このクラスがついていれば強制的に表示し続ける */
  .pubBtn-fixed {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* JSのアニメーションによる移動も防ぐ */
  }
  /*----------------------------------------------------
  CTA LP 資料請求のみ
  -----------------------------------------------------*/
  /* 親の箱：上下中央揃えを強制する */
  .lp-brand-layout .pubBox {
    display: flex !important;
    align-items: center !important;    /* これで上下中央になります */
    justify-content: space-between !important;
    padding: 58px 0 60px !important;
    gap: 20px !important;
    height: auto !important;           /* 高さを自動にして中身に合わせる */
  }

  /* タイトル自体の余計な上マージンを消す */
  .lp-brand-layout .pubHeading02 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;       /* 行間を整えて中央感を出す */
    flex-shrink: 0 !important;
  }
  /* 右側のリスト：余計な余白を消し、中身を中央に寄せる */
  .lp-brand-layout .listUl {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* アイコンとボタンを包む li：ここを縦並び・中央揃えにする */
  .lp-brand-layout .listUl li {
    display: flex !important;
    flex-direction: column !important; /* 縦に並べる */
    align-items: center !important;    /* 中央揃え（これでボタンも中央に来ます） */
    gap: 15px !important;              /* アイコンとボタンの間隔 */
    width: 280px !important;           /* ここで右側エリアの幅を確保 */
  }

  /* アイコン画像のサイズ固定 */
  .lp-brand-layout .listUl .image {
    width: 110px !important;
    margin: 0 auto !important;
  }

  /* ボタンの修正：幅を「修正前」に近いサイズに固定 */
  .lp-brand-layout .pubBtn {
    margin: 0 auto !important;         /* 中央配置 */
    width: 240px !important;           /* ボタンの横幅（お好みで調整してください） */
    float: none !important;            /* 万が一の回り込み解除 */
  }

  .lp-brand-layout .pubBtn a {
    display: block !important;
    width: 100% !important;
    padding: 15px 10px !important;     /* 上下パディングで高さを出す */
    height: auto !important;
    text-align: center !important;
  }

  /* スマホ用：縦並びに戻す */
  @media only screen and (max-width: 750px) {
    .lp-brand-layout .pubBox {
      display: block !important;
    }
    .lp-brand-layout .listUl {
      justify-content: center !important;
      margin-top: 30px !important;
    }
    .lp-brand-layout .listUl li {
      width: 100% !important;
    }
  }

  /*----------------------------------------------------
  TOP4セクション　テキストカラー変更
  -----------------------------------------------------*/
  .pubTextBox .smlTitle2 {
    margin-bottom: 22px;
    display: block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.635;
    color: #fff;
  }
  .fadeInUp.dely08 {
    transition-delay: 0.3s;
    color: #fff;
  }
  /*----------------------------------------------------
  TOP4セクション　文字詰め
  -----------------------------------------------------*/

  .pubTextBox .narrow{
    letter-spacing: -0.04em;
  }


  /*----------------------------------------------------
  レスポンシブ
  -----------------------------------------------------*/
  @media only screen and (max-width: 700px) {
    #index .foreBox .pubTextBox {
      max-width: inherit;
    }
  }

  @media only screen and (max-width: 700px) {
    #index .companiesBox {
      min-height: 100vh;
    }
  }
  @media only screen and (max-width: 700px) {
    .pubTextBox .smlTitle {
      margin-bottom: 10px !important;
    }
  }
  @media only screen and (max-width: 700px) {
    .pubTextBox .smlTitle2 {
      padding-top: 240px;
    }
  }
  /*----------------------------------------------------
  レスポンシブ CTA
  -----------------------------------------------------*/
  @media only screen and (max-width: 700px) {
    #index .brandBox .pubHeading02 {
      text-align: center;
    }
  }
  /*----------------------------------------------------
  レスポンシブ work
  -----------------------------------------------------*/
  @media only screen and (max-width: 700px) {
    .pubTextBox .smlTitle.worktitle {
      padding-top: 0px;
    }
  }

  @media only screen and (max-width: 700px) {
    .pubTextBox .smlTitle.approachtitle {
      padding-top: 40px;
    }
  }
  /*----------------------------------------------------
  レスポンシブ work
  -----------------------------------------------------*/
  @media only screen and (max-width: 700px) {
    #index .featuresBox .listUl .subInner {
      width: 60%;
      margin: auto;
    }
  }

  @media only screen and (max-width: 700px) {
    .features {
      padding-top: 40px;
      padding-bottom: 80px;
    }
  }
  /*----------------------------------------------------
  ブランディング実績
  -----------------------------------------------------*/

  .pubTextBox .smlTitle.works {
    display: inline;
    position: relative;
    top: -65px;
    font-size: 2.6rem;
    color: #b1a648;
    font-weight: 700;
    margin-left: 65px;
    line-height: 1.4em;
    background: linear-gradient(transparent 0%, #fff 0%);
    padding: 6px;
    box-decoration-break: clone;
  }

  @media only screen and (max-width: 750px) {
    .pubTextBox .smlTitle.works {
      margin-top: 0px;
      margin-bottom: 32px !important;
      font-size: 2rem;
    }
  }
  .pubTextBox .smlTitle.worksarrow {
    margin-top: -3px;
    display: inline;
    position: absolute;
    font-size: 3.2rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.635;
    margin-left: 15px;
    line-height: 1.4em;
    padding: 2px;
  }

  @media only screen and (min-width: 701px) and (max-width: 750px) {
    .pubTextBox .smlTitle.worksarrow {
      margin-top: 3px;
      display: inline;
      position: absolute;
      font-size: 3.2rem;
      color: #fff;
      font-weight: 700;
      line-height: 1.635;
      margin-left: 15px;
      line-height: 1.4em;
      padding: 2px;
    }
  }

  @media only screen and (max-width: 700px) {
    .pubTextBox .smlTitle.worksarrow {
      margin-top: -10px;
      display: inline;
      position: absolute;
      font-size: 3.2rem;
      color: #fff;
      font-weight: 700;
      line-height: 1.635;
      margin-left: 15px;
      line-height: 1.4em;
      padding: 2px;
    }
  }

  .worksarrow {
    margin-top: -24px;
  }

  /*----------------------------------------------------
  cta
  -----------------------------------------------------*/

  #index .brandBox .listUl .pubBtn a {
    margin: 0 auto;
    width: 100%;
    height: 65px;
    color: #000;
    background-color: #fff !important;
    border: none;
    font-size: 2.2rem;
    font-weight: 500;
  }
  @media only screen and (min-width: 1051px) {
    .pubBtn.large a {
      width: 100%;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 2.2rem;
      font-weight: 500;
      border: 1px solid #000;
      background-color: #e6ff00;
      border-radius: 50px;
      transition: .3s;
      position: relative;
      gap: 14px;
    }
  }
  @media only screen and (min-width: 751px) and (max-width: 1050px) {
    .pubBtn.large a {
      width: 708px;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 2.2rem;
      font-weight: 500;
      border: 1px solid #000;
      background-color: #e6ff00;
      border-radius: 50px;
      transition: .3s;
      position: relative;
      gap: 14px;
    }
  }
  @media only screen and (min-width: 701px) and (max-width: 750px) {
    .pubBtn.large a {
      width: 708px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 2.2rem;
      font-weight: 500;
      border: 1px solid #000;
      background-color: #e6ff00;
      border-radius: 50px;
      transition: .3s;
      position: relative;
      gap: 14px;
    }
  }
  @media only screen and (max-width: 700px) {
    .pubBtn.large a {
      width: 346px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 1.4rem;
      font-weight: 500;
      border: 1px solid #000;
      background-color: #e6ff00;
      border-radius: 50px;
      transition: .3s;
      position: relative;
      gap: 14px;
      margin: auto;
    }
  }
  #index .brandBox.brandBox03 .pubBtn.large a:hover {
    background-color: #938853 !important;
    color: #fff !important;
  }

  /*----------------------------------------------------
  cta チェックリスト
  -----------------------------------------------------*/

  #main .problems .whiteBox {
    width: 490px;
    margin-top: 48px;
    margin-bottom: 40px;
    padding: 30px 39px 30px;
    color: #000;
    background: #fff;
    justify-self: center;
  }
  #main .problems .sub01 .textList li::before {
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 10px;
    background: url(../images/lp/icon01.png) no-repeat center center / auto 100%;
    content: '';
  }

  @media only screen and (max-width: 950px) {
    #main .problems .sub01 .textList li::before {
      width: 26px;
      height: 26px;
      position: absolute;
      left: 0;
      top: 3px;
      background: url(../images/lp/icon01.png) no-repeat center center / auto 100%;
      content: '';
    }
  }

  #main .problems .sub01 .textList li {
    margin-bottom: 15px;
    margin-right: -3em;
    padding-left: 34px;
    position: relative;
    font-size: 2rem;
    line-height: 1.55;
    font-weight: 500;
  }
  #main .problems .sub01 .textList li:last-child {
    margin-bottom: 0px;
  }
  #main .problems .bold {
    font-size: 2.8rem;
    line-height: 1.55;
    font-weight: 700;
    color: #b1a648;
    padding-left: 8px;
  }
  /*----------------------------------------------------
  ヒーローエリア
  -----------------------------------------------------*/
  .copy_large{
    font-size: 8rem;
    color: #405e7a;
  }

  /*----------------------------------------------------
  ヒーローエリア上部
  -----------------------------------------------------*/
  #main .sec01 .imgBox .photoBox {
    margin: 8px 0 0 -2px;
    width: 40%;
    display: flex;
    align-items: center;
  }
  #main .sec01 .imgBox {
    display: flex;
    justify-content: space-between;
  }
  #main .sec01 .imgBox .photoBox img {
    width: 100%;
    height: 100%;
    max-width: initial;
    object-fit: cover;
    border-radius: 10%;
  }
  #main .sec01 {
    padding-top: 60px;
    background: #fff;
    border-radius: 0 0 50px 50px;
    overflow: hidden;
    padding-bottom: 80px;
  }
  .content {
    margin: 0 auto;
    width: 800px;
    max-width: 80%;
  }
  #main .sec01 .imgBox .textBox h2 {
    margin-bottom: 25px;
    color: #00B89A;
    font-size: 3.2rem;
    font-weight: 700;
  }
  #main .sec01 .imgBox .textBox {
    padding: 0 0 0 40px;
    width: 60%;
    order: 1;
  }
  h3 .sec01_text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    margin-bottom: 9px;
    text-align: justify;
    line-height: 1.82;
    font-weight: 500;
  }
  /*----------------------------------------------------
  ヒーローエリア上部 グレー内
  -----------------------------------------------------*/
  #main .need {
    padding: 60px 0 80px;
  }
  .content {
    margin: 0 auto;
    width: 800px;
    max-width: 80%;
  }
  .fadeInAnim.on {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .headLine01 {
    margin-bottom: 57px;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
  }
  .headLine01 .jp {
    margin-bottom: 16px;
    display: block;
    letter-spacing: -0.01em;
  }
  .headLine01 .en {
    display: block;
    font-weight: 300;
    font-size: 1.5rem;
    color: #00B89A;
    letter-spacing: 0.03em;
  }
  @media (min-width: 751px) {
    .sp {
      display: none !important;
    }
  }
  #main .need .img {
    text-align: center;
  }
  #main .bgGray {
    background: #F3F3F6;
    border-radius: 0 0 50px 50px;
  }




  /*----------------------------------------------------
  work
  -----------------------------------------------------*/

  .achievements{
    margin-bottom: 30px !important;
  }



  /*----------------------------------------------------
  ステップ　縦線
  -----------------------------------------------------*/
  .vertical-line {
    border-left: 1px solid #b1a648; /* 左側に太さ2px、実線の黒い線 */
    margin-left: 30px;
    margin-right: 30px;
    height: 180px;
  }
  @media only screen and (max-width: 750px) {
    .border-line{
      border-left: 100px solid #b1a648;
      margin-left: 120px;
      margin-bottom: -10px;
      height: 1px;
      text-align: center;
      margin-top: 20px;
    }
  }
  .steps_arrow {
    position: relative;
    margin-left: -165px;
    padding-top: 260px;
    margin-right: 60px;
    height: 180px;
    margin-bottom: 20px;
  }
  @media only screen and (max-width: 750px) {
    .steps_arrow {
      position: relative;
      margin-top: -40px;
      text-align: center;
      margin: 0 0 10px;
      padding-top: 30px;
      height: 80px;
      -webkit-appearance: none;
    }
  }
  @media only screen and (max-width: 750px) {
    .steps_arrow.last_arrow {
      margin-top: -75px;
      -webkit-appearance: none;
    }
  }


  .steps_arrow_sp {
    text-align: center;
    margin-bottom: -5px;
    margin-left: -290px;
    -webkit-appearance: none;
  }

  .steps_arrow_sp:last-child {
    text-align: center;
    margin-bottom: -5px;
    margin-left: -275px;
    -webkit-appearance: none;
  }

  .last_arrow {
    margin-top: 20px;
  }


  .steps_space {
    margin-top: 280px;
  }

  .smlTitle.steptitle {
    margin-bottom: 22px;
    display: block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.635;
    text-align: center;
  }
  @media only screen and (max-width: 750px) {
    .smlTitle.steptitle {
      margin-bottom: 22px;
      display: block;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.635;
      text-align: center;
    }
  }
  .pubHeading02 {
    margin-bottom: 60px;
  }
  #steps2 .featuresBox2 .pubHeading02 {
    margin-bottom: 0px;
    line-height: 1.6;
  }
  @media only screen and (max-width: 750px) {
    #steps2 .featuresBox2 .pubHeading02 {
      line-height: 1.6;
      letter-spacing: -0.02em;
      margin-bottom: 80px;
    }
  }

  /*----------------------------------------------------
  work テスト
  -----------------------------------------------------*/

  .text-background {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4em;
    margin-left: 70px;
    margin-top: 0px;
    margin-bottom: 70px !important;
  }


  @media only screen and (max-width: 1095px) {
    .text-background {
      font-size: 2.7rem;
    }
  }
  @media only screen and (max-width: 1000px) {
    .text-background {
      font-size: 2.6rem;
    }
  }
  @media only screen and (max-width: 965px) {
    .text-background {
      font-size: 2.5rem;
    }
  }
  @media only screen and (max-width: 915px) {
    .text-background {
      font-size: 2.4rem;
    }
  }
  @media only screen and (max-width: 865px) {
    .text-background {
      font-size: 2.2rem;
    }
  }
  @media only screen and (max-width: 810px) {
    .text-background {
      font-size: 2.0rem;
    }
  }

  @media only screen and (max-width: 750px) {
    .text-background {
      font-size: 2.0rem;
      margin-top: 0px;
      margin-bottom: 80px !important;
    }
  }
  @media only screen and (max-width: 700px) {
    .text-background {
      font-size: 2.0rem;
      margin-top: 0px;
      margin-bottom: 20px !important;
    }
  }

  .text-background>span {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-weight: 700;
    color: #b1a648;
    position: relative;
    display: inline-block;
  }

  .text-background>span::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: -5px;
    top: -5px;
    right: -5px;
    background-color: #fff;
    z-index: -1;
  }

  /*----------------------------------------------------
  work メインコピー　縮小時
  -----------------------------------------------------*/
  .pubHeading01 {
    font-size: 3.5rem;
  }
  @media only screen and (max-width: 700px) {
    .pubHeading01 {
      font-size: 2.4rem !important;
      line-height: 1.5em;
      letter-spacing: 0em;
    }
  }
  /*----------------------------------------------------
  見出し
  -----------------------------------------------------*/

  @media only screen and (max-width: 700px) {
    .pubHeading02 {
      font-size: 2.4rem;
    }
  }
  /*----------------------------------------------------
  当社のアプローチ　テキスト
  -----------------------------------------------------*/
  @media only screen and (max-width: 700px) {
    .approach_text {
      font-size: 1.5rem;
      line-height: 1.7em;
      letter-spacing: 0em;
    }
  }
  /*----------------------------------------------------
  当社のアプローチ　テキスト
  -----------------------------------------------------*/

  #wrap {
    min-height: unset;
    padding: 160px 0 0;
  }

  /*----------------------------------------------------
  当社のアプローチ　テキスト
  -----------------------------------------------------*/
  .leadtxt.purple{
    color: #3a0057; /* 文字色 */
  }
  .leadtxt.yellow{
    color: #3c3100; /* 文字色 */
  }
  .leadtxt.green{
    color: #003200; /* 文字色 */
  }
  .leadtxt.orange{
    color: #520000; /* 文字色 */
  }
  .leadtxt.blue{
    color: #000050; /* 文字色 */
  }
  .leadtxt.magenta{
    color: #490014; /* 文字色 */
  }
  @media only screen and (min-width: 1220px) {
    .leadtxt{
      font-size: 2.6rem;
      font-weight: 700;
      line-height: 1.8em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (min-width: 1125px) and (max-width: 1219px) {
    .leadtxt{
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.6em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (min-width: 950px) and (max-width: 1124px) {
    .leadtxt{
      font-size: 2.0rem;
      font-weight: 700;
      line-height: 1.6em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (min-width: 860px) and (max-width: 949px) {
    .leadtxt{
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.6em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (min-width: 770px) and (max-width: 859px) {
    .leadtxt{
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.6em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (min-width: 701px) and (max-width: 769px) {
    .leadtxt{
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.6em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }
  @media only screen and (max-width: 700px) {
    .leadtxt{
      font-size: 1.0rem;
      font-weight: 700;
      line-height: 1.8em;
      letter-spacing: 0em;
      margin: 30px 0 40px 0;
    }
  }

  .leadtxt span{
    background-color: #fff;
    padding: 12px 8px 12px 8px;
    opacity: 1;
  }
  @media only screen and (min-width: 770px) and (max-width: 859px) {
    .leadtxt span{
      background-color: #fff;
      padding: 10px 8px 10px 8px;
      opacity: 1;
    }
  }
  @media only screen and (min-width: 701px) and (max-width: 769px) {
    .leadtxt span{
      background-color: #fff;
      padding: 8px 8px 8px 8px;
      opacity: 1;
    }
  }
  @media only screen and (max-width: 700px) {
    .leadtxt span{
      background-color: #fff;
      padding: 8px 8px 8px 8px;
      opacity: 1;
    }
  }
  /*----------------------------------------------------
  当社が選ばれる理由 テキスト追加
  -----------------------------------------------------*/


  /* リスト全体のレイアウト調整 */
  #features .featuresBox .listUl {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start; /* 上揃えにする */
  }

  #features .featuresBox .listUl li {
    width: calc((100% - 60px) / 3);
    background-color: transparent; /* liの背景は透明にする */
    display: block; /* 縦並びにする */
    text-align: left; /* テキストは左揃え（お好みで） */
  }

  /* 白背景のボックス部分 */
  #features .featuresBox .listUl li .subInner {
    background-color: rgba(255, 255, 255, 0.8);
    aspect-ratio: 312 / 309; /* 正方形を維持 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px; /* 下のテキストとの余白 */
  }

  /* 下に追加したテキスト部分 */
  .description {
    font-size: 1.76rem; /* サイズは適宜調整してください */
    font-weight: 500;
    line-height: 1.75em;
    color: #333; /* 文字色 */
    padding: 0 10px; /* 左右に少し余白 */
  }
  @media only screen and (max-width: 750px) {
    .description {
      font-size: 1.28rem; /* サイズは適宜調整してください */
      font-weight: 500;
      line-height: 1.7em;
      color: #333; /* 文字色 */
      padding: 0 10px; /* 左右に少し余白 */
    }
  }
  /* スマホ対応（必要に応じて） */
  @media only screen and (max-width: 700px) {
    #features .featuresBox .listUl li {
      width: 100%;
      margin-bottom: -40px;
    }
  }
  /*----------------------------------------------------
  bold追加
  -----------------------------------------------------*/

  .bold {
    font-weight: 700;
  }

  .bold_plus {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", sans-serif;
    font-weight: 700;
    /* 0.5pxの縁取りをつけて擬似的に太くする */
    -webkit-text-stroke: 0.1px currentColor;
  }


  .gold {
    color: #b1a648;
  }


  .bigger110{
    font-size: 110%;
  }


  .bigger120{
    font-size: 120%;
  }


  /*----------------------------------------------------
  badge
  -----------------------------------------------------*/

  /* --- PC・共通設定の微調整 --- */
  .badges {
    margin: 34px 0 0;
    text-align: left; /* ①PCで確実に左に揃える */
  }

  .badge-container {
    display: flex ;
    flex-direction: row; /* PCでは横並び */
    align-items: center;
    justify-content: flex-start; /* ①左揃え */
    gap: 20px; /* ②バッジ同士を20px離す */
    flex-wrap: wrap; /* 画面幅によって入り切らない場合に備える */
  }

  .badge {
    height: 34px;
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    border-radius: 50px;
    padding: 0 20px;
    white-space: nowrap; /* PCでは一行で表示 */
    margin-left: -10px;
    gap: 20px;
  }

  /* --- スマホ表示の修正（700px以下） --- */
  @media only screen and (max-width: 700px) {
    .badge-container {
      flex-direction: column; /* ★確実に縦並びに変更 */
      align-items: flex-start; /* スマホでも左寄せ */
      gap: 12px; /* 縦に並んだ時の隙間 */
    }

    .badge {
      height: auto;
      padding: 8px 18px;
      font-size: 1.3rem;
      line-height: 1.4;
      display: table;
    }
  }



  .badge.green {
    color: #000;
    background-color: #e9ffdd;
  }
  .badge.blue {
    color: #000;
    background-color: #d4f0fe;
  }
  .badge.orange {
    color: #000;
    background-color: #f7e2c2;
  }

  /*----------------------------------------------------
  費用について相談する
  -----------------------------------------------------*/
  @media only screen and (min-width: 700px) {
    .pubBtn.reduce a {
      width: calc(228px * 0.9);
      height: calc(72px * 0.9);
      font-size:1.76rem;
      gap: calc(14px * 0.9);
      text-align: center;
      font-weight: 500;
      line-height: 1.5;
    }
  }
  @media only screen and (max-width: 700px) {
    .pubBtn.reduce a {
      width: calc(150px * 0.9);
      height: calc(60px * 0.9);
      font-size: 1.4rem;
      gap: calc(14px * 0.9);
      text-align: center;
      font-weight: 500;
      line-height: 1.5;
    }
  }
  .aboutcosts a {
    color: #000;
    background-color: #e6ff00;
    border-radius: 50px;
    border: none;
  }

  .aboutcosts a:hover {
    color: #000;
    background-color: #fff;
  }

  .pubBtn .icon .icon_bk span {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/common_new/icon01_bk.png) no-repeat left top / 100% 100%;
  }
  .pubBtn .icon_bk span {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/common_new/icon01_bk.png) no-repeat left top / 100% 100%;
  }

  /*----------------------------------------------------
  くわしく見る
  -----------------------------------------------------*/

  @media only screen and (min-width: 751px) {
    .pubBtn.reduce.workbtn a {
      width: calc(228px * 0.9);
      height: calc(34px * 0.9);
      font-size: calc(1.6rem * 0.9);
      gap: calc(14px * 0.9);
      margin-right: 20px;
    }
  }
  @media only screen and (max-width: 700px) {
    .pubBtn.reduce.workbtn a {
      width: calc(228px * 0.9);
      height: calc(34px * 0.9);
      font-size: calc(1.6rem * 0.9);
      gap: calc(14px * 0.9);
      margin-right: 20px;
    }
  }

  /*----------------------------------------------------
  フォアビスタのブランディング支援　　テキストボックス
  -----------------------------------------------------*/


  .support  {
    width: 90%;
  }

  /*----------------------------------------------------
  左右センターのため、commonを相殺
  -----------------------------------------------------*/
  .pubTextBox.right {
    max-width: 100%;
    margin-left: auto;
  }
  .pubTextBox .smlTitle {
    margin-bottom: 22px;
    display: block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.635;
  }
  @media only screen and (min-width: 701px) {
    .reduceTxt {
      font-size: 80%;
      max-width: 100%;
      text-align: justify;
    }
  }
  /*----------------------------------------------------
  主要なテキストの横幅
  -----------------------------------------------------*/
  #index .pubBox.mainbox {
    max-width: 840px;
  }

  /*----------------------------------------------------
  黒ボタン hover
  -----------------------------------------------------*/
  /*-
  .pubBtn a:hover {
  border: 1px solid transparent;
  border-color: #000;
}
-*/
/*----------------------------------------------------
黒ボタン
-----------------------------------------------------*/


.workbtn {
  display: flex;
  padding-right: 20px;
}

/*----------------------------------------------------
ページ内CTA
-----------------------------------------------------*/
/* 外枠のボックス */
.cost-consult-box {
  background-color: #3e4445	; /* チャコールグレー */
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0 0 0;
}


/* 左側のテキスト */
.cost-text {
  font-size: 1.76rem;
  line-height: 1.7;
  font-weight: 300;
  color: #fff;
}

/* 右側のボタン調整（既存のpubBtnを上書き） */
.cost-consult-box .pubBtn {
  margin-top: 0 !important; /* 横並びにするため余白をリセット */
  flex-shrink: 0;           /* ボタンが潰れないように固定 */
}

/* PCのみ改行を表示 */
.pc-only { display: block; }

/* --- スマホ対応 --- */
@media only screen and (max-width: 700px) {
  .cost-consult-box {
    background-color: #3e4445	; /* チャコールグレー */
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0 0 0;
  }
  .cost-text {
    font-size: 1.4rem;
  }
  .pc-only { display: none; } /* スマホでは改行を消す */
}

/*----------------------------------------------------
本文詰め調整
-----------------------------------------------------*/
.txtBox_first {
  margin-bottom: 100px;
}

/*----------------------------------------------------
リスト部分調整
-----------------------------------------------------*/

/* 1. テキストボックス全体を上に余白を作って下げる */
.txtBox_first {
  margin-top: 40px; /* 数値は調整してください */
}

/* 2. もしリストの上下にもっと隙間が欲しい場合 */
.TextBox_list {
  margin: 20px 0; /* 上下に20pxの隙間 */
  padding-left: 1em; /* 少し右に寄せる場合 */
}

.TextBox_list li {
  list-style: none;
  margin-bottom: 10px; /* リスト一行ごとの間隔 */
}
/*----------------------------------------------------
メインコピー　少し下げ
-----------------------------------------------------*/

.lower {
  display: inline-block;
  margin-top: 15px;
  font-size: 3.8rem;
  color: #b1a648;
}

@media only screen and (max-width: 750px) {
  .lower {
    font-size: 2.6rem;
  }
}

/*----------------------------------------------------
cta レスポンシブ
-----------------------------------------------------*/
@media only screen and (max-width: 950px) {
  #index .problems .content {
    width: auto;
    max-width: inherit;
  }
  #index .problems .whiteBox{
    margin-bottom: 30px;
    width: 360px;
    padding: 16px 10px 16px min(2.6vw,22px);
  }
  #index .problems .whiteBox .textList {
    width: fit-content;
    margin: 0 auto;
  }
  #main .problems .sub01 .textList li {
    margin-right: 0;
    font-size: min(3.6vw,14px);
    padding-left: min(7.5vw,29px);
    margin-bottom: 8px;
  }
  #main .problems .bold {
    font-size: min(5.4vw,20px);
  }
  #index .brandBox .listUl .pubBtn.tel a {
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 700px) {
  #index .problems .whiteBox{
    margin-bottom: 30px;
    width: 340px;
    padding: 16px 10px 16px min(2.6vw,22px);
  }
}


#index .brandBox .listUl .pubBtn.tel-sp a {
  font-family: "Ubuntu";
  font-weight: 400;
  font-size: 24px;
}
/*----------------------------------------------------
バナー　イラスト
-----------------------------------------------------*/
/* バナー全体を囲う枠線とスタイルの追加 */
.banner-flex {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 20px;

  /* 枠線の設定 */
  border: 1px solid #aaa; /* 線の色（薄いグレー） */
  padding: 8px 20px 0 40px;/* 枠の内側の余白 */
  margin: 40px 0 0 0;         /* 枠の外側の上下余白 */
  background-color: #fff; /* 背景を白に固定 */
  border-radius: calc(20px * 0.75);
}

/* マウスを乗せた時の動き */
.banner-flex:hover {
  border-color: #666;      /* 枠の色を少し濃くする */
  /* ほんの少しグレーにして反応を出す
  background-color: #f9f9f9;
  */
}

/* 左側の画像サイズ */
.banner-thumb {
  flex-shrink: 0;
  width: 120px; /* 枠がついた分、少しだけ小さめに調整 */
}

.banner-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右側のテキストエリア */
.banner-text-content {
  flex: 1;
  margin-bottom: 10px;
}

.banner-text-content .summary {
  font-size: 1.76rem;
  color: #000;
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: 700;
}

.banner-text-content .main-link {
  font-size: 1.76rem;
  color: #0000ee;
  font-weight: bold;
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* バナー全体にマウスを乗せた時、中のmain-linkの色を変える */
.banner-flex:hover .banner-text-content .main-link {
  color: #b1a648;
}

/* スマホ対応 */

@media only screen and (max-width: 700px) {
  .banner-text-content {
    margin-bottom: 0px;
  }
  .banner-text-content .summary {
    font-size: 1.28rem;
  }
  .banner-flex {
    gap: 15px;
    padding: 15px;
    margin: 20px 0;
  }
  .banner-thumb {
    width: 90px;
  }
  .banner-text-content .main-link {
    font-size: 1.25rem;
  }
}

/*----------------------------------------------------
バナー　写真
-----------------------------------------------------*/

/* 写真バナー専用：枠内のパディングを解除して画像を裁ち落としにする */
.banner-solution {
  padding: 0 20px 0 0 !important; /* 左・上・下のパディングを0にし、右だけ空ける */
  overflow: hidden;               /* 画像の角が丸枠からはみ出さないようにする */
  align-items: stretch;           /* 画像の高さをバナーの高さに合わせる */
}

/* 写真部分の調整 */
.banner-solution .banner-thumb {
  width: 160px; /* イラスト版より少し大きめに設定するとバランスが良いです */
}

.banner-solution .banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠の高さに合わせて写真を綺麗に切り取る */
}

/* テキスト部分：上下の中央揃えと余白の再調整 */
.banner-solution .banner-text-content {
  padding: 20px 10px 20px 20px; /* 内部で余白を確保 */
  margin-bottom: 0;             /* 下マージンを解除して中央に */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* スマホ対応 */
@media only screen and (max-width: 750px) {
  .banner-solution {
    padding: 0 15px 0 0 !important;
  }
  .banner-solution .banner-thumb {
    width: 100px; /* スマホ時の写真幅 */
  }
  .banner-solution .banner-text-content {
    padding: 15px 5px 15px 10px;
  }
}
/*----------------------------------------------------
フォアビスタのブランディング支援　コピー 詰め
-----------------------------------------------------*/

.pubTextBox.narrow p {
  letter-spacing: -0.04em;
}


/*----------------------------------------------------
ブランディングの失敗理由
-----------------------------------------------------*/
/* テーブル全体の基本設定 */
.comparison-table {
  width: 100%;
  border-collapse: collapse; /* 境界線を重ねる */
  border-top: none;          /* 一番上のラインを消す */
  border-left: none;         /* 縦ラインを消す */
  border-right: none;
  margin: 40px 0 50px 0;
}

/* ヘッダーとセルの共通設定 */
.comparison-table th,
.comparison-table td {
  border-bottom: 1px solid #ccc; /* 横ラインだけ残す */
  border-left: none;             /* 縦ラインはすべて無し */
  border-right: none;
  line-height: 1.6;
  background: transparent;       /* 背景を透過させて背後の装飾を見せる */
}

/* ヘッダー固有の設定 */
.comparison-table th {
  border-top: none; /* 一番上のラインを確実に消す */
  font-weight: bold;
  padding-bottom: 10px;
}

/* 真ん中の列：太字 */
.comparison-table td.col-center {
  font-weight: bold;
}

/* 右側の列：太字 + ブランドカラー */
.comparison-table td.col-right {
  font-weight: bold;
  color: #b1a648;
}

/* スマホ対応（必要に応じて調整してください） */
@media only screen and (max-width: 700px) {
  .comparison-table th,
  .comparison-table td {
    padding: 15px 10px;
    font-size: 1.4rem; /* フォントサイズを調整 */
  }
}
.bg_none {
  background: none;
}


/*----------------------------------------------------
ブランディング会社の選び方　フェーズ
-----------------------------------------------------*/


table {
  width: 100%; /* テーブル全体の幅 */
  border-collapse: collapse;
}

.col-left {
  width: 65%; /* 左の比率 */
}
.col-right {
  width: 35%; /* 右の比率 */
}

/*----------------------------------------------------
FAQタイトル位置　若干上げる
-----------------------------------------------------*/

.title_raise {
  margin-top: -12px;
}

/*----------------------------------------------------
コンテンツ幅　
-----------------------------------------------------*/
.pubTextBox {
  padding-right: 0em;
  max-width: 650px;
  font-size: 2.2rem;
  line-height: 1.59;
  letter-spacing: 0.02em;
}
/*----------------------------------------------------
セクション1　写真
-----------------------------------------------------*/

.photoBox {
  margin-top: -176px;
  margin-left: -150px;
  width: 660px;
  height: 660px;
  flex: none;
  position: relative;
  order: 2;
  border-radius: 50%;
  overflow: hidden;
  z-index: -1;
}

/*----------------------------------------------------
レスポンシブ　テキストサイズ
-----------------------------------------------------*/
@media only screen and (min-width: 701px) (max-width: 750px) {
  .photoBox {
    margin-top: 450px;
    margin-left: -494px;
    width: 360px;
    height: 360px;
    flex: none;
    position: relative;
    order: 2;
    border-radius: 50%;
    overflow: hidden;
    z-index: -1;
  }
}
@media only screen and (max-width: 700px) {
  #index .foreBox {
    min-height: unset;
  }
  .pubTextBox p:last-child {
    margin-bottom: 0;
    letter-spacing: -0.01em;
    font-size: 1.28rem;
  }
  p.btm0 {
    margin-bottom: unset;
    font-size: 1.28rem;
  }
  .pubTextBox p {
    margin-bottom: 12.8px;
    font-size: 1.28rem;
  }

  .achievements_content {
    margin-bottom: -60px !important;
  }


  #index .faqBox .faqUl p {
    margin-bottom: 19px;
    font-size: 1.28rem;
  }
  #index .faqBox .faqUl .title {
    font-size: 1.28rem;
    line-height: 1.5;
    min-height: 71px;
    padding: 11px 60px 11px 69px;
    display: flex;
    align-items: center;
  }
  .reduceTxt {
    font-size: 1.28rem;
  }
  table {
    border: 1px solid rgb(140 140 140);
    font: 12.8px "Open Sans", Helvetica, Arial, sans-serif;
    width: 100%;
  }
  .pubTextBox .smlTitle {
    margin-bottom: 22px;
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.635;
  }
  .table_title_center {
    font-size: 12.8px;
    text-align: center;
    font-weight: 700;
  }
  caption, th, td {
    text-align: left;
    font-weight: 400;
    vertical-align: middle;
    padding: 0.5em 0.5em;
    font-size: 1.28rem;
  }
  .table_small {
    font-size: 12.8px;
  }
  .size_middle {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
    font-weight: 700;
    -webkit-text-stroke: 1px;
  }
  .size_large {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "ヒラギノ角ゴシック", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
    font-size: 15px;
    font-weight: 700;
    -webkit-text-stroke: 1px;
  }
  .photoBox {
    margin-left: -494px;
    width: 360px;
    height: 360px;
    flex: none;
    position: relative;
    order: 2;
    border-radius: 50%;
    overflow: hidden;
    z-index: -1;
  }
  #index .brandBox .listUl .pubBtn.tel-sp a {
    font-family: "Ubuntu";
    font-weight: 400;
    font-size: 16px;
  }
  #index .foreBox .photo {
    width: 200px;
    position: absolute;
    top: 450px;
    left: calc(48% + 320px);
    min-left: 600px;
  }
  /*----------------------------------------------------
  @media only screen and (max-width: 750px) {
  .pubBtn a {
  padding-top: 1px;
  width: 346px;
  height: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.05em;
  gap: 12px;
  color: #000;
  background-color: #e6ff00;
}
-----------------------------------------------------*/

}
}

/*----------------------------------------------------
企業ブランディングの成果事例　SP時画像非表示
-----------------------------------------------------*/
@media (max-width: 700px) {
  .achivementsphoto {
    max-width: 70%;
    height: auto !important;
    margin-left: 50px;
  }
}
@media (max-width: 700px) {
  .achivementsphoto img {
    max-width: 70%;
    height: auto !important;
    margin-left: 50px;
  }
}


/*----------------------------------------------------
table　テスト
-----------------------------------------------------*/
td.td-left {
    width: 50%;
}

}
tr {
    width: 100%;
}

/*----------------------------------------------------
 JSが読み込まれる一瞬の「チラつき」防止
-----------------------------------------------------*/

@media screen and (max-width: 750px) {
    #loading {
        display: none !important;
    }
    body {
        opacity: 1 !important;
        visibility: visible !important;
    }
}