/*
Theme Name: 2024takeoayako
Author: 
Author URI: 
*/

/* ----------------------------------------------- */
/*　共通 css
/* ----------------------------------------------- */

:root {
  --color-white: #c3d4dc;
  --color-black: #0d0c0f;
  --color-grey: #5c6366;
}

body {
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.12em;
}

hr {
  color: var(--color-white);
  margin-bottom: 30px;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

a:hover {
  opacity: 0.6;
}



@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap");
h2 {
    font-family: "Crimson Text";
    font-size: 38px;
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
    line-height: 1.5;
}

h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 30px;
  letter-spacing: 0.12em;
  margin-bottom: 30px;
}

p {
  display: block;
  padding-bottom: 34px;
}

section {
    margin-bottom: 4rem;
  }

/* 横幅 */
.wrapper {
  max-width: 1200px;
  padding: 90px 6vw 4rem;
  margin: 0 auto;
}

/* -------------------- */
/* header
/* -------------------- */
header {
/*   position: fixed; */
  z-index: 2;
  width: 100%;
  display: flex;
/*   mix-blend-mode: difference;
  backdrop-filter: blur(12px); */
  margin: 0 auto;
  padding: 8px 2rem 10px;
  justify-content: space-between;
  align-items: center;
  nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav ul li{
    margin-left: 50px;
  }
  p {
    padding: 0;
  }
  p#header_logo {
    letter-spacing: 12px;
  }
  .instagram-icon {
    fill: var(--color-white);
    width: 30px;
    height: 30px;
   margin-top: 10px;
  }
  #hamburger {
    display: none;
  }

  #hamburger-btn-check {
    display: none;
  }
}

/* -------------------- */
/* footer
/* -------------------- */
footer {
  color: #666970;
  text-align: center;
  font-size: 1rem;
  line-height: 2.4;
  margin-bottom: 2rem;
}

/* -------------------- */
/* トップページ
/* -------------------- */
#front-page {
  .wrapper {
    padding: 0px 6vw 4rem;
  }

  /* トップページ　スライダー */
  .n2_clear {
    position: relative;
    overflow: hidden;
  }

  .n2_clear::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 39rem;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 90%,
      var(--color-black) 100%
    );
    pointer-events: none;
  }
}

/* トップページ　WORKS */
#front-page-works {
  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }
  .more {
    display: flex;
    align-items: flex-end;
    text-align: right;
    flex-direction: column;
  }
  p {
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 0px;
    padding-bottom: 0.6rem;
  }
  .stickarrow {
    width: 72px;
    height: 8px;
    border-bottom: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
    transform: skew(45deg);
  }
}

/* トップページ　NEWS 　＆　NEWSページ*/
#front-page-news,
#news {
  display: flex;
  gap: 5rem;
  ul {
    width: 100%;
  }
  h3 {
	display: flex;
    font-size: 1.3rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--color-white);
    padding-bottom: 0.6rem;
  }
  .front-page-news-ttl {
    margin-left: 20px;
  }
}

/* トップページ　CONTACT */
#front-page-contact {
  text-align: center;
}

/* ----------------------------------------------- */
/*　投稿ページ　ブロックエディタ
/* ----------------------------------------------- */
h2.wp-block-heading,.post h2 {
font-family: "Noto Serif JP", serif;
    font-size: 30px;
    letter-spacing: 0.12em;
    margin-bottom: 50px;
}

/* 画像の下に余白 */
figure.wp-block-image {
    margin-bottom: 2rem;
}

/* hr*/
.wp-block-separator {
    border-top: 1px solid;
}

/* 投稿画面　新規カテゴリーを追加を非表示 */
.components-flex-item.css-1bpywbw.e19lxcc00 {
    display: none;
}
/* ----------------------------------------------- */
/*　WORKSページ
/* ----------------------------------------------- */
#work {
  input[name="category_item"] {
    display: none;
  }
  input:not(:checked) + .category_item {
    color: var(--color-grey);
  }
  .category_item {
    display: inline-block;
    margin-left: 1.2rem;
    margin-top: 0.8rem;
    float: right;
  }
  .category_content {
    display: none;
    opacity: 0;
    height: 0;
  }

  #all:checked ~ #all_list,
  #category_work-artworks:checked ~ #category_work-artworks_list,
  #category_work-exhibition:checked ~ #category_work-exhibition_list,
  #category_work-text:checked ~ #category_work-text_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    height: auto;
	/* animationプロパティ設定 */
	animation-name: fadeInWork;
	animation-fill-mode:forwards;
	animation-duration:1s;
  }
}

