@charset "utf-8";
/*----------------------------------------
   　終了したイベント
----------------------------------------*/
/*バックナンバーエリア全体*/
    .salon_backnumber{
      width: 100%;
      background: #F4F4F4;
      margin: 80px 0; 
      padding: 70px 0;
    }			  
/*「終了したイベント」見出し*/
    .salon_backnumber h3{
      margin: 0 auto;
      padding: 50px 0 70px;
      width: clamp(calc(14rem + 80px),calc(25.8vw + 130px),(15.5rem + 130px));/*16rem*/
      text-align: center;
      font-size: clamp(1.5rem,1.7vw,31px);/*clamp(1.5rem,3.2vw,31px)*/
      color: var(--blue);
    }
    .headline_flex{
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 1em;
    }
    .salon_backnumber h3::before,
    .salon_backnumber h3::after{
      display: block;
      content: "";
      width: 25px;
      height: 1px;
      background-color: var(--blue);
    }
    .salon_backnumber h3::before{
      left: 0;
    }
    .salon_backnumber h3::after{
      right: -25px;
    }

/*下部、タイポグラフィ装飾「BACK NUMBER」*/

    .back_typography_wrap{
        width: 100%;
        padding: 100px max(26px,3vw) 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .back_typography{
        text-align: right;
        font-size: clamp(42px,6vw,92px);
        font-weight: 400;
        line-height: 1.44;
        color: rgba(83,108,144,0.24);
    }


 /*li::before*/
      ul.backnumber_list li.backnumber_item::before{/*-------.backnumber_itemの子要素------*/
        font-family: "Noto Sans JP";
        font-size: 12px;
        font-weight: 500;
        color: var(--blue);
        /*親要素のflexboxに対する設定*/
         flex-grow: 0;/*伸縮させない*/
      }
      ul.backnumber_list li.backnumber_item.back_01::before{
        content: "(01)";
      }
      ul.backnumber_list li.backnumber_item.back_02::before{
        content: "(02)";
      }
      ul.backnumber_list li.backnumber_item.back_03::before{
        content: "(03)";
      }
      ul.backnumber_list li.backnumber_item.back_04::before{
        content: "(04)";
      }
      ul.backnumber_list li.backnumber_item.back_05::before{
        content: "(05)";
      }


        /*「アーカイブ動画を観る」ボタン*/
        .backnumber_btn{
            width: 100%; 
            padding: 10px max(10px,2.8cqw);/*10px 10px～14px*/
            background: var(--white); 
            border: 1px solid #536c90;/*rgba(83, 108, 144, 0.40)*/
            border-top: none;
            display: grid; 
            justify-items: end;
            align-items:center;
            font-size: clamp(15px,3.2cqw,16px);
            font-weight: 500;
            transition: 0.3s ease-in-out;
        }

        .backnumber_btn_inner{
            display: flex; 
            justify-content: space-between;
            align-items: center;
            column-gap: max(5px,1.42cqw);
        }
        .play-archive-video{
            font-size: 0.9375rem;
        }
        .play-icon{
            position: relative;
            width: 40px;
            height: 40px;
            display: grid;
            place-items:center;
        }
        .play-icon::after{
            content: "";
            display: block;
            background: var(--blue);
            width: 8px;
            height: 10px;
            clip-path: polygon(0 0 ,100% 50%,0 100%);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-30%, -50%);
        }
        .play-icon img{
            width: 100%;
            height: auto;
            position: absolute;
              animation: rotation-btn 24s linear infinite;	
             -webkit-animation: rotation-btn 24s linear infinite;
              -moz-animation: rotation-btn 24s linear infinite;
              -o-animation: rotation-btn 24s linear infinite;
              transition: .5s;
        }
        /*  ボタンのホバーアクション(回転早く)  */
        .backnumber_btn:hover .play-icon img{
            -webkit-animation: rotation-btn-h 10s linear infinite;
            -moz-animation: rotation-btn-h 10s linear infinite;
            -o-animation: rotation-btn-h 10s linear infinite;
            animation: rotation-btn-h 10s linear infinite;	
                }      
        .backnumber_btn:hover .play-archive-video{
            color: var(--blue);
        }


     /*///////【画面幅最小～1279pxまで】///////*/ 
/*@media screen and (width < 2520px){*/
    
      .container{/*基準コンテナ設定*/
          container-type: inline-size;
      }
    
