/* ========================================
   layout.css 目次
===========================================
  1. フォント・変数・初期化
     - @import url
     - :root, html, body, a, img

  2. 汎用ユーティリティ
     - .container, .fade-in, .hidden, ...

  3. 各セクション（HTML構造順）
     - header.php
     - front-page.php
     - archive-news.php
     - archive-artworks.php
     - single-artworks.php
     - page.php
     - ABOUTページ
     - CONTACTページ
     - footer.php

  4. 機能要素
     - モーダル、ボタンなど
===========================================
*/



/* 1. フォント・変数・初期化 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
html {
  font-size: 90%;
}
@media (max-width: 768px) {
  html {
    font-size: 75%;
  }
}
body {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  background-color: #f9f9f9;
  font-family: 'Noto Sans JP', sans-serif ;
  color: #333;
}

body.home {
  color: #fff;
}

a {
    color: inherit;      /* 親要素の色を引き継ぐ */
    text-decoration: none; /* 下線を消す */
  }
a:hover,
a:focus {
  color: inherit;           /* 色を変更しない */
  text-decoration: none;    /* 下線を出さない */
}
a:visited {
  color: inherit; /* または任意の色 */
}


/*2. 汎用ユーティリティ */
.post,
.page {
    margin: 0 ;
}
.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
.fade-in.show {
  opacity: 1;
}
.container {
  padding-left: 50px;
  padding-right: 50px;
}
.container .home {
  color: #fff;
}
/*@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}*/
@media (min-width: 900px) {
  .container {
    padding-left: 100px;
    padding-right: 100px;
  }
}
main {
  padding-top: var(--header-height);
  margin-top: 0;
}


/* 3. 各セクション（HTML構造順） */
/* header.php */
:root {
  --header-height: 100px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--header-height);
  font-size: 1.2rem;
  font-family: 'Noto Sans JP', sans-serif ;
}
body.home header {
  background-color: transparent;
}
header a {
  transition: color 0.3s ease;
}
.site-title a:hover,
.main-nav .menu li a:hover {
  color: #cdc141;
}
.site-title {
  font-size: 1.5rem;
  line-height: 1.4;
  display: inline-block;
  z-index: 1001;
}
.main-nav {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.main-nav .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  display: flex;
  gap: 2.5em;
  }
.hamburger {
  display: none;
}
@media (max-width: 800px) {
  .main-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
.main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
.home .main-nav.open {
    background-color: rgba(0, 0, 0, 0.3);
  }  
.main-nav .menu {
    flex-direction: column;
    text-align: center;
    gap: 2em;
  }
/* ボタンの基本設定 */
.hamburger {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

/* 三本線共通 */
.hamburger span {
  position: absolute;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background-color: #333;
  transition: transform 0.4s ease, opacity 0.3s ease, top 0.4s ease;
}

/* 上の線 */
.hamburger span:nth-child(1) {
  top: 8px;
}

/* 真ん中の線 */
.hamburger span:nth-child(2) {
  top: 14px;
}

/* 下の線 */
.hamburger span:nth-child(3) {
  top: 20px;
}

/* ======== ここから「開いた時（×）」の変形 ======== */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 14px; /* 中央に寄せる */
}

.hamburger.active span:nth-child(2) {
  opacity: 0; /* 真ん中は消える */
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 14px; /* 中央に寄せる */
}

  body.home .hamburger span {
  background-color: #fff;
}

 

}
/* front-page.php */

