@charset "UTF-8";
/* Scss Document */
/* Device Width */
/* font family */
/*@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap");*/

/* ------------------------------ */
/* common */
/* ------------------------------ */

.br-sp {
  display: none;
}

@media screen and (max-width: 736px) {
  .br-sp {
    display: block;
  }
}

/* ------------------------------ */
/* index setting */
/* ------------------------------ */
#loading {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
  pointer-events: none;
}

.mv {
  max-width: 1366px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 820px) {
  .mv {
    display: block;
  }
}

.mv--slide {
  width: 60vw;
  max-width: 903px;
  opacity: 0;
  transition: opacity 2s;
}

@media only screen and (max-width: 820px) {
  .mv--slide {
    width: 90.6666666667vw;
    max-width: inherit;
    margin: 0 0 0 auto;
  }
}

@media only screen and (max-width: 820px) {
  .mv--slide {
    width: 90.6666666667vw;
    max-width: inherit;
    margin: 0 0 0 auto;
  }
}

.mv--slide > figure:not(:first-child) {
  display: none;
}

.mv--slide.slick-initialized {
  opacity: 1;
}

.mv--slide img {
  vertical-align: bottom;
}

.mv--slide .slick-dots {
  height: 38px;
  position: absolute;
  bottom: 115px;
  left: -20px;
}

@media only, screen and (max-width: 820px) {
  .mv--slide .slick-dots {
    bottom: 3px;
  }
}

.mv--slide .slick-dots li {
  list-style: none;
  display: block;
  width: 6px;
  height: 6px;
  margin: 5px 0;
  background: #98989a;
}

@media only, screen and (max-width: 820px) {
  .mv--slide .slick-dots li {
    width: 8px;
    height: 8px;
  }
}

.mv--slide .slick-dots li button {
  display: none;
}

.mv--slide .slick-dots li.slick-active {
  background: #e5a723;
}

.mv--copy {
  width: 16.8374816984vw;
  margin: 4.0263543192vw auto 0;
  position: relative;
}

@media only screen and (max-width: 1024px) {
  .mv--copy {
    margin-top: 3.0263543192vw;
  }
}

@media only screen and (max-width: 820px) {
  .mv--copy {
    margin: 5.3333333333vw 0 0 13.3333333333vw;
    width: inherit;
  }
}

@media screen and (max-width: 320px) {
  .mv--copy {
    margin: 5.3333333333vw 0 0 9.3333333333vw;
  }
}

@media only screen and (max-width: 820px) {
  .mv--copy h2 {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
  }
}

.mv--copy h2 span {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-56);
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -0.05em;
  font-feature-settings: "palt";
}

@media only, screen and (max-width: 820px) {
  .mv--copy h2 span {
    font-size: var(--fs-80);
  }
}

@media screen and (max-width: 320px) {
  .mv--copy h2 span {
    font-size: 36px;
  }
}

.mv--copy h2 span.txt-first {
  display: inline-block;
  padding: 0 0 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-40);
  font-weight: 300;
  font-feature-settings: "palt";
  line-height: 1;
  position: relative;
}

@media only, screen and (max-width: 820px) {
  .mv--copy h2 span.txt-first {
    margin: 0 0 20px;
    padding: 0 0 10px;
  }
}

@media only, screen and (max-width: 736px) {
  .mv--copy h2 span.txt-first {
    font-size: var(--fs-56);
    margin: 0 0 10px;
  }
}

