@charset "UTF-8";
#voice iframe{
    height: auto;
    aspect-ratio: 16/9;
    width: 100%;
    border-image-source: linear-gradient(var(--color01),var(--color01));
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
  }
#voice .interview .school{
      color:white;
      background-color: var(--color);
      width: fit-content;
      display: grid;
      place-items:center;
    }
#voice hgroup{
    display: grid;
    font-family: 'Noto Sans JP' , sans-serif;
    justify-content: start;
    align-items: center;
  }
#voice hgroup .school{
      display: grid;
      place-items:center;
      background-color: var(--color);
      color:white;
      grid-column: 1;
      grid-row: 1;
    }
#voice hgroup .name{
      grid-column: 3;
      grid-row: 1;
    }
#voice hgroup .hometown{
      grid-column: 4;
      grid-row: 1;
    }
#voice hgroup h2{
      grid-column: 1/6;
      grid-row: 2;
      line-height: 1.3;
    }
#voice .content h3{
      font-weight: 600;
      color:var(--color01);
      font-family: 'Noto Sans JP' , sans-serif;
      font-size: 2.4rem;
      line-height: 1.3;
    }
#voice .content p{
      line-height: 2;
    }
#voice .content h3 + p{
      margin-top: calc( 16 var(--remBase) );
    }
#voice .content p + h3{
      margin-top: calc( 32 var(--remBase) );
    }
#voice .content img{
	max-width: 100%;
	height: auto;
    }
@media screen and ( width <= 750px ){
#voice{
    padding-top: calc( 24 var(--remBase) );
    padding-bottom: calc( 44 var(--remBase) )
}
    #voice :is( hgroup , iframe , .content , #paginationSingle ){
      width: calc( 368 var(--viewportBase) );
      margin-inline: auto;
    }
    #voice hgroup{
      grid-template-columns: auto calc( 20 var(--percentBase) ) auto auto 1fr;
      row-gap: calc( 16 var(--remBase) );
    }
      #voice hgroup .school{
        height: calc( 37 var(--remBase) );
        padding-inline: calc( 8 var(--remBase) );
        text-indent: 0.05em;
        font-size: 1.4rem;
        line-height: 1.5;
      }
      #voice hgroup :where( .name , .hometown ){
        font-size: 1.4rem;
        line-height: 1.7;
      }
      #voice hgroup h2{
        font-family: 'Noto Sans JP' , sans-serif;;
        font-size: 2.4rem;
        font-weight: 500;
      }
    #voice iframe{
      margin-top: calc( 40 var(--remBase) );
    }
    #voice .splide{
      margin-top: calc( 40 var(--remBase) );
      margin-left: calc( 16 var(--viewportBase) );
    }
      #voice .splide img{
        width: auto;
        height: calc( 240 var(--remBase) );
      }
    #voice .content{
      margin-top: calc( 40 var(--remBase) );
    }
      #voice .content p{
        font-size: 1.4rem;
      }
  }
@media screen and ( width > 750px ),print{
#voice{
    padding-top: calc( 67 var(--remBase) );
    padding-bottom: calc( 80 var(--remBase) );
    display: grid;
    grid-template-columns: calc( 160 var(--percentBase) ) calc( 162.5 var(--percentBase) ) calc( 277.5 var(--percentBase) ) calc( 40 var(--percentBase) ) calc( 917.5 var(--percentBase) ) calc( 162.5 var(--percentBase) ) calc( 160 var(--percentBase) )
}
    #voice iframe{
      grid-column: 3/6;
      grid-row: 1;
    }
    #voice .splide{
      grid-column: 2/4;
    }
      #voice .splide li + li{
        margin-top: calc( 40 var(--remBase) );
      }
      #voice .splide img{
        width: 100%;
        height: auto;
      }
    #voice :where( hgroup , .content ){
      grid-column: 5/7;
    }
    #voice #paginationSingle{
      grid-column: 1/-1;
    }
    #voice:has(iframe){
      grid-template-rows: calc( 695 var(--remBase) ) calc( 81 var(--remBase) ) auto calc( 40 var(--remBase) ) auto 1fr calc( 80 var(--remBase) ) calc( 40 var(--remBase) );
    }
      #voice:has(iframe) .splide{
        grid-row: 3/7;
      }
      #voice:has(iframe) hgroup{
        grid-row: 3;
      }
      #voice:has(iframe) .content{
        grid-row: 5/7;
      }
      #voice:has(iframe) #paginationSingle{
        grid-row: 8;
      }
    #voice:not(:has(iframe) ){
      grid-template-rows: auto calc( 40 var(--remBase) ) auto 1fr calc( 80 var(--remBase) ) calc( 40 var(--remBase) );
    }
      #voice:not(:has(iframe) ) .splide{
        grid-row: 1/5;
      }
      #voice:not(:has(iframe) ) hgroup{
        grid-row: 1;
      }
      #voice:not(:has(iframe) ) .content{
        grid-row: 3/5;
      }
      #voice:not(:has(iframe) ) #paginationSingle{
        grid-row: 6;
      }
    #voice hgroup{
      grid-template-columns: auto calc( 20 * 100% / 1080 ) auto auto 1fr;
      row-gap: calc( 24 var(--remBase) );
    }
      #voice hgroup :where( .school , .name , .hometown ){
        font-size: 3.2rem;
        line-height: 1.3;
        letter-spacing: 0.05em;
      }
      #voice hgroup .school{
        height: calc( 74 var(--remBase) );
        padding-inline: calc( 16 var(--remBase) );
        text-indent: 0.05em;
      }
      #voice hgroup h2{
        font-size: 4.8rem;
        line-height: 1.3;
        letter-spacing: 0.1em;
      }
      #voice .content p{
        font-size: 2rem;
      }
  }
