@charset "UTF-8";
/* ↓↓↓ #contents ↓↓↓ */
#contents {
  position: relative;
  height: calc(100vh - 90px);
  height: calc(100dvh - 90px);
  display: flex;
}

@media screen and (max-width: 1050px) {
  #contents {
    flex-direction: column;
    height: auto;
    min-height: calc(326/480*100vw);
  }
}

/* ↑↑↑ #contents ↑↑↑ */

/* ↓↓↓ #sidemenu ↓↓↓ */
#sidemenu {
  position: sticky;
  width: clamp(200px,264/1280*100vw,264px);
  height: calc(100vh - 90px);
  height: calc(100dvh - 90px);
  top: 0;
  padding: 0 0 26px 0;
  z-index: 10;
}

@media screen and (min-width: 1280px) {
  #sidemenu {
    width: calc(264/1280*100vw);
  }
}

@media screen and (max-width: 1050px) {
  #sidemenu {
    position: absolute;
    width: 100%;
    height: unset;
    max-height: 100%;
    overflow: hidden;
    top: 2px;
    left: 0;
    padding: 0;
  }

  #sidemenu.active {
    height: 100%;
  }
}

#sidemenu .sp-head {
  position: relative;
  display: none;
  font-size: 2rem;
  font-weight: bold;
  color: #018802;
  background-color: #fff;
  cursor: pointer;
  transition: background-color ease .3s;
}

#sidemenu .sp-head:hover {
  background-color: rgba(255, 255, 255,.8);
}

@media screen and (max-width: 1050px) {
  #sidemenu .sp-head {
    display: block;
    padding: 14px 60px 16px 27px;
  }
}

#sidemenu .sp-head .btn {
  content: '';
  position: absolute;
  width: 30px;
  aspect-ratio: 1/1;
  background-color: #018802;
  border-radius: 50%;
  transform: translateY(-50%);
  top: 50%;
  right: 30px;
}

#sidemenu .sp-head .btn::before,
#sidemenu .sp-head .btn::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1px;
  background-color: #fff;
  top: 15px;
  left: 10px;
}

#sidemenu .sp-head .btn::after {
  transition: transform ease .3s;
  transform: rotate(90deg);
}

#sidemenu.active .btn::after {
  transform: rotate(360deg);
}

#sidemenu .menu-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 32px;
}

#sidemenu .menu-container::-webkit-scrollbar{
  display: none;
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container {
    height: calc(100% - 60px);
    display: none;
    padding-bottom: unset;
  }
}

#sidemenu .menu-container a {
  transition: opacity ease .3s;
}

#sidemenu .menu-container a:hover {
  text-decoration: unset;
}

#sidemenu .menu-container .menu-list {
  margin-top: 10px;
}

#sidemenu .menu-container .first {
  position: relative;
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .menu-list {
    margin-top: 2px;
  }
}

#sidemenu .menu-container .link-ttl {
  position: relative;
  font-size: clamp(1.2rem,14/1280*100vw,1.4rem);
  font-weight: 500;
  color: #008803;
  display: block;
  cursor: pointer;
  padding: 12px 23px 12px 28px;
  transition: background-color ease .3s;
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .link-ttl {
    font-size: 1.4rem;
    color: inherit;
    background-color: #fff;
    padding: 8px 56px 8px 27px;
  }
}

#sidemenu .menu-container :is(.first .link-ttl:hover,.first.active .link-ttl) {
  background-color: #D6EADD;
}


#sidemenu .menu-container .link-ttl::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 1px;
  background-color: #008803;
  top: 22px;
  left: 8px;
}

#sidemenu .menu-container .first.-parent::before,
#sidemenu .menu-container .first.-parent::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #008803;
  top: 18px;
  right: 10px;
  z-index: 1;
  transition: transform ease .3s;
}

#sidemenu .menu-container .first.-parent::after {
  transform: rotate(90deg);
}

#sidemenu .menu-container .first.active::after {
  transform: rotate(360deg);
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .link-ttl::before {
    content: unset;
  }

}

