/* =========================
   Artwork page layout
   ========================= */

.cover-text {
    height: 35px;
    z-index: 10;
}

.showcase-main {
    margin-top:80px;
    padding-left: max(260px, calc((100vw - 1800px + 10px)*0.5 + 260px));
    padding-right: max(10px, calc((100vw - 1800px + 270px)*0.5 +10px));
}

.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: center;
    flex-wrap: wrap;    
    margin: 30px;
    margin-top: 100px;
}

/* 画像＋Pinterestボタン＋Learn more をまとめたボックス */
.showcase-image, .button-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28%; /* 目安サイズ */
    margin-bottom: 50px;
}

.showcase-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    border-radius: 3px;
}

/* Pinterestボタン */
.showcase-image a.pin-button{
    align-self: flex-end;
    margin-bottom: 8px;
}

.button-2row {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 上段：左右配置 */
.button-top {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

/* 下段：中央 */
.button-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;  
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap; /* 画面狭いとき折り返し */
  text-align: center;
}

a.nav-prev, a.nav-next{
    width: 100px;
}


a.nav-next{ text-align: left;}
a.nav-prev{ text-align: right;}


/*.showcase-image .learn-more a, .back-to-list a{*/
.button-bottom a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid currentColor;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 0.25em 0.25em; 
    overflow: hidden;
    flex-shrink: 0;        /* 縮小させない */
    
    color: #333;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    transition: all 0.25s ease;
    margin-top: 1rem;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}
.nav.en{
    font-weight: 400;
}

.image-overlay{
    position:fixed;
    inset:0;
    background:rgba(120,120,120,0.9); /* 黒→グレー */
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.image-overlay img{
    border-radius: 3px;
    max-width:90vw;
    max-height:90vh;
    box-shadow:0 10px 40px rgba(0,0,0,0.6);
}


/*** 三角形 */




/* 親 overlay 内の画像を relative にして、矢印を絶対配置 */
.image-overlay img {
    position: relative; /* overlay 内での基準 */
    z-index: 1;
}
/* 左矢印 */
.overlay-left {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-right: 50px solid rgba(220,220,220,1);
    z-index: 10;
}


/* 右矢印 */
.overlay-right {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 50px solid rgba(220,220,220,1);
    z-index: 10;
}

/* ホバー時に少し明るく */
.overlay-left:hover, .overlay-right:hover {
    filter: brightness(1.5);
}


/***/





.back-to-list a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* クリック時は少し戻す */
.back-to-list a:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}


/* =========================
   Responsive rules
   ========================= */
@media (max-width: 1500px) {

    .showcase-image, .button-area{
	width: 45%;
	padding: 50px 30px;
    }
}
@media (max-width: 1200px) {
    .showcase-main {
	padding: 0;
    }
    .showcase-image, .button-area{
	padding: 30px;
    }
}
    
@media (max-width: 600px) {
    .cover-text {
	height: 30px;
    }
    .container {
	flex-direction: column;
	padding: 1px;
    }

    .showcase-image, .button-area{
	width: 80%;
    }

  .back-to-list.desktop-only {
    display: none;
  }
  .showcase-image .learn-more {
    display: block;
  }
}

/* PC/タブレット: 画像ごとのLearn moreは非表示、最後の4番目に表示 */
@media (min-width: 600px) {
  .showcase-image .learn-more {
    display: none;
  }
  .back-to-list.desktop-only {
    display: block;
  }
}