.my-slider, .my-slider .slide {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.my-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.slick-dots {
   width: fit-content;
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
@media (max-width: 700px) {
  .slick-dots {
  bottom: 5em;
}
}
.slick-dotted.slick-slider {
    margin-bottom:0;
}

.slick-dots li button:before {
  color: white; /* 白いドット */
  font-size: 8px;
  opacity: 0.6;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
  color: white;
}


body.front-page .main-visual {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.main-visual .main-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}
.pc-img {
  display: block;
}
.sp-img {
  display: none;
}
.front-page-footer {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 2rem;
  }
@media screen and (max-aspect-ratio: 3/4) {
  .main-visual .main-img {
    max-width: 90vw; 
    max-height: none;
  }
  .pc-img {
    display: none;
  }
  .sp-img {
    display: block;
  }
}


/* archive-news.php */

/* アイキャッチ画像の正方形トリミング */
.news-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1; /* 正方形にトリミング */
  object-fit: cover; /* 画像の中央部分を表示 */
}

.news-item {
    display: flex;
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
}
.news-thumbnail {
    width: 30%;
    margin-right: 4.5em
}
.news-text {
    width: 70%;
}
.news-text time {
  font-size: 0.9rem;
}
.news-title {
    font-size: 1.3rem;
    margin: 0.7em 0;
}
.news-excerpt{
    color: #555;
}

@media (max-width: 768px) {
  .news-item {
      flex-direction: column;
      align-items: center;
  }

  .news-thumbnail {
      width: 100%;
      margin-bottom: 15px;
	  margin-right: 0;
  }

  .news-text {
      width: 100%;
  }
}

.news-thumbnail a {
  display: block;
  overflow: hidden;
}

.pagination {
  display: flex;
  gap: 1.5rem;
  margin: 3rem 0;
  font-size: 1rem;
}
.pagination .page-numbers {
  text-decoration: underline;
  margin: 0.2em;
  padding: 0.5em 1em;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
   transition: color 0.3s ease, border-color 0.3s ease;
}
.pagination .page-numbers:not(.current):hover {
  color: #20a6ff;
  border-color: #51b9ff;
}
.pagination .current {
   background-color: #999;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  cursor: default;
}
@media (max-width: 767px) {
  .pagination {
  justify-content: center;
}
}

/* single-news.php */

.news-post {
    max-width: 800px;
    margin: 0 auto;
    /* padding: 20px; */
}

.single-news-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.news-post time {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 20px;
}

.single-news-content{
  margin-bottom:33px;
}
.single-news-content a{
  color: #0066cc;
  text-decoration: underline;
}
.news-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  margin-bottom: 2em;
  overflow-x: auto;
}
.news-gallery a {
  flex: 0 0 calc((100% - 1.5em)/4); /* a 自体に幅を指定 */
  display: block; /* 高さを画像に合わせるためにブロック */
}

.news-gallery img {
  width: 100%; /* a の幅いっぱいに広げる */
  height: auto; 
  object-fit: cover; /* 正方形や切り抜きは親の高さに合わせて調整 */
}






/* archive-artworks.php */
 .container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2列 */
    gap: 120px 80px;
  }

   .item {
    display: grid;
    grid-template-columns: 60% 30%;  /* 画像とテキストの割合 */
    gap: 8%;
  }

  .item img {
    border-radius: 2%;
    width: 100%;  /* 画像のサイズ */
    height: auto;
  }

  .link-image {
    display: inline-block;
    overflow: hidden;
    border-radius: 2%;
  }

  .link-image img {
   /*transition: transform 0.3s ease-in-out;*/
   display: block;
  }
  
  /*.link-image:hover img {
    transform: scale(1.1); 
  }*/
  
.work-title {
  font-size: 1.05rem;
}
.work-title-en {
  color:#777;
  font-size: 0.75rem;
  
}
.work-size,
.work-year {
  font-size: 0.7rem;
}


  /* モバイル表示 */
  @media (max-width: 768px) {


    .container2 {
      grid-template-columns: 1fr;  /* 1列 */
      gap: 4.5em;
    }

    .item {
      grid-template-columns: 1fr;  /* 縦並びに変更 */
      gap: 3em;
    }

    .item img, .item p {
      width: 100%;  /* 画像とテキストの幅100% */
    }

    .work-title{
      font-size: 1.3rem;
    }
  
    .work-title-en{
      font-size: 1.1rem;
    }

    .work-size,
    .work-year {
      font-size: 0.88rem;
    }

    .item p {
      line-height: 1.6;
      letter-spacing: 0.2em;
    }
  }


.page-text {
  margin-bottom: 2em;
}
.gallery-grid {
  display: block;
  padding: 0;
  }
.gallery-item {
  float: left;
  width: calc(25% - 1.2rem); /* 1.5rem = 左右に0.75remずつの隙間 */
  margin-bottom:1em;
  margin-right: 1em;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}
.thumbnail-wrapper {
  position: relative;
}
.thumbnail-wrapper img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 0;
}
.gallery-meta {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.5rem;
  margin-top: 0;
  text-align: right;
  width: 100%;
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(150, 149, 133, 0.9);
}
.gallery-meta h2 {
  margin: 0 0 0.3em;
}
@media (max-width: 767px) {
  .gallery-meta {
  display: none;
  }
   .gallery-item {
    float: left;
    width: calc(33.333% - 1.7px); /* 2px×2÷3 = 約1.34px 減らす */
    margin-right: 2px;
    margin-bottom: 2px;
    box-sizing: border-box;
  }

  .gallery-item:nth-child(3n) {
    margin-right: 0;
  }

  .gallery-grid {
    margin-left: -20px;
    margin-right: -20px;
    overflow: hidden;
  }
}