#paginationSingle ul{
    display: grid;
    align-items: center;
  }
#paginationSingle ul a{
		grid-row: 1;
		display: grid;
		place-items:center;
    width: 100%;
    height: 100%;
	}
#paginationSingle ul .archive{
		grid-column: 2;
	}
#paginationSingle ul :where( .prev , .next ){
    aspect-ratio: 1;
  }
#paginationSingle ul .prev{
		grid-column: 1;
	}
#paginationSingle ul .next{
		grid-column: 3;
	}
#paginationSingle ul{
    justify-content: center;
    grid-auto-rows: calc( 40 var(--remBase) );
}
#paginationSingle li{
    height: 100%;
  }
#paginationSingle .archive > a{
    background-color: white;
    border:solid 1px #C4C4C4;
    aspect-ratio: 119 / 40;
  }
#paginationSingle :where( .prev , .next ) a{
    background-color: var(--color01);
    border-color:var(--color01);
  }
#paginationSingle :where( .prev , .next ) a img{
      filter:var(--filterWhite);
      height: calc( 14 var(--remBase) );
    }
@media screen and ( width <= 750px ){
#paginationSingle{
    margin-top: calc( 114 var(--remBase) )
}
    #paginationSingle ul{
      grid-template-columns: calc( 40 var(--percentBase) ) calc( 120 var(--percentBase) ) calc( 40 var(--percentBase) );
      column-gap: calc( 16 var(--percentBase) );
    }
    #paginationSingle .archive a{
      font-size: 1.4rem;
      line-height: 1.7;
    }
  }
@media screen and ( width > 750px ),print{
    #paginationSingle ul{
      grid-template-columns: calc( 40 * 100% / 1360 ) calc( 180 * 100% / 1360 ) calc( 40 * 100% / 1360 );
      column-gap: calc( 16 * 100% / 1360 );
    }
    #paginationSingle .archive a{
      font-weight: 500;
      font-size: 1.8rem;
      line-height: 1.3;
    }
  }
@media ( hover : hover ){
    #paginationSingle li:not(.prev , .next) a:hover{
      background-color: var(--color01);
      color:white;
      border-color: var(--color01);
    }
    #paginationSingle :where( .prev , .next ) a:hover{
      background-color: white;
    }
      #paginationSingle :where( .prev , .next ) a:hover img{
        filter:var(--filterColor01);
      }
}
@media ( prefers-reduced-motion : no-preference ){
    #paginationSingle li:not(.prev , .next) a{
      transition: color var(--transitionBase) , background-color var(--transitionBase) , border-color var(--transitionBase);
    }
    #paginationSingle :where( .prev , .next ) a{
      transition: background-color var(--transitionBase);
    }
      #paginationSingle :where( .prev , .next ) a img{
        transition: filter var(--transitionBase);
      }
}
#otherVoices h3{
    font-weight: 500;
    line-height: 1.3;
  }
#otherVoices a{
    display: grid;
    background-color: white;
    height: 100%;
  }
#otherVoices picture{
    width: 100%;
    height: 100%;
    grid-row: 1;
  }
