@charset "UTF-8";
h1, h2 {
  width: 100%;
  margin: 20px auto 20px auto;
  display: flex;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xxl);
  font-weight: 800;
  justify-content: center;
  line-height: 36px;
  color: var(--gravel);
  align-items: center;
  text-align: center;
}
h1 img.inline, h2 img.inline {
  margin-right: 16px;
  height: 44px;
  width: auto;
}

ul.lang-pc {
  position: absolute;
  right: 40px;
  top: 0;
  padding: 20px;
  z-index: 2;
}
ul.lang-pc > li a {
  color: black;
}
ul.lang-pc > li a.active {
  text-shadow: 3px 3px 8px white, 3px -3px 8px white, -3px 3px 8px white, -3px -3px 8px white;
  font-weight: bold;
}

.kv {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1040px;
  margin: 0 auto;
  background-image: url(/cti_group/img/kv-index.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 2.5/1;
}
@media screen and (max-width: 768px) {
  .kv {
    min-width: auto;
    min-height: auto;
    background-image: none;
    aspect-ratio: 1/1;
  }
}
.kv .kv-004-1-1 {
  height: auto;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}
.kv .spimg {
  position: absolute;
}
.kv .philosophy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  width: 60%;
  min-width: 624px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .kv .philosophy {
    width: 100%;
    min-width: auto;
    justify-content: center;
  }
}
.kv .philosophy .philosophy_box {
  width: 100%;
  margin-bottom: 0.25%;
}
@media screen and (max-width: 768px) {
  .kv .philosophy .philosophy_box {
    margin-bottom: 0;
  }
}
.kv .philosophy .philosophy_box h1 {
  display: flex;
  flex-direction: column;
  font-size: clamp(26px, 2.19vw, 42px);
  color: #484848;
}
@media screen and (max-width: 768px) {
  .kv .philosophy .philosophy_box h1 {
    font-size: clamp(6px, 4.69vw, 36px);
  }
}
.kv .philosophy .philosophy_box h1 img {
  width: 32.5%;
  height: auto;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .kv .philosophy .philosophy_box h1 img {
    width: 20%;
    margin-bottom: 10px;
  }
}
.kv .philosophy .philosophy_box p {
  text-align: center;
  line-height: 1.75;
  font-size: clamp(14px, 1.15vw, 22px);
  font-weight: 500;
  padding: 0 4em;
}
@media screen and (max-width: 768px) {
  .kv .philosophy .philosophy_box p {
    font-size: clamp(10px, 1.82vw, 14px);
    font-size: clamp(10px, 2.34vw, 18px);
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }
}
.kv .philosophy .philosophy_box p span {
  font-weight: 500;
}

