@charset "utf-8";

main{
  height: auto;
  min-height: auto;
}

main > h2{
  font-weight: 700;
  border-bottom: 2px solid #2f94ca;
}
main > ul{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
main > ul li:first-child{
  margin-top: 0 !important;
}
main > ul li a{
  text-decoration: underline;
  color: #2f94ca;
  transition: all 0.2s;
}
main > ul li a:hover{
  /* opacity: 0.5; */
  color: #163849;
}

/* 会社情報のプルダウン */
.companyes{}
.companyes summary{
  position: relative;
  border: 1px solid #eee;
  cursor: pointer;
  list-style: none;
  background: #eee;
}
summary::-webkit-details-marker{ /* 一部ブラウザで消えなかった場合 */
  display:none;
}
.companyes summary::after{
  content: '';
  position: absolute;
  aspect-ratio: 5/2;
  height: calc(40% / 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: center;
  transform: rotate(180deg) translateY(-70%);
  background: #808080;
}
.companyes > div b{
  font-weight: unset;
}
.companyes > div a{
  text-decoration: underline;
  color: #2f94ca;
  transition: all 0.2s;
}
.companyes > div a:hover{
  opacity: 0.5;
}

/* 画面サイズや文字数によっては次の行へ文字が落ちるため対処 */
.companyes > div p{
  /* display: flex; */
}
.contact span{ /* 連絡先のみ2項目あるため、あらかじめ落としておく */
  /* display: flex;
  flex-direction: column; */
}
.compInfo{
  display: flex;
}
.contact{
  display: flex;
  flex-direction: column;
}



/* PCサイズ */
@media screen and (min-width: 1025px){

  main{
    min-height: calc(100vh - 178px);
  }

  main > h2{
    padding-bottom: 3px;
    font-size: 1.2rem;
  }

  main > ul{
    margin-top: 80px;
  }
  main > ul li{
    margin-top: 25px;
    font-size: 1.2rem;
  }
  .metaDetails{
    font-size: 1rem;
    margin-left: 5px;
  }


  #compSection{
    margin-top: 30px;
  }
  .companyes summary{
    padding: 10px 60px 10px 10px;
    font-size: 1.2rem;
  }
  .companyes:not(:first-child){
    margin-top: 15px;
  }
  .companyes > div{
    padding: 10px 10px 30px 10px;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
  /* 社名横の下矢印 */
  .companyes summary::after{
    right: 10px;
  }
  .companyes[open] summary::after{
    transform: rotate(0) translateY(50%);
  }
  .companyes > div img{
    max-height: 50px;
  }

  .compInfo span:first-child{
    min-width: 84px;
  }
}





/* スマホ・タブレットサイズ */
@media screen and (max-width: 1024px){

  main{
    min-height: calc(100vh - (30px + 80.97px + 100px + 33.8px));
  }

  main > h2{
    padding-bottom: 10px;
    font-size: 1.5rem;
  }

  main > ul{
    margin-top: 65px;
  }
  main > ul li{
    margin-top: 20px;
    font-size: 1.3rem;
  }
  .metaDetails{
    margin-left: 5px;
    font-size: 0.8rem;
  }


  #compSection{
    margin-top: 30px;
  }
  .companyes summary{
    padding: 10px 60px 10px 10px;
    font-size: 1.1rem;
  }
  .companyes:not(:first-child){
    margin-top: 15px;
  }
  .companyes > div{
    padding: 10px 10px 25px 10px;
    font-size: 1rem;
    line-height: 1.8rem;
  }
  /* 社名横の下矢印 */
  .companyes summary::after{
    right: 10px;
  }
  .companyes[open] summary::after{
    transform: rotate(0) translateY(50%);
  }
  .companyes > div img{
    max-height: 25px;
  }

  .compInfo span:first-child{
    min-width: 70px;
  }
}

/* スクロールが見切れないよう設定 */
@media screen and (max-width: 850px){
  #filmScreenWrap{ width: 110%; }
}





/* スマホ専用サイズ ※微調整用 */
@media screen and (max-width: 499px){

  main{
    min-height: calc(100vh - (20px + 96.34px + 70px + 32.88px));
  }

  main > h2{
    font-size: 1.1rem;
  }
  main > ul li{
    margin-top: 20px;
    font-size: 1.05rem;
  }
  .metaDetails{
    font-size: 0.85rem;
  }

  
  .companyes summary{
    font-size: 0.8rem;
  }
  .companyes > div{
    padding: 10px 10px 20px 10px;
    font-size: 0.9rem;
    line-height: 1.5rem;
  }

  .compInfo span:first-child{
    min-width: 63px;
  }
}