#otherVoices picture img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
#otherVoices picture:has(img[src*="youtube"]){
      position: relative;
    }
#otherVoices picture:has(img[src*="youtube"])::before{
        content: "";;
        display: block;;
        font-size: 0;;
        width: 100%;;
        background-position: left center;;
        background-repeat: no-repeat;;
        background-size: contain;;
        background-image: url("../images/ui/icon/play01.svg");
        position: absolute;
        width: auto;
        inset:0;
        margin:auto;
      }
#otherVoices hgroup{
    grid-row: 1;
    display: grid;
    font-family: 'Noto Sans JP' , sans-serif;
  }
#otherVoices .school{
    background-color: var(--color);
    display: grid;
    place-items:center;
    color:white;
    width: fit-content;
    line-height: 1.5;
  }
#otherVoices :where( .name , .hometown ){
    line-height: 1.5;
  }
#otherVoices .name{
    grid-column: 1;
  }
#otherVoices .hometown{
    grid-column: 2;
  }
#otherVoices h4{
    color:var(--color01);
    font-family: 'Noto Sans JP' , sans-serif;
  }
@media screen and ( width <= 750px ){
#otherVoices{
    margin-bottom: calc( 26 var(--remBase) );
    background-color: var(--color0103);
    padding-top: calc( 24 var(--remBase) );
    padding-bottom: calc( 29 var(--remBase) )
}
    #otherVoices h3{
      font-size: 3.2rem;
    }
    #otherVoices .splide__track{
      margin-top: calc( ( 16 - 7 ) var(--remBase) );
      padding-top: calc( 7 var(--remBase) );
    }
    #otherVoices a{
      grid-template-columns:1fr calc( 112 * 100% / 304 ) ;
      align-items: start;
      position: relative;
    }
    #otherVoices hgroup{
      grid-column: 1;
      padding-inline: calc( 8 * 100% / 192 );
      padding-top: calc( 20 var(--remBase) );
      grid-template-columns: auto auto 1fr;
      row-gap: calc( 4 var(--remBase) );
    }
    #otherVoices .school{
      position: absolute;
      top: calc( -7 var(--remBase) );
      left: calc( 8 * 100% / 304 );
      height: calc( 21 var(--remBase) );
      font-size: 1.4rem;
      padding-inline: calc( 8 var(--remBase) );
    }
    #otherVoices :where( .name , .hometown ){
      grid-row: 1;
      font-size: 1.4rem;
      line-height: 1.5;
    }
    #otherVoices h4{
      grid-row: 2;
      grid-column: 1/4;
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 1.5;
    }
    #otherVoices picture{
      grid-column: 2;
    }
        #otherVoices picture:has(img[src*="youtube"])::before{
          aspect-ratio:35/26;
          height: calc( 26 var(--remBase) );
        }
  }
@media screen and ( width > 750px ),print{
#otherVoices{
    position: relative;
    margin-bottom: calc( 59 var(--remBase) );
    display: grid;
    padding-top: calc( 65 var(--remBase) );
    padding-bottom: calc( 53 var(--remBase) )
}
    #otherVoices:before{
      content:"";
      font-size: 0;
      position: absolute;
      background-color: var(--color0103);
      height: 100%;
      z-index: -1;
    }
    #otherVoices h3{
      grid-column: 2;
      font-size: 4.8rem;
      padding-top: calc( 56 var(--remBase) );
      grid-row: 1;
    }
    #otherVoices .splide__track{
      grid-column: 3;
      grid-row: 1;
    }
    #otherVoices a{
      grid-template-columns: calc( 240 * 100% / 600 ) 1fr;
      align-items: center;
    }
    #otherVoices picture{
      grid-column: 1;
      grid-row: 1;
    }
        #otherVoices picture:has(img[src*="youtube"])::before{
          aspect-ratio:65/49;
          height: calc( 49 var(--remBase) );
        }
	#otherVoices picture img{
      width: calc( 240 var(--remBase) );
      height: calc( 240 var(--remBase) );
      object-fit: cover;
      object-position: center;
    }
    #otherVoices hgroup{
      grid-column: 2;
      padding-inline: calc( 20 * 100% / 360 );
      grid-template-columns: auto auto 1fr;
      grid-template-rows: calc( 40 var(--remBase) );
      row-gap: calc( 8 var(--remBase) );
    }
    #otherVoices .school{
      height: 100%;
      padding-inline: calc( 16 var(--remBase) );
      grid-column: 1/4;
      grid-row: 1;
      font-size: 2rem;
    }
    #otherVoices :where( .name , .hometown ){
      grid-row: 2;
      font-size: 2rem;
    }
    #otherVoices h4{
      grid-row: 3;
      grid-column: 1/4;
      border-top: solid 1px #D9D9D9;
      padding-top: calc( 8 var(--remBase) );
      font-weight: 500;
      font-size: 2.2rem;
      line-height: 1.3;
    }
  }
