@charset "UTF-8";
.contents {
  overflow: hidden;
}

.main-img {
  padding-top: 280px;
  padding-bottom: 280px;
  background: url(/100th/images/towards/bg.jpg) no-repeat center center/cover;
}
.main-img .copy-text {
  width: 63%;
  margin-left: auto;
  margin-right: auto;
  max-width: 886px;
}

.sec-box {
  padding-top: 30px;
  border-top: 1px solid #231815;
}
.sec-box.first {
  border-top: 0;
}
.sec-box.ex {
  padding-top: 0;
  border-top: 0;
}

.head-boxab {
  position: relative;
}
.head-boxab.ex {
  background: url(/100th/images/towards/rain_bg.jpg) no-repeat center center/cover;
  padding-top: 52px;
  padding-bottom: 52px;
  border-bottom: 0;
  border-top: 0;
}

.textsliderbox {
  width: 100%;
  z-index: 2;
  position: relative;
}
.textsliderbox p {
  font-size: 9vw;
  line-height: 1;
  padding-left: 8%;
  padding-right: 8%;
  width: 100%;
  font-weight: 700;
  padding-bottom: 0;
}
.textsliderbox img {
  max-height: 156px;
  width: auto;
  display: block;
  vertical-align: bottom;
}
.textsliderbox.ex .d-demo__item {
  width: 163.3333333333vw;
}
.textsliderbox.ex p {
  padding-left: 12%;
  padding-right: 12%;
}
.textsliderbox.ex2 .d-demo__item {
  width: 233.3333333333vw;
}
.textsliderbox.ex2 p {
  padding-left: 16%;
  padding-right: 16%;
}

.h-copy-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.1em;
}
.h-copy-text.ex {
  font-size: 41px;
}

/*.textsliderbox .slick-slide{
	width: 180%!important;
}*/
@-webkit-keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}

/*----------------------------*/
.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left {
  -webkit-animation: infinity-scroll-left 155s infinite linear 0s both;
          animation: infinity-scroll-left 155s infinite linear 0s both;
}

.d-demo__item {
  width: 120vw;
}

.d-demo__item > img {
  width: 100%;
}

.head-boxab {
  margin-bottom: 14px;
}

