@charset "utf-8";
@import url(common.css);
@import url(jarallax.css);
@import url(swiper.css);
@import url(swiper-bundle.min.css);
@import url(swiper.custom.css);
@import url(hamburger.css);
/*--------------------------------------------------------------------------------------
    debug
--------------------------------------------------------------------------------------*/
/*
* {
    outline: 1px solid red!important;
}
*/
/*--------------------------------------------------------------------------------------
    custom properties
--------------------------------------------------------------------------------------*/ :root {
  --font-color: hsla(0, 0%, 80%, 1);
  --font-color-bk: hsla(0, 0%, 10%, 1);
  --base-bg: hsla(0, 100%, 100%, 1);
  --boder-color: hsla(0, 0%, 90%, 0.4);
  --title-accent: hsla(0, 100%, 40%, 1);
  --main-color: hsla(30, 90%, 50%, 1);
  --hover-color: hsla(0, 100%, 70%, 1);
  --base-line: 1.8;
  --contents-width: min(90%, 1540px);
  --contents-bottom: 2rem;
  --text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.7);
}
/*--------------------------------------------------------------------------------------
    archive:header
--------------------------------------------------------------------------------------*/
/*archive-header*/
.archive-header {
  width: 100%;
  height: 200px;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  h2 {
    width: var(--contents-width);
    margin-inline: auto;
    font-size: 2rem;
    color: #000;
  }
}
/*live-header*/
.info-header {
  background: #ccc;
}
/*live-header*/
.live-header {
  background: #ccc;
}
/*portfolio-header*/
.portfolio-header {
  background: #ccc;
}
/*activity-header*/
.activity-header {
  background: #ccc;
}
/*--------------------------------------------------------------------------------------
    archive-text
--------------------------------------------------------------------------------------*/
.archive-text {
  width: var(--contents-width);
  margin: auto auto 60px;
  p {
    font-size: 1rem;
    line-height: 1.5;
  }
}
/*--------------------------------------------------------------------------------------
    archive:list
--------------------------------------------------------------------------------------*/
/*archive-list*/
.archive-list {
  width: var(--contents-width);
  margin-inline: auto;
  ul, li {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    gap: 30px;
  }
  img {
    width: 100%;
    height: auto;
  }
}
/*info-list*/
.info-list li {
  width: calc(100% / 4 - 30px);
}
/*live-list*/
.live-list li {
  width: calc(100% / 2 - 30px);
}
/*portfolio-list*/
.portfolio-list li, .activity-list li {
  width: calc(100% / 3 - 30px);
}
/*--------------------------------------------------------------------------------------
    post:header
--------------------------------------------------------------------------------------*/
.post-box {
  width: 100%;
}
.post-header {
  width: 100%;
  aspect-ratio: 40 / 21;
  background-position: center;
  background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
/*
  display: grid;
  place-content: center;
*/
}
.title-contents {
/*  display: block;*/
  width: 50%;
	padding: 3rem;
	border-radius: 2rem;
  background: hsla(0, 100%, 100%, 0.2);
  backdrop-filter: blur(5px);
  h1 {
	  padding-bottom: 0.5rem;
	  border-bottom: 1px dotted #ccc;
    font-size: 2.4rem;
	  color: #333;
  }
	p {
    font-size: 0.8rem;
	  color: #333;
		text-align: right;
	}
}
/*--------------------------------------------------------------------------------------
    post:contents
--------------------------------------------------------------------------------------*/
.post-contents {
	width: 80%;
	margin: 1rem auto auto;
	line-height: 1.8;
	h2,h3,h4,h5,h6 {
		margin: 2rem auto 0.5rem;
	}
	p {
		margin-bottom: 1rem;
	}
	img {
		width: 95%;
		height: auto;
	margin: auto auto 0.5rem;
	}
}

/*--------------------------------------------------------------------------------------
    post:back-list
--------------------------------------------------------------------------------------*/
.back-list {
	width: 80%;
	margin: 1rem auto;
	text-align: right;
}

/*--------------------------------------------------------------------------------------
    responsive
--------------------------------------------------------------------------------------*/
@media (width <=770px) {
  /*archive-list*/
  .archive-list {
    ul {
      justify-content: space-between;
      gap: 0;
    }
  }
  .info-list li, .live-list li, .portfolio-list li, .activity-list li {
    width: calc(100% / 2 - 10px);
    margin-bottom: 30px;
  }
}