@media screen and ( 750px < width < 1960px ),print{
#otherVoices{
    grid-template-columns: calc( 40 var(--viewportBase) ) calc( 440 var(--viewportBase) ) 1fr
}
    #otherVoices:before{
      width: calc( 1772 var(--viewportBase) );
      left: calc( 200 var(--viewportBase) );
    }
  }
@media screen and ( width >= 1960px ){
#otherVoices{
    grid-template-columns: calc( ( 100% - 1960px ) / 2 + 40px ) 440px 1fr
}
    #otherVoices:before{
      right: 0;
      width: calc( 50% + 792px );
    }
  }
/*--------------------------------------------
NEWS
---------------------------------------------*/
#news .head{
    background-color: var(--color01);
    color:white;
  }
#news .head time{
      display: block;
    }
#news .head h1{
      letter-spacing: 0.1em;
      line-height: 1.3;
      font-weight: 500;
    }
#news #content{
    border-bottom: solid 1px #CFD2D9;
  }
@media screen and ( width <= 750px ){
    #news .head{
      padding-block: calc( 24 var(--remBase) );
      padding-inline: calc( 16 var(--percentBase) );
    }
      #news .head time{
        font-size: 1.4rem;
        line-height: 1.5;
      }
      #news .head h1{
        margin-top: calc( 8 var(--remBase) );
        font-size: 2.4rem;
      }
    #news #content{
      margin-top: calc( ( 24 - 10 ) var(--remBase) );
      border-bottom: solid 1px #CFD2D9;
      padding-bottom: calc( 40 var(--remBase) );
    }
    #news #paginationSingle{
      margin-top: calc( 40 var(--remBase) );
    }
  }
@media screen and ( width > 750px ),print{
    #news .head{
      padding-block: calc( 24 var(--remBase) );
      padding-inline: calc( 24 * 100% / 1360 );
    }
      #news .head time{
        font-size: 2rem;
        line-height: 2;
      }
      #news .head h1{
        margin-top: calc( 16 var(--remBase) );
        font-size: 3.2rem;
      }
    #news .categories{
      display: flex;
      flex-wrap: wrap;
      margin-top: calc( 24 var(--remBase) );
      column-gap: calc( 40 * 100% / 1360 );
    }
      #news .categories > div{
        display: grid;
        grid-template-columns: auto auto;
        align-items: start;
        justify-content: start;
      }
      #news .categories dt, #news .categories a{
        font-size: 2rem;
        line-height: 2;
      }
      #news .categories ul{
        display: flex;
        flex-wrap: wrap;
      }
      #news .categories li:not(:last-child):after{
        content:",";
        font-size: 2rem;
        line-height: 2;
      }
    #news #content{
      margin-top: calc( ( 16 - 10 ) var(--remBase) );
      border-top: solid 1px #989898;
      padding-top: calc( 10 var(--remBase) );
      padding-bottom: calc( 80 var(--remBase) );
    }
    #news #paginationSingle{
      margin-top: calc( 80 var(--remBase) );
    }
  }
#content :where( h2 , h3 , h4 , h5 , h6 ){
    font-family: 'Noto Sans JP' , sans-serif;
  }
#content h2{
    color:var(--color01);
    font-weight: 500;
    margin-top: calc( 34 var(--remBase) );
    font-size: 2.4rem;
  }
#content :where( p , ul , ol ){
    margin-top: calc( 10 var(--remBase) );
  }
#content p, #content li{
    line-height: 2;
  }
#content ul > li{
      display: grid;
      align-items: start;
      justify-content: start;
      grid-template-columns: auto auto;
    }
#content ul > li:before{
        content:"・";
      }
@media screen and ( width <= 750px ){
    #content p, #content li{
      font-size: 1.4rem;
    }
    #content h2{
      line-height: 1.3;
    }
    #content img{
      max-width: 100%;
      height: auto;
    }
  }
@media screen and ( width > 750px ),print{
    #content p, #content li{
      font-size: 2rem;
    }
    #content h2{
      line-height: 2;
    }
  }