@charset "utf-8";
/* ================ header ================ */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1000;
  will-change: transform;
  
  header {
    width: 100%;
    height: 100%;
    background: var(--c-white);

    .header-inner {
      width: 100%;
      height: 100%;
      padding: 0 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        width: 120px;
        border-radius: 8px;
      }
      nav {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 200px;
	    a {
		  color: var(--c-black);
		  transition: .3s;
		  letter-spacing: 0.1rem;
		
	  	  &:hover {
            color: var(--c-red);
		  }
		
		  &:last-child {
		    background: url("../images/icon/icon_insta.svg") no-repeat center center;
		    width: 20px;
		    height: 20px;
		    transition: .3s;
		  
		    &:hover {
		      background: url("../images/icon/icon_insta_on.svg") no-repeat center center;
		    }
		  }
	    }
      }
    }
  }
  @media (max-width: 430px) {
    & {
	  height: 60px;
	
      header {
        .header-inner {
          padding: 0 20px;
          .logo { width: 100px; }
          nav {
            font-size: var(--fs14);
            width: 165px;
          }
	    }
	  }
    }
  }
}
/* ================ footer ================ */
footer {
  font-size: var(--fs11);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 95%;
  border-top: 1px solid var(--c-black);
  margin: 0 auto;
}

/* ================ breadcrumb ================ */

.breadcrumb {
  border-top: 1px solid var(--color-l-gray);
  background: var(--color-bg);
  padding: 15px 0;
  margin: 100px 0 50px;

  ul {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 8px;
    line-height: 1;
    margin: 0 auto;
    font-size: var(--fs12);
    @media screen and (max-width: 1024px) {
      padding: 0 30px;
    }
    
    li{
      position: relative;
      margin-right: 15px;
      padding-right: 15px;
      
      &:after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1px solid var(--c-gray);
        border-bottom: 1px solid var(--c-gray);
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
      
      &:last-child {
        margin-right: 0;
        padding-right: 0;

        &:after {
	      display: none;
        }
      }
    }
  }
  @media (max-width: 430px) {
	& {
	  margin-bottom: 2.0rem;
    }
  }  
}


/* ================ index ================ */
#movie {
  position: relative;

  
  &:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      rgba(0, 0, 0, 0.45) 1px,
      transparent 1px
    );
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 1;
  }
  
  video {
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin-bottom: 80px;
  }
  
  .movie-txt {
	position: absolute;
	bottom: 50px;
	left: 25px;
	color: var(--c-white);
	font-weight: 900;
	z-index: 2;

	.catch {
      font-size: 3.8rem;
      margin-bottom: 10px;
	}
	
	h1 {
	  font-size: var(--fs30);
	  font-weight: 900;
	  margin-bottom: 5px;
	}
	
	.txt {
	  font-size: var(--fs20);
	}
  }
  @media (max-width: 820px) {
	& {
	  .movie-txt {
		.catch { font-size: 3.0rem; }
        h1 { font-size: var(--fs24); }
	    .txt { font-size: var(--fs18); }
	  }
	}
  }
  @media (max-width: 430px) {
	& {
	  video { object-position: 82.5% top; }
	  .movie-txt {
		left: 15px;
		.catch { font-size: var(--fs32); line-height: 1.2;}
        h1 { font-size: var(--fs20); }
	    .txt { font-size: var(--fs14); padding-right: 15px; }
	  }
	}
  }
}

#index-post {
  h2 {
	font-size: var(--fs60);
	margin-bottom: 10px;
	font-weight: 900;
	letter-spacing: 0.05rem;
  }
  .txt {
	font-weight: 700;
	margin-bottom: 50px;
  }
  @media (max-width: 430px) {
    & {
      h2 { font-size: var(--fs40);}
    }
  }
}

.post-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 3.0rem;
	
  li {
    width: calc((100% - 6rem) / 3);
    display: flex;

    a {
	  display: flex;
      flex-direction: column;
      color: var(--c-black);  
	    
	  .image {
	    aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 20px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
	  }
	    
	  .detail {
        display: flex;
        flex-direction: column;
        flex: 1;
        
	    h3 { font-size: var(--fs16); margin-bottom: 5px; line-height: 1.2; }
		time {
		  position: relative;
		  font-size: var(--fs12);
		  color: #08131AA8;
		  padding-left: 23px;
		  margin-top: auto;
		  
		  &:before {
		    content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background: url("../images/icon/icon_cal.svg") no-repeat center center;
            width: 16px;
            height: 16px;
		  }
		}
	  }
	}
  }
  @media (max-width: 430px) {
	& {
	  gap: 20px 4%;
	
      li {
        width: 48%;
        
        a{
          .detail {
	        h3 { font-size: var(--fs14); }
          }
        }
      }
    }
  }
}