#sidemenu .menu-container .under-list {
  position: absolute;
  background-color: rgb(140, 196, 159, .9);
  background-color: #D6EADD;
  padding: 158px 16.67% 100px 18.335%;
  display: none;
  position: initial;
  width: 100%;
  height: auto;
  opacity: 1;
  padding: 8px 27px 18px 58px;
}

@media screen and (min-width: 1280px) {
  #sidemenu .menu-container .under-list {
    left: calc(300/1280*100vw);
  }
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .under-list {
    display: none;
    position: initial;
    width: 100%;
    height: auto;
    opacity: 1;
    padding: 8px 27px 15px;
  }
}

#sidemenu .menu-container .menu-list .first:hover .under-list {
  opacity: 1;
  pointer-events: visible;
}

#sidemenu .menu-container .under-list .under-link-ttl {
  width: fit-content;
  font-size: 1.2rem;
  color: #008803;
  padding: 4px 6px 2px;
}

#sidemenu .menu-container .under-list .under-link-ttl[href*="member/"] {
  font-weight: 700;
  color: inherit;
}

#sidemenu .menu-container .under-list .under-link-ttl[href*="#general"] {
  font-weight: 700;
  color: #E6826E;
}

#sidemenu .menu-container .under-list .under-link-ttl[href*="#area"] {
  font-weight: 700;
  color: #0096BE;
}

#sidemenu .menu-container .under-list .under-link-ttl[href*="#job"] {
  font-weight: 700;
  color: #FF921E;
}

#sidemenu .menu-container .under-list .link {
  transition: opacity ease .3s;
}

#sidemenu .menu-container .under-list .link:hover {
  text-decoration: underline;
  opacity: .7;
}

#sidemenu .menu-container .under-list .second+.second {
  margin-top: 12px;
}

#sidemenu .menu-container .movie-list {
  margin-top: 10px;
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .movie-list {
    background-color: #fff;
    padding: 15px 0;
    margin-top: unset;
  }
}

#sidemenu .menu-container .movie-list .movie {
  font-size: clamp(1.2rem,14/1280*100vw,1.4rem);
  font-weight: 500;
  color: inherit;
  display: flex;
  align-items: center;
  padding: 12px 18px 12px 8px;
  transition: background-color ease .3s;
}

@media screen and (max-width: 1050px) {
  #sidemenu .menu-container .movie-list .movie {
    font-size: 1.4rem;
  }
}

#sidemenu .menu-container .movie-list .movie:hover {
  background-color: #D6EADD;
}

#sidemenu .menu-container .movie-list .movie .icon {
  width: 34px;
  margin-right: 10px;
}

#sidemenu .other-list {
  padding: 0 18px 0 8px;
  margin-top: 20px;
}

@media screen and (max-width: 1050px) {
  #sidemenu .other-list {
    background-color: #fff;
    padding: 12px 27px 27px;
    margin-top: unset;
  }
}

#sidemenu .other-list .link {
  position: relative;
  font-size: clamp(1.2rem,14/1280*100vw,1.4rem);
  font-weight: 500;
  color: inherit;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333;
  padding: 20px 10px 4px 0;
  transition: color ease .3s;
}

@media screen and (max-width: 1050px) {
  #sidemenu .other-list .link {
    font-size: 1.4rem;
  }
}

#sidemenu .other-list .link:hover {
  text-decoration: underline;
  color: #008803;
}

#sidemenu .other-list .link::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border:  solid #008803;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg) translateY(-50%);
  top: 50%;
  right: 4px;
}


/* ↑↑↑ #sidemenu ↑↑↑ */

/* ↓↓↓ #index ↓↓↓ */
#index.contents-box {
  flex: 1;
  background-color: rgba(214, 234, 221, .5);
  position: relative;
  padding: max(calc(60/625*100vh), 3.907%) 10px 140px 160px;
}

@media screen and (min-width: 1280px) {
  #index.contents-box {
    padding: max(calc(60/625*100vh), 3.907%) 10px 140px max(calc((10 - 160) * ((100vw - 1280px) / (1550 - 1280)) + 160px),10px);
  }
}

@media screen and (max-width: 1050px) {
  #index.contents-box {
    padding: 60px 6.25% 35px;
  }
}

