/*--------------------
base
--------------------*/
h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.8;
}
h2::before {
  display: block;
  content: attr(data-text);
  font-size: var(--headingBefore-font-size);
  font-weight: 400;
  font-family: "Federo", sans-serif;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin-top: 4px;
}
@media screen and (max-width: 600px) {
  h2::before {
    font-size: 3rem;
    line-height: 1;
  }
}



/*--------------------
top
--------------------*/
#top .inner {
  padding-top: 128px;
  padding-bottom: 243px;
}
#top h1 {
  text-align: center;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.8;
}
#top h1::before {
  display: block;
  content: "Nanofiber,\Athe Material of the Future";
  white-space: pre;
  font-family: "Federo", sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  margin-bottom: 33px;
}
#top .d-sp {
  display: none;
}
@media screen and (max-width: 1080px) {
  #top h1::before {
    content: "Nanofiber,\Athe Material\Aof the Future";
  }
}
@media screen and (max-width: 600px) {
  #top .inner {
    padding-top: 44px;
    padding-bottom: 105px;
  }
  #top h1 {
    font-size: 1.25rem;
  }
  #top h1::before {
    font-size: 3.75rem;
  }
  #top .d-sp {
    display: block;
  }
}



/*--------------------
middle
--------------------*/
#middle .inner {
  max-width: 1440px;
  padding-top: 127px;
  padding-bottom: 200px;
}
#middle .content {
  display: flex;
  justify-content: space-between;
}
#middle .left {
  width: 462.53px;
  height: 439px;
  background: url(../img/top/circle.png) no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
#middle .left p {
  text-align: center;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.8;
  padding-top: 162px;
}
#middle .right{
  width: 47.8472%;
}
@media screen and (max-width: 1100px) {
  #middle .inner {
    padding-top: 64px;
    padding-bottom: 153px;
  }
  #middle .content {
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  #middle .right {
    width: 90.2140%;
    margin-left: auto;
  }
}
@media screen and (max-width: 600px) {
  #middle .left {
    width: 354px;
    height: 336px;
  }
  #middle .left p {
    font-size: 1.25rem;
    padding-top: 100px;
  }
}



/*--------------------
blog
--------------------*/
#blog .inner {
  padding: 88px 0;
}
#blog h2 {
  text-align: center;
}
#blog .blogs {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 80px;
  margin-bottom: 57px;
}
#blog .blog {
  box-sizing: border-box;
  width: 31.4062%;
  padding: 32px;
  background-color: rgba(var(--darkBlue-rgb), 30%);
  border-radius: 8px;
}
#blog .blog ul {
  margin-bottom: 20px;
}
#blog .blog li {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 6px;
}
#blog .blog li a {
  font-size: 0.875rem;
  line-height: 1;
  padding: 6px 14.5px;
  background-color: var(--darkBlue);
  border-radius: 28px;
}
#blog .blog h3 {
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
  #blog .blogs {
    display: block;
    width: 87.2%;
  }
  #blog .blog {
    width: 100%;
  }
  #blog .blog:not(:first-child) {
    margin-top: 48px;
  }
}
@media screen and (max-width: 600px) {
  #blog .inner {
    padding-bottom: 154px;
  }
  #blog .blogs {
    margin-top: 31px;
    margin-bottom: 55px;
  }
}



/*--------------------
about
--------------------*/
#about .inner {
  display: flex;
  padding-top: 117px;
  padding-bottom: 88px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
#about .left {
  width: 49.5833%;
  background-color: rgba(var(--darkBlue-rgb), 0.3);
}
#about .content {
  padding-top: 77px;
  padding-bottom: 97px;
  padding-left: 11.2044%;
}
#about h2 {
  margin-bottom: 133px;
}
#about h2::before {
  content: "About\ANanofibers?";
  white-space: pre;
}
#about .right {
  max-width: 532px;
  padding-top: 110px;
}
#about h3 {
  font-size: var(--font-size-40);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 32px;
}
#about .d-1100_under {
  display: none;
}
@media screen and (min-width: 1920px) {
  #about .content {
    padding-left: 320px;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  #about .content {
    padding-left: calc((100vw - 1440px) / 2 + 80px);
  }
}
@media screen and (max-width: 1100px) {
  #about .inner {
    display: block;
  }
  #about .left {
    width: 93.6%;
    margin-bottom: 53px;
  }
  #about .content {
    padding-top: 56px;
    padding-bottom: 57px;
    padding-left: 24px;
  }
  #about h2 {
    margin-bottom: 0;
  }
  #about h2::before {
    max-width: 500px;
  }
  #about .right {
    max-width: 800px;
    padding-top: 0;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 60px;
  }
  #about .d-1100_over {
    display: none;
  }
  #about .d-1100_under {
    display: block;
  }
}
@media screen and (max-width: 1100px) {
  #about .inner {
    padding-top: 0;
    padding-bottom: 24px;
  }
}



