/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #e6e6e6;
  color: #333333;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.highlight {
  font-weight: bold;
  color: blue;
}


/* プロフィール */
.profile {
  width: 400px;
  height: 150px;

  border: 1px solid #f15a22;
  border-radius: 80px;

  box-sizing: border-box;
  padding: 2px 50px;
  
  position: relative;
  
  background: radial-gradient(
  circle 100px at 55px 75%,
  #0066ff 0%,
  #e6e6e6 20%
);
}

.insta {
  position: absolute;
  right: 50px;
  bottom: 2px;
}


/* 文章 */
.text-box {
  width: 500px;
  height: 120px;

  margin-left: 120px;
  margin-top: 40px;

  border: 1px solid #f15a22;
  box-sizing: border-box;
}

.date {
  padding: 2px;
}

.text-box p {
  margin: 20px 20px 0 70px;

  font-family: "Kosugi Maru";
  font-weight: bold;
  color: #ffb6c1;

  line-height: 1.7;
}

/* */
.text-box-2 {
  width: 200px;
  height: 120px;

  margin-left: 120px;
  margin-top: 40px;

  border: 1px solid #f15a22;
  box-sizing: border-box;
}
.text-box-2 p {
  margin: 20px -10px 0 70px;

  font-family: "Kosugi Maru";
  font-weight: bold;
  color: #006400;

  line-height: 1.7;
}

/* */
.text-box-3 {
  width: 500px;
  height: 120px;

  margin-left: 120px;
  margin-top: 0px;

  border: 5px solid #ffb6c1;
  box-sizing: border-box;
}
.text-box-3 p {
  margin: 20px 20px  0 70px;

  font-family: "Kosugi Maru";
  font-weight: bold;
  color: #f0fff0;

  line-height: 1.7;
}







/* */
.random-wip {
  position: absolute;
  left: 80px;
  top: 670px;
  width: 100px;
}

.random-wip img {
  width: 100px;
  height: auto;
  display: block;
}


/* */

.line {
  width: 300px;
  left: 100px;
  top: 200px;
}


/* */

.long {
  transform: scaleX(0.8);
  transform-origin: left center;
  font-weight: bold;
}

/* */
.text span {
  background-color: #66cdaa;
  display: inline;
  padding: 0 3px;
}

/* */
.text-2 span {
  background-color: #f0fff0;
  display: inline;
  padding: 0 3px;
}

/* */
.text-3 span {
  background-color: #ffb6c1;
  display: inline;
  padding: 0 3px;
}


/* */
.text-4 span {
  background-color: #ffb6c1;
  display: inline;
  padding: 0 3px;
}

















.grid {
  display: grid;
  grid-template-columns: repeat(4, 95px);
  column-gap: 55px;
  row-gap: 25px;
}

.item {
  display: flex;
  align-items: flex-start;
  width: 95px;
}


/* 普段の画像 */

.work-image {
  width: 50px;
  height: 110px;

  flex-shrink: 0;

  overflow: hidden;

  position: relative;
  z-index: 10;

  cursor: pointer;
}

.work-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: fill;
}


/* 文章 */

.text-box-4 {
  width: 32px;

  margin-left: 8px;

  line-height: 1.7;

  word-break: break-all;
}





.work-image.original {
  width: auto;
  height: auto;

  overflow: visible;
  
  position: relative;
  z-index: 9999;
}

.work-image.original img {
  width: auto;
  height: auto;

  max-width: 500px;
  max-height: 500px;

  object-fit: contain;
  
  position: relative;
  z-index: 9999;
}