#index.contents-box .bg-wrap {
  content: '';
  position: absolute;
  background: url(../img/index-bg_pc.png) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  max-height: calc(525/1280*100vw);
  aspect-ratio: 1/1;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .bg-wrap {
    background: url(../img/index-bg_sp.png) no-repeat;
    background-size: cover;
    aspect-ratio: 480/210;
    max-height: unset;
    top: 62px;
  }
}

#index.contents-box .fv-txt {
  position: absolute;
  /* width: min(calc(524/1280*100vw),524px); */
  width: min(calc(600/1280*100vw),600px);
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  transition: transform ease .3s;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .fv-txt {
    width: calc(347/480*100vw);
    top: calc(50% + 31px);
  }
}

#index.contents-box .fv-txt.fadeDown {
  animation: fadeDown 1s normal forwards, moveAnime 1.2s normal 1.5s forwards;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .fv-txt.fadeDown {
    animation: fadeDown 1s normal forwards, moveAnimeSP 1.2s normal 1.5s forwards;
  }
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translate(-50%,-55%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%,-50%);
  }
}

@keyframes moveAnime {
  0% {
    /* transform: translate(-50%,-50%); */
    opacity: 1;
  }
  100% {
    /* transform: translate(-20%,-15%) scale(0.6); */
    /* top: 0; */
    /* left: 0; */
    opacity: 0;
  }
}

@keyframes moveAnimeSP {
  0% {
    /* transform: translate(-50%,-50%); */
    opacity: 1;
  }
  100% {
    /*transform: translate(-20%,-5%) scale(0.6);*/
    /*top: 40px;*/
    /*left: 0;*/
    opacity: 0;
  }
}

/* @keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

#index.contents-box .box-wrap.fadeIn,
#index.contents-box .news-box.fadeIn {
  animation: fadeIn 0.6s normal forwards;
} */

#index.contents-box .box-wrap {
  margin: 0 auto;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .box-wrap {
    padding: 0;
  }
}

#index.index-mobile .box-wrap {
  padding: 0;
}

#index.contents-box .overlay {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .8);
  display: none;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
}

#index.contents-box .inner {
  position: relative;
  background-color: unset;
  max-width: min(calc(667/1280*100vw),667px);
  margin: 0 auto;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .inner {
    max-width: unset;
    padding: calc(60/375*100vw) 0 35px 0;
    background-color: transparent;
  }
}

#index.contents-box .inner .pagetitle {
  margin-bottom: 25px;
}

@media screen and (max-width: 1050px) {
  #index.contents-box .inner .pagetitle {
    margin-bottom: 40px;
  }
}

#index.index-mobile .inner .pagetitle {
  margin-bottom: 40px;
}

#index.contents-box .inner .-wb {
  display: inline-block;
}

#index.contents-box .inner .lead-txt {
  font-size: 1.8rem;
  font-weight: bold;
  color: #008803;
  margin-bottom: 100px;
}

#index .main-visual {
  width: 100vw;
  height: 200px;
  margin: 0 calc(50% - 50vw);
  /* background: url(../special/img/main-visual.jpg) no-repeat; */
  background-color: #fff;
  background-position: center bottom;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 1050px) {
  #index .main-visual {
    /* width: calc(100vw - 10px); */
    margin: 0 calc(50% - 50vw);
    padding: 0 0 0 10px;
    height: 120px;
  }
}

#index .main-visual #youtube-wrap,
#index .main-visual video {
  width: 100%;
  height: 100%;
  padding-bottom: 56.25%;
  /* object-fit: cover; */
  /* object-position: center center; */
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1050px) {

  #index .main-visual #youtube-wrap,
  #index .main-visual video {
    height: 100%;
    /* padding-bottom: 0; */
  }
}

#index .main-visual #youtube-wrap #wrapper_youtube {
  top: -17% !important;
}

#index .main-visual .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 913px;
  z-index: 2;
}

#index .title-group {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1050px) {
  #index .title-group {
    flex-direction: column;
  }
}

#index .title-group .title {
  width: 45.58%;
}

