@charset "UTF-8";
:root {
  --blogMaxWidth: 900px;
}

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src: url(../fonts/Poppins-Regular.woff2);
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  src: url(../fonts/Poppins-Medium.woff2);
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  src: url(../fonts/Poppins-Bold.woff2);
}
@font-face {
  font-family: "ZenKakuGothicAntique";
  font-weight: 400;
  src: url(../fonts/ZenKakuGothicAntique-Regular.woff2);
}
@font-face {
  font-family: "ZenKakuGothicAntique";
  font-weight: 600;
  src: url(../fonts/ZenKakuGothicAntique-Medium.woff2);
}
@font-face {
  font-family: "ZenKakuGothicAntique";
  font-weight: 800;
  src: url(../fonts/ZenKakuGothicAntique-Bold.woff2);
}
body {
  font-family: "Poppins", "ZenKakuGothicAntique";
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 100px;
}

/*
=====================================================
===================================================== 
READ ME! 
構成の説明

スマホファーストで作成しています。
ブレイクポイントはタブレット用、PC用として分けています

ブレイクポイント
600px , 900px 

-header , footer
    -SP Layout
-top
    -SP Layout
-blog
    -SP Layout
-works
    -SP Layout
-about
    -SP Layout

=====================================================
=====================================================
*/
header {
  width: 100%;
  position: fixed;
  height: 120px;
  top: 0;
  left: 0;
  background: white;
  z-index: 10;
}
header .logo {
  padding-left: 30px;
}
header .logo > img {
  max-width: 180px;
  width: 100%;
}
header .menu {
  padding-right: 30px;
}
header .header__container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 120px;
  align-items: center;
}

.menu .openbtn {
  width: 63px;
  height: 14px;
}

.openbtn span {
  /*×に変化*/
  display: block;
  transition: all 0.4s;
  left: 14px;
  height: 3px;
  background-color: black;
  width: 63px;
  margin-top: 4px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-30deg);
  width: 100%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(30deg);
  width: 100%;
}

#g-nav-sp {
  font-weight: 800;
  inset: 0;
  writing-mode: vertical-rl;
  margin-top: 100px;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  gap: 40px;
  position: fixed;
  width: 100vw;
  height: 440vw;
  background: #ff002b;
  margin: 0;
  left: 0;
  top: 5000px;
  transition: 0.5s;
  z-index: 999;
}

#g-nav-sp.active {
  left: 0;
  top: 170px;
  transition: 0.5s;
}

#g-nav-sp.active ul {
  margin: 0 auto;
}

#g-nav-sp.active ul li {
  list-style: none;
  margin: 0 20px;
}

#g-nav-sp.active ul li a {
  color: white;
  text-decoration: none;
}

footer {
  width: 100%;
  position: fixed;
  background: white;
  height: 80px;
  bottom: 0;
  left: 0;
}
footer .bottom_nav {
  position: fixed;
  bottom: 80px;
  left: 30px;
  display: none;
}
footer .bottom_nav ul {
  padding-inline-start: 0;
  margin: 0;
}
footer .bottom_nav ul li {
  padding: 0;
  list-style: none;
}
footer .bottom_nav ul li a {
  color: black;
  text-decoration: none;
}
footer .cRight {
  position: fixed;
  bottom: 80px;
  right: 30px;
  font-size: 12px;
}
footer .bottom_pole {
  width: 1154px;
  position: fixed;
  bottom: 0;
  left: -105px;
}

.body_innner {
  max-width: var(--blogMaxWidth);
  margin: 180px auto;
  padding: 0 30px;
}

.pageheading h2 {
  border-bottom: solid 3px black;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (min-width: 920px) {
  footer .bottom_nav {
    display: block;
  }
  footer .bottom_pole {
    position: fixed;
    margin: auto auto 0 auto;
    inset: 0;
  }
}
.top_logo {
  position: fixed;
  width: 200px;
  top: 283px;
  position: fixed;
  inset: 0;
  margin: auto;
}

.blog_container {
  display: grid;
  flex-wrap: wrap;
  gap: 30px 30px;
  max-width: var(--blogMaxWidth);
  margin: 120px auto;
  grid-template-columns: 1fr;
}
.blog_container a {
  max-width: 100%;
  text-decoration: none;
  color: black;
}
.blog_container a img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mainBlog_info {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.article {
  padding: 0 5vw;
}
.article p {
  margin: 0 0 36px 0;
}
.article h2 {
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: solid 2px black;
  font-size: 22px;
}
.article h3 {
  margin: 10px 0;
}
.article .TOC {
  margin: 0 auto;
}
.article .info_table::before {
  content: "";
  display: block;
  margin: 27px 0 27px 0;
  width: 60px;
  height: 3px;
  background: black;
}
.article .info_table th {
  vertical-align: top;
  text-align: left;
}
.article table {
  margin: 20px 10px;
  border-collapse: separate;
  border-spacing: 10px;
}
.article .blog_topHeading img {
  max-width: 100%;
}
.article .blog_topHeading div h1 {
  font-size: 22px;
}
.article section {
  margin: 120px 0 0 0;
}
.article section img {
  width: 100%;
}

@media screen and (max-width: 600px) {
  .blog_container {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 900px) {
  .blog_container {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pageheading {
    max-width: 450px;
    margin: 0 0 0 auto;
  }
  .article {
    padding: 0;
    max-width: var(--blogMaxWidth);
    margin: 0 auto;
  }
  .article .TOC {
    width: 380px;
    margin: 45px 0 0 auto;
  }
  .article .info_table::before {
    margin: 56px 0 27px 0;
  }
  .article section {
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 157px 0 0 0;
  }
  .article section .section_imgArea > div {
    position: sticky;
    max-width: 480px;
    top: 80px;
  }
  .article section .section_imgArea > img {
    position: sticky;
    max-width: 480px;
    top: 80px;
  }
  .article section .section_textArea {
    flex-grow: 1;
    width: 100%;
    max-width: 380px;
    margin: 0 0 0 auto;
  }
}
.works_container {
  display: grid;
  gap: 10px;
  max-width: var(--blogMaxWidth);
  margin: 120px auto;
  grid-template-columns: 1fr;
}
.works_container a {
  width: 100%;
  text-decoration: none;
  color: black;
}
.works_container a img {
  max-width: 100%;
}

@media screen and (min-width: 600px) {
  .works_container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 900px) {
  .about_logo {
    width: 120px !important;
    margin: 10rem auto;
    display: block;
  }
}/*# sourceMappingURL=style.css.map */