.top {
  width: 100%;
  margin: 0 auto;
  max-width: 1040px;
}
@media screen and (max-width: 768px) {
  .top {
    padding: 0 5%;
  }
}
.top section.aboutgroup {
  margin: 0 auto;
  padding-top: 72px;
}
@media screen and (max-width: 768px) {
  .top section.aboutgroup {
    padding-top: 36px;
  }
}
.top section.aboutgroup h2 {
  color: #484848;
  font-size: 42px;
}
@media screen and (max-width: 768px) {
  .top section.aboutgroup h2 {
    font-size: 36px;
    font-size: clamp(24px, 4.69vw, 36px);
  }
}
.top section.aboutgroup p {
  padding-top: 1em;
  font-size: 16px;
  line-height: 1.75em;
  color: var(--maincolor);
}
@media screen and (max-width: 768px) {
  .top section.aboutgroup p {
    font-size: 14px;
  }
}
.top section.menulist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  width: 1040px;
  margin: 0 auto;
  margin-top: 2em;
}
@media screen and (max-width: 768px) {
  .top section.menulist {
    width: 100%;
  }
}
.top section.menulist:after {
  content: "";
  width: 320px;
}
@media screen and (max-width: 768px) {
  .top section.menulist:after {
    width: 100%;
  }
}
.top section.menulist .menuitem {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .top section.menulist .menuitem {
    width: 100%;
    margin-bottom: 0;
  }
}
.top section.menulist .menuitem .buttongreen {
  box-shadow: 7.5px 7.5px 11.25px rgba(0, 0, 0, 0.15);
  margin-left: 0;
  width: 320px;
  height: 5em;
}
@media screen and (max-width: 768px) {
  .top section.menulist .menuitem .buttongreen {
    width: 100%;
    box-shadow: 5px 5px 7.5px rgba(0, 0, 0, 0.2);
    height: 50px;
  }
}
.top section.menulist .menuitem .buttongreen div {
  font-size: 18px;
  width: 125%;
  transform: scale(0.8, 1);
  margin-left: -6.25%;
  margin-right: -6.25%;
  letter-spacing: 0.025em;
  line-height: 1.2;
  margin-top: -5px;
}
@media screen and (max-width: 768px) {
  .top section.menulist .menuitem .buttongreen div {
    font-size: 16px;
  }
}
.top section.menulist .menuitem .buttongreen div span {
  display: inline-block;
}
.top section.menulist .menuitem p {
  margin: 0.5em 0 10px 0;
  font-size: 15px;
  color: #484848;
  padding: 0 1em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .top section.menulist .menuitem p {
    font-size: 13px;
  }
}
.top section.menulist .menuitem > a[target=_blank]::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 10px;
  background: url(/common/img/icn_blank_white.svg) no-repeat left center;
  background-size: auto;
  background-size: 14px;
  width: 14px;
  height: 14px;
}
.top section.strengths {
  margin: 0 auto;
  padding-top: 72px;
}
@media screen and (max-width: 768px) {
  .top section.strengths {
    padding-top: 36px;
  }
}
.top section.strengths h2 {
  color: #484848;
  font-size: 42px;
}
@media screen and (max-width: 768px) {
  .top section.strengths h2 {
    font-size: 36px;
    font-size: clamp(24px, 4.69vw, 36px);
  }
}
.top section.strengths p {
  padding-top: 1em;
  font-size: 16px;
  line-height: 1.75em;
  color: var(--maincolor);
}
@media screen and (max-width: 768px) {
  .top section.strengths p {
    font-size: 14px;
  }
}
.top section.strengths .list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .top section.strengths .list {
    justify-content: space-around;
    gap: 10px;
    margin-top: 30px;
  }
}
.top section.strengths .list .item {
  background: linear-gradient(140deg, rgb(32, 123, 162), rgb(34, 161, 170) 100%);
  border: 2px solid;
  border-color: var(--commonwhite);
  border-radius: 100px;
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .top section.strengths .list .item {
    border-radius: 60px;
    height: 120px;
    width: 120px;
    border-radius: 76px;
    height: 152px;
    width: 152px;
  }
}
.top section.strengths .list .item p {
  width: 100%;
  margin: 0;
  color: var(--commonwhite);
  font-family: var(--font-family-base);
  font-style: normal;
  font-weight: 700;
  text-align: center;
  padding-top: 0;
  letter-spacing: 0;
  line-height: 1.25em;
}
.top section.strengths .list .item p.title {
  font-size: 32px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .top section.strengths .list .item p.title {
    font-size: 18px;
  }
}
.top section.strengths .list .item p.adjective {
  padding: 0 0.25em;
  font-size: 18px;
}
.top section.strengths .list .item p.adjective.narrow08 {
  width: 125%;
  transform: scale(0.8, 1);
  margin: 0 -6.25%;
}
@media screen and (max-width: 768px) {
  .top section.strengths .list .item p.adjective {
    font-size: 13px;
  }
}
.top section.strengths .list .item p.adjective.small {
  font-size: 24px;
  line-height: 28px;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .top section.strengths .list .item p.adjective.small {
    font-size: 12px;
    line-height: 16px;
    padding-top: 22px;
  }
}
.top section.strengths .buttongreen.center {
  width: 320px;
  margin: 40px auto;
  box-shadow: 7.5px 7.5px 11.25px rgba(0, 0, 0, 0.15);
  height: 5em;
}
@media screen and (max-width: 768px) {
  .top section.strengths .buttongreen.center {
    width: 100%;
    box-shadow: 5px 5px 7.5px rgba(0, 0, 0, 0.2);
    height: 50px;
  }
}
.top section.strengths .buttongreen.center div {
  font-size: 18px;
  width: 125%;
  transform: scale(0.8, 1);
  margin-left: -6.25%;
  margin-right: -6.25%;
  letter-spacing: 0.025em;
  line-height: 1.2;
  margin-top: -5px;
}
@media screen and (max-width: 768px) {
  .top section.strengths .buttongreen.center div {
    font-size: 16px;
  }
}
.top section.stats img {
  align-items: center;
  margin: 72px auto;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .top section.stats img {
    margin: 36px auto;
  }
}