@media screen and (max-width: 1050px) {
  #index .title-group .title {
    width: 100%;
    max-width: 380px;
  }
}

#index .title-group .icon-box {
  width: 38.737%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  display: none;
}

@media screen and (max-width: 1050px) {
  #index .title-group .icon-box {
    margin-top: 35px;
    width: 100%;
  }
}

#index .title-group .icon-box li {
  width: 32.609%;
  height: 24px;
  margin-bottom: 1.09%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* cursor: pointer; */
}

@media screen and (max-width: 1050px) {
  #index .title-group .icon-box li {
    width: 31.5%;
    height: 40px;
    margin-bottom: 2.2%;
  }
}

.-underlayer .pager-group .inner .cat-own .-tech+.list li p span.-color,
.-underlayer .pager-group .inner .cat-own .title.-tech,
#future.-underlayer .caption::before,
.-underlayer .submenu .list .title.-tech,
.-underlayer .pager-group .inner .cat-other .list a.-tech,
/* #takawa.-underlayer .submenu .linkmenu-list li p span.-color,
#initiatives.-underlayer .submenu .linkmenu-list li p span.-color,
#future.-underlayer .submenu .linkmenu-list li p span.-color, */
#index .link-group .link-item .cap-group.-tech span,
#index .link-group .link-item .cap-group.-tech h2,
#index .title-group .icon-box li.tech {
  background-color: #00522a;
}

#index .title-group .icon-box li.tech img {
  width: 75%;
}

.-underlayer .submenu .list .title.-proj,
.-underlayer .pager-group .inner .cat-other .list a.-proj,
.-underlayer .pager-group .inner .cat-own .title.-proj,
/* #mobility.-underlayer .submenu .linkmenu-list li p span.-color,
#next10.-underlayer .submenu .linkmenu-list li p span.-color,
#atacs.-underlayer .submenu .linkmenu-list li p span.-color, */
.-underlayer .pager-group .inner .cat-own .-proj+.list li p span.-color,
#index .link-group .link-item .cap-group.-proj span,
#index .link-group .link-item .cap-group.-proj h2,
#index .title-group .icon-box li.proj {
  background-color: #00387a;
}

#index .title-group .icon-box li.proj img {
  width: 50%;
}

#challenge.-underlayer .interview-group .profile,
.-underlayer .pager-group .inner .cat-own .title.-chal,
#challenge.-underlayer .caption::before,
.-underlayer .submenu .list .title.-chal,
.-underlayer .pager-group .inner .cat-other .list a.-chal,
.-underlayer .submenu .-chal+.linkmenu-list li p span.-color,
.-underlayer .pager-group .inner .cat-own .-chal+.list li p span.-color,
#index .link-group .link-item .cap-group.-chal span,
#index .link-group .link-item .cap-group.-chal h2,
#index .title-group .icon-box li.chal {
  background-color: #856021;
}

#index .title-group .icon-box li.chal img {
  width: 66.667%;
}

.-underlayer .pager-group .inner .cat-own .-womn+.list li p span.-color,
.-underlayer .pager-group .inner .cat-own .title.-womn,
#woman.-underlayer .caption::before,
.-underlayer .submenu .list .title.-womn,
.-underlayer .pager-group .inner .cat-other .list a.-womn,
.-underlayer .submenu .-womn+.linkmenu-list li p span.-color,
#index .link-group .link-item .cap-group.-womn span,
#index .link-group .link-item .cap-group.-womn h2,
#index .title-group .icon-box li.womn {
  background-color: #a54489;
}

#index .title-group .icon-box li.womn img {
  width: 42.5%;
}

#global.-underlayer .caption::before,
.-underlayer .pager-group .inner .cat-own .-glob+.list li p span.-color,
.-underlayer .pager-group .inner .cat-own .title.-glob,
#global.-underlayer .interview-group .profile,
.-underlayer .submenu .list .title.-glob,
.-underlayer .pager-group .inner .cat-other .list a.-glob,
.-underlayer .submenu .-glob+.linkmenu-list li p span.-color,
#index .link-group .link-item .cap-group.-glob span,
#index .link-group .link-item .cap-group.-glob h2,
#index .title-group .icon-box li.glob {
  background-color: #891500;
}