.mv--copy h2 span.txt-first:before {
  content: "";
  display: block;
  width: 1px;
  height: 0;
  background: #808285;
  position: absolute;
  top: 0;
  right: 0;
  animation: line 1.75s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@media only, screen and (max-width: 820px) {
  .mv--copy h2 span.txt-first:before {
    width: 100%;
    height: 1px;
    top: inherit;
    right: inherit;
    left: 0;
    bottom: 0;
    animation: spline 1.75s;
    animation-delay: 0.5s;
  }
}

.mv--copy h2 span.txt-first .yakumono {
  display: inline-block;
  margin: 0 0 -0.5em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.mv--copy h2 span.tracking {
  display: inline-block;
  margin: -0.1em 0 -0.2em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

@media only, screen and (max-width: 820px) {
  .mv--copy h2 span.tracking {
    margin: 0 -0.1em 0 -0.05em;
  }
}

.mv--copy p {
  font-size: 1.4641288433vw;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (min-width: 1367px) {
  .mv--copy p {
    font-size: var(--fs-20);
  }
}

@media only, screen and (max-width: 820px) {
  .mv--copy p {
    font-size: var(--fs-20);
    position: static;
  }
}

@media only, screen and (max-width: 736px) {
  .mv--copy p {
    margin: 0 0 20px;
    font-size: var(--fs-14);
  }
}

/*.mv*/
@keyframes line {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}

@keyframes spline {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes copyline {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.thinking {
  margin: 0;
  padding: 120px 0;
  background: url("../img_renew/index/bg_thinking.jpg") right 0/70.2781844802vw
    auto no-repeat #f5f5f5;
}

@media only, screen and (max-width: 820px) {
  .thinking {
    padding: 18.6666666667vw 0;
    background: url("../img_renew/index/bg_thinking_sp.jpg") right bottom/375px
      auto no-repeat #f5f5f5;
  }
}

@media only, screen and (max-width: 736px) {
  .thinking {
    padding: 18.6666666667vw 0;
    background: url("../img_renew/index/bg_thinking_sp.jpg") right bottom/100%
      auto no-repeat #f5f5f5;
  }
}

.thinking--box {
  width: 73.2064421669vw;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

@media only, screen and (max-width: 820px) {
  .thinking--box {
    display: block;
    width: 90%;
  }
}

.thinking--box h2 {
  margin: 0 6.2225475842vw 0 2.7818448023vw;
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-40);
  font-weight: 500;
  position: relative;
}

@media only, screen and (max-width: 820px) {
  .thinking--box h2 {
    margin: 0 0 10px;
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
  }
}

.thinking--box h2:after {
  content: "";
  display: block;
  width: 1px;
  height: calc(90% - 6.5em);
  margin: auto;
  background: #808285;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

@media only, screen and (max-width: 820px) {
  .thinking--box h2:after {
    width: 60px;
    height: 1px;
    left: 7.5em;
    right: inherit;
    top: 0;
  }
}

.thinking--box div {
  margin: 50px 0 0;
}

@media only, screen and (max-width: 820px) {
  .thinking--box div {
    margin: 0;
  }
}

.thinking--box div p {
  margin: 0 0 1em;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 2.5;
}

@media only, screen and (max-width: 736px) {
  .thinking--box div p {
    font-size: var(--fs-16);
    text-align: justify;
  }
}

@media screen and (max-width: 320px) {
  .thinking--box div p {
    font-size: var(--fs-15);
  }
}

.thinking--box div p:last-of-type {
  margin: 0;
}

/*.thinking*/
.strength {
  min-height: 456px;
  margin: 0 0 16.4714494876vw;
  position: relative;
}

@media srceen and (min-width: 1367px) {
  .strength {
    margin: 0 0 225px;
  }
}

@media only, screen and (max-width: 820px) {
  .strength {
    min-height: inherit;
    margin: 0 0 50px;
  }
}

@media only, screen and (max-width: 736px) {
  .strength {
    margin: 0 0 20px;
  }
}

.strength:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background: #f5f5f5;
  position: absolute;
  top: 0;
  z-index: -2;
}

@media only, screen and (max-width: 820px) {
  .strength:after {
    height: 25%;
  }
}

@media only, screen and (max-width: 736px) {
  .strength:after {
    content: none;
  }
}

.strength--slide {
  width: 100%;
}

.strength--slide figure {
  width: 31.4787701318vw;
  max-width: 430px;
}

@media only, screen and (max-width: 736px) {
  .strength--slide figure {
    width: 57.3333333333vw;
  }
}

.strength--slide figure img {
  display: block;
  width: calc(100% - 5px);
  margin: 0 5px;
  border-radius: 10px;
}

.strength--slide .slick-track {
  float: none;
  display: flex;
  left: 280px;
}

.strength--box {
  width: 73.2064421669vw;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
}

@media only, screen and (max-width: 820px) {
  .strength--box {
    display: block;
    width: 84vw;
    max-width: 688px;
    margin: 0 auto -26.6666666667vw;
    position: relative;
    top: -32vw;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--box {
    margin: 0 auto -48vw;
    top: -53.3333333333vw;
  }
}

.strength--box h2 {
  display: inline-block;
  margin: 0 auto 45px;
  padding: 0 10px;
  font-size: var(--fs-25);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 3;
}

@media only, screen and (max-width: 820px) {
  .strength--box h2 {
    margin: 60px auto 45px;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--box h2 {
    margin: 10.6666666667vw auto 5.3333333333vw;
    font-size: var(--fs-18);
  }
}

.strength--box h2 span {
  display: block;
  margin: 0 0 7px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-80);
  font-weight: 700;
  line-height: 1;
}

@media only, screen and (max-width: 736px) {
  .strength--box h2 span {
    font-size: var(--fs-60);
  }
}

.strength--box .flex-box {
  justify-content: space-between;
}

@media only, screen and (max-width: 820px) {
  .strength--box .flex-box {
    display: block;
    width: 100%;
  }
}

.strength--box .flex-box a {
  display: block;
  width: 23.4260614934vw;
  max-width: 320px;
  padding: 2.196193265vw 1.8301610542vw 60px;
  text-decoration: none;
  background: #fff;
  border: solid 1px #e6e6e6;
  position: relative;
}

@media screen and (min-width: 1367px) {
  .strength--box .flex-box a {
    padding: 30px 25px 60px;
  }
}

@media only, screen and (max-width: 820px) {
  .strength--box .flex-box a {
    width: 100%;
    max-width: inherit;
    margin: 0 auto 20px;
    padding: 20px 20px 60px;
    border: solid 1px #e6e6e6;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--box .flex-box a {
    padding: 20px 50px 40px;
  }
}

@media screen and (max-width: 414px) {
  .strength--box .flex-box a {
    padding: 20px 9.6618357488vw 40px;
  }
}

@media screen and (max-width: 375px) {
  .strength--box .flex-box a {
    padding: 20px 7.2463768116vw 40px;
  }
}

.strength--box .flex-box a:after {
  content: "";
  display: block;
  width: 16px;
  height: 8px;
  margin: auto;
  background: url("../img_renew/index/icn_arrow_b.png") left top/100% auto
    no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  transition: bottom 0.3s;
}

.strength--box .flex-box a .num {
  margin: 0 0 10px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-48);
  fontw-eight: 400;
  line-height: 1;
  text-align: center;
  color: #52b7b6;
}

.strength--box .flex-box a h3 {
  margin: 0 0 20px;
  font-family: "Noto Serif JP", serif;
  font-size: 2.0497803807vw;
  font-weight: 700;
  line-height: 1;
  color: #53565a;
}

@media screen and (min-width: 1367px) {
  .strength--box .flex-box a h3 {
    font-size: var(--fs-28);
  }
}

@media only, screen and (max-width: 820px) {
  .strength--box .flex-box a h3 {
    font-size: var(--fs-28);
  }
}

.strength--box .flex-box a h3 span {
  background-image: linear-gradient(0deg, #f5e3be 10px, transparent 1px);
  background-size: 100% 40px;
}

.strength--box .flex-box a p {
  font-size: 1.0980966325vw;
  color: #53565a;
  line-height: 1.86;
  text-align: center;
}

@media screen and (min-width: 1367px) {
  .strength--box .flex-box a p {
    font-size: var(--fs-15);
  }
}

@media only, screen and (max-width: 820px) {
  .strength--box .flex-box a p {
    font-size: var(--fs-16);
  }
}

@media only, screen and (max-width: 736px) {
  .strength--box .flex-box a p {
    font-size: var(--fs-15);
  }
}

@media screen and (max-width: 320px) {
  .strength--box .flex-box a p {
    font-size: var(--fs-13);
  }
}

.strength--box .flex-box a:hover:after {
  bottom: 5px;
}

.strength--content {
  max-width: 1366px;
  margin: 0 auto 120px;
  position: relative;
  flex-wrap: wrap;
}

@media only, screen and (max-width: 820px) {
  .strength--content {
    max-width: 95%;
    margin: 0 auto 135px 0;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content {
    display: block;
    max-width: inherit;
    margin: 0 auto 60px;
  }
}

.strength--content .strength-img {
  width: 44.6559297218vw;
  max-width: 610px;
  position: relative;
}

@media only, screen and (max-width: 820px) {
  .strength--content .strength-img {
    margin: 0 0 40px;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content .strength-img {
    width: 94.6666666667vw;
    margin: 0 0 40px;
  }
}

.strength--content .strength-img img {
  border-radius: 0 10px 10px 0;
}

.strength--content .strength-img .num {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-style: italic;
  font-size: var(--fs-100);
  font-weight: 300;
  line-height: 1;
  color: #52b7b6;
  position: absolute;
  right: 20px;
  top: -60px;
  z-index: 1;
}

.strength--content .copy {
  margin: 0 40px 0 60px;
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1;
}

@media only, screen and (max-width: 820px) {
  .strength--content .copy {
    margin: 0 40px 40px 60px;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content .copy {
    width: 89.3333333333vw;
    margin: 0 auto 5px;
    font-size: var(--fs-22);
  }
}

.strength--content .copy .tracking01 {
  display: inline-block;
  margin: -0.5em 0 0.2em;
}

.strength--content .copy .tracking02 {
  display: inline-block;
  margin: 0.25em 0 -0.35em;
}

.strength--content .copy .num {
  padding: 0 15px 0 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-style: italic;
  font-size: var(--fs-100);
  font-weight: 300;
  line-height: 1;
  color: #52b7b6;
  vertical-align: text-top;
}

@media only, screen and (max-width: 736px) {
  .strength--content .copy .num {
    display: inline-block;
    padding: 0 15px 15px 0;
    vertical-align: middle;
  }
}

.strength--content .strength-txt {
  max-width: 440px;
  margin: -15px 0 0;
  flex: 1;
}

@media only, screen and (max-width: 820px) {
  .strength--content .strength-txt {
    width: 73.2064421669vw;
    max-width: inherit;
    margin: 0 auto;
    flex: inherit;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content .strength-txt {
    width: 89.3333333333vw;
    max-width: inherit;
    margin: 0 auto 20px;
  }
}

.strength--content .strength-txt h2 {
  margin: 0 0 30px;
  font-size: var(--fs-25);
  font-weight: 400;
  line-height: 2;
}

@media only, screen and (max-width: 736px) {
  .strength--content .strength-txt h2 {
    margin: 0 0 10px;
    font-size: var(--fs-18);
  }
}

@media screen and (max-width: 320px) {
  .strength--content .strength-txt h2 {
    font-size: var(--fs-16);
  }
}

.strength--content .strength-txt h2 span.effect03 {
  position: relative;
}

.strength--content .strength-txt h2 span.effect03:after {
  content: "";
  display: block;
  width: 0;
  height: 8px;
  background: #dcf1f0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.strength--content .strength-txt h2 span > span:after {
  background: none;
}

@media only, screen and (max-width: 820px) {
  .strength--content .strength-txt h2 span > span:after {
    content: "";
    display: block;
    width: 0;
    height: 8px;
    background: #dcf1f0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}

.strength--content .strength-txt h2 span.copy-line-active:after {
  animation: copyline 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.strength--content .strength-txt p {
  text-align: justify;
  letter-spacing: 0.025em;
}

@media only, screen and (max-width: 820px) {
  .strength--content.reverse {
    max-width: 95%;
    margin: 0 0 135px auto;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content.reverse {
    max-width: inherit;
    margin: 0 auto;
  }
}

@media only, screen and (max-width: 736px) {
  .strength--content.reverse .strength-img {
    margin: 0 0 60px auto;
  }
}

.strength--content.reverse .strength-img img {
  border-radius: 10px 0 0 10px;
}

.strength--content.reverse .strength-img .num {
  left: 20px;
  right: inherit;
}

.strength--content.reverse .copy {
  margin: 0 60px 0 40px;
}

@media only, screen and (max-width: 736px) {
  .strength--content.reverse .copy {
    width: 89.3333333333vw;
    margin: 0 auto 5px;
    font-size: var(--fs-22);
  }
}

.strength--content .strength-txt ul {
  color: #52b7b6;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-left: 1.3rem;
  list-style: decimal;
  margin-top: 10px;
}

.strength--content .strength-txt ul li span {
  color: #53565a;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/*.strength*/
.service {
  background: #f5f5f5;
  position: relative;
  padding: 120px 0;
}

@media only screen and (max-width: 736px) {
  .service {
    width: 100%;
    padding: 120px 0 40px;
  }
}

.service-box {
  width: 84.3333333333vw;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  gap: 3vw;
}

@media only screen and (max-width: 736px) {
  .service-box {
    width: 100%;
    max-width: inherit;
  }
}

@media only screen and (max-width: 736px) {
  .service .wrap {
    width: 84vw;
    margin: 0 auto;
  }
}

.service h2.ttl-01 {
  text-align: left;
  position: absolute;
  top: -45px;
}

@media only, screen and (max-width: 736px) {
  .service h2.ttl-01 {
    top: -20px;
  }
}

.service h2 + p {
  margin: 0 0 70px;
  font-size: var(--fs-20);
  text-align: center;
  line-height: 1.75;
}

@media only screen and (max-width: 820px) {
  .service h2 + p {
    margin: 0 0 40px;
  }
}

@media only screen and (max-width: 736px) {
  .service h2 + p {
    width: 85.3333333333vw;
    margin: 0 auto 40px;
    font-size: var(--fs-16);
    text-align: left;
  }
}

@media only screen and (max-width: 820px) {
  .service .service-box {
    display: block;
  }
}

.service .service-box--ttl {
  width: 120px;
}

@media only screen and (max-width: 820px) {
  .service .service-box--ttl {
    display: block;
    width: 84vw;
    margin: 0 auto 40px;
  }
}

.service .service-box--ttl h3 {
  width: 104px;
  margin: 0 auto 50px;
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-50);
  font-weight: 500;
  color: #52b7b6;
}

@media only screen and (max-width: 820px) {
  .service .service-box--ttl h3 {
    width: inherit;
    margin: 0 0 20px;
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    text-align: center;
    line-height: 1;
  }
}

.service .service-box--ttl h3 span {
  font-size: var(--fs-30);
}

@media only, screen and (max-width: 820px) {
  .service .service-box--ttl h3 span {
    font-size: var(--fs-60);
  }
}

.service .service-box--ttl h3 span:first-of-type {
  font-size: var(--fs-50);
  /*text-combine-upright: all;*/
  line-height: 1;
}

@media only, screen and (max-width: 820px) {
  .service .service-box--ttl h3 span:first-of-type {
    font-size: var(--fs-60);
  }
}

.service .service-box--ttl h3 span:last-of-type {
  font-size: var(--fs-40);
}

@media only, screen and (max-width: 820px) {
  .service .service-box--ttl h3 span:last-of-type {
    font-size: var(--fs-60);
  }
}

.service .service-box--ttl p {
  display: block;
  font-size: var(--fs-20);
}

@media only, screen and (max-width: 820px) {
  .service .service-box--ttl p {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    font-size: var(--fs-17);
  }
}

.service .service-box--content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media only screen and (max-width: 820px) {
  .service .service-box--content {
    max-width: inherit;
  }
}

@media only screen and (max-width: 736px) {
  .service .service-box--content {
    padding-left: 4vw;
  }
}

.service .service-box--content--box {
  margin: 0 0 30px;
}

@media only screen and (max-width: 820px) {
  .service .service-box--content--box div {
    width: 50%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 736px) {
  .service .service-box--content--box div {
    width: 100%;
    margin: -5px 0 0;
  }
}

.service .service-box--content--box div.flex-box {
  width: 100%;
  margin: 0;
  gap: 1vw;
}

.service .service-box--content--box div.flex-box .num {
  width: 5.5vw;
}

@media only screen and (max-width: 736px) {
  .service .service-box--content--box div.flex-box .num {
    width: 12vw;
  }
}

.service .service-box--content--box div h2 {
  margin: 0 0 10px;
  font-family: "Noto Serif JP", serif;
  /*font-size: var(--fs-24);*/
  font-size: 1.756954612vw;
  font-weight: 400;
  line-height: 1.4;
  color: #52b7b6;
}

@media screen and (min-width: 1367px) {
  .service .service-box--content--box div h2 {
    font-size: var(--fs-20);
  }
}

@media screen and (min-width: 820px) {
  .service .service-box--content--box div h2 {
    font-size: var(--fs-20);
  }
}

@media screen and (max-width: 736px) {
  .service .service-box--content--box div h2 {
    font-size: var(--fs-20);
  }
}

.service .service-box--content--box div.flex-box .detail-box {
  width: 100%;
  border-radius: 5px;
  display: flex;
  flex: 1 0 0;
  flex-direction: row;
  align-items: center;
  background: #ffffff;
}

@media only screen and (max-width: 736px) {
  .service .service-box--content--box div.flex-box .detail-box {
    flex-direction: column;
    border-radius: 5px 0 0 5px;
  }
}

.service .detail-box .img {
  width: 40%;
  height: 176.471px;
  border-radius: 5px 0px 0px 5px;
  background: url(../img_renew/index/img_service01.jpg) lightgray 50% / cover
    no-repeat;
}

@media only screen and (max-width: 736px) {
  .service .detail-box .img {
    width: 100%;
    border-radius: 5px 0px 0px 0;
  }
}

.service .service-box--content--box div.flex-box .detail-box .img.service-02 {
  background: url(../img_renew/index/img_service02.jpg) lightgray 50% / cover
    no-repeat;
}

.service .service-box--content--box div.flex-box .detail-box .img.service-03 {
  background: url(../img_renew/index/img_service03.jpg) lightgray 50% / cover
    no-repeat;
}

.service .service-box--content--box div.flex-box .detail-box .img.service-04 {
  background: url(../img_renew/index/img_service04.jpg) lightgray 50% / cover
    no-repeat;
}

.service .service-box--content--box div.flex-box .detail-box .img.service-05 {
  background: url(../img_renew/index/img_service05.jpg) lightgray 50% / cover
    no-repeat;
}

.service .service-box--content--box div.flex-box .detail-box .txt {
  flex: 1;
  padding-left: 2vw;
}

@media only screen and (max-width: 736px) {
  .service .service-box--content--box div.flex-box .detail-box .txt {
    padding: 4vw;
  }
}

.service .service-box--content--box div ul {
  list-style: none;
}

.service .service-box--content--box div ul li {
  margin: 0 0 0.5em 1.5em;
  text-indent: -1em;
  font-size: 14px;
  line-height: 1.3;
}

@media only screen and (max-width: 820px) {
  .service .service-box--content--box div ul li {
    font-size: 12px;
  }
}

.service .service-box--content--box div ul li:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  background: #e0e0e0;
  border-radius: 100%;
}

/*.service*/
.staff {
  background: #f5f5f5;
  position: relative;
}

.staff .ttl-01 {
  margin: 0 0 15px;
  position: relative;
  top: -45px;
  z-index: 2;
}

@media only, screen and (max-width: 736px) {
  .staff .ttl-01 {
    top: -20px;
  }
}

.staff .president {
  margin: 0px;
  position: relative;
}

@media only screen and (max-width: 736px) {
  .staff .president {
    margin: 0px;
  }
}

.staff .president:before {
  content: "";
  display: block;
  width: 68.3016105417vw;
  height: 27.8184480234vw;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}

@media only, screen and (max-width: 820px) {
  .staff .president:before {
    height: 48.7804878049vw;
  }
}

@media only, screen and (max-width: 736px) {
  .staff .president:before {
    width: 97.3333333333vw;
    height: 164vw;
  }
}

.staff .president .flex-box {
  position: relative;
  z-index: 1;
}

@media only, screen and (max-width: 736px) {
  .staff .president .flex-box {
    display: block;
    width: 84vw;
    margin: 0 auto;
  }
}

.staff .president figure {
  width: 32.9428989751vw;
  max-width: 450px;
  margin: 0 50px 0 0;
}

@media only, screen and (max-width: 736px) {
  .staff .president figure {
    width: 100%;
    max-width: inherit;
    margin: 0 0 30px;
  }
}

.staff .president figure img {
  border-radius: 10px;
}

.staff .president div {
  flex: 1;
}

.staff .president div h3 {
  margin: -13px 0 70px;
  font-size: var(--fs-22);
  font-weight: 500;
}

@media only, screen and (max-width: 736px) {
  .staff .president div h3 {
    margin: -13px 0 10px;
    line-height: 1.75;
  }
}

.staff .president div h3 span {
  background-image: linear-gradient(0deg, #9a9c9e 3px, transparent 3px);
  background-size: 100% 35px;
}

.staff .president div h3 span > span {
  background: none;
}

.staff .president div p {
  margin: 0 0 50px;
  text-align: justify;
}

@media only, screen and (max-width: 736px) {
  .staff .president div p {
    margin: 0 0 10px;
  }
}

.staff .president div p.name {
  margin: 0 0 40px;
  text-align: right;
  font-size: var(--fs-20);
}

@media only, screen and (max-width: 736px) {
  .staff .president div p.name {
    margin: 0;
    padding: 0 0 20px;
    font-size: var(--fs-16);
  }
}

.staff .president div p.name span {
  padding: 0 1em 0 0;
  font-size: var(--fs-14);
}

@media only, screen and (max-width: 736px) {
  .staff .president div p.name span {
    ont-size: var(--fs-12);
  }
}

.staff .consult {
  padding: 60px 0 100px;
  position: relative;
}

@media only screen and (max-width: 736px) {
  .staff .consult {
    padding: 60px 0 50px;
  }
}

.staff .consult:before {
  content: "";
  display: block;
  width: 68.3016105417vw;
  height: 33vh;
  background: #fff;
  position: absolute;
  right: 0;
  top: 170px;
  z-index: 0;
}

@media (max-width: 1000px) {
  .staff .consult:before {
    height: 40vh;
  }
}

@media only screen and (max-width: 820px) {
  .staff .consult:before {
    width: 68.3016105417vw;
    height: calc(100% - 460px);
    top: inherit;
    bottom: 430px;
  }
}

@media only, screen and (max-width: 736px) {
  .staff .consult:before {
    bottom: 28%;
    height: 90vh;
    width: 100vw;
  }

  .consultant .consult:before {
    bottom: 24%;
    height: 75vh;
    width: 100vw;
  }
}

.staff .consult h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 40px;
  padding: 0 0 0 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .staff .consult h2 {
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
  }
}

.staff .consult h2:before {
  /* content: ""; */
  display: block;
  width: 10px;
  height: 1px;
  background: #9a9c9e;
  position: absolute;
  top: 11px;
  left: 0;
}

@media only, screen and (max-width: 736px) {
  .staff .consult h2:before {
    content: none;
  }
}

.staff .consult h2 span {
  display: inline-block;
  margin: 5px 0 0;
  padding: 3px 5px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  /*background: #fff;*/
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .staff .consult h2 span {
    position: static;
  }
}

.staff .consult--slide {
  position: relative;
  z-index: 1;
}
.staff .consult--slide:before {
  /* content: "";
    display: block;
    width: 90vw;
    height: calc(100% - 96px);
    background: #fff;
    position: absolute;
    /* left: -30px; */
    bottom: 40px;
    z-index: 0;
    right: 0; */
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide {
    width: 84vw;
    max-width: inherit;
    margin: 0 auto 40px;
  }
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide:before {
    content: "";
    display: block;
    width: 97.3333333333vw;
    height: calc(100% - 0);
    background: #fff;
    position: absolute;
    left: -30px;
    bottom: -0;
    z-index: 0;
  }
}

.staff .consult--slide .flex-box {
  display: flex;
  /* width: 73.2064421669vw; */
  width: 100vw;
  max-width: 1000px;
  /* margin: 0 30px 90px; */
  /* justify-content: space-between; */
}

@media only, screen and (max-width: 820px) {
  .staff .consult--slide .flex-box {
    width: 92.6829268293vw;
  }
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide .flex-box {
    display: flex;
    flex-direction: column-reverse;
    width: 84vw;
    max-width: inherit;
    /* margin: 0 30px; */
    gap: 20px;
  }

  /* */
}

.staff .consult--slide .flex-box figure {
  width: 32.9428989751vw;
  max-width: 450px;
  margin: 0 50px 0 0;
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide .flex-box figure {
    width: 100%;
    max-width: inherit;
    margin: 0 0 20px;
  }
}

.staff .consult--slide .flex-box figure img {
  border-radius: 10px;
}

.staff .consult--slide .flex-box div {
  max-width: 60vw;
  flex: 1;
}

@media (max-width: 1200px) {
  .staff .consult--slide .flex-box div {
    max-width: 84vw;
  }
}

@media (max-width: 820px) {
  .staff .consult--slide .flex-box div {
    max-width: 84vw;
    max-width: 100vw;
    margin-bottom: 20px;
    /* display: flex; */
    flex-wrap: wrap;
  }
}

.staff .consult--slide .flex-box div .num {
  display: inline;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-style: italic;
  font-size: var(--fs-60);
  color: #52b7b6;
  line-height: 1;
  vertical-align: top;
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide .flex-box div .num {
    font-size: 60px;
  }
}

.staff .consult--slide .flex-box div .category {
  display: inline;
  color: #52b7b6;
  font-size: var(--fs-14);
}

@media only, screen and (max-width: 820px) {
  .staff .consult--slide .flex-box div .category {
    flex: 1;
    line-height: 1.55;
  }
}

.staff .consult--slide .flex-box div .name {
  display: flex;
  gap: 10px;
  margin: 40px 0 0 0;
  font-size: var(--fs-20);
  line-height: 1;
}

@media only, screen and (max-width: 820px) {
  .staff .consult--slide .flex-box div .name {
    width: 100%;
    margin: 10px 0 0px 0;
  }
}

.staff .consult--slide .flex-box div .name span {
  display: block;
  margin: 10px 0 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-13);
  color: #bebebe;
}

.staff .consult--slide .flex-box div .post {
  margin: 0 0 20px 1px;
  padding: 0 0 0 15px;
  font-size: var(--fs-14);
  border-left: solid 1px #9a9c9e;
}

@media only, screen and (max-width: 736px) {
  .staff .consult--slide .flex-box div .post {
    line-height: 1.35;
  }
}



@media only, screen and (max-width: 820px) {
  .staff .consult .thumb {
    width: 80vw;
    margin: 0 auto;
  }
}

@media only, screen and (max-width: 736px) {
  .staff .consult .thumb {
    width: 86vw;
  }
}

.staff .consult .thumb .slick-slide {
  width: 150px;
  margin: 0 7x;
  background: transparent;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

@media only, screen and (max-width: 736px) {
  .staff .consult .thumb .slick-slide {
    width: 105px;
    margin: 0 7px;
  }
}

.staff .consult .thumb .slick-slide:after {
  /* content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #e0e0e0;
        transform: skewX(-16deg);
        position: absolute;
        right: -64%;
        top: 0;
        z-index: 0;
        transition: background 0.3s;  */
}

.staff .consult .thumb .slick-slide figure {
  position: relative;
  z-index: 2;
}

.staff .consult .thumb .slick-slide p {
  width: 100%;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-13);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  text-align: left;
  transform-origin: left top;
  transform: rotate(90deg);
  position: absolute;
  top: 10px;
  left: calc(100% - 10px);
  z-index: 1;
}

@media only, screen and (max-width: 736px) {
  .staff .consult .thumb .slick-slide p {
    font-size: 2.4vw;
  }
}

.staff .consult .thumb .slick-slide.slick-current:after,
.staff .consult .thumb .slick-slide:hover:after {
  background: #52b7b6;
}

.staff .consult .thumb .btn-prev {
  width: 10px;
  position: absolute;
  right: -32px;
  top: 78px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .staff .consult .thumb .btn-prev {
    right: -20px;
    top: 50px;
  }
}

.staff .consult .thumb .btn-next {
  width: 10px;
  position: absolute;
  left: -32px;
  top: 78px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .staff .consult .thumb .btn-next {
    left: -20px;
    top: 50px;
  }
}

/*.staff*/
.works {
  margin: 0 0 120px;
  padding-top: 60px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 736px) {
  .works {
    padding: 100px 0 60px;
    margin-bottom: 0;
  }
}

.works h2 {
  /*margin: -37px 0 50px;*/
  text-align: left;
}

@media only screen and (max-width: 736px) {
  .works h2 {
    width: 84vw;
    margin: -37px auto 20px;
  }
}

.works--slide {
  width: 73.2064421669vw;
  max-width: 1000px;
  margin: 0 auto;
}

@media only, screen and (max-width: 736px) {
  .works--slide {
    width: 84vw;
    max-width: inherit;
  }
}

.works--slide .slide-box {
  width: 475px;
}

@media only, screen and (max-width: 736px) {
  .works--slide .slide-box {
    width: 250px;
  }
}

.works--slide .slide-box > div {
  width: 450px;
  position: relative;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .works--slide .slide-box > div {
    width: 225px;
  }
}

.works--slide .slide-box > div img {
  border-radius: 10px;
}

.works--slide .slide-box > div p {
  margin: 30px 0 0;
  padding: 0 15px;
  line-height: 1.75;
}

@media only, screen and (max-width: 736px) {
  .works--slide .slide-box > div p {
    margin: 15px 0 0;
    padding: 0 10px;
  }
}

.works--slide .slide-box > div p.btn-more {
  display: inline-block;
  margin: 0;
  padding: 15px 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-11);
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: #fff;
  background: #52b7b6;
  border-radius: 5px;
  position: absolute;
  top: 290px;
  right: -10px;
}

@media only, screen and (max-width: 736px) {
  .works--slide .slide-box > div p.btn-more {
    top: 130px;
  }
}

.works--slide .slide-box > div p.btn-more span {
  padding: 0 22px;
  position: relative;
}

.works--slide .slide-box > div p.btn-more span:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  margin: auto;
  background: url("../img_renew/index/icn_arrow_w.png") left top/100% auto
    no-repeat;
  transition: right 0.3s;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
}

.works--slide .slide-box > div:hover p.btn-more span:after {
  right: 5px;
}

.works--slide .slick-track {
  float: none;
  display: flex;
  left: 0;
}

.works--slide .btn-prev {
  width: 22px;
  position: absolute;
  right: -42px;
  top: 146px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .works--slide .btn-prev {
    width: 10px;
    top: 72px;
    right: -22px;
  }
}

.works--slide .btn-next {
  width: 22px;
  position: absolute;
  left: -42px;
  top: 146px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .works--slide .btn-next {
    width: 10px;
    top: 72px;
    left: -22px;
  }
}

/*.works*/
.works-detail {
  display: block;
  width: 87.8477306003vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px 130px 0;
  background: #fff;
  position: absolute;
  z-index: -999;
  opacity: 0;
}

@media only, screen and (max-width: 736px) {
  .works-detail {
    width: 89.3333333333vw;
    padding: 30px 0 130px;
  }
}

.works-detail:after {
  content: "";
  display: block;
  width: 100%;
  height: 130px;
  background: #52b7b6;
  position: absolute;
  top: 0;
}

@media only, screen and (max-width: 820px) {
  .works-detail:after {
    height: 110px;
  }
}

.works-detail .flex-box {
  width: 77.8916544656vw;
  max-width: 1064px;
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}

@media only, screen and (max-width: 820px) {
  .works-detail .flex-box {
    display: block;
  }
}

@media only, screen and (max-width: 736px) {
  .works-detail .flex-box {
    width: 81.3333333333vw;
    margin: 0 auto;
  }
}

.works-detail--photo {
  width: 495px;
  margin: 0;
}

@media only, screen and (max-width: 820px) {
  .works-detail--photo {
    width: 100%;
  }
}

.works-detail--photo .works-detail--slide {
  width: 495px;
  margin: 0 0 20px;
}

@media only, screen and (max-width: 820px) {
  .works-detail--photo .works-detail--slide {
    width: 77.8048780488vw;
  }
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .works-detail--slide {
    width: 81.3333333333vw;
  }
}

.works-detail--photo .works-detail--slide figure {
  width: 495px;
}

@media only, screen and (max-width: 820px) {
  .works-detail--photo .works-detail--slide figure {
    width: 77.8048780488vw;
  }
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .works-detail--slide figure {
    width: 81.3333333333vw;
  }
}

.works-detail--photo .works-detail--slide figure img {
  width: 100%;
  border-radius: 10px;
}

.works-detail--photo .works-detail--slide .slick-track {
  float: none;
  display: flex;
  left: 0;
}

.works-detail--photo .works-detail--slide--thumb {
  display: flex;
}

.works-detail--photo .works-detail--slide--thumb figure {
  width: 100px;
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .works-detail--slide--thumb figure {
    width: 90px;
  }
}

.works-detail--photo .works-detail--slide--thumb figure:before {
  content: "";
  display: block;
  width: 90px;
  height: 100%;
  margin: auto;
  background: #000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .works-detail--slide--thumb figure:before {
    width: 80px;
  }
}

.works-detail--photo .works-detail--slide--thumb figure img {
  display: block;
  width: 90px;
  margin: 0 auto;
  cursor: pointer;
  opacity: 1;
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .works-detail--slide--thumb figure img {
    width: 80px;
  }
}

.works-detail--photo .works-detail--slide--thumb figure.slick-current img {
  opacity: 0.8;
}

.works-detail--photo .works-detail--slide--thumb .slick-track {
  float: none;
  display: flex;
  left: -10px;
}

.works-detail--photo .btn-prev {
  width: 10px;
  position: absolute;
  right: -16px;
  top: 22px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .btn-prev {
    display: none;
  }
}

.works-detail--photo .btn-next {
  width: 10px;
  position: absolute;
  left: -26px;
  top: 22px;
  cursor: pointer;
}

@media only, screen and (max-width: 736px) {
  .works-detail--photo .btn-next {
    display: none;
  }
}

.works-detail--data {
  flex: 1;
  margin: 0 0 0 50px;
}

@media only, screen and (max-width: 820px) {
  .works-detail--data {
    margin: 0;
  }
}

.works-detail--data .num {
  margin: 0 0 80px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-17);
  line-height: 1;
  color: #fff;
}

@media only, screen and (max-width: 820px) {
  .works-detail--data .num {
    margin: 20px 0 0;
    color: #52b7b6;
  }
}

.works-detail--data .c-name {
  height: 7.906295754vw;
  margin: 0;
  font-size: var(--fs-16);
  color: #fff;
  line-height: 1.5;
}

@media only, screen and (max-width: 820px) {
  .works-detail--data .c-name {
    height: inherit;
    margin: 20px 0 10px;
    color: #52b7b6;
  }
}

.works-detail--data h2 {
  margin: 0 0 30px;
  font-size: var(--fs-22);
  font-weight: 500;
}

@media only, screen and (max-width: 736px) {
  .works-detail--data h2 {
    margin: 0 0 20px;
    font-size: var(--fs-18);
    line-height: 1.75;
  }
}

.works-detail--data h2 span {
  border-bottom: solid 1px #9a9c9e;
}

.works-detail--data .txt-detail-box {
  height: 280px;
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .works-detail--data .txt-detail-box {
    height: 91.7874396135vw;
  }
}

.works-detail--data .txt-detail-box:after {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  background: linear-gradient(0, white, rgba(255, 255, 255, 0));
  position: absolute;
  top: 240px;
}

@media only, screen and (max-width: 736px) {
  .works-detail--data .txt-detail-box:after {
    top: 33.8164251208vw;
  }
}

.works-detail--data .txt-detail {
  height: 280px;
  padding: 0 25px 0 0;
  text-align: justify;
  overflow-y: scroll;
}

@media only, screen and (max-width: 736px) {
  .works-detail--data .txt-detail {
    height: 43.4782608696vw;
  }
}

.works-detail--data .txt-detail::-webkit-scrollbar {
  width: 12px;
}

.works-detail--data .txt-detail::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 6px;
}

.works-detail--data .txt-detail::-webkit-scrollbar-track {
  background-color: #e0e0e0;
  border-radius: 6px;
}

.works-detail--data .txt-detail p {
  margin: 0 0 40px;
}

.works-detail--data .txt-detail p:not(:last-of-type) {
  margin: 0 0 1em;
}

/*.lity-container{
	height: 92%;
}*/
.lity-content .works-detail {
  position: relative;
  z-index: 999;
  opacity: 1;
}

@media only, screen and (max-width: 736px) {
  .lity-content .works-detail {
    min-height: 740px;
  }
}

.lity-content:after {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.lity {
  background: rgba(0, 0, 0, 0.2);
}

@media only, screen and (max-width: 820px) {
  .lity .lity-wrap {
    overflow: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.lity-close {
  display: none;
  z-index: -9999;
}

.works-detail .lity-close {
  display: none;
  width: 95px;
  height: 40px;
  left: 0;
  bottom: 60px;
  top: inherit;
  margin: auto;
  background: #e0e0e0;
  border-radius: 5px;
  font-size: var(--fs-11);
  color: #9a9c9e;
  text-align: center;
  text-shadow: none;
}

@media only, screen and (max-width: 736px) {
  .works-detail .lity-close {
    bottom: 20px;
  }
}

.lity .works-detail .lity-close {
  display: block;
  position: absolute;
  bottom: 60px;
  z-index: 100;
}

@media only, screen and (max-width: 736px) {
  .lity .works-detail .lity-close {
    bottom: 20px;
  }
}

.topics {
  padding: 60px 0;
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .topics {
    padding: 26.6666666667vw 0;
  }
}

/*.topics:after {
    content: "";
    display: block;
    width: 90.2635431918vw;
    height: 100%;
    background: #f5f5f5;
    margin: 0 auto 0 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
    @media only, screen and (max-width: 736px) {
      .topics:after {
        width: 97.3333333333vw; } }*/
.topics--box {
  width: 58.5651537335vw;
  max-width: 800px;
  margin: 0 auto;
}

@media only, screen and (max-width: 736px) {
  .topics--box {
    width: 89.3333333333vw;
    max-width: inherit;
  }
}

.topics--box h2 {
  margin: 0 0 50px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-80);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #e0e0e0;
}

@media only, screen and (max-width: 736px) {
  .topics--box h2 {
    margin: 0 0 10px;
    font-size: 56px;
    color: #e0e0e0;
  }
}

.topics--box ul {
  margin: 0 0 48px;
  list-style: none;
}

@media only, screen and (max-width: 736px) {
  .topics--box ul {
    margin: 0 0 40px;
  }
}

.topics--box ul li {
  margin: 0 0 25px;
  padding: 0 0 25px;
  border-bottom: solid 1px #e0e0e0;
}

@media only, screen and (max-width: 736px) {
  .topics--box ul li {
    margin: 0 0 15px;
    padding: 0 0 15px;
  }
}

/*.topics--box ul li:last-of-type {
        margin: 0;
        padding: 0;
        border-bottom: none; }*/
.topics--box ul li a {
  color: #53565a;
  text-decoration: none;
}

.topics--box ul li a p {
  color: #53565a;
  line-hieght: 1.75;
  transition: color 0.3s;
}

.topics--box ul li a .cat {
  display: inline-block;
  margin: 0 10px 5px 0;
  padding: 4px 7px 5px;
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
  background: #878a8c;
}

.topics--box ul li a .date {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-12);
  font-weight: 600;
}

.topics--box ul li a:hover p:last-of-type {
  color: #52b7b6;
  text-decoration: underline;
}

.topics--box ul.topics--archive {
  display: none;
  margin: -20px 0 60px 0;
}

.topics--box .more-button {
}

.topics--box .btn-secondary .arrow {
  bottom: 20px;
  transform: rotate(90deg);
  transition: bottom 0.3s;
}

.topics--box .btn-secondary:hover .arrow {
  bottom: 15px;
  right: 15px;
}

/*.topics--box .more-button span {
        padding: 15px;
        position: relative; }
    .topics--box .more-button span:after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 6px;
        margin: auto;
        background: url("../img_renew/index/icn_arrow_b.png") left top/100% auto no-repeat;
        transition: top 0.3s;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0; }
    .topics--box .more-button:hover span:after {
        top: 7px; }*/

/*.topics*/

.visit {
  background: #f5f5f5;
  padding: 60px 0;
  margin-bottom: 40px;
}

.visit .visit-img {
  width: 84.3333333333vw;
  max-width: 1366px;
  display: block;
  margin: 0 auto;
}

.bnr-visit {
  width: 38.0673499268vw;
  max-width: 470px;
  margin: 0 auto -60px;
  padding: 30px;
  color: #fff;
  text-decoration: none;
  background: #e5a723;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 40px;
}

@media screen and (max-width: 1100px) {
  .bnr-visit {
    width: 40.9956076135vw;
  }
}

@media only screen and (max-width: 820px) {
  .bnr-visit {
    width: 58.5365853659vw;
    max-width: inherit;
  }
}

@media only screen and (max-width: 736px) {
  .bnr-visit {
    width: 86.6666666667vw;
    margin: 0 auto -80px;
    padding: 20px 0;
  }
}

/*.bnr-visit figure {
    width: 170px; }
    @media only, screen and (max-width: 736px) {
      .bnr-visit figure {
        width: 115px; } }
    .bnr-visit figure img {
      border-radius: 0 5px 5px 0; }*/

.bnr-visit div {
  flex: 1;
  text-align: center;
}

.bnr-visit div p:first-of-type {
  display: inline-block;
  margin: 0 0 15px;
  font-size: var(--fs-22);
  font-weight: 400;
  line-height: 1;
}

@media only screen and (max-width: 736px) {
  .bnr-visit div p:first-of-type {
    margin: 0 0 10px;
    font-size: var(--fs-20);
  }
}

.bnr-visit div p:first-of-type:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 7px 0 0;
  background: #fff;
}

/*.bnr-visit div p.btn-more {
      display: inline-block;
      padding: 0 15px;
      font-family: "Montserrat", sans-serif;
      font-size: var(--fs-11);
      line-height: 1;
      position: relative; }
      .bnr-visit div p.btn-more:after {
        content: "";
        display: inline-block;
        width: 7px;
        height: 9px;
        background: url("../img_renew/index/icn_arrow_w.png") left top/100% auto no-repeat;
        transition: right 0.3s;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0; }*/

.bnr-visit div h2 {
  font-size: 2vw;
  font-weight: 600;
  line-height: 1;
}

@media screen and (min-width: 1367px) {
  .bnr-visit div h2 {
    font-size: var(--fs-24);
  }
}

@media only screen and (max-width: 820px) {
  .bnr-visit div h2 {
    font-size: var(--fs-26);
  }
}

@media only screen and (max-width: 736px) {
  .bnr-visit div h2 {
    margin: 0;
    font-size: 5.6vw;
  }
}

.bnr-visit .arrow {
  position: absolute;
  right: 25px;
  width: 2vw;
  transition: right 0.3s;
}

@media only screen and (max-width: 820px) {
  .bnr-visit .arrow {
    width: 4vw;
  }
}

@media only screen and (max-width: 736px) {
  .bnr-visit .arrow {
    width: 7vw;
    right: 15px;
  }
}

.bnr-visit:hover .arrow {
  right: 20px;
}

.download {
  margin: 60px 0 120px 0;
}

.column {
  background: #f5f5f5;
  position: relative;
  padding: 120px 0 60px;
}

@media only screen and (max-width: 736px) {
  .column {
    padding: 80px 0 60px;
  }
}

.column h2.ttl-02 {
  width: 100%;
  position: absolute;
  top: -45px;
}

@media only screen and (max-width: 736px) {
  .column h2.ttl-02 {
    top: -40px;
  }
}

.column .date {
  display: block;
}

.seminar {
  padding: 60px 0;
}

@media only screen and (max-width: 736px) {
  .download,
  .seminar {
    margin: 0 auto;
    padding: 60px 0;
  }

  .column {
    margin: 30px auto 0;
  }
}

.thumb--box {
  width: 84.3333333333vw;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
}

@media only screen and (max-width: 736px) {
  .thumb--box {
    display: block;
  }
}

.thumb--box div,
.thumb--box a {
  display: block;
  width: 24.9619326501vw;
  max-width: 300px;
  margin: 0 0 50px 0;
  color: #53565a;
  text-decoration: none;
}

@media only screen and (max-width: 820px) {
  .thumb--box div,
  .thumb--box a {
    width: 26.0975609756vw;
    max-width: inherit;
  }
}

@media only screen and (max-width: 736px) {
  .thumb--box div,
  .thumb--box a {
    width: 100%;
    max-width: inherit;
    margin: 0 0 40px;
  }
}

.thumb--box .thumb-img {
  position: relative;
  margin: 0 0 20px 0;
}

.seminar .thumb-img-finish::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 74px;
  height: 74px;
  z-index: 90;
  border-radius: 10px 0 0 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-color: #53565a;
}

.seminar .thumb-img-finish::before {
  content: "終了";
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 100;
  transform: rotate(-45deg);
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.thumb--box div img,
.thumb--box a img {
  border: solid 1px #52b7b6;
  border-radius: 10px;
}

.thumb--box div p,
.thumb--box a p {
  margin: 25px 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  font-weight: 500;
}

@media only screen and (max-width: 736px) {
  .thumb--box div p,
  .thumb--box a p {
    margin: 25px 0 0;
    font-size: var(--fs-15);
  }
}

.thumb--box div p.btn-more,
.thumb--box a p.btn-more {
  display: inline-block;
  margin: 0;
  padding: 15px 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-11);
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: #fff;
  background: #52b7b6;
  border-radius: 5px;
  position: absolute;
  bottom: -10px;
  right: -10px;
}

.thumb--box div p.btn-more span,
.thumb--box a p.btn-more span {
  color: #fff;
  text-decoration: none;
  padding: 0 22px;
  position: relative;
}

.thumb--box:hover p.btn-more {
  text-decoration: none;
}

.thumb--box div p.btn-more span:after,
.thumb--box a p.btn-more span:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  margin: auto;
  background: url("../img_renew/index/icn_arrow_w.png") left top/100% auto
    no-repeat;
  transition: right 0.3s;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
}

.thumb--box div:hover p.btn-more span:after,
.thumb--box a:hover p.btn-more span:after {
  right: 5px;
}

.btn-primary {
  width: 250px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 20px 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-14);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  color: #fff;
  background: #52b7b6;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.btn-secondary {
  width: 250px;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: var(--fs-14);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  color: #52b7b6;
  background: #fff;
  border: #52b7b6 solid 1px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary .arrow,
.btn-secondary .arrow {
  width: 7px;
  height: auto;
  position: absolute;
  right: 15px;
  transition: right 0.3s;
}

/*.btn-primary span:after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 8px;
        margin: auto;
        background: url(../img_renew/index/) left top / 100% auto no-repeat;
        transition: right 0.3s;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
    }*/
@media screen and (max-width: 1100px) {
  .btn-primary {
    width: 40.9956076135vw;
  }
}

@media only, screen and (max-width: 820px) {
  .btn-primary {
    width: 38.5365853659vw;
    max-width: inherit;
  }
}

@media only, screen and (max-width: 736px) {
  .btn-primary {
    width: 64.3333333333vw;
    margin: 0 auto;
  }
}

.btn-primary:hover .arrow,
.btn-secondary:hover .arrow {
  right: 10px;
}

/*.ebook*/

/* ------------------------------ */
/* company */
/* ------------------------------ */
.company {
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0 0 0 13.3967789165vw;
}

@media screen and (min-width: 1367px) {
  .company {
    margin: 0 0 140px auto;
  }
}

@media only, screen and (max-width: 736px) {
  .company {
    display: block;
    width: 89.3333333333vw;
    margin: 0 auto 2.6666666667vw;
  }
}

.company table {
  width: 39.7510980966vw;
  max-width: 543px;
}

@media only, screen and (max-width: 736px) {
  .company table {
    width: 100%;
    max-width: inherit;
    margin: 0 0 40px;
  }
}

.company table .btn-01 {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-11);
}

@media only, screen and (max-width: 736px) {
  .company table .sp-inline {
    color: #53565a;
  }
}

.company--map {
  width: 40.9956076135vw;
  margin: 0 0 0 5.8565153734vw;
  padding: 60px 0 40px 40px;
  background: #f5f5f5;
  position: relative;
}

@media only, screen and (max-width: 736px) {
  .company--map {
    width: 100%;
    margin: 0;
    padding: 30px 20px 20px;
  }
}

.company--map .ttl-03 {
  font-family: "Montserrat", sans-serif;
  position: absolute;
  top: -16px;
  left: 20px;
}

.company--map .ttl-04 {
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
}

.company--map figure {
  width: 29.2825768668vw;
  max-width: 400px;
  margin: 0 0 40px 10px;
}

@media only, screen and (max-width: 736px) {
  .company--map figure {
    width: 100%;
    max-width: inherit;
    margin: 0;
  }
}

.company--map p {
  font-size: var(--fs-14);
}

.slogan-sec-02 {
  margin-bottom: 8.78477306vw;
  padding-bottom: 4.39238653vw;
  background: #f6f6f6;
}

@media only, screen and (max-width: 736px) {
  .slogan-sec-02 {
    padding-top: 10.6666666667vw;
  }
}

@media only, screen and (max-width: 736px) {
  .slogan_main_title {
    padding: 10px;
    line-height: 1.5;
  }
}

#credo {
  margin-bottom: 60px;
}