/*PC サイドメニュー　SP スライドメニュー*/
.topgmenu_area {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.topgmenu_box {
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.navflexarea {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  height: 100%;
  width: 500px;
}

#navSidecontents {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 9999;
  height: 100%;
  width: 100%;
  overflow: hidden;
  width: 40px;
  background: #282828;
  transition: all 0.3s ease;
}

.navflexarea .sidenavarea {
  width: 460px;
  background-color: #d3d3c4;
  height: 100%;
  overflow: hidden;
  margin-right: -460px;
  overflow: auto;
}

.navflexarea .sidenavarea nav {
  background-color: #fff;
  width: 100%;
}

.navflexarea .sidenavarea nav h2 {
  margin-bottom: 0px;
  margin-top: 56px;
  margin-top: 0;
}

.navflexarea .sidenavarea nav h2 a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px 0 10px;
  font-size: 16px !important;
  width: 100%;
  box-sizing: border-box;
  height: 3.6em;
  color: #484848;
  line-height: 1.3;
  border-bottom: 1.5px solid #009966; /*border-top: 1px dotted #009966;*/
}

.navflexarea .sidenavarea nav h2 a span {
  transition: transform 0.3s ease-in-out;
  display: block;
  font-weight: bold;
  font-size: 1em;
}

.navflexarea .sidenavarea nav h2 a:hover span {
  transform: translate(5px, 0);
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li {
  border-bottom: 1px dotted #999;
}

.navflexarea .sidenavarea nav ul.menu li a {
  height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px 0 10px;
  color: #484848;
  line-height: 1.3;
  font-size: 15px;
  position: relative;
}

.navflexarea .sidenavarea nav ul.menu li a span {
  padding-left: 0px;
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li a:hover span {
  transform: translate(5px, 0);
  transition: transform 0.3s ease-in-out;
}

.navflexarea .sidenavarea nav ul.menu li > a[target=_blank]::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 10px;
  background: url(/common/img/icn_blank_gray.svg) no-repeat left center;
  background-size: auto;
  background-size: 14px;
  width: 14px;
  height: 14px;
}

.navflexarea .ctsallarea {
  width: 770px;
}

.navflexarea .sidenavarea nav ul.menu li:has(+ .toctie) {
  border-bottom: 1px solid #096;
}

/* 現在ページの表示状況*/
body.dx .navflexarea .sidenavarea nav ul.menu li.dx a,
body.group .navflexarea .sidenavarea nav ul.menu li.group a,
body.management .navflexarea .sidenavarea nav ul.menu li.management a,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a,
body.history .navflexarea .sidenavarea nav ul.menu li.history a {
  color: #009966;
  background-color: #f6f6f6;
  pointer-events: none;
}

body.dx .navflexarea .sidenavarea nav ul.menu li.dx a:before,
body.group .navflexarea .sidenavarea nav ul.menu li.group a:before,
body.management .navflexarea .sidenavarea nav ul.menu li.management a:before,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a:before,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a:before,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a:before,
body.history .navflexarea .sidenavarea nav ul.menu li.history a:before {
  content: "";
  background: url(/common/img/icn_arw_r_green_s.svg) no-repeat left top;
  background-size: 5px;
  width: 5px;
  height: 8px;
}

body.dx .navflexarea .sidenavarea nav ul.menu li.dx a span,
body.group .navflexarea .sidenavarea nav ul.menu li.group a span,
body.management .navflexarea .sidenavarea nav ul.menu li.management a span,
body.strengths .navflexarea .sidenavarea nav ul.menu li.strengths a span,
body.topmessage .navflexarea .sidenavarea nav ul.menu li.topmessage a span,
body.numbers .navflexarea .sidenavarea nav ul.menu li.numbers a span,
body.history .navflexarea .sidenavarea nav ul.menu li.history a span {
  padding-left: 0.65em;
  transform: translate(0, 0);
}

.hamb-btn, .x-btn {
  display: flex;
}

.hamb-btn {
  width: 40px !important;
  height: 40px;
  background-color: #282828;
  border: none;
  cursor: pointer;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.5px;
  padding: 0;
  transition: background-color 0.3s ease;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 400;
}

.hamb-btn span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  pointer-events: none;
}