#index .title-group .icon-box li.glob img {
  width: 45%;
}

#index .link-group .link-item .cap-group.-all span,
#index .link-group .link-item .cap-group.-all h2,
#index .title-group .icon-box li.all {
  background-color: #4c4c4c;
}

#index .title-group .icon-box li.all img {
  width: 20.84%;
}

.-underlayer .submenu .-transport+.linkmenu-list li p span.-color,
.-underlayer .submenu .list .title.-transport,
#initiatives.-underlayer .caption::before,
#atacs.-underlayer .interview-group .profile,
#atacs.-underlayer .caption::before,
#future.-underlayer.-transport .caption::before,
#transport.-underlayer .caption::before {
  background-color: #7AC843;
}

.-underlayer .submenu .-it+.linkmenu-list li p span.-color,
.-underlayer .submenu .list .title.-it,
#mobility.-underlayer .interview-group .profile,
#mobility.-underlayer .caption::before,
#future.-underlayer.-it .caption::before,
#it.-underlayer .caption::before {
  background-color: #147DA0;
}

.-underlayer .submenu .-life+.linkmenu-list li p span.-color,
.-underlayer .submenu .list .title.-life,
#next10.-underlayer .interview-group .profile,
#next10.-underlayer .caption::before,
#takawa.-underlayer .caption::before,
#life.-underlayer .caption::before {
  background-color: #FF921E;
}

#index .mapblock {
  font-family: 'Noto Sans JP', Hiragino Sans;
  position: relative;
}

#index .map-img img {
  width: 100%;
}

#index .mapblock .sp-tab-link {
  content: '';
  position: absolute;
  padding-top: 7.715%;
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 1050px) {
  #index .mapblock .sp-tab-link {
    display: block;
    transition: background-color ease .3s;
  }

  #index .mapblock .sp-tab-link:hover {
    background-color: rgba(255, 255, 255, .3);
  }
}

#index.index-mobile .mapblock .sp-tab-link {
  display: block;
  transition: background-color ease .3s;
}

#index.index-mobile .mapblock .sp-tab-link:hover {
  background-color: rgba(255, 255, 255, .3);
}

#index .mapblock .sp-tab-link[data-tab="shipping"] {
  width: 30%;
  top: 8.3%;
  left: 14.6%;
}

#index .mapblock .sp-tab-link[data-tab="it-suica"] {
  width: 41.655%;
  top: 8.3%;
  left: 48.44%;
}

#index .mapblock .sp-tab-link[data-tab="life"] {
  width: 30.24%;
  bottom: 7.855%;
  left: 40.726%;
}

#index .mapblock .sp-tab-link[data-tab="challenge"] {
  width: 34.8%;
  top: -1px;
  right: 10.6%;
}

#index .mapblock .sp-tab-link[data-tab="women"] {
  width: 33.94%;
  bottom: 11.52%;
  left: 1px;
}

#index .mapblock .sp-tab-link[data-tab="global"] {
  width: 20.98%;
  bottom: 0;
  left: 75.28%;
}

#index .mapblock .sp-tab-link[data-tab="work"] {
  width: 22.5%;
  top: 16.7%;
  left: 37.5%;
}

#index .mapblock .service {
  position: absolute;
  width: fit-content;
  filter: drop-shadow(0px 0 6px rgba(255, 255, 255));
  cursor: pointer;
  z-index: 0;
}

#index .mapblock .service-cat {
  position: absolute;
  width: fit-content;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 0;
}

#index .mapblock .service-cat {
  animation: scaleAnime 1.5s ease-in-out infinite alternate-reverse;
}

#index .mapblock .service:hover {
  animation: upDownAnime 1s ease-in-out infinite alternate-reverse;
}

#index .mapblock .service.-hoverAnimeSide:hover {
  animation: leftRightnAnime 1s ease-in-out infinite alternate-reverse;
}