/*  .backnumber_grid.backnumber_list  */
    .backnumber_grid{
      display: grid;
      grid-template-columns: minmax(0,1fr);
      gap: 40px;
    }
 /*ul*/
      ul.backnumber_list{
          width: 90%;/*2024.1.25変更*/
          max-width: 390px;
          margin: 0 auto;
      }

    @media (min-width:768px){
        .backnumber_grid{
          grid-template-columns: repeat(2, minmax(351px,390px));
          column-gap: min(3%,40px);
          justify-content: center;
        }
          ul.backnumber_list{
              max-width: 90%;
          }
    }

    /*===== 掲載無し時に表示 =====*/
    @media (min-width:1280px){
        .backnumber_grid{
          grid-template-columns: repeat(3, minmax(351px,390px));
        }
    }


 /*li*/
      ul.backnumber_list li.backnumber_item{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          /*counter-increment: num -1;*//*カウントダウン*/
}
 /*li::before*/
      ul.backnumber_list li.backnumber_item::before{/*-------.backnumber_itemの子要素------*/
        margin-bottom: 5px; 
      }

    /*-------.backnumber_itemの子要素------*/
    .backnumber_item_border{
        border: 1px solid #536c90;/*rgba(83, 108, 144, 0.40)*/
        /*親要素のflexboxに対する設定*/
          flex-grow: 1;/*要素ごとに文章量の差がある場合は、少ない方が多い方に合わせて伸びて高さが揃う*/
        /*このクラスのflexbox設定*/
          display: flex;
          flex-direction: column;
          justify-content: space-between;
    }

        .item_inner_text-wrap{
            width: 100%;
            display: flex;
            flex-direction: column;
            /*row-gap:15px;*/
            justify-content: space-between;
            flex-grow: 1;
        }
/*text-wrap_top*/
        .item_inner_text-wrap_top{
            text-align: right;
/*
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            row-gap:15px;
            font-weight: 500;
            flex-grow: 1;
*/
        }

        .backnumber_event_date{
            border-bottom: 1px solid #536c90;/*rgba(83, 108, 144, 0.40)*/
            padding: clamp(7px,2cqw,10px) clamp(10px,3cqw,20px);
            text-align: right;
            font-size: clamp(0.8125rem,3.2cqw,0.9375rem);
            font-weight: 600;
        }
        .backnumber_event_date span{
            font-size: clamp(0.8125rem,3.2cqw,0.9375rem);
        }


/*text-wrap_middle*/
        .item_inner_text-wrap_middle{
            width: 100%;
            padding: max(15px,4.27cqw) max(10px,2.8cqw);/*padding: max(15px,4.27cqw) max(10px,2.8cqw) 0;   15~21px 10~14px 0*/
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /*row-gap:10px;*/
            font-weight: 500;
            flex-grow: 1;
        }

      .item_inner_img-wrap{
          width: 100%;
          max-width: 150px;
          margin-bottom: 15px;
          flex-grow: 0;
      }

      .backnumber_img{
/*          width: 100%;*/
          box-shadow: 0 4px 15px rgba(51, 51, 51, 0.1);
      }



        .backnumber_img{
            flex-grow: 0; /*～1279*/
            width: clamp(75px,20.58cqw,100px); 
            height: clamp(75px,20.58cqw,100px); 
            overflow: hidden;
        }

        .backnumber_title{
            min-height: 5.0625rem;
            /*font-size: clamp(1.25rem,5.1cqw,1.5rem);*//*20px~24px*/
            font-size: clamp(1.25rem,5.8cqw,1.5rem);
            font-weight: 700;
        }
        .backnumber_flex-for-narrow{
            min-height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap:10px; 
        }

        .backnumber_name{
            flex-grow: 1;/*～1279*/
            max-width: clamp(245px,68.82cqw,340px);
            min-height: 5rem;
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .backnumber_name_position{
            font-size:clamp(1rem,4.11cqw,1.1875rem);/*16px~19px*/
            /*min-height: 2rem;*/
        }	
        .backnumber_name_name{
            text-align: right;
            font-weight: 500;
            font-size: clamp(1.3125rem,5.41cqw,1.5625rem);/*21px~25px*/
        }
        .backnumber_name_name span{
            font-size: 0.75rem;/*12px*/
            margin-left: 0.5rem;
        }

/*text-wrap_bottom*/
        .item_inner_text-wrap_bottom{
            /*padding: 0 max(10px,2.8cqw) max(15px,4.27cqw);*//*0 10~14px 15~21px*/
            flex-grow: 0;
        }
        .salon_backnumber .salon__interviewer{
            font-size: clamp(0.9375rem,3.64cqw,1rem);/*15px~16px*/
            font-family: 'Shippori Mincho',serif;
            margin-top: 10px;/*0*/
        }
        .salon_backnumber .salon__interviewer span{
            margin-left: 5px;
        }

    
                @container (500px <= width){
                    .item_inner_text-wrap_middle{
                        padding: 25px 20px;/*padding: 25px 20px 0*/
                    }
                    .item_inner_text-wrap_bottom{
                        /*padding: 0 20px 25px;*/
                    }
                    .backnumber_btn_inner{
                        column-gap: 10px;
                    }
                    
                    .backnumber_btn{
                        padding: 10px 20px;/*10px 10px～14px*/
                    }
                    
                    
                }

    @media (min-width:1920px){
        .backnumber_title{
            font-size: 1.425rem;/*22.8px*/
            min-height: 5.56rem;
            
        }
        .backnumber_grid{
          grid-template-columns: repeat(3, minmax(351px,390px));
        }
    }
/*}*/