.sub-copy {
  margin-bottom: 60px;
  text-align: center;
  line-height: 1.71;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.red-copy {
  margin-bottom: 45px;
  font-size: 60px;
  line-height: 1;
  color: #AF1C3B;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.text-box {
  padding-bottom: 66px;
  line-height: 2.12;
}

.flex-list {
  max-width: 916px;
  width: 100%;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  display: flex;
  justify-content: space-between;
  padding-bottom: 80px;
}
.flex-list li {
  width: 20%;
  text-align: center;
}
.flex-list li .icon {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
}

.img-box {
  width: 100%;
  max-width: 736px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px;
}

@media only screen and (max-width: 900px) {
  .main-img {
    padding-top: 26vw;
    padding-bottom: 26vw;
    background: url(/100th/images/towards/bg.jpg) no-repeat center center/cover;
  }
  .main-img .copy-text {
    width: 63%;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
  }
  .sec-box {
    padding-top: 3.65vw;
  }
  .head-boxab {
    position: relative;
  }
  .head-boxab.ex {
    background: url(/100th/images/towards/rain_bg_sp.jpg) no-repeat center center/cover;
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
  .textsliderbox {
    width: 100%;
    z-index: 2;
    position: relative;
  }
  .textsliderbox p {
    font-size: 9vw;
    line-height: 1;
    padding-left: 4%;
    padding-right: 4%;
    width: 100%;
    font-weight: 700;
    padding-bottom: 0;
  }
  .textsliderbox img {
    max-height: 16vw;
    width: auto;
    display: block;
    vertical-align: bottom;
  }
  .textsliderbox.ex .d-demo__item {
    width: 233.3333333333vw;
  }
  .textsliderbox.ex p {
    padding-left: 12%;
    padding-right: 12%;
  }
  .textsliderbox.ex2 .d-demo__item {
    width: 333.3333333333vw;
  }
  .textsliderbox.ex2 p {
    padding-left: 16%;
    padding-right: 16%;
  }
  .h-copy-text {
    z-index: 3;
    font-size: 3.33vw;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .h-copy-text.ex {
    font-size: 4.3vw;
    width: 100%;
  }
  .d-demo__item {
    width: 200vw;
  }
  .d-demo__item > img {
    width: 100%;
  }
  .head-boxab {
    margin-bottom: 3vw;
  }
  .sub-copy {
    margin-bottom: 7.2vw;
    text-align: center;
    line-height: 1.71;
    font-size: 3.65vw;
  }
  .red-copy {
    margin-bottom: 6vw;
    font-size: 6.4vw;
  }
  .text-box {
    padding-bottom: 6.5vw;
    line-height: 2.12;
  }
  .flex-list {
    max-width: none;
    width: 100%;
    margin-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    line-height: 2.12;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 8.85vw;
  }
  .flex-list li {
    width: 46%;
    text-align: center;
    margin-top: 7vw;
  }
  .flex-list li .icon {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.3vw;
  }
  .img-box {
    width: 96%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8vw;
  }
}
.gr-box {
  position: relative;
  z-index: 1;
  /*background: linear-gradient(to bottom, #D9DFEA, #EDF1F5);
  background: -webkit-linear-gradient(top, #D9DFEA, #EDF1F5);
  background: -moz-linear-gradient(top, #D9DFEA, #EDF1F5);*/
  background: url(/100th/images/towards/human-bg.jpg) no-repeat center center/cover;
  margin-bottom: 0px;
  bottom: 0px;
  padding-top: 123px;
  padding-bottom: 55px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gr-box .yajirushi {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 30px;
  transition: 1s;
  -webkit-transition: 1s; /* Chrome、Safari用 */
  -moz-transition: 1s; /* Firefox用 */
  -o-transition: 1s; /* Opera用 */
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}
.gr-box .yajirushi p {
  position: absolute;
  top: -35px;
  width: 50px;
  text-align: center;
  left: -12px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.gr-box .yajirushi.off {
  opacity: 0;
  pointer-events: none;
}
.gr-box .gr-flex {
  transition: all 0.8s ease;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1090px;
  pointer-events: none;
  min-height: 500px;
  align-items: center;
}
.gr-box .gr-flex.on {
  min-height: inherit;
}
.gr-box .gr-flex .pic {
  transition: all 0.8s ease;
  position: absolute;
  padding-top: 0%;
  bottom: 0;
  left: 0%;
  right: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.gr-box .gr-flex .pic.off {
  padding-top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.gr-box .gr-flex .pic .human-img {
  width: 100%;
  text-align: center;
}
.gr-box .gr-flex .pic .human-img img {
  margin-bottom: -530px;
  margin-left: 4.5%;
}
.gr-box .gr-flex .pic.on {
  width: 46%;
  position: relative;
  left: auto;
  right: auto;
  transition: all 0.8s ease;
}
.gr-box .gr-flex .pic.on img {
  margin-bottom: 0%;
  width: 120%;
  max-width: none;
  margin-left: -10%;
  margin-right: -10%;
  margin-bottom: 0;
}
.gr-box .gr-flex .pic.on2 {
  position: relative;
  left: auto;
  right: auto;
  transition: all 0.8s ease;
}
.gr-box .gr-flex .pic.on2 .human-img img {
  width: 120%;
  max-width: none;
  margin-left: -10%;
  margin-right: -10%;
  margin-bottom: 0;
}
.gr-box .gr-flex .pic.fadeoff {
  opacity: 0;
}
.gr-box .gr-flex .text {
  transition: all 0.8s ease;
  opacity: 0;
  pointer-events: none;
  width: 52%;
  margin-right: -2%;
  height: 0;
}
.gr-box .gr-flex .text.on {
  opacity: 1;
  width: 52%;
  pointer-events: all;
  height: 100%;
}
.gr-box .gr-flex .text #scrollable-content {
  height: 434px; /* スクロール可能な高さを設定 */
  overflow-y: scroll; /* スクロールバーを表示 */
}
.gr-box .gr-flex .text #scrollable-content p {
  font-weight: 400;
}
.gr-box .gr-flex .text #scroll-up-button,
.gr-box .gr-flex .text #scroll-down-button {
  display: block;
  margin: 10px auto;
  width: 26px;
  background: none;
  border: none;
  cursor: pointer;
}
.gr-box .gr-flex .text #scroll-up-button.hidden,
.gr-box .gr-flex .text #scroll-down-button.hidden {
  display: none;
}

.name-flex1 {
  display: flex;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  margin-bottom: 0px;
  padding-top: 0px;
  height: 100%;
  opacity: 1;
  align-items: center;
}
.name-flex1 li {
  width: 24%;
}
.name-flex1.off {
  opacity: 0;
  height: 0;
}

.name-flex2 {
  display: flex;
  max-width: 86%;
  margin-left: -5%;
  margin-right: auto;
  justify-content: space-between;
  margin-top: 10px;
  height: 100%;
  opacity: 1;
}
.name-flex2 li {
  width: 24%;
}
.name-flex2 li:first-child {
  margin-left: 12%;
}
.name-flex2.off {
  opacity: 0;
  height: 0;
}

.close-wrap {
  padding-top: 26px;
  text-align: center;
  border-top: 2px solid #000;
  cursor: pointer;
}

@media only screen and (max-width: 900px) {
  .gr-box {
    background: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0vw;
    bottom: 0vw;
  }
  .gr-bg {
    z-index: 1;
    background: url(/100th/images/towards/human-bg.jpg) no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    padding-top: 7.6vw;
    transition: all 0.8s ease;
    height: 66vw;
    margin-bottom: 0vw;
    bottom: 0vw;
  }
  .gr-bg.on {
    height: 90vw;
  }
  .gr-bg .human-img img {
    width: 140%;
    margin-left: -13%;
    margin-right: -20%;
    max-width: none;
  }
  .gr-bg .sp-yajirushi {
    position: absolute;
    bottom: 4vw;
    left: 0;
    right: 0;
    width: 7%;
    transition: all 0.8s ease;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .gr-bg .sp-yajirushi p {
    position: absolute;
    top: -5vw;
    width: 18vw;
    text-align: center;
    left: -6vw;
    right: 0;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
  }
  .gr-bg .sp-yajirushi.off {
    opacity: 0;
    pointer-events: none;
  }
  .name-flex1 {
    display: flex;
    max-width: 82%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    margin-bottom: 1vw;
    height: 100%;
    padding-top: 0;
    opacity: 1;
    align-items: center;
  }
  .name-flex1 li {
    width: 24%;
  }
  .expand {
    max-height: 8em;
    overflow: hidden;
    position: relative;
    transition: 0.5s;
  }
  .expand::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    transition: 1s;
  }
  .sp-text {
    display: none;
    padding-top: 5vw;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .sp-text label {
    position: absolute;
    bottom: 0.1em;
    display: block;
    font-size: 0.9em;
    padding: 0.2em 10px;
    right: 0;
    background: #aaa;
    color: white;
    z-index: 999;
    cursor: pointer;
    text-transform: uppercase;
  }
  .sp-text input {
    visibility: hidden;
  }
  .sp-text label:before {
    content: "続きを読む";
  }
  .sp-text input:checked + label:before {
    content: "閉じる";
  }
  .contenedor {
    display: table;
    margin: 0px auto;
    position: relative;
  }
  input[type=checkbox]:checked ~ .expand {
    max-height: 250vw;
    padding-bottom: 4vw;
  }
  input[type=checkbox]:checked ~ .expand:before {
    opacity: 0;
  }
}
@media print, screen and (min-width: 901px) {
  .name-flex1 li:first-child {
    margin-left: 2%;
  }
  .name-flex1 li:last-child {
    margin-right: 7%;
  }
}
@media only screen and (min-width: 901px) and (max-width: 1300px) {
  .name-flex1 {
    width: 62%;
    padding-left: 3%;
  }
}
@media only screen and (max-width: 900px) {
  .news-ttlimg {
    width: 12%;
    margin-bottom: 4.5vw;
    padding-top: 4vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .pc-inline {
    display: none;
  }
}
.menu-link-1 a {
  background: #AF1C3B;
  color: #fff !important;
}
/*# sourceMappingURL=towards.css.map */