@charset "UTF-8";
/* CSS Document */


.wrapper {
  z-index: -1;
}
.rightblock-all {
  margin-left: 206px;
  padding-top: 100px;
}
@media screen and (max-width:1070px) {
  .rightblock-all {
    margin-left: 0px;
  }
}
.top-title {
    max-width: 916px;
    height: 587px;
    background-image: url(../image/introduction/jirei-top_image.png);
    background-size: cover;
    margin: 0 auto;
    position: relative;
}
.top-title::after {
  position: absolute;
  content: "";
  background: black;
  opacity: 0.2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-title_container {
  margin: 0 auto;
  z-index: 999;
  padding-top: 100px;
}
.top-title_main {
  font-size: 3.0rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  background-color: #fff;
  padding: 25px 5px;
  font-family: 'Noto Serif JP', serif, '游明朝', YuMincho, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝';
  transform: translate(-25px,36px);
  z-index: 999;
  position: absolute;
}
@media screen and (max-width:768px) {
  .top-title {
    background-position: center;
    margin: 0 auto;
  }
}
@media screen and (max-width: 425px) {
  .top-title {
    height: 450px;
  }
  .top-title_main {
    transform: translate(-15px, -20px);
  }
}

/*記事一覧*/
.archive-description {
  margin: 100px auto 200px;
  max-width: 916px;
  box-sizing: border-box;
}
.archive-description a {
text-decoration: none;
}
.koko-title {
  font-size: 2.6rem;
  font-weight:bold;
  padding-top: clamp(20px, 2.77vw, 40px);
  padding-bottom: 20px;
  text-align: left;
  line-height: 3.4rem;
  border-top: 1px solid #333;
}
.archive-photo {
  display: flex;
  max-width: 740px;
  margin: 0 auto;
  padding-bottom: clamp(50px, 6.24vw, 90px);
  justify-content: space-between;
}
.archive-photo_title {
  align-self: flex-end;
  color: #333333;
  max-width: 300px;
  margin-bottom: 10px;
}
.archive-photo_title span {
  font-size: 1.2rem;
  padding: 3px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.archive-photo_realtitle {
  padding-top: 5px;
  font-size: 2.2rem;
  font-weight: bold;
}
.archive-photo_realtitle:hover {
  text-decoration: underline;
  } 
.archive-img {
  max-width: 400px;
}
.archive-img img{
  width: 100%;
}
.archive-text {
  margin-bottom: clamp(50px, 6.24vw, 90px);
  text-align: justify;
  font-size: 1.4rem;
}
@media screen and (max-width:600px){
 .archive-description {
  margin: 60px auto 100px;
  }
.archive-photo {
  display: block;
  }
}