/* single-artworks.php */
.work-title-container{
   display: flex;
   flex-direction: row;
   gap: 40px;
   align-items: flex-end;
}

 .work_image_main img{
    width: 100%;
    height: auto;
    max-height: 60vh; /* 画面の縦幅に合わせて縮小 */
    object-fit: contain;
    display: block;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }


.work_image_main {
  text-align: center;
  margin-bottom: 2em;
}
.work_image_main img {
  display: inline-block;
}

.work-title-container{
   display: flex;
   flex-direction: row;
   gap: 40px;
   align-items: flex-end;
   margin-bottom: 16px;
}
.artwork-title {
  font-size: 1.5rem;
}
.artwork-title-en {
  color: #666;
}

.artwork-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-bottom: 2.5em;
}
.artwork-meta p {
  margin: 0;
}
.artwork-description {
  margin-bottom: 3em;
}
.description-content {
  line-height: 4;
}
.artwork-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.artwork-gallery-item {
  width: calc(20% - 0.8em); /* gapを引いたサイズ */
}
.artwork-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.artwork-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.artwork-navigation a {
  text-decoration: none;
}
.artwork-navigation a:hover {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .artwork-gallery-item {
    width: calc(33.333% - 0.67em);
  }
}

/* page.php */
.page-title {
  font-size: 1.2rem;
  margin-bottom: 1em;
}
.page-content {
  margin-top: 0;
}


/* profileページ */


.profile-section{
  margin-bottom: 2em;
}

.profile-content {
  display: flex;
  gap: 8%;
}

.profile-photo {
  flex: 0 0 30%;  /* ← ここを変えれば写真幅変えられる */
}

.profile-text {
  flex: 1;
}

.profile-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


.profile-text h3 {
  font-size: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
ruby {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.5rem; 
}
rt {
  font-size: 0.9rem;
  color: #666;
  display: inline;
}


.profile-text h2{
  font-size: 1.1rem;
  margin-bottom: 1em;
}
@media (max-width: 767px) {
  .profile-photo {
  max-width: 25rem;
  margin-bottom: 3rem;
  }
  .profile-content {
   flex-direction: column;
  }
}






/* CONTACTページ */
.contact-description a {
  color: #555;
  text-decoration: underline;
  transition: color 0.3s ease; /* ← これでふわっと */
}

.contact-description a:hover {
  color: #33ff00;
}



/* footer.php */
.footer-container {
  padding-top: 4em;
  padding-bottom: 2em;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left a svg {
  width: 1.8rem;
  height: 1.8rem;
  color: #666;
  transition: color 0.3s ease;
}
.home .footer-left a svg {
  color: #fff;
}


.footer-left a:hover svg {
  color: #cd28dc; /* ホバー時の色、任意で変更可 */
}







.footer-right {
  text-align: right;
}

.fixed-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
/* 4. 機能要素（モーダル、ボタンなど） */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(247, 247, 247, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(1px);
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
}
.modal-content {
  display: inline-block;
  margin: auto;
}
.modal-content img {
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height: 80vh;
  }
.modal-prev,
.modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 10000;
  padding: 0 1rem;
  opacity: 0.8;
}
.modal-prev:hover,
.modal-next:hover {
  opacity: 1;
}
.modal-prev {
  left: 8vw;
}
.modal-next {
  right: 8vw;
}
@media (max-width: 768px) {
.modal-content img {
    max-width: 90vw;
    max-height: 60vh;
    }
     
   .modal-prev,
  .modal-next {
    top: auto;
    bottom: 1em;
    transform: none;
    padding: 0 5vw;
    font-size: 4rem;
    position: absolute;
    background: none;
    border: none;
    opacity: 0.9;
  }
  .modal-prev {
    left: 0;
  }
  .modal-next {
    right: 0;
  }
  .modal-content {
    position: relative; 
    display: inline-block;
  }
}


/* フェードイン＋ズームイン */
@keyframes zoomFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* フェードアウト＋ズームアウト */
@keyframes zoomFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}
.modal-content.animate-in {
  animation: zoomFadeIn 0.2s ease-in forwards;
}
.modal-content.animate-out {
  animation: zoomFadeOut 0.2s ease-in forwards;
}