@keyframes scaleAnime {
  0% {
    transform: scale(0.9, 0.9);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes upDownAnime {
  0% {
    transform: translateY(-8%);
  }

  100% {
    transform: translateY(8%);
  }
}

@keyframes leftRightnAnime {
  0% {
    transform: translateX(-3%);
  }

  100% {
    transform: translateX(3%);
  }
}

#index .mapblock .service-cat:hover {
  animation-play-state: paused;
}

#index .mapblock :is(.service,.service-cat) a:hover {
  text-decoration: unset;
}

@media screen and (max-width: 1050px) {
  #index .mapblock :is(.service,.service-cat) {
    display: none;
  }
}

#index.index-mobile .mapblock :is(.service,.service-cat) {
  display: none;
}

#index .mapblock .service.active,
#index .mapblock .service-cat.active {
  z-index: 2;
}

#index .mapblock .service:nth-of-type(1) {
  top: 10%;
  left: 14%;
}

#index .mapblock .service:nth-of-type(2) {
  top: 4%;
  left: 9%;
}

#index .mapblock .service:nth-of-type(3) {
  top: 23%;
  left: 19%;
}

#index .mapblock .service:nth-of-type(4) {
  bottom: 30%;
  right: 32.5%;
}

#index .mapblock .service:nth-of-type(5) {
  bottom: 40%;
  left: 23%;
}

#index .mapblock .service:nth-of-type(6) {
  top: 17%;
  right: 11%;
}

#index .mapblock .service:nth-of-type(7) {
  top: 21%;
  right: 22%;
}

#index .mapblock .service:nth-of-type(8) {
  top: 34%;
  right: 9%;
}

#index .mapblock .service:nth-of-type(9) {
  top: 33%;
  left: 34%;
}

#index .mapblock .service:nth-of-type(10) {
  top: 33%;
  right: 34%;
}

#index .mapblock .service:nth-of-type(11) {
  bottom: 27%;
  right: 9%;
}

#index .mapblock .service-cat.transport {
  top: 41%;
  left: 2%;
}

#index .mapblock .service-cat.it {
  top: 6%;
  right: -2%;
}

#index .mapblock .service-cat.life {
  bottom: 12%;
  left: 42%;
}

#index .mapblock .service.-diversity {
  top: 42%;
  right: 41%;
}

#index .mapblock .service.-training {
  top: 42%;
  right: 28%;
}

#index .mapblock .service.-welfare {
  bottom: 42%;
  right: 30%;
}

#index .mapblock .service-cat .cat-txt {
  font-size: clamp(2.4rem, 35/1280*100vw, 3.5rem);
  font-weight: 400;
  color: #fff;
  text-align: end;
  line-height: 1;
}

#index .mapblock .service .linkbox.-right {
  transform: translate(0, -50%);
  top: 50%;
  left: 0;
}

#index .mapblock .service .linkbox.-left {
  transform: translate(0, -50%);
  top: 50%;
  right: 0;
}

#index .mapblock .service .linkbox.-top {
  transform: translate(-50%, 0);
  bottom: 0;
  left: 50%;
}

#index .mapblock .service .linkbox.-bottom {
  transform: translate(-50%, 0);
  top: 0;
  left: 50%;
}

#index .mapblock .service .linkbox::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.5px 12px 6.5px 0;
  transition: opacity ease .3s;
}

#index .mapblock .service.-transport .linkbox::before {
  border-color: transparent #4BA900 transparent transparent;
}

#index .mapblock .service.-it .linkbox::before {
  border-color: transparent #005798 transparent transparent;
}

#index .mapblock .service.-life .linkbox::before {
  border-color: transparent #FF7F28 transparent transparent;
}

#index .mapblock .service.-other .linkbox::before {
  border-color: transparent #018802 transparent transparent;
}

#index .mapblock .service .linkbox.-right::before {
  transform: translate(-100%, -50%);
  top: 50%;
  left: 0;
}

#index .mapblock .service .linkbox.-left::before {
  transform: translate(100%, -50%) rotate(180deg);
  top: 50%;
  right: 0;
}

#index .mapblock .service .linkbox.-top::before {
  transform: translate(-50%, 100%) rotate(-90deg);
  bottom: 2px;
  left: 50%;
}