#hamb-btn_top.hamb-btn.menu-open {
  cursor: default;
}

#hamb-btn_top.hamb-btn.menu-open {
  display: none !important;
}

.x-btn {
  width: 40px !important;
  height: 40px !important;
  background-color: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10006;
  transition: transform 0.3s ease;
  transition: all 0.3s ease;
  flex-direction: column;
  align-items: center;
}

.x-btn span {
  display: block;
  font-size: 7px;
  line-height: 0.5;
  padding-top: 6px;
}

.x-btn.active {
  display: flex;
}

.navflexarea .ctsallarea {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}

.navflexarea .sidenavarea {
  left: -100%;
  transition: all 0.3s ease;
}

.navflexarea .sidenavarea.active {
  left: 0;
  transition: all 0.3s ease;
}

#navSidecontents.active {
  width: 100%;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  span.spinblock {
    display: inline-block;
  }
  .topgmenu_area {
    width: 100%;
  }
  .kv {
    transition: all 1s ease;
  }
  .kv.active {
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 1s ease;
  }
  #navSidecontents {
    background-color: transparent;
  }
  .navflexarea {
    padding: 0 !important;
    width: 100%;
  }
  .navflexarea .sidenavarea {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    background-color: #fff;
  }
  .navflexarea .sidenavarea nav {
    overflow: auto;
    height: calc(100% - 0px); /*background-color: #d3d3c4;*/
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #d3d3c4 50%, #d3d3c4 100%);
    /*border-top:44px solid #e4f5f1;*/
  }
  .kv .philosophy .philosophy_box div {
    aspect-ratio: 1/1;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .navflexarea .sidenavarea nav h2 {
    margin-top: 0px;
  }
  .navflexarea .sidenavarea nav h2 a {
    font-size: 16px !important;
    padding: 0 5%;
  }
  .navflexarea .sidenavarea nav ul.menu li a {
    padding: 0 5%;
    font-size: 14px;
  }
  .navflexarea .sidenavarea nav ul.menu li > a[target=_blank]::after {
    top: 18px;
    right: 1em;
    background-size: 12px;
    width: 12px;
    height: 12px;
  }
  .navflexarea .ctsallarea {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
  }
  .navflexarea .sidenavarea {
    left: -100%;
    transition: all 0.3s ease;
  }
  .navflexarea .sidenavarea.active {
    left: 0;
    transition: all 0.3s ease;
  }
  #hamb-btn.x-btn.active {
    display: flex;
  }
  .top.active {
    margin-top: 100%;
  }
  .philosophy_box.active {
    height: 100%;
  }
  body.menu_on {
    overflow: hidden;
  }
  .hamb-btn, .x-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #282828;
  }
}/*# sourceMappingURL=index.css.map */