@charset "utf-8";

/* MAIN KEY */
.main_key {
  background-color: #010101;
  height: 100vh;
}

@keyframes svg {
  0% {
    fill:transparent;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
  }
  80%{
    fill:transparent;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 0;
  }
  100%{
    fill: #fff;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 0;
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes showUp {
  0% {
    transform: translateY(150%);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(5em);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showLeft {
  0% {
    transform: translateX(-120%);
  }
  100%{
    transform: translateX(0);
  }
}

#svg_logo {
  width: 54vh;
  max-width: 30%;
  height: auto;
  max-height: 97%;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  stroke: #eee;
  fill: #fff;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1px;
  animation: svg 1.2s ease-in 0s both;
}
_:-ms-lang(x)::-ms-backdrop, #svg_logo {
  animation: opa 1.2s ease-in 0s both;
}
.main_key .wrap_text {
  z-index: 2;
  position: fixed;
  right: 1em;
  bottom: 0;
  width: 55%;
  padding-top: 24%;
}
.main_key .wrap_text .box_hidden {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 34%;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .main_key .wrap_text a.box_hidden > svg {
    transition: .4s;
  }
}
.main_key .wrap_text a.box_hidden:hover > svg,
.main_key .wrap_text a.box_hidden:focus > svg {
  opacity: .7;
}
.main_key .wrap_text .box_hidden:nth-child(1) {
  top: 0;
}
.main_key .wrap_text .box_hidden:nth-child(2) {
  top: 34%;
}
.main_key .wrap_text .box_hidden:nth-child(3) {
  bottom: 0;
}
.main_key .wrap_text .box_hidden > * {
  transform: translateY(150%);
  animation: showUp .3s ease-in 1.3s both;
}
.main_key .wrap_text .box_hidden:nth-child(2) > * {
  animation-delay: 1.4s;
}
.main_key .wrap_text .box_hidden:nth-child(3) > * {
  animation-delay: 1.5s;
}
#svg_text01,
#svg_text02,
#svg_text03 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  stroke: #eee;
  fill: #fff;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1px;
}
#svg_text02 {
  margin: auto;
}
#svg_text03 {
  margin-top: auto;
}
.main_key .scroll_arrow {
  z-index: 1;
  position: fixed;
  right: 62%;
  bottom: 3%;
  width: 7vw;
  animation: opa .4s ease-in 2s both;
}
.main_key .scroll_arrow > a {
  display: block;
}
.main_key .scroll_arrow > a:hover,
.main_key .scroll_arrow > a:focus {
  opacity: .7;
}

@media screen and (max-width: 991px) {
  #svg_logo {
    max-width: 45%;
    stroke: #ddd;
    stroke-width: 2px;
  }
  .main_key .wrap_text {
    width: 70%;
    padding-top: 30%;
  }
  #svg_text01,
  #svg_text02,
  #svg_text03 {
    stroke: #ddd;
    stroke-width: 2px;
  }
  .main_key .scroll_arrow {
    display: none;
    /*right: 72%;
    width: 9vw;*/
  }
}



/* MAIN CONTENTS */
#main_contents,
.footer {
  position: relative;
  z-index: 3;
}


/* site list */
.sitelist_wrap {
  padding-top: 24em;
  padding-bottom: 24em;
}