/*フェードインアニメ*/
@keyframes fadeInWork{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

/* ----------------------------------------------- */
/*　CVページ
/* ----------------------------------------------- */
.language {
  float: right;
}
input[name="language"] {
  display: none;
}

label.cv_ja {
  margin-right: 1.6rem;
  position: relative;
}
label.cv_ja::after {
  content: " | ";
  position: absolute;
  top: 0;
  right: -17px;
  height: 1rem;
  color: #c3d4dc;
}

input:not(:checked) + .language {
  color: var(--color-grey); /* チェックされていない場合のスタイル */
}
#cv_ja:checked ~ #cv_ja_wrapper,
#cv_en:checked ~ #cv_en_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: space-between;
  align-items: center;
  height: auto;
  animation-name: fadeInCv;
  animation-fill-mode:forwards;
  animation-duration:1s;
}
.cv_wrapper {
	margin-bottom: 0;
	display:none;
	opacity: 0;
}
/*フェードインアニメ*/
@keyframes fadeInCv{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

/* ----------------------------------------------- */
/*　NEWSページ　※トップページと同じ
/* ----------------------------------------------- */

/* ----------------------------------------------- */
/*　CONTACTページ
/* ----------------------------------------------- */
#contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem;

  p {
    font-size: 0.9rem;
  }
  h3 {
    font-size: 22px;
  }
  input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
  textarea.wpcf7-form-control.wpcf7-textarea {
    height: 2.4em;
    width: 100%;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
	 color: #000;
    box-shadow: 0 0 0 1px var(--color-white) inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #eee;
  }
  textarea.wpcf7-form-control.wpcf7-textarea {
    height: 12rem;
  }

  /* ボタン */
  .wpcf7-submit {
    display: inline-block;
    padding: 0.2em 3em;
    color: var(--color-white);
    border: solid 1px var(--color-white);
    transition: 0.4s;
    border-radius: 60px;
  }

  /* ボタン　ホバー */
  .wpcf7-submit:hover {
    background: var(--color-white);
    color: var(--color-black);
  }

  /* CONTACT 警告 */
  .wpcf7-not-valid-tip {
    color: #006ba1;
  }

  .wpcf7-response-output {
    display: none;
  }
}

/* ----------------------------------------------- */
/*　CONTACT　完了ページ
/* ----------------------------------------------- */
#page-contact-send-complete{
	text-align:center;
	p {
       padding-bottom: 80px;
	}
	.top-btn{
padding: 2.8rem 2rem;
        color: var(--color-white);
        border: solid 1px var(--color-white);
        transition: 0.4s;
        border-radius: 50%;
	}
	.top-btn:hover {
    background: var(--color-white);
    color: var(--color-black);
  }

}


  .pc {display: none;}
  .sp {display: inline;}

/* ----------------------------------------------- */
/*　メディアクエリ　以下スマホ表示
/* ----------------------------------------------- */
@media screen and (max-width: 759.98px) {
  .pc {display: inline;}
  .sp {display: none;}
  body {
    font-size: 14px;
  }
  h2 {
    margin-bottom: 1rem;
  }
  h3 {
    font-size: 22px;
  }
  section {
    margin-bottom: 1rem;
  }
  .wrapper {
    padding: 80px 6vw 1rem;
  }

  /* スマホ　header */
  header {
    padding: 8px 1rem 10px;
    mix-blend-mode: normal;
    backdrop-filter: none;

    .hamburger-btn {
            position: fixed;
            top: 30px;
            right: 0vw;
            z-index: 90;
            cursor: pointer;
            height: 60px;
            width: 40px;
    }

    .hamburger-btn span,
    .hamburger-btn span:before,
    .hamburger-btn span:after {
      content: "";
      display: block;
      height: 1px;
      width: 25px;
      background-color: var(--color-white);
      position: absolute;
    }

    .hamburger-btn span:before {
      bottom: 8px;
    }

    .hamburger-btn span:after {
      top: 8px;
    }

    nav {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 100%;
      z-index: 80;
      background-color: var(--color-black);
      transition: all 0.5s;
    }
    nav ul {
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      padding: 70px 8vw 0;
      margin-left: 0px;
    }
    nav ul li {
	margin-left: 0px;
      font-size: 20px;
      line-height: 3;
    }

    #hamburger-btn-check:checked ~ nav {
      left: 0;
      /*メニューを画面内へ*/
    }
  }
	
  /* スマホ　footer*/
  footer {
    font-size: 12px;
    margin-bottom: 1rem;
  }

  /* スマホ　header */
  section#front-page-works {
    ul {
      grid-template-columns: 1fr;
      margin-bottom: 1rem;
    }
    p {
      font-size: 16px;
    }
  }

  /* スマホ　トップページ */
  #front-page {
    .n2_clear::after {
      height: 14rem;
    }
  }
  section#front-page-news,
  #news {
    display: flex;
    gap: 0;
    flex-direction: column;
    .front-page-news-ttl {
      margin-left: 10px;
    }
    h3 {
      font-size: 18px;
    }
  }
  /* スマホ　WORKページ */
  #work {
	h2 {
    width:100%;
  }
    #all:checked ~ #all_list,
    #category_work-artworks:checked ~ #category_work-artworks_list,
    #category_work-exhibition:checked ~ #category_work-exhibition_list,
    #category_work-text:checked ~ #category_work-text_list {
	  width: 100%;
      grid-template-columns: 1fr;
    }
    .category_item {
      margin: 0 0 1rem;
    }
	  .category_item:not(:first-child){
		 margin-left: 1.2rem;
    }
  }
  /* スマホ　CONTACTページ */
  #contact {
/*     display: grid;
    grid-template-columns: 1fr; */
    display: block;
    gap: 1rem;
    .contact-form-text{
		padding-bottom: 30px;
        h3 {
            font-size: 20px;
        }
    }
  }
}