/* Bold */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: bold;
}

/* Bold Italic */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

/* Extra Light */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-extralight-webfont.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

/* Extra Light Italic */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-extralightitalic-webfont.woff") format("woff");
  font-weight: 200;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

/* Light Italic */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-lightitalic-webfont.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

/* Medium */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/* Medium Italic */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-mediumitalic-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* Regular Italic */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-regularitalic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

/* Thin */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-thin-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

/* Thin */
@font-face {
  font-family: "N27";
  src: url("webfont/n27-thinitalic-webfont.woff") format("woff");
  font-weight: 100;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'N27', sans-serif;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* grid-auto-rows: 50px auto 50px; */
  grid-template-areas: "hd hd hd hd hd hd hd hd me"
    "mn mn mn mn mn mn mn mn mn "
    "ft ft ft ft ft ft ft ft ft";
  column-gap: 1rem;
  background-color: #FFF;
  padding-left: 2em;
  padding-right: 2em;
}


/* .el {
  background-color: #d38888;
  color: black;
  display: grid;
  place-content: left;
} */

.top {
  grid-template-columns: 100px auto 100px;
  background-color: #fff;
  height: 6em;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.header {
  grid-area: hd;
  grid-column: 1/ 2;
  position: fixed;
  top: 1.6em;
  left: 2em;
}

.header img {
  width: 100px;
  height: auto;
  background-color: #fff;
}

.dropdown {
  grid-area: me;
  grid-column: 1/ 2;
  position: fixed;
  top: 1.6em;
  right: 2em;
  display: inline-block;
  width: 100px;
  text-align: right;
  font-size: 1em;
}

.dropdown:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #c7c7c7;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  padding-top: 0.6em;
  background-color: #FFF;
  min-width: 100px;

  text-align: right;
}