.ttl_bdb {
  margin-bottom: .56em;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  font-size: 16rem;
  color: #010101;
  line-height: 1;
}
.ttl_bdb > span {
  position: relative;
  display: inline-block;
  padding-bottom: .1em;
}
.ttl_bdb > span::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #010101;
}
.ttl_bdb > span > span {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.ttl_bdb > span > span > span {
  display: inline-block;
  transform: translateX(-120%);
}

.scrolled.ttl_bdb > span::before {
  height: 0.0625em;
}
.scrolled.ttl_bdb > span > span > span {
  animation: showLeft .3s ease-in both;
}

.title01.ttl_bdb > span::before {
  transition: .3s .6s;
}
.title01.ttl_bdb > span > span:nth-child(1) > span {
  animation-delay: 0s;
}
.title01.ttl_bdb > span > span:nth-child(2) > span {
  animation-delay: .03s;
}
.title01.ttl_bdb > span > span:nth-child(3) > span {
  animation-delay: .06s;
}
.title01.ttl_bdb > span > span:nth-child(4) > span {
  animation-delay: .09s;
}
.title01.ttl_bdb > span > span:nth-child(5) > span {
  animation-delay: .12s;
}
.title01.ttl_bdb > span > span:nth-child(6) > span {
  animation-delay: .15s;
}
.title01.ttl_bdb > span > span:nth-child(7) > span {
  animation-delay: .18s;
}
.title01.ttl_bdb > span > span:nth-child(8) > span {
  animation-delay: .21s;
}
.title01.ttl_bdb > span > span:nth-child(9) > span {
  animation-delay: .24s;
}
.title01.ttl_bdb > span > span:nth-child(10) > span {
  animation-delay: .27s;
}

.title02.ttl_bdb > span::before {
  transition: .3s .5s;
}
.title02.ttl_bdb > span > span:nth-child(1) > span {
  animation-delay: 0s;
}
.title02.ttl_bdb > span > span:nth-child(2) > span {
  animation-delay: .04s;
}
.title02.ttl_bdb > span > span:nth-child(3) > span {
  animation-delay: .08s;
}
.title02.ttl_bdb > span > span:nth-child(4) > span {
  animation-delay: .12s;
}
.title02.ttl_bdb > span > span:nth-child(5) > span {
  animation-delay: .16s;
}
.title02.ttl_bdb > span > span:nth-child(6) > span {
  animation-delay: .2s;
}

.site_list > .item + .item {
  margin-top: 9.3em;
}
.site_list > .item > a {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  min-height: 22em;
  margin-bottom: 5.7em;
  padding: 3em 0;
}
_:-ms-lang(x)::-ms-backdrop, .site_list > .item > a {
  height: 22em;
}
.site_list > .item > a .wrap_ofi {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  padding-top: 0;
  overflow: hidden;
}
.site_list > .item > a .wrap_ofi > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  backface-visibility: hidden;
}
@media screen and (min-width: 992px) {
  .site_list > .item > a .wrap_ofi > div > img {
    transition: .4s;
  }
}

.site_list > .item > a:hover .wrap_ofi > div > img,
.site_list > .item > a:focus .wrap_ofi > div > img {
  transform: scale(1.1);
}
.site_list > .item > a .title {
  position: relative;
  margin-left: 2.3em;
  padding-bottom: .1em;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  font-size: 10rem;
  color: #010101;
  line-height: 1;
  overflow: hidden;
}
.site_list > .item > a .title::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: .5rem;
  background-color: #010101;
}
@media screen and (min-width: 992px) {
  .site_list > .item > a .title::before {
    transition: .4s;
  }
}
.site_list > .item > a:hover .title::before,
.site_list > .item > a:focus .title::before {
  width: 100%;
}
.site_list > .item > a .title > span {
  display: inline-block;
  transform: translateY(150%);
}
.site_list > .item > a .link_view {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.link_view {
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  font-size: 3rem;
  color: #010101;
  line-height: 1;
  letter-spacing: .1rem;
}
@media screen and (min-width: 992px) {
  .link_view {
    transition: .4s;
  }
}
.link_view > span {
  position: relative;
  padding-right: 2.2em;
}
.link_view > span::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.56em;
  height: 1.2em;
  background: url('../Image/main/arrow_r.png') center/contain no-repeat;
}
@media screen and (min-width: 992px) {
  .link_view > span::before {
    transition: .4s;
  }
}
a:hover .link_view,
a:focus .link_view,
.link_view:hover,
.link_view:focus {
  letter-spacing: .4rem;
}
a:hover .link_view > span::before,
a:focus .link_view > span::before,
.link_view:hover > span::before,
.link_view:focus > span::before {
  right: -3%;
}

.site_list > .item > a .wrap_ofi > div {
  transition: .5s .8s ease-out;
}
.site_list > .item > a .link_view {
  transition: opacity .5s 1.3s ease;
}
@media screen and (min-width: 992px) {
  .site_list > .item > a .link_view {
    transition: .4s, opacity .5s 1.3s ease;
  }
}
.site_list > .item.scrolled > a .wrap_ofi > div {
  width: 100%;
}
.site_list > .item.scrolled > a .title > span {
  animation: showUp .3s ease-in .45s both;
}
.site_list > .item.scrolled > a .link_view {
  opacity: 1;
}

.ul_sitelink {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: -2.85em;
  margin-right: -2.85em;
}
.ul_sitelink > li {
  width: 50%;
  padding: 0 2.85em;
}
.ul_sitelink > li + li {
  margin-top: 5.7em;
}
.ul_sitelink > li > a {
  display: block;
  height: 100%;
  opacity: 0;
}
.ul_sitelink > li > a > .site_img {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding-top: 58%;
}
.ul_sitelink > li > a > .site_img > * {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  padding-top: 0;
}
.ul_sitelink > li > a > .site_img .img_pc {
  left: 0;
}
.ul_sitelink > li > a > .site_img .img_sp {
  right: 0;
}
.ul_sitelink > li > a > .site_img .img_pc {
  width: 71.75%;
}
.ul_sitelink > li > a > .site_img .img_sp {
  width: 26.75%;
}
.ul_sitelink > li > a > .site_img > *::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0 solid #010101;
}
@media screen and (min-width: 992px) {
  .ul_sitelink > li > a > .site_img > *::before {
    transition: border-width .2s ease-in-out;
  }
}
.ul_sitelink > li > a:hover > .site_img > *::before,
.ul_sitelink > li > a:focus > .site_img > *::before {
  border-width: .5rem;
}
.ul_sitelink > li > a .site_ttl {
  padding: 1em 0;
  font-weight: 500;
  letter-spacing: .05rem;
}