/* ================ post ================ */
#post-container {
  max-width: 720px;
  margin: 50px auto;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--c-black);
  
  .post-header {
	margin-bottom: 50px;
	h1 {
	  font-size: var(--fs30);
	  margin-bottom: 10px;
	}
	.post-meta {
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;

	  .post-cat {
		position: relative;
		font-size: var(--fs14);
		margin-right: 20px;
        padding-left: 24px;
		
		&:before {
		  content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: url("../images/icon/icon_folder.svg") no-repeat center center;
          width: 18px;
          height: 18px;
		}
	  }
	  time {
		position: relative;
		font-size: var(--fs14);
		color: #08131AA8;
        padding-left: 23px;
		
		&:before {
		  content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: url("../images/icon/icon_cal.svg") no-repeat center center;
          width: 16px;
          height: 16px;
		}
	  }
	}
  }
  h2 { font-size: var(--fs24); margin-bottom: 20px; }
  .wp-block-paragraph { margin-bottom: 80px; }
  .image { width: 70%; margin: 0 auto 50px; }
  .wp-block-image { width: 70%; margin: 0 auto 50px; }
  blockquote {
	padding: 20px;
	margin: -50px 0 80px;
	background: var(--c-l-gray);
	font-style: italic;
	color: var(--c-gray);
	p.wp-block-paragraph { margin-bottom: 0; }
  }
  iframe[src*="youtube.com"],
  iframe[src*="youtube-nocookie.com"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .wp-block-embed-youtube {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  @media (max-width: 430px) {
	& {
      font-size: var(--fs14);
	  .post-header {
	    h1 {
	      font-size: var(--fs22);
	      margin-bottom: 20px;
	    }
        .post-meta {
	      .post-cat {
	        font-size: var(--fs12);
            padding-left: 20px;
	        
	        &:before {
              width: 16px;
              height: 16px;
		    }
	      }
	      time {
	        font-size: var(--fs12);
	        &:before {
              width: 16px;
              height: 16px;
		    }
		  }
	    }
	  }
      h2 { font-size: var(--fs18); }
      .image { width: 100%; }
      .wp-block-image { width: 100%; }
	}
  }
}

#post-author {
  max-width: 720px;
  margin: 0 auto 50px;
  padding: 30px;
  border: 1px solid var(--c-l-gray);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  .post-author-l {
	width: 70%;
	font-size: var(--fs14);
    h2 { font-size: var(--fs24); margin-bottom: 10px; }
  }

  .post-author-r {
	width: 25%;
  }
  @media (max-width: 430px) {
	&{
      .post-author-l {
	    width: 100%;
	    order: 2;
        h2 { font-size: var(--fs20); }
	  }
      .post-author-r {
	    width: 100%;
	    order: 1;
	    margin-bottom: 20px;
	  }
	}  
  }
}

.post-pager {
  max-width: 720px;
  margin: 0 auto 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--c-black);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .pager-prev, .pager-next { display: flex; min-width: 0; max-width: 48%; }

  .pager-prev{
	.arrow { transform: rotate(-135deg); }
  }

  .pager-next {
    margin-left: auto;
    a {
	  text-align: right;
	  .arrow { transform: rotate(45deg); }
      .meta {
	    align-items: flex-end;
	  }
	}
  }

  a {
    display: inline-flex;
    align-items: center;
    gap: .8em;
    max-width: 100%;
    padding: 10px 15px;
    color: ;
    transition: .5s;

    .arrow {
      flex: 0 0 auto;
      width: 12px;
      height: 12px;
      border-top: 1px solid var(--c-gray);
      border-right: 1px solid var(--c-gray);
      display: inline-block;
    }

    .meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      transition: .3s;
    
      .label {
        font-size: 0.75rem;
        letter-spacing: .1rem;
        line-height: 1;
        color: #08131AA8;
        transition: .3s;
      }
    
      .title {
        font-size: var(--fs14);
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        transition: .3s;
      }
    }
  }
}

#post-journal {
  max-width: 720px;
  margin: 0 auto 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--c-black);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  h2 { font-size: var(--fs24); margin-bottom: 20px; }
}

#post-cat {
  max-width: 720px;
  margin: 0 auto 80px;
  
  h2 { font-size: var(--fs24); margin-bottom: 20px; }
  .cat-list {
	display: flex;
    flex-wrap: wrap;
    gap: 2.5%;
    
    li {
	  width: 18%;
	  text-align: center;
	  font-size: var(--fs14);
      border: 1px solid var(--c-l-gray);
      
      a {
	    display: block;
	    padding: 10px;
	    transition: .3s;
	    
	    &:hover {
		  background: var(--c-red);
		  color: var(--c-white);
	    }
      }
    }
  }
  @media (max-width: 430px) {
	& {
	  .cat-list {
        gap: 10px 2%;
        
		li {
		  width: 32%;
		}
	  }
	}  
  }
}

.archive-header {
  margin-bottom: 20px;
  
  h1 { font-size: var(--fs30); }
  @media (max-width: 430px) {
	& {
	  h1 { font-size: var(--fs24); }
	}  
  }
}



#page-inner {
  max-width: 720px;
  margin: 0 auto;
  
  h1 { margin-bottom: 50px; }
  .image {  border-radius: 8px; margin-bottom: 50px; }
  .wp-block-paragraph { margin-bottom: 80px; }
  .right { text-align: right; font-weight: 700; font-size: var(--fs18); }
  @media (max-width: 430px) {
	& {
	  .right { font-size: var(--fs16); }
	}  
  }
}

.contact-form-table {
  li {
	margin-bottom: 30px;
	
	label { margin-bottom: 10px; display: block; }
	.form {
      width: 100%;
      
      input, textarea {
	    width: 100%;
	    background: var(--c-l-gray);
	    padding: 10px;
      }
    }
  }
}

.privacy-policy {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--c-l-gray);
  padding: 15px;
  background: #fafafa;
  font-size: var(--fs14);
  line-height: 1.7;
  margin-bottom: 2rem;
  
  h2 { font-size: var(--fs20); margin-bottom: 10px; }
  h3 { font-size: var(--fs16); margin-bottom: 10px; }
  p { margin-bottom: 30px; }
}
.agree-txt {
	text-align: center;
	margin-bottom: 20px;
	font-size: var(--fs14);
}
.contact-btn {
  width: 300px;
  margin: 0 auto;
  
  input {
	width: 100%;
	text-align: center;
	padding: 10px 0;
	font-weight: 700;
	background: var(--c-red);
	border: 1px solid var(--c-red);
	color: var(--c-white);
	cursor: pointer;
	transition: .3s;
	
	&:hover {
      background: var(--c-white);
      color: var(--c-red);
	}
  }
}