/*--------------------
advantage
--------------------*/
#advantage .inner {
  padding-top: 81px;
  padding-bottom: 88px;
}
#advantage h2 {
  text-align: right;
  padding-right: 3.9583%;
  max-width: 1440px;
}
#advantage .left {
  max-width: 1440px;
  padding-left: 5.4861%;
  margin-bottom: 83px;
  /* text-align: left; */
}
#advantage .left p {
  max-width: 488px;
}
#advantage h3 {
  font-size: var(--font-size-40);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 32px;
}
#advantage .advantages {
  display: flex;
  justify-content: space-between;
  width: 82.9861%;
  max-width: 1593.3333px;
  margin-bottom: 64px;
}
#advantage .advantage {
  width: 28.8703%;
  border-radius: 8px;
  background-color: rgba(var(--darkBlue-rgb), 0.3);
}
#advantage h4 {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  border-radius: 8px 8px 0 0;
  padding: 25px 0;
}
#advantage .advantage1 h4 {
  background-color: rgba(59, 84, 209, 40%);
}
#advantage .advantage1 img,
#advantage .advantage3 img {
  opacity: 0.8;
}
#advantage .advantage2 h4 {
  background-color: rgba(44, 150, 237, 60%);
}
#advantage .advantage3 h4 {
  background-color: rgba(48, 170, 207, 60%);
}
#advantage img {
  width: 100%;
  object-fit: cover;
}
#advantage .description {
  width: 77.1015%;
  padding-top: 20px;
  padding-bottom: 22px;
}
@media screen and (max-width: 1440px) {
  #advantage .advantages {
    box-sizing: border-box;
    max-width: 1235px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1243px) {
  #advantage .inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  #advantage h2 {
    padding-right: 0;
  }
  #advantage .left {
    padding-left: 0;
  }
  #advantage .advantages {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 1000px) {
  #advantage .advantages {
    display: block;
  }
  #advantage .advantage {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #advantage .advantage:not(:last-child) {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 600px) {
  #advantage .inner {
    padding-bottom: 64px;
  }
  #advantage h2 {
    margin-bottom: 32.5px;
  }
  #advantage .left {
    margin-bottom: 105px;
  }
  #advantage .advantages {
    margin-bottom: 48px;
  }
}



/*--------------------
future
--------------------*/
#future .inner {
  padding-top: 107px;
  padding-bottom: 107px;
}
#future h2 {
  text-align: center;
  margin-bottom: 80px;
}
#future .description {
  max-width: 809px;
  margin-bottom: 70px;
}
@media screen and (max-width: 857px) {
  #future .inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 600px) {
  #future .inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  #future h2 {
    margin-bottom: 57.5px;
  }
  #future .description {
    margin-bottom: 48.5px;
  }
}



/*--------------------
company
--------------------*/
#company .inner {
  display: flex;
  max-width: 1920px;
  padding-top: 80px;
  padding-bottom: 80px;
}
#company .left {
  width: 50%;
}
#company .content {
  padding-top: 88px;
  padding-bottom: 71px;
  padding-left: 80px;
  padding-right: 80px;
}
#company h2 {
  margin-bottom: 67px;
}
#company h3 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
}
#company .content p {
  margin-bottom: 58px;
}
#company .left {
  background-color: rgba(var(--darkBlue-rgb), 0.3);
}
#company .right {
  width: 50%;
  max-width: 532px;
  margin-left: 7.5%;
  margin-top: 216px;
}
#company .d-1215_1101 {
  display: none;
}
#company .d-1100_under {
  display: none;
}
#company .d-513_372 {
  display: none;
}
@media screen and (min-width: 1920px) {
  #company .content {
    padding-left: 320px;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  #company .content {
    padding-left: calc((100vw - 1440px) / 2 + 80px);
  }
}
@media screen and (max-width: 1215px) and (min-width: 1101px) {
  #company .d-1215_1101 {
    display: block;
  }
}
@media screen and (max-width: 1100px) {
  #company .inner {
    display: block;
  }
  #company .left {
    width: 93.6%;
  }
  #company .content {
    padding-top: 62px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  #company .content p {
    margin-bottom: 0;
  }
  #company .right {
    max-width: 800px;
    width: 87.2%;
    margin-top: 24px;
  }
  #company .btn {
    margin-top: 48px;
  }
  #company .d-1100_over {
    display: none;
  }
  #company .d-1100_under {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  #company .inner {
    padding-bottom: 48px;
  }
}
@media screen and (max-width: 513px) and (min-width: 372px) {
  #company .d-513_372 {
    display: block;
  }
}



/*--------------------
topics
--------------------*/
#topics .inner {
  width: 87.2%;
  max-width: 738px;
  padding-top: 117px;
  padding-bottom: 117px;
}
#topics h2 {
  width: 106px;
  font-family: "Federo", sans-serif;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  border-bottom: 1px dashed #fff;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
#topics .items {
  padding-bottom: 60px;
}
#topics .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #fff;
  padding-top: 32px;
  padding-bottom: 32px;
}
#topics .date p {
  font-family: "Roboto Condensed", serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
#topics .year {
  font-size: 0.875rem;
  padding-bottom: 10px;
}
#topics .month-day {
  font-size: 1.875rem;
}
#topics .title {
  width: 70.4607%;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
}
#topics .pagination .screen-reader-text {
  display: none;
}
#topics .pagination {
  display: flex;
  justify-content: center;
}
#topics .pagination .page-numbers:not(:first-child) {
  padding-left: 13.5px;
}
#topics .pagination .page-numbers:not(:last-child) {
  padding-right: 13.5px;
}
#topics .pagination .prev {
  padding-right: 19.5px;
}
#topics .pagination .next {
  padding-left: 19.5px;
}
#topics .pagination .dots {
  display: inline-flex;
  transform: translateY(-5px);
}
#topics .pagination .dots .dot:not(:first-child) {
  margin-left: 14px;
}
#topics .d-sp {
  display: none;
}
@media screen and (max-width: 600px) {
  #topics .inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  #topics .item {
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  #topics .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 27px;
  }
  #topics .date {
    display: flex;
    align-items: center;
  }
  #topics .year {
    padding-right: 10px;
    padding-bottom: 0;
  }
  #topics .title {
    width: 100%;
  }
  #topics .d-pc {
    display: none;
  }
  #topics .d-sp {
    display: block;
  }
}