#index .mapblock .service.-challenge .linkbox.-bottom::before {
  left: 21.43%;
}

#index .mapblock .service.-woman .linkbox.-bottom::before {
  left: 64.29%;
}

#index .mapblock .service.-big-data .linkbox.-bottom::before {
  left: 35.06%;
}

#index .mapblock .service .linkbox.-bottom::before {
  transform: translate(-50%, -100%) rotate(90deg);
  top: 1px;
  left: 50%;
}

#index .mapblock .service .linkbox .linkbox-inner {
  width: 100%;
  display: block;
  background-color: #fff;
  padding: 5px 5px 6px;
  transition: opacity ease .3s;
}

#index .mapblock .service.-transport .linkbox-inner {
  border: 2px solid #4BA900;
}

#index .mapblock .service.-it .linkbox-inner {
  border: 2px solid #005798;
}

#index .mapblock .service.-life .linkbox-inner {
  border: 2px solid #FF7F28;
}

#index .mapblock .service.-other .linkbox-inner {
  border: 2px solid #018802;
}

#index .mapblock .service-cat .linkbox .linkbox-inner {
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 8px 18px 6px;
  transition: opacity ease .3s;
}

#index .mapblock .service-cat.transport .linkbox .linkbox-inner {
  background: linear-gradient(135deg, #308500, #7AC843);
}

#index .mapblock .service-cat.it .linkbox .linkbox-inner {
  background: linear-gradient(135deg, #005798, #147DA0);
}

#index .mapblock .service-cat.life .linkbox .linkbox-inner {
  background: linear-gradient(135deg, #ff4b00, #ff921e);
}

#index .mapblock .service .linkbox .link-head {
  font-size: clamp(1rem, 12/1280*100vw, 1.2rem);
  font-weight: 500;
  line-height: 1;
  color: #000;
}

#index .mapblock .service-cat .linkbox .link-head {
  font-size: clamp(1.6rem, 21/1280*100vw, 2.1rem);
  font-weight: 400;
  line-height: 1;
}

#index .mapblock .service .linkbox .link-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  padding-top: 20px;
}

#index .mapblock .service-cat .linkbox .link-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

#index .click-menu {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

#index .click-menu.active {
  pointer-events: visible;
}

#index .click-menu .under-list {
  display: none;
  width: calc(420/1280*100vw);
  height: 100%;
  background-color: rgb(140, 196, 159, .9);
  padding: 158px 50px 100px 55px;
}

#index .click-menu .under-list .second+.second {
  margin-top: 16px;
}

#index .click-menu .under-list .under-link-ttl {
  width: fit-content;
  font-size: 1.8rem;
  color: #fff;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 6px 2px;
}

#index .click-menu .under-list .link {
  transition: opacity ease .3s;
}

#index .click-menu .under-list .link:hover {
  text-decoration: unset;
  opacity: .7;
}

#index .sp-link-list {
  display: none;
}

@media screen and (max-width: 1050px) {
  #index .sp-link-list {
    display: block;
  }
}

#index.index-mobile .sp-link-list {
  display: block;
}

#index .sp-link-container {
  display: none;
}

#index .sp-link-container.-active {
  display: block;
}

#index .sp-link-list .sp-link-block {
  margin: 90px auto 0;
}

#index .sp-link-list .sp-link-block:first-of-type {
  margin: 0 auto;
  padding-top: 45px;
}

#index .sp-link-list .sp-link-block .sp-link-img,
#index .sp-link-list .sp-link-block .sp-link-img img {
  width: 100%;
  display: block;
  transition: opacity ease .3s;
}

#index .sp-link-list .sp-link-block .sp-link-img:hover {
  opacity: .7;
}

#index .sp-link-list .sp-link-block .sp-link-textgroup {
  margin: 25px auto 0;
}

#index .sp-link-list .sp-link-block.cat .sp-link-textgroup {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: unset;
  color: #fff;
  padding: 30px;
  transition: opacity ease .3s;
}

@media screen and (max-width: 1050px) {
  #index .sp-link-list .sp-link-block.cat .sp-link-textgroup {
    padding: 31px 7.045% 27px;
  }
}