.dropdown-content p {
  padding-bottom: 0.4em;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.container {
  grid-area: mn;
  min-height: 400px;
  display: grid;
  grid-template-columns: repeat(2, 1fr 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 1.5em;
  padding-top: 8em;
}

.footer {
  grid-area: ft;
  place-content: center;
  text-align: center;
  font-size: 0.8em;
  border-top-style: solid;
  border-top-color: #000;
  border-top-width: 1px;
  padding-top: 3em;
  padding-bottom: 2em;
}

.footer p {
  padding-bottom: 0.6em;
  color: #8c8c8c;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: underline;
}

.copyright {
  /* text-align: left; */
  padding-top: 60px;
  font-size: 1em;
  color: #8c8c8c;
}


/* --------------------- */
/* ---for index page--- */
.top-page {
  display: grid;
  grid-template-rows: auto auto auto auto;
}

.top-page .box:first-child {
  background-color: #fff;
  grid-column: 1 / 5;
  grid-row: 1 / 2;
  font-size: 1.6em;
  font-weight: 100;
  text-align: justify;
  padding-bottom: 2em;
  /* margin-bottom: 1em; */
  margin-bottom: 0.8em;
  border-bottom-style: solid;
  border-bottom-color: #000;
  border-bottom-width: 1px;
}



.top-page h1 {
  font-weight: 500;
}

.top-page .box:nth-child(2) {
  background-color: #fff;
  grid-column: 1 / 3;
  grid-row: 2;
  place-content: left;
  font-size: 1em;
  /* for coming soon */
  min-width: 240px;
}

.top-page .coming-soon {
  font-size: 1.2em;
  font-weight: 200;
  display: grid;
  padding-top: 4em;
  place-content: center;
  color: #696969;
}

/* @media (max-width: 429px) {
  .top-page .coming-soon { 
    min-width: 300px;
    display: grid;
  }  
  } */

.top-page h2 {
  font-size: 2.4em;
  font-weight: 200;
}

.top-page h2 a:hover {
  text-decoration: underline 2px;
  text-underline-offset: 15px;
}

.top-page ul {
  padding-left: 1em;
  padding-top: 3em;

}

.top-page li {
  padding-bottom: 2em;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
}

.top-page li a {
  font-weight: 400;
  font-size: 1.4em;
  line-height: 2em;

}

.top-page .box:nth-child(3) {
  background-color: #ffffff;
  grid-column: 1 / 5;
  grid-row: 3;
 min-height: 30px;
}


.top-page .box:nth-child(4) {
  background-color: #fff;
  grid-column: 3 / 5;
  grid-row: 2;
  text-align: right;
}

.top-page .box:nth-child(4) img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  /* height: 100%; */
  max-width: 700px;
}

/* ▼表示領域が430px未満の場合 */
@media (max-width: 430px) {

  .top-page .box:nth-child(4) {
    grid-column: 1 / 5;
    grid-row: 2;
  }

  .top-page .box:nth-child(2) {
    grid-column: 1 / 5;
    grid-row: 3;
    min-height: 250px;
    padding-top: 1em;
  }
  .top-page .box:nth-child(3) {
    grid-column: 1 / 5;
    grid-row: 4;
  }
}

/* end (index page) */




/* --------------------- */
/* blog page */
.blog {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 2fr 2fr;
  grid-gap: 2em;
  padding-bottom: 4em;
}

.blog .box:first-child {
  background-color: #fff;
  grid-column: 1/4;
  grid-row: 1;
  font-size: 1.8em;
  font-weight: 100;
  text-align: left;
  /* padding-top:1em; */
  padding-bottom: 1em;
  margin-bottom: 0;
  border-bottom-style: solid;
  border-bottom-color: #000;
  border-bottom-width: 1px;
  /* height: 100px; */
}



.blog h1 {
  font-size: 1.6em;
  font-weight: 300;
}

.blog h2 {
  font-size: 1.8em;
  font-weight: 400;
  padding-bottom: 0.6em;
}

.blog a:hover {
  text-decoration: underline 1px;
  text-underline-offset: 10px;
}

.blog p {
  font-size: 1em;
  font-weight: 200;
  line-height: 1.4em;
}

.blog .reading {
  text-align: right;
  padding-top: 2em;
  font-size: 1.1em;
  font-weight: 400;
}

.blog .box:nth-child(2) {
  background-color: #ffffff;
  grid-column: 1;
  grid-row: 2;
  outline: #000 dotted 1px;
  padding: 30px;
}

.blog .box:nth-child(3) {
  background-color: #fff;
  grid-column: 2;
  grid-row: 2;
  outline: #000 dotted 1px;
  padding: 30px;
}


.blog .box:nth-child(4) {
  background-color: #fff;
  grid-column: 3;
  grid-row: 2;
  outline: #000 dotted 1px;
  padding: 30px;
}

.blog .box:nth-child(5) {
  background-color: #fff;
  grid-column: 1 / 2;
  grid-row: 3;
  outline: #000 dotted 1px;
  padding: 30px;
}

/* end (blog page) */



/* --------------------- */
/* contact page */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 2em;
  padding-bottom: 2em;
}

.contact-page .box:first-child {
  background-color: #fff;
  grid-column: 1 / 3;
  grid-row: 1;
  font-size: 1.8em;
  font-weight: 100;
  text-align: left;
  /* padding-top:1em; */
  padding-bottom: 1em;
  margin-bottom: 0;
  border-bottom-style: solid;
  border-bottom-color: #000;
  border-bottom-width: 1px;
  column-gap: 4em;
}

.contact-page h1 {
  font-size: 1.6em;
  font-weight: 300;
}

.contact-page .box:nth-child(2) {
  background-color: #000000;
  grid-column: 1 /2;
  grid-row: 2;
  padding: 30px;
  height: auto;
  color: #fff;
  display: grid;
  place-items: center;
  /* min-width: 22em; */

}

.contact-page .box:nth-child(2) p {
  font-size: 1.8em;
  font-weight: 200;
  line-height: 1.5em;
}

