/*
================================================================================================================
TOP
================================================================================================================
*/
/*メインビジュアルエリア*/
#main{
  .top-img{
    background:#fffddb; text-align:center;
    p:nth-child(2){display:none;}/*TOP用*/
    &.letter{/*ユビレター応募フォーム*/
      padding:70px; 
      img{width:50%; max-width:208px;}
    }
    &.posted{/*ユビレター応募完了時*/
      padding:40px 0;
      img{width:70%; max-width:400px;}
    }
  }
}
@media screen and (max-width:800px){
#main .top-img p:nth-child(1){display:none;}
#main .top-img p:nth-child(2){display:block;}}
@media screen and (max-width:640px){#main .top-img.letter{padding:30px;}}
@media screen and (max-width:480px){#main .top-img.letter{padding:20px;}}

/*
=========================
お知らせ
=========================
*/
.news{
  width:100%;
  max-width:900px;
  margin:0 auto;
  li{
    display:none; align-items:flex-start;
    > p{width:160px; color:#fff; background:#ff6000; text-align:center; padding:10px 0;}
    > *:nth-child(2){display:block; width:calc(100% - 160px); color:#3b3533; background:#fff; border:4px solid #ff6000; padding:30px;}
    > a{transition:background .2s ease; &:hover{background:#b6ffda;}}
    & + li{margin-top:20px;}
    &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){display:flex;}
  }
}
@media screen and (max-width:800px){
  .news li{
    > *:nth-child(2){width:100%;}
    &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){display:block;}
  }
}
@media screen and (max-width:480px){
  .news li{
    > p{width:120px; padding:5px 0;}
    > *:nth-child(2){border:2px solid #ff6000; padding:35px 20px;}
  }
}

/*
=========================
プロジェクト
=========================
*/
.project{
  display:block; width:100%; max-width:1360px; color:#ff6000; background:#fffddb; border:4px solid; margin:0 auto; transition:all .2s ease;
  & + .project{margin-top:40px;}
  > ul{
    display:flex; width:100%; height:100%;
   > li{
     width:50%;
     & + li{border-left:4px solid;}
     &:nth-child(1){
        display:flex; position:relative; padding:40px 40px 50px; align-items:center;
       p{
       position:relative;
         &::after{
           display:block;
           content:"";
           position:absolute;
           top:4px;
           left:4px;
           width:calc(100% - 8px);
           aspect-ratio:1 /1;
           border-radius:16px;
           border-left:4px solid #fff;
           border-right:4px solid #fff;
           box-shadow:inset 0 15px 2px #fff;
           opacity:.7;
         }
       }
       img{display:block; border:4px solid; border-radius:20px; box-shadow:0 10px 0 #ff6000;}
     }
     > ul{
       display:flex; height:100%; flex-direction:column;
       li{
         display:flex; /*flex-grow:1;*/ align-items:center;
         &:nth-child(1){font-size:clamp(1.625rem, 1.398rem + 1.14vw, 2.25rem);/*36-26*/ font-weight:900; line-height:120%; padding:40px 20px;}
         &:nth-child(2){
           flex-grow:1;
           color:#3b3533;
           background:#fff;
           line-height:2rem;
           border-top:4px solid #ff6000;
           border-bottom:4px solid #ff6000;
           padding:40px 100px;
         }
         &:nth-child(3){
           background-image:url(../img/top/icn_time.png);
           background-size:auto 30px;
           background-position:left 20px center;
           background-repeat:no-repeat;
           padding:20px 20px 20px 60px;
         }
       }
     }
   }
  }
}

a.project:hover{background:#b6ffda;}

@media screen and (max-width:1300px){.project ul > li > ul > li:nth-child(2){padding:20px}}
@media screen and (max-width:1020px){
  .project{
    > ul{
      display:block;
      > li{
        width:100%;
        & + li{border-top:4px solid; border-left:none;}
      }
    }
  }
}
@media screen and (max-width:480px){
  .project{
    border:2px solid;
    & + .project{margin-top:30px;}
    > ul{
     > li{
       & + li{border-top:2px solid;}
       &:nth-child(1){
          padding:20px 20px 25px;
         p{
           &::after{
             top:2px;
             left:2px;
             width:calc(100% - 4px);
             border-radius:18px;
             border-left:2px solid #fff;
             border-right:2px solid #fff;
             box-shadow:inset 0 5px 2px #fff;
           }
         }
         img{border:2px solid; box-shadow:0 5px 0 #ff6000;}
       }
       > ul{
         li{
           &:nth-child(1){padding:20px;}
           &:nth-child(2){
             line-height:1.5rem;
             border-top:2px solid #ff6000;
             border-bottom:2px solid #ff6000;
             padding:40px 20px;
           }
         }
       }
     }
    }
  }
}

/*
=========================
フューチャー
=========================
*/
.inner.feature{
  display:flex; flex-wrap:wrap;
  > *{
    width:calc(25% - 15px); background:#fff; border-radius:10px; margin:15px 0;
    img{display:block; border:4px solid #ff6000; border-radius:10px; box-shadow:0 10px 0 #ff6000; transition:opacity .2s ease;}
  }
  > a:hover img{opacity:.7;}

}
@media screen and (min-width:1301px){
.inner.feature  > *:nth-child(4n - 2){margin:15px 10px 15px 20px;}
.inner.feature  > *:nth-child(4n - 1){margin:15px 20px 15px 10px;}}
@media screen and (max-width:1300px){.inner.feature  > *{width:calc((100% / 3) - 10px);}}
@media screen and (min-width:981px) and (max-width:1300px){.inner.feature  > *:nth-child(3n - 1){margin:15px;}}
@media screen and (max-width:980px){
.inner.feature  > *{width:calc(50% - 10px);}
.inner.feature  > *:nth-child(even){margin-left:20px;}}
@media screen and (max-width:640px){
.inner.feature  > *{width:calc(50% - 5px); margin:10px 0;}
.inner.feature  > *:nth-child(even){margin-left:10px;}}
@media screen and (max-width:480px){
.inner.feature  > *{margin:7px 0;}
.inner.feature  > * img{border-radius:10px; border:2px solid #ff6000; box-shadow:0 5px 0 #ff6000;}}

/*
================================================================================================================
ユビレター
================================================================================================================
*/
.soon{
width:100%;
max-width:640px;
background:#fffddb;
font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);/*30-16*/
line-height:100%;
text-align:center;
border:4px solid;
padding:30px 0;
margin:0 auto;}
@media screen and (max-width:480px){.soon{border:2px solid; padding:20px 0;}}

#form{border-top:4px solid; padding:80px;}
@media screen and (max-width:600px){#form{padding:40px;}}
@media screen and (max-width:480px){#form{border-top:2px solid; padding:40px 20px;}}

.box.white.cl_disp_notfinish .inner{font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/ line-height:1.5rem;}
@media screen and (max-width:480px){.box.white.cl_disp_notfinish .inner{line-height:1.2rem;}}

.cl_disp_finish .text.arrow.small{border-top:none !important;}

/*
=========================
フォームスタイル リセット
=========================
*/
#main{
  label.select{
    display:block; position:relative; width:100%;
    &.pickup{border:4px solid; margin:0 auto 60px;}
    &::before,&::after{display:block; content:""; position:absolute; pointer-events:none; transition:all .2s ease;}
    &::before{
      top:0;
      right:0;
      width:auto;
      height:100%;
      background:#fffddb;
      border-left:4px solid;
      aspect-ratio:1 / 1;
      z-index:2;
    }
    &::after{
      top:calc(50% - 8.5px);
      right:12px;
      width:0;
      height:0;
      border-style:solid;
      border-right:10px solid transparent;
      border-left:10px solid transparent;
      border-top:17px solid #ff6000;
      border-bottom:0;
      z-index:3;
    }
  }
  select,input,textarea{
    display:block;
    position:relative;
    width:100%;
    color:#3b3533;
    font-family:"Zen Kaku Gothic New", sans-serif;
    font-size:inherit;
    border-radius:0;
    border:0;
    padding:10px;
    margin:0;
    vertical-align:middle;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    &:focus{outline:none;}
  }
  select{
    text-align:center; cursor:pointer;
    option{
      transition:all .2s ease;
      &:checked{background:#b6ffda;}
    }
  }
}
@media screen and (max-width:480px){
  #main{
    label.select{
      &.pickup{border:2px solid; margin:0 auto 30px;}
      &::before{border-left:2px solid;}
      &::after{
        top:calc(50% - 6px);
        border-right:8px solid transparent;
        border-left:8px solid transparent;
        border-top:14px solid #ff6000;
      }
    }
  }
}

/*
=========================
設問エリア
=========================
*/
.cl_input_area{
  width:100%; max-width:640px; background:#fffeee; border:4px solid; margin:0 auto;
  h4{
    display:block; text-align:center; border-bottom:4px solid; padding:10px;
    span{display:block; font-size:12px; margin-top:5px;}
  }
  h5{
    display:block;
    background:#fffddb;
    font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/
    line-height:1.8rem;
    border-bottom:4px solid;
    padding:30px 20px;
  }
  &+ .cl_input_area{margin-top:50px;}
}
.cl_answer_hide{display:none;}
@media screen and (max-width:480px){
  .cl_input_area{
    border:2px solid;
    h4{border-bottom:2px solid;}
    h5{line-height:1.4rem; border-bottom:2px solid; padding:20px 10px;}
    &+ .cl_input_area{margin-top:20px;}
  }
}

/*
=========================
楽曲リスト
=========================
*/
#music-list{
  .tab{
    display:flex; border-bottom:4px solid;
    li{
      display:flex;
      width:10%;
      aspect-ratio:1 / 1;
      background:#fffddb;
      justify-content:center;
      align-items:center;
      transition:all .2s ease;
      cursor:pointer;
      & + li{border-left:4px solid;}
      &:hover,&.selected{background:#b6ffda;}
    }
  }
  .tab-inner{
    color:#3b3533; background:#fff; font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/
    .music{
      > *{display:block; cursor:pointer;}
      input[type=radio]{display:none;}
      input:checked + label{background:#b6ffda;}
      label{width:100%; padding:20px; transition:all .2s ease;}
    }
    &.no-data{padding:40px 20px; text-align:center;}
  }
}
@media screen and (max-width:480px){
  #music-list{
    .tab{
      border-bottom:2px solid;
      li + li{border-left:2px solid;}
    }
    .tab-inner .music label{padding:10px;}
  }
}

/*
=========================
確認エリア
=========================
*/
#form-confirm{
  background:#feff9f;
  .inner{
    padding:80px;
    &.posted{background-image:url(../img/common/bg.png);}
  }
  .textarea{min-height:280px;}/*投稿フォーム内だけ高さ*/
  .text{border-top:4px solid;}
  .thankyou{font-size:clamp(3.125rem, 2.67rem + 2.27vw, 4.375rem);/*70-50*/ font-weight:900; line-height:100%; margin-top:20px;}/*完了*/
  .error{color:#f00; font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*22-18*/ font-weight:900; text-align:center; margin:0 auto 20px;}
}

/*確認・ピックアップ*/
.letter{
  &:not(.top-img){background:#fff; border:4px solid;}
  .name{
    background:#fffddb;
    font-size:clamp(1.125rem, 0.966rem + 0.8vw, 1.563rem);/*25-18*/
    border-bottom:4px solid;
    padding:20px 30px;
    span{font-size:clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);/*20-15*/}
  }
  .answer{
    padding:20px;
    .textarea{
      min-height:45px;
      color:#3b3533;
      background-image:linear-gradient(180deg, #ff6000 1px, transparent 1px);
      background-size:100% 2.5em;
      line-height:2.5em;
      padding-bottom:1px;
    }
    ul{
      display:flex; gap:10px; margin:20px auto 0; flex-wrap:wrap;
      li{display:inline-block; border:1px solid; border-radius:5px; padding:5px 20px;}
    }
  }
  & + .letter{margin-top:30px;}
  &.staff{width:90%; border-top:none !important; margin:0 0 0 auto !important;}
}

/*ピックアップ・プルダウン切り替え用*/
#pickup{
  .tab{display:none;}
  .selected{display:block;}
}

@media screen and (max-width:600px){#form-confirm .inner{padding:60px 20px 40px;}}
@media screen and (max-width:480px){
  #form-confirm .text{border-top:2px solid;}
  .letter{
    &:not(.top-img){border:2px solid;}
    .name{border-bottom:2px solid; padding:10px 20px;}
    .answer{
      padding:10px;
      ul{gap:5px; li{padding:3px 10px;}}
    }
  }
}

/*
================================================================================================================
jOURNAL
================================================================================================================
*/
.journal-list{
  &#latest{
    .article{
      display:none;
      &:nth-child(1),&:nth-child(2){display:block;}
    }
  }
  &#backnumber{
    padding-top:0 !important;
    .article{
      &:nth-child(1){margin-top:30px;}
      li:nth-child(1){display:none !important;}
    }
  }
  width:100%; max-width:640px; margin:0 auto;
  .article{
    display:block; color:#ff6000; background:#fffeee; border:4px solid; padding:0 0 40px;
    + .article{margin-top:30px;}
    ul{
      position:relative;
      li:nth-child(1){border-bottom:4px solid #ff6000;}
      li:nth-child(2){
        color:#3b3533;
        background:#fff;
        border-bottom:4px solid #ff6000;
        padding:40px;
        strong{display:block; font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);/*24-18*/ font-weight:900; line-height:120%; margin:0 auto 40px;}
        .date{position:absolute; display:flex; bottom:-40px; left:0; width:100%; height:40px; color:#ff6000; align-items:center; padding-left:20px; pointer-events:none;}
      }
      &::before,&::after{transition:all .2s ease;}
      &::before{
        display:flex;
        content:"READ MORE";
        position:absolute;
        bottom:-40px;
        right:0;
        width:200px;
        height:40px;
        background:#ffddc9;
        border-left:4px solid;
        padding-right:20px;
        justify-content:center;
        align-items:center;
      }
      &::after{
        display:block;
        content:"";
        position:absolute;
        bottom:-28px;
        right:20px;
        width:16px;
        height:16px;
        border-right:4px solid;
        border-bottom:4px solid;
        transform:rotate(-45deg);
      }
    }
    &:hover{
      ul{
        &::before{background:#b6ffda;}
        &::after{right:15px;}
      }
    }
  }
}
@media screen and (max-width:480px){
  .journal-list{
    .article{
      border:2px solid;
      ul{
        position:relative;
        li:nth-child(1){border-bottom:2px solid #ff6000;}
        li:nth-child(2){
          border-bottom:2px solid #ff6000; padding:40px 20px;
          strong{margin:0 auto 20px;}
        }
        &::before{width:150px; border-left:2px solid;}
        &::after{bottom:-26px; width:12px; height:12px; border-right:2px solid; border-bottom:2px solid; }
      }
    }
  }
}

/*ページャー*/
.pagination-container{position:relative; margin:40px auto 0;}
.pagination-container ul{display:flex; width:100%; justify-content:center;}
.pagination-container a{
display:flex;
width:60px;
height:60px;
color:#ff6000;
background:#fffddb;
font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);/*24-18*/
border:4px solid;
margin:0 5px;
justify-content:center;
align-items:center;
transition:all .2s ease;}
.pagination-container a:hover,
.pagination-container li.active a{background:#b6ffda;}
.pagination-container li.disabled{display:none;}
.pagination-container li.next a,.pagination-container li.prev a{display:none !important;}
@media screen and (max-width:480px){
.pagination-container{margin:30px auto 0;}
.pagination-container a{width:40px; height:40px; border:2px solid;}}

/*
=========================
記事ページ
=========================
*/
#main.article{
  .box.white{
    border-top:4px solid #ff6000; border-bottom:4px solid #ff6000;
    strong{display:block; font-size:clamp(1.375rem, 1.057rem + 1.59vw, 2.25rem); font-weight:900; margin:0 auto 40px;}
    .date{position:absolute; top:10px; right:0; width:100%; color:#a19895; text-align:right; padding:0 30px 0 0; pointer-events:none; z-index:3;}
    .pic{
      display:block; margin:20px auto; transition:opacity .3s ease;
      & + .pic{margin-top:0 auto;}
    }
    a:hover .pic{opacity:.7;}
  }
  .btn.back{margin:40px auto;}
}
@media screen and (max-width:640px){#main.article .inner{padding:50px 30px 30px;}}
@media screen and (max-width:480px){
  #main.article .box.white{
    border-top:2px solid #ff6000; border-bottom:2px solid #ff6000;
    .date{padding:0 15px 0 0;}
    .inner{padding:50px 15px 30px;}
  }
}

/*
================================================================================================================
結局誰が上手いねん
================================================================================================================
*/
.youtube_short{
  width:100%; max-width:430px; margin:auto;
  iframe{aspect-ratio:9 / 16; width:100%; height:100%;}
}

#movie-list{
  width:100%; max-width:640px; margin:50px auto 0;
  ul{ 
    position:relative; background:#fff; border:4px solid;
    li{
      position:relative; color:#3b3533; font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);/*24－16*/ line-height:150%; padding:20px 50px 20px 30px; transition:background .2s ease; cursor:pointer;
      & + li{border-top:2px solid #e6dad2;}
      &:hover,&.selected{background:#b6ffda;}
      &::before,&::after{display:block; content:""; position:absolute;}
      &::before{top:calc(50% - 13px); right:10px; width:30px; height:30px; background:#ff6000; border-radius:50%;}
      &::after{top:calc(50% - 2.5px); right:19px; width:0; height:0; border-style:solid; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:9px solid #fff; border-right:0;}
    }
  &::before{display:block; content:"LIST"; background:#fffddb; font-size:clamp(1.5rem, 1.318rem + 0.91vw, 2rem);/*32-24*/ font-weight:900; text-align:center; border-bottom:4px solid; padding:20px;}
  }
}
@media screen and (max-width:480px){
  #movie-list{
    margin:30px auto 0;
    ul{ 
      border:2px solid;
      li{
        line-height:150%; padding:15px 50px 15px 10px;
        & + li{border-top:1px solid #e6dad2;}
      }
    &::before{border-bottom:2px solid;}
    }
  }
}

#member-list{
  width:100%; max-width:640px; margin:0 auto;
  .member{
    display:flex; width:100%: height:100%; border:4px solid;
    > *{width:50%;}
    > p{border-right:4px solid;}
    > ul{
      background:#fff;
      li{
        &:nth-child(1){background:#fffddb; font-size:clamp(1.875rem, 1.534rem + 1.7vw, 2.813rem);/*45-30*/ font-weight:900; line-height:100%; border-bottom:4px solid; padding:20px;}
        &:nth-child(2){color:#3b3533; padding:20px;}
        &:nth-child(3){padding:0 20px; .btn{font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/**22-18*/ padding:15px 0;}}       
      }
    }
    & + .member{margin-top:40px;}
  }
}
@media screen and (max-width:900px){
  #member-list{
    max-width:480px;
    .member{
      display:block;
      > *{width:100%;}
      > p{border-right:none; border-bottom:4px solid;}
      > ul{
        li{
          &:nth-child(1){text-align:center;}
          &:nth-child(3){padding:0 20px 20px;} 
        }
      }
    }
  }
}
@media screen and (max-width:480px){
  #member-list{
    max-width:480px;
    .member{
      border:2px solid;
      > p{border-bottom:2px solid;}
      > ul{
        li{
          &:nth-child(1){ border-bottom:2px solid;}
        }
      }
    }
  }

}