#index .sp-link-list .sp-link-block.cat .sp-link-textgroup:hover {
  opacity: .7;
}

#index .sp-link-list .sp-link-block.cat .sp-link-textgroup .icon-arrow {
  position: relative;
  width: 36px;
  height: 36px;
  display: block;
  border: 1px solid #fff;
  border-radius: 50%;
}

#index .sp-link-list .sp-link-block.cat .sp-link-textgroup .icon-arrow::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
  transform: translateY(-50%);
  top: 50%;
  left: 43%;
}

#index .sp-link-list .sp-link-block.cat.-l-green .sp-link-textgroup {
  background-color: #7ac843;
}

#index .sp-link-list .sp-link-block.cat.-orange .sp-link-textgroup {
  background-color: #FF921E;
}

#index .sp-link-list .sp-link-block.cat.-blue .sp-link-textgroup {
  background-color: #147DA0;
}

#index .sp-link-block .sp-link-textgroup .group {
  width: fit-content;
  font-size: 2.1rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  padding: 8px 10px 5px;
}

#index .sp-link-block.-l-green .sp-link-textgroup .group {
  background-color: #7ac843;
}

#index .sp-link-block.-orange .sp-link-textgroup .group {
  background-color: #ff921e;
}

#index .sp-link-block.-blue .sp-link-textgroup .group {
  background-color: #147da0;
}

#index .sp-link-block.-dk-green .sp-link-textgroup .group {
  background-color: #008803;
}

#index .sp-link-block .sp-link-textgroup .head {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
  padding-top: 15px;
  transition: opacity ease .3s;
}

#index .sp-link-block .sp-link-textgroup .head:hover {
  text-decoration: none;
  opacity: .7;
}

#index .sp-link-block.-l-green .sp-link-textgroup .head {
  color: #7ac843;
}

#index .sp-link-block.-orange .sp-link-textgroup .head {
  color: #ff921e;
}

#index .sp-link-block.-blue .sp-link-textgroup .head {
  color: #147da0;
}

#index .sp-link-block.-dk-green .sp-link-textgroup .head {
  color: #008803;
}

#index .sp-link-block.cat .sp-link-textgroup .head {
  font-size: 3.5rem;
  font-weight: 400;
  color: #fff;
  flex: 1;
  padding: unset;
}

#index .sp-link-block .sp-link-textgroup .text {
  font-size: 1.4rem;
  font-weight: 400;
  padding-top: 18px;
}

#index .sp-link-block .sp-link-textgroup .text .sublink {
  width: fit-content;
  font-weight: bold;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  transition: opacity ease .3s;
}

#index .sp-link-block.-dk-green .sp-link-textgroup .text .sublink {
  color: #008803;
}

#index .sp-link-block .sp-link-textgroup .text .sublink:hover {
  text-decoration: none;
  opacity: .6;
}

#index .sp-link-block .sp-link-textgroup .text .sublink+.sublink {
  margin-top: 10px;
}

#index .sp-link-list .sp-link-block .-nolink:hover {
  opacity: 1;
}

#index .news-box {
  position: absolute;
  max-width: 340px;
  font-size: 1.2rem;
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
  padding: 12px;
  bottom: 3.705%;
  left: 1.477%;
}

@media screen and (max-width: 1050px) {
  #index .news-box {
    position: initial;
    width: 95.24%;
    margin: 0 auto;
  }
}

#index .news-box .-wb {
  display: inline-block;
}

#index .news-box .news-ttl {
  font-weight: 700;
  color: #008803;
  border-bottom: 1px solid #008803;
  padding-bottom: 8px;
}

#index .news-box .news-inner {
  margin-top: 10px;
}

#index .news-box .item .date {
  font-weight: 700;
  color: #008803;
  margin-bottom: 5px;
}

#index .news-box .item .txt {
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 5px;
}

#index .news-box .item .txt .link {
  color: inherit;
  text-decoration: underline;
}

#index .news-box .item .txt .link:hover {
  text-decoration: unset;
}

/* ↑↑↑ #index ↑↑↑ */

footer {
  position: relative;
}