.contact-page .box:nth-child(2) a {
  font-size: 1.2em;
  color: #fff;
  font-weight: 400;
}

.contact-page .box:nth-child(2) a:hover {
  text-decoration: underline 2px;
  text-underline-offset: 15px;
}

.contact-page .box:nth-child(3) {
  background-color: #ffffff;
  grid-column: 1 / 3;
  grid-row: 3;
}


.contact-page .box:nth-child(4) {
  grid-column: 2/ 3;
  grid-row: 2;
  text-align: right;
}

.contact-page .box:nth-child(4) img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  /* height: 100%; */
}

/* ▼表示領域が430px未満の場合 */
@media (max-width: 430px) {
  .contact-page .box:nth-child(2) {
    background-color: #000000;
    grid-column: 1 /3;
    grid-row: 2;
  }

  .contact-page .box:nth-child(2) p {
    font-size: 1em;
  }

  .contact-page .box:nth-child(2) a {
    font-size: 1em;
  }

  .contact-page .box:nth-child(4) {
    grid-column: 1/3;
    grid-row: 3;
  }
}

/* end (contact page) */



/* --------------------- */
/* each blog page ------*/

.each-blog {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 2em;
  padding-bottom: 10em;
}

.each-blog .box:first-child {
  background-color: #fff;
  grid-column: 1/3;
  grid-row: 1;
  font-size: 1.8em;
  font-weight: 100;
  text-align: left;
  /* padding-top:1em; */
  padding-bottom: 1em;
  margin-bottom: 0;
  border-bottom-style: solid;
  border-bottom-color: #000;
  border-bottom-width: 1px;
  /* height: 100px; */
}

.small-blog-top {
  font-size: 0.5em;
  font-weight: 300;
}

.each-blog h1 {
  font-size: 1.6em;
  font-weight: 300;
}

.each-blog .author {
  padding-bottom: 30px;
}

.each-blog .date {
  float: right;
  font-size: 0.9em;
}

.each-blog h2 {
  font-size: 1.8em;
  font-weight: 400;
  padding-bottom: 0.6em;
  padding-top: 0.8em;
}

.each-blog h3 {
  color: #fff;
  font-size: 1.6em;
  font-weight: 400;
  text-align: center;
  padding-top: 40px;
  background-color: #000;
}

.each-blog ul {
  padding-left: 60px;
  padding-right: 60px;
  padding-bottom: 40px;
  padding-top: 25px;
  color: #fff;
  background-color: #000;
}

.each-blog li {
  padding-bottom: 1em;
  font-size: 1.2em;
  font-weight: 200;

}

.each-blog .blog-list a {
  color: #fff;
}

.each-blog a:hover {
  text-decoration: underline 1px;
  text-underline-offset: 10px;
}

blog-list img {
  width: fit-content;
}

.each-blog p {
  font-size: 1em;
  font-weight: 200;
  line-height: 2em;
  padding-bottom: 1.6em;
}

.each-blog .box:nth-child(2) {
  background-color: #ffffff;
  grid-column: 1;
  grid-row: 2;
  /* outline: #000 dotted 1px; */
  padding-left: 0;
  /* padding-top: 30px; */
  max-width: 800px;
  min-width: 600px;
}

.each-blog .box:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  /* padding: 30px; */
  padding-top: 4.8em;
  min-width: 280px;
  background-image: url("images/blog-list-tile.png");
}

.code {
  background-color: #d1d1d1;
  padding-top: 2em;
  padding-right: 2em;
  padding-left: 2em;
  padding-bottom: 0.4em;
  margin-top: 2em;
  margin-bottom: 2em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1em;
}

.back2top {
  text-align: right;
  padding-top: 40px;
  padding-bottom: 0;
}

.back2top a {
  font-size: 1.1em;
  font-weight: 400;
}


/* end (each-blog) */