@media screen and (max-width:979px) {
/* タブ切り替え */
  .cha{
    display: flex;
    margin: 5vw 5vw 0vw 5vw;
    width: 90vw;
    align-items: center;
  }
  .tab li.active img{
  box-shadow: #c96629 1vw 1vw;
  }
  .tab{
    width: 50vw;
  }
  .tabBtn{
    width: 40vw;
    margin-left: 5vw;
    margin-top: 2vw;
  }
  .graph{
    width: 50vw;
  }
  .graphImg{
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
    width: 40vw;
    margin-left: 5vw;
  }
  /*graphImgにis-activeというクラスがついた時の形状*/
  .graphImg.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }
  @keyframes displayAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* タブ切り替え終 */

  .content{
  }
  .decoCloud{
    width: 50vw;
  }
  .decoCloud:nth-child( 3 ){
    margin: -5vw 0vw 0vw 50vw;
  }
  .decoCloud:nth-child( 4 ){
    margin: -25vw 0vw 0vw -15vw;
    width: 60vw;
  }
  .decoCloud:nth-child( 7 ){
    margin: 5vw 0vw -25vw 0vw;
    width: 60vw;
  }
  .nozonozo>.decoCloud{
    margin: 0vw 0vw -7.5vw 50vw;
  }
  .twoGraph>.decoCloud{
    margin: 5vw 0vw 0vw -25vw;
    width: 60vw;
  }
  .return>.decoCloud{
    margin: 0vw 0vw -12.5vw 0vw;
  }
  .name{
    padding: 20vw 0vw 0vw 0vw;
  }
  .title{
    width: 25vw;
    margin: 0vw 37.5vw 0vw 37.5vw;
  }
  .facultyNameLarge{
    width: 50vw;
    margin: 1.5vw 25vw 0vw 25vw;
  }
  .facultyNameL{
    width: 50vw;
    margin: 1.5vw 25vw 0vw 25vw;
  }
  .facultyNameM{
    width: 30vw;
    margin: 1.5vw 35vw 0vw 35vw;
  }
  .facultyNameS{
    width: 20vw;
    margin: 1.5vw 40vw 0vw 40vw;
  }
  .facultyPhoto{
    width: 55vw;
    margin: -7.5vw 22.5vw 0vw 22.5vw;
  }
  .twoGraph{
    margin: 5vw 5vw 0vw 5vw;
    width: 90vw;
  }
  .qq,.gragra{
    display: flex;
    text-align: center;
    justify-content: space-around;
  }
  .qq>p{
    font-size: 3vw;
    padding: 0vw 0vw 2vw 0vw;
    width: 50vw;
  }
  .gragra>img{
    width: 35vw;
  }
  .question{
    width: 45vw;
    margin: 5vw 27.5vw 0vw 27.5vw;
    text-align: center;
    position: relative;
  }
  .question>p{
    font-size: 3vw;
    padding: 0vw 0vw 2vw 0vw;
  }
  .normal{
    position: relative;
    margin-top: -10vw;
    margin: -27.5vw 15vw 0vw 15vw !important;
  }
  .commonThings{
    background-image: url(../assets/son/aruaru_frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 70vw;
    height: 25vw;
    margin: 0vw 15vw 0vw 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .commonThings>p{
    font-size: 3vw;
  }
  .subtitle{
    width: 60vw;
    margin: 2.5vw 20vw 0vw 20vw;
  }
  .walk{
    width: 80vw;
    margin: 0vw 10vw 0vw 10vw;
  }
  .spot{
    display: flex;
  }
  .spotImg{
    width: 45vw;
  }
  .spotDeco1{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .spotDeco2{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .spotDeco3{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .arrow1{
    display: flex;
    justify-content: flex-end;
  }
  .arrow1>img,.arrow2>img{
    width: 15vw;
  }
  .com{
    display: flex;
    justify-content: center;
    margin-bottom: 5vw;
  }
  .com>p{
    font-size: 2vw;
    padding: 0.5vw;
    background-color: burlywood;
    border-radius: 1vw;
    width: fit-content;
  }
  .return{
    margin: 10vw 0vw 0vw 0vw;
    padding-bottom: 5vw;
  }
  .btn{
    width: 30vw;
    margin: 0vw 35vw 2vw 35vw;
  }
  footer{
    margin-top: 0vw !important;
  }
  p{
    color: #754020;
    font-family: 'BIZ UDPMincho', serif;
  }
  .usui{
    background-color: #fff5dc;
  }
  .koi{
    background-color: #fcefc6;
  }
}

@media screen and (min-width:980px) {  
  /* タブ切り替え */
  .cha{
    display: flex;
    margin: 5vw 5vw 0vw 5vw;
    width: 90vw;
    align-items: center;
  }
  .tab li.active img{
  box-shadow: #c96629 1vw 1vw;
  }
  .tab{
    width: 50vw;
  }
  .tabBtn{
    width: 40vw;
    margin-left: 5vw;
    margin-top: 2vw;
  }
  .graph{
    width: 50vw;
  }
  .graphImg{
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
    width: 40vw;
    margin-left: 5vw;
  }
  /*graphImgにis-activeというクラスがついた時の形状*/
  .graphImg.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }
  @keyframes displayAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* タブ切り替え終 */

  .content{
  }
  .decoCloud{
    width: 50vw;
  }
  .decoCloud:nth-child( 3 ){
    margin: -5vw 0vw 0vw 50vw;
  }
  .decoCloud:nth-child( 4 ){
    margin: -25vw 0vw 0vw -15vw;
    width: 60vw;
  }
  .decoCloud:nth-child( 7 ){
    margin: 5vw 0vw -25vw 0vw;
    width: 60vw;
  }
  .nozonozo>.decoCloud{
    margin: 0vw 0vw -7.5vw 50vw;
  }
  .twoGraph>.decoCloud{
    margin: 5vw 0vw 0vw -25vw;
    width: 60vw;
  }
  .return>.decoCloud{
    margin: 0vw 0vw -12.5vw 0vw;
  }
  .name{
    padding: 15vw 0vw 0vw 0vw;
  }
  .title{
    width: 25vw;
    margin: 0vw 37.5vw 0vw 37.5vw;
  }
  .facultyNameLarge{
    width: 50vw;
    margin: 1.5vw 25vw 0vw 25vw;
  }
  .facultyNameL{
    width: 50vw;
    margin: 1.5vw 25vw 0vw 25vw;
  }
  .facultyNameM{
    width: 30vw;
    margin: 1.5vw 35vw 0vw 35vw;
  }
  .facultyNameS{
    width: 20vw;
    margin: 1.5vw 40vw 0vw 40vw;
  }
  .facultyPhoto{
    width: 55vw;
    margin: -7.5vw 22.5vw 0vw 22.5vw;
  }
  .twoGraph{
    margin: 5vw 5vw 0vw 5vw;
    width: 90vw;
  }
  .qq,.gragra{
    display: flex;
    text-align: center;
    justify-content: space-around;
  }
  .qq>p{
    font-size: 3vw;
    padding: 0vw 0vw 2vw 0vw;
    width: 50vw;
  }
  .gragra>img{
    width: 35vw;
  }
  .question{
    width: 45vw;
    margin: 5vw 27.5vw 0vw 27.5vw;
    text-align: center;
    position: relative;
  }
  .question>p{
    font-size: 3vw;
    padding: 0vw 0vw 2vw 0vw;
  }
  .normal{
    position: relative;
    margin-top: -10vw;
    margin: -27.5vw 15vw 0vw 15vw !important;
  }
  .commonThings{
    background-image: url(../assets/son/aruaru_frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 70vw;
    height: 25vw;
    margin: 0vw 15vw 0vw 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .commonThings>p{
    font-size: 3vw;
  }
  .subtitle{
    width: 60vw;
    margin: 2.5vw 20vw 0vw 20vw;
  }
  .walk{
    width: 80vw;
    margin: 0vw 10vw 0vw 10vw;
  }
  .spot{
    display: flex;
  }
  .spotImg{
    width: 45vw;
  }
  .spotDeco1{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .spotDeco2{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .spotDeco3{
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .arrow1{
    display: flex;
    justify-content: flex-end;
  }
  .arrow1>img,.arrow2>img{
    width: 15vw;
  }
  .com{
    display: flex;
    justify-content: center;
    margin-bottom: 5vw;
  }
  .com>p{
    font-size: 2vw;
    padding: 0.5vw;
    background-color: burlywood;
    border-radius: 1vw;
    width: fit-content;
  }
  .return{
    margin: 10vw 0vw 0vw 0vw;
    padding-bottom: 5vw;
  }
  .btn{
    width: 30vw;
    margin: 0vw 35vw 2vw 35vw;
  }
  footer{
    margin-top: 0vw !important;
  }
  p{
    color: #754020;
    font-family: 'BIZ UDPMincho', serif;
  }
  .usui{
    background-color: #fff5dc;
  }
  .koi{
    background-color: #fcefc6;
  }
}