.scrolled .ul_sitelink > li > a {
  animation: fadeUp .5s ease-out 1.7s both;
}
.scrolled .ul_sitelink > li + li > a {
  animation-delay: 2s;
}

@media screen and (max-width: 1399px) {
  .ttl_bdb {
    font-size: 12rem;
  }

  .site_list > .item > a .title {
    font-size: 8rem;
  }
}
@media screen and (max-width: 991px) {
  .sitelist_wrap {
    padding-top: 10em;
    padding-bottom: 10em;
  }

  .ttl_bdb {
    font-size: 13vw;
  }

  .site_list > .item + .item {
    margin-top: 4.5em;
  }
  .site_list > .item > a {
    justify-content: center;
    margin-bottom: 3em;
    min-height: 18em;
  }
  .site_list > .item > a .wrap_ofi {
    width: 50%;
  }
  .site_list > .item > a .title {
    margin-left: 0;
    font-size: 8vw;
  }

  .link_view {
    font-size: 2.2rem;
  }

  .ul_sitelink {
    margin-left: -1.5%;
    margin-right: -1.5%;
  }
  .ul_sitelink > li {
    padding: 0 1.5%;
  }
  .ul_sitelink > li + li {
      margin-top: 3em;
  }
}
@media screen and (max-width: 767px) {
  .site_list > .item > a .wrap_ofi {
    width: 100%;
  }

  .site_list > .item > a {
    margin-bottom: 5em;
  }
  .site_list > .item > a .title {
    padding: .1em .3em;
    text-shadow: 0 0 1em #fff;
  }
  .site_list > .item > a .link_view {
    bottom: -1.8em;
  }
}
@media screen and (max-width: 575px) {
  .site_list > .item > a {
    min-height: 15em;
  }
}



/* column */
.ul_column {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-start;
  margin-left: -2.85em;
  margin-right: -2.85em;
}
.ul_column > li {
  width: 33.3333%;
  padding: 0 2.85em;
}
.ul_column > li > a {
  display: block;
  opacity: 0;
}
.ul_column > li > a .wrap_ofi {
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .ul_column > li > a .wrap_ofi > img {
    transition: .4s;
  }
}

.ul_column > li > a:hover .wrap_ofi > img,
.ul_column > li > a:focus .wrap_ofi > img {
  transform: scale(1.1);
}
.ul_column > li > a .ttl {
  position: relative;
  padding: 1em 0 .5em;
  font-weight: 500;
  font-size: 1.6rem;
}
.ul_column > li > a .ttl::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: .1rem;
  background-color: #010101;
}
@media screen and (min-width: 992px) {
  .ul_column > li > a .ttl::before {
    transition: .4s;
  }
}
.ul_column > li > a:hover .ttl::before,
.ul_column > li > a:focus .ttl::before {
  width: 6em;
}

.box_morelink {
  margin-top: 5.7em;
  text-align: right;
  opacity: 0;
  transition: .5s 1.8s;
}

.ul_column.scrolled  > li > a {
  animation: fadeUp .5s ease-out .6s both;
}
.ul_column.scrolled > li:nth-child(2) > a {
  animation-delay: .9s;
}
.ul_column.scrolled > li:nth-child(3) > a {
  animation-delay: 1.2s;
}

.scrolled + .box_morelink {
  opacity: 1;
}


@media screen and (max-width: 991px) {
  .ul_column {
    margin-left: -1.5%;
    margin-right: -1.5%;
  }
  .ul_column > li {
    padding: 0 1.5%;
  }
  .ul_column > li > a .ttl {
    font-size: 1.3rem;
  }

  .box_morelink {
    margin-top: 3em;
  }
}
@media screen and (max-width: 767px) {
  .ul_column > li {
    width: 50%;
  }
  .ul_column > li:last-child {
    display: none;
  }
}


/* footer */
.footer {
  padding-top: 13em;
  padding-bottom: 6em;
}
.footer .copyright {
  text-align: center;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 991px) {
  .footer {
    padding-top: 6em;
    padding-bottom: 3em;
  }
}