// Extends
%backface_visibility_hidden{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.serif{
  font-family:"HiraMinProN-W3","Hiragino Mincho Pro","Yu Mincho",YuMincho,"MS PMincho",serif;
}

.loop-section{
  display:grid;
  // grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  // grid-gap:20px; // 4カラム
  grid-gap:30px;  // 3カラム

  .item{
    position:relative;
    // height:345px;  // 4カラム
    height:460px; // 3カラム
    color:var(--meta-txt-color, #fff);
    text-shadow:0 0 24px rgba(#000,.68);
    box-shadow:0 0 9px -6px rgba(#000,.68);
    transition:all .3s ease-out;
    overflow:hidden;
    
    a{
      color:var(--meta-txt-color, #fff);
    }
    
    &:hover{
      transform:translateY(-5px);
      box-shadow:0 8px 30px -16px rgba(#000,.58);
      
      figure{
        img{
          transform:scale(1.05);
        }
      }
    }

    figure{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      z-index:0;
      
      &::before,
      &::after{
        z-index:1;
      }

      img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:all 1.4s ease;
        z-index:0;
        @extend %backface_visibility_hidden;
      }
    }
    
    .meta{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index:1;
      
      .title-area,
      .date,
      .cat{
        position:absolute;
        display:inline-block;
        margin:auto;
        
        span{
          display:inline-block;
        }
      }
      
      // タイトルエリア
      .title-area{
        display:flex;
        flex-direction:column;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        width:100%;
        padding:24px 16px;
        line-height:1.48;

        
        // メインタイトル
        .title{
          font-size:var(--title-size, 22px);
          font-weight:800;

          span{
            position:relative;
            &::before{
              content:'';
              position:absolute;
              top:0;
              left:0;
              right:0;
              bottom:0;
              z-index:-1;
            }
          }
        }
        
        // キャプション
        .caption{
          margin-top:20px;
          font-size:var(--cap-size, 14.5px);
          font-weight:400;
        }
      }
    
      // 日付(デフォルト)
      .date{
        top:5px;
        left:5px;
        font-size:15px;
        font-family:STHeiti, STXihei, Arial, sans-serif;
        line-height:20px;
        text-align:center;
        color:var(--date-color, #fff);
        line-height:1.4;
        
        .date-month-day,
        .date-year{
          vertical-align:middle;
          display:inline-block;
        }
        
        .date-month-day{
          span:nth-child(2){
            &::before{
              content:'/';
            }
          }
        }
      }
      
      .cat{
        bottom:6px;
        right:6px;
        font-size:15px;
        font-weight:600;
        line-height:1;

        &::before{
          content:'#';
          position:relative;
          width:0;
          display:inline-block;
          margin-right:14px;
        }
      }
    }
    
    // タイトルが左上の場合
    &.txt-pos-top{
      &.txt-pos-l{
        // 日付は左下に表示
        .meta{
          .date{
            top:auto;
            bottom:10px;
          }
        }
      }
    }
    
    // 日付(フレーム加工ありの場合)
    &.frame-date{
      .meta{
        .date{
          display:flex;
          flex-direction:column;
          justify-content:center;
          width:44px;
          height:44px;
          // color:var(--date-color, #222);
          // background-color:var(--date-bg-color, #fff);
        }
      }
      
      // ボーダー装飾
      &.frame-date__bd{
        .meta{
          .date{
            top:10px;
            left:10px;
            border-style:solid;
            border-width:0 0 1px 1px;
          }
        }
      }
      
      // サークル
      &.frame-date__arc{
        .meta{
          .date{
            text-shadow:none;
            width:52px;
            height:52px;
            color:var(--date-bg-color, #222);
            background-color:var(--date-color, #fff);
            border-radius:50%;
          }
        }
      }
      
      // 縦書きの場合
      &.vertical-txt{
        .meta{
          .title-area{
            .caption{
              margin-top:32px;
            }
          }
        }
      }
    }
    
    // ボールド解除
    &.normal-weight{
      .title-area{
        .title{
          font-weight:400;
        }
      }
    }
    
    // テキストエリアの位置(縦書きは対象外)
    &:not(.vertical-txt){
      
      // 中央上
      &.txt-pos-top{
        .title-area{
          top:0;
          transform:translate(-50%, 0);
        }
        
        // 日付があるとき
        &.has-date{
          .title-area{
            top:42px;
          }
        }
        
        // 左右寄せの場合
        &.txt-pos-l,
        &.txt-pos-r{
          .title-area{
            transform:none
          }
        }
  
        // 日付があるとき
        &.has-date:not(.txt-pos-l){
          .title-area{
            padding-top:42px;
          }
        }
      }
      

      // 中央下
      &.txt-pos-btm{
        .title-area{
          top:auto;
          bottom:26px;
          transform:translate(-50%, 0);
        }
        
        // 左右寄せの場合
        &.txt-pos-l,
        &.txt-pos-r{
          .title-area{
            transform:none
          }
        }
      }

      // 中央左
      &.txt-pos-l{
        .title-area{
          left:0;
          text-align:left;
          transform:translate(0, -50%);
        }
      }

      // 中央右
      &.txt-pos-r{
        .title-area{
          left:auto;
          right:0;
          text-align:right;
          transform:translate(0, -50%);
        }
      }
    }

    
    // 縦書き共通
    &.vertical-txt .title-area,
    &.vertical-date .meta .date,
    &.vertical-cat .meta .cat{
        writing-mode:vertical-rl;
        justify-content:space-between;
        text-align:left;
    }
    
    // 縦書き日付
    &.vertical-date{
      .meta{
        .date{
          top:10px;
          left:2px;
          .date-year{
            margin-right:0;
          }
        }
      }
    }
    
    // 縦書き
    &.vertical-txt{
      .meta{
        .title-area{
          height:calc(100% - 84px);
          width:calc(100% - 84px);
          padding:0;
          
          .caption{
            margin-top:10px;
          }
        }
      }
    }
    
    &.vertical-cat{
      
      &.has-frame.fm-bd.no-right{
        .meta .cat{
          bottom:32px;
          color:var(--meta-txt-color, #fff);
        }
      }
      
      &.has-frame.fm-bd:not(.no-right){
        .meta .cat{
          color:var(--bg-txt-color, #222);
          text-shadow:none;
        }
      }
      
      .meta{
        .title-area{
          padding-right:48px;
        }
        .cat{
          &::before{
            margin:0 0 4px 0;
          }
        }
      }
    }
    

    // フレームあり
    &.has-frame{
      &.frame-bd{
        figure{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            border:30px solid var(--frame-color, #fff);
        }
        
        &.no-right{
          figure{
            border-right-width:0;
          }
          &:not(.vertical-txt){
            .title-area{
              padding-right:16px;
            }
          }
        }

        &.no-btm{
          figure{
            border-bottom-width:0;
          }
          &:not(.vertical-txt){
            .title-area{
              padding-bottom:24px;
            }
          }
        }

        &.no-top{
          figure{
            border-top-width:0;
          }
          &:not(.vertical-txt){
            .title-area{
              padding-top:24px;
            }
          }
        }

        &.no-left{
          figure{
            border-left-width:0;
          }
          &:not(.vertical-txt){
            .title-area{
              padding-left:16px;
            }
          }
        }
        
        &:not(.no-top) .date,
        &:not(.no-btm) .cat{
          color:var(--frame-txt-color, #222);
          text-shadow:none;
        }
        
        // タイトルとボーダーを重ねる場合
        &.title-ovlp{
          // txt-pos-top とセットで指定
          
          figure{
            border-top-width:68px;
          }
          .meta{
            .title-area{
              padding-top:24px;
              
              .title{
                text-shadow:none;
                color:var(--title-color,#222);
              }
            }
          }
          
          // 縦書きの場合
          &.vertical-txt{
            figure{
              border-top-width:30px;
              border-right-width:98px;
            }
            .meta{
              .title-area{
                padding-top:44px;
              }
            }
          }
        }
      }
      
      .title-area{
        padding:42px;
      }
    }
    
    // ラインフレームがあるとき
    &.has-line-frame{
      .title-area{
        padding:28px;
      }
      
      .date,
      .cat{
        margin:12px;
      }
    }

    // インナーフレーム
    &.has-inner-frame{
      figure{
        &::after{
          content:'';
          position:absolute;
          top:50%;
          left:50%;
          display:block;
          width:calc(100% - 20px);
          height:calc(100% - 20px);
          transform:translate(-50%, -50%);
        }
      }
    }

    // ラインフレーム
    &.frame-line{
      figure{
        &::after{
          border:1px solid var(--frame-color, #fff);
        }
      }
      
      &.frame-line__skew{
        figure{
          &::after{
            transform:translate(-50%, -50%) skew(-45deg);
          }
        }
      }
      
      &.line-dashed{
        figure{
          &::after{
            border-style:dashed;
          }
        }
      }
      
      &.line-double{
        figure{
          &::after{
            border-width:4px;
            border-style:double;
          }
        }
      }
    }
    
    
    // 透かし図形があるとき
    &.has-shape-bg{
      figure{
        &::after{
          width:60%;
          height:60%;
          background-color:var(--frame-color, #fff);
          opacity:0.3;
        }
      }
      &.shape__triangle{
        figure{
          &::after{
            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
          }
        }
      }
      
      &.shape__chevron{
        figure{
          &::after{
            clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
          }
        }
      }
      &.shape__parallelogram{
        figure{
          &::after{
            clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
          }
        }
      }
      &.shape__rhombus{
        figure{
          &::after{
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          }
        }
      }
      &.shape__circle{
        figure{
          &::after{
            clip-path: circle(50% at 50% 50%);
          }
        }
      }
      &.shape__pentagon{
        figure{
          &::after{
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
          }
        }
      }
      &.shape__star{
        figure{
          &::after{
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          }
        }
      }
    }

    // 回転タイトル
    &.rotate-title{
      .title-area{
        .title{
          transform:rotate(-15deg);
        }
        .caption{
          margin-top:60px;
        }
      }
      
      &.txt-pos-top{
        .title-area{
          margin-top:60px;
        }
      }
      
      &.rotate-rev{
        .title-area{
          .title{
            transform:rotate(15deg);
          }
        }
      }
      
      // 縦書きの場合
      &.vertical-txt{
        .title-area{
          .title{
            margin-right:42px;
          }
        }
      }
    }
    
    
    // タイトル背景
    &.title-back{
      .title-area{
        .title{
          span{
            padding:12px;
            text-shadow:none;
            color:var(--title-color, #222);
            &::before{
              background-color:var(--title-back-color, #fff);
            }
          }
        }
      }
    
      &.title-back__translucent{
        .title-area{
          .title{
            span{
              &::before{
                opacity:.5;
              }
            }
          }
        }
      }
      
      &.title-back__bd{
        .title-area{
          .title{
            span{
              border:1px solid;
            }
          }
        }
      }
    }
  }
}


// メディアクエリ
@media ( max-width : 1439px ){
  .loop-section{
    .item{
      height:calc(33.33vw - 20px);
    }
  }
}
@media ( max-width : 980px ){
  .loop-section{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 20px;

    .item{
      height:calc(50vw - 10px);
    }
  }
}

@media ( max-width : 667px ){
  .loop-section{
    grid-template-columns: minmax(0, 1fr);

    .item{
      height:50vh;
    }
  }
}