/* 共通(PCファースト) */
* {
  margin: 0;
}

body {
  margin: 0;
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}

/* ヘッダー */
:root {
  --header-padding: 2%;
  --logo-width-pc: 30%;
  --logo-width-mobile: 60%;
  --menu-width: 70%;
}

/* 全体設定: マージンリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* header全体 */
header {
  background-color: #333;
  padding: var(--header-padding) 0;
}

/* ロゴ */
header .logo img {
  width: var(--logo-width-pc);
}

@media (max-width: 550px) {
  header .logo img {
    width: var(--logo-width-mobile);
  }

  .top_img img {
    width: auto !important;
  }

  .top_img {
    background-size: 100% !important;
  }
}

/* PC・タブレット用メニュー */
header .pc {
  display: flex;
  align-items: flex-end; /* 水平方向の最も低い位置に寄せる */
  justify-content: flex-end; /* ヘッダーの内容を右に寄せる */
}

header .pc li {
  font-size: 1.5rem;
  font-weight: bold;
  list-style: none;
  margin: 0 3%;
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}

header .pc li:hover {
  text-decoration: none;
  color: rgb(92, 207, 241);
  cursor: pointer;
}

header .pc li a {
  text-decoration: none;
  color: #fff;
}

/* ハンバーガーアイコン */
.hamburgerswitch {
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 0;
  z-index: 9999;
  width: 4em;
  height: 6em;
}

/* ハンバーガーアイコン */
.hamburger-switch-line1,
.hamburger-switch-line1:before,
.hamburger-switch-line1:after {
  width: 25px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.3s;
  content: "";
}

.hamburger-switch-line1 {
  transform: translate(-50%, -100%);
}

.hamburger-switch-line1:before {
  transform: translate(-50%, -300%);
}

.hamburger-switch-line1:after {
  transform: translate(-50%, 200%);
}

/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1 {
  width: 0;
}

#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:before {
  transform: rotate(45deg) translate(-40%, 325%);
}

#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:after {
  transform: rotate(-45deg) translate(-40%, -325%);
}

/* メニューエリア */
.hamburgermenuwrap {
  position: fixed;
  background: #333;
  padding: 5em 3% 2em;
  z-index: 9998;
  transition: 0.3s;
  overflow-y: scroll;
  top: 0;
  left: 100%;
  width: var(--menu-width);
  border-radius: 10%;
}

/* メニューリスト */
.hamburgermenulist {
  margin-right: 3%;
  list-style: none;
}

.hamburgermenulist li a {
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 0.5em 0;
}

/* メニューエリア･アニメーション */
#hamburger-demo1:checked ~ .hamburgermenuwrap {
  left: 30%;
}

#hamburger-demo1:checked ~ .hamburgercover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3, 3, 3, 0.5);
  display: block;
}

/* ハンバーガーメニュー非表示（450px以上） */
@media (min-width: 450px) {
  .hamburgermenubox {
    display: none;
  }
}

/* 450px以下でPCメニューを非表示 */
@media (max-width: 451px) {
  header {
    padding: 5%;
  }

  .pc li {
    display: none;
  }
}

.top {
  border: unset;
  position: unset;
}

.title_sport,
.title_culture,
.title_study {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.title_sport {
  background: url(../photos/list/sport_head_pc.jpg);
}

.title_culture {
  background: url(../photos/list/culture_head_pc.jpg);
}

.title_study {
  background: url(../photos/list/study_head_pc.jpg);
}
.title__box {
  text-align: center;
}
.title__box__name {
  width: 20%;
  text-align: center;
  font-size: 5vw;
  font-weight: 1000;
  color: #ffffff;
  display: inline-block;
  margin: 1% auto;
  border: 10px double #000000;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

.club_name {
  top: 15%;
  left: 30%;
  position: absolute;
  font-weight: 1000;
}

#intoro,
#intoro_sd {
  font-size: 200%;
  height: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h2 {
  font-size: 4vw;
  font-weight: bold;
  margin: 80px auto 10px;
  text-align: center;
  color: #333;
  width: 30vw;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
  border: solid 4px #000000;
}

/* タブ */
.tab_contains ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
}

.tab_contains li {
  width: 30vw;
  margin: 1.5% 0;
  padding: 0.5em;
  box-sizing: border-box;
  position: relative;
  list-style-type: none;
  line-height: 1.5;
  color: #ffffff;
  font-size: 2vw;
  box-shadow: 10px 10px #949292;
  cursor: pointer;
}

.tab_contains li:before {
  content: "";
  width: 3.6em;
  height: 3.6em;
  display: block;
  border-radius: 15%;
  background: white;
}
/* タブレット(959px以下) */
@media (max-width: 959px) {
}
/* スマホ(480px以下) */
@media (max-width: 480px) {
  p {
    font-size: larger;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .club_name {
    top: 30%;
    left: 15%;
    position: absolute;
  }

  .tab_contains ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tab_contains li {
    width: 70vw;
  }
}

/* サークルリストの管理 */
/*体育系*/
#tennis li,
#soccer li,
#basketball li,
#badminton li,
#tabletennis li,
#swim li,
#dance li,
#hiking li,
#cycling li,
#golf li,
#run li,
#walk li,
#boat li,
#budou li,
#shourinji li,
#archery li,
#car li,
#airplane li,
#diving li,
#ski li,
#nav2 li,
#volleyball li,
#snowboard li {
  background: #000;
}
#tennis li:before {
  content: url(../svg/tennis.svg);
}
#soccer li:before {
  content: url(../svg/soccer.svg);
}
#basketball li:before {
  content: url(../svg/basketball.svg);
}
#badminton li:before {
  content: url(../svg/badminton.svg);
}
#tabletennis li::before {
  content: url(../svg/tabletennis.svg);
}
#car li::before {
  content: url(../svg/car.svg);
}
#run li::before {
  content: url(../svg/run.svg);
}
#walk li::before {
  content: url(../svg/walk.svg);
}
#dance li::before {
  content: url(../svg/dance.svg);
}
#airplane li:before {
  content: url(../svg/airplane.svg);
}
#diving li:before {
  content: url(../svg/diving.svg);
}
#swim li:before {
  content: url(../svg/swim.svg);
}
#hiking li:before {
  content: url(../svg/hiking.svg);
}
#cycling li:before {
  content: url(../svg/cycling.svg);
}
#golf li:before {
  content: url(../svg/golf.svg);
}
#boat li:before {
  content: url(../svg/boat.svg);
}
#ski li:before {
  content: url(../svg/ski.svg);
}
#budou li::before {
  content: url(../svg/budou.svg);
}
#shourinji li::before {
  content: url(../svg/shourinji.svg);
}
#archery li::before {
  content: url(../svg/archery.svg);
}
#volleyball li::before {
  content: url(../svg/volleyball.svg);
}
#snowboard li::before {
  content: url(../svg/snowboard.svg);
}

/*文化系*/
#band li,
#brassband li,
#biolin li,
#jaz li,
#chorus li,
#bijutu li,
#manga li,
#volunteer li,
#hakuraku li,
#hakumonkey li,
#picture li,
#coop li,
#Rubiks_Cube li {
  background: #000000;
}

#band li:before {
  content: url(../svg/band.svg);
}
#brassband li::before {
  content: url(../svg/brassband.svg);
}
#biolin li::before {
  content: url(../svg/biolin.svg);
}
#jaz li::before {
  content: url(../svg/jaz.svg);
}
#chorus li::before {
  content: url(../svg/chorus.svg);
}
#bijutu li:before {
  content: url(../svg/bijutu.svg);
}
#manga li:before {
  content: url(../svg/manga.svg);
}
#hakuraku li:before {
  content: url(../svg/hakuraku.svg);
}
#volunteer li::before {
  content: url(../svg/volunteer.svg);
}
#picture li:before {
  content: url(../svg/picture.svg);
}
#hakumonkey li:before {
  content: url(../svg/hakumonkey.svg);
}
#coop li:before {
  content: url(../svg/coop.svg);
}
#Rubiks_Cube li:before {
  content: url(../svg/Rubiks_Cube.svg);
}

/*学問系*/
#gijutu li,
#seibutu li,
#tigaku li,
#buturi li,
#seimitu_car li,
#seimitu_robo li,
#seimitu_space li,
#train li,
#broadcast li,
#Math li,
#computer li,
#GDSC li,
#Social li,
#dennkenn li {
  background: #000000;
}

#gijutu li:before {
  content: url(../svg/gijutu.svg);
}
#seibutu li:before {
  content: url(../svg/seibutu.svg);
}
#tigaku li:before {
  content: url(../svg/tigaku.svg);
}
#buturi li:before {
  content: url(../svg/buturi.svg);
}
#seimitu_car li:before {
  content: url(../svg/seimitu_car.svg);
}
#seimitu_robo li:before {
  content: url(../svg/seimitu_robo.svg);
}
#seimitu_space li:before {
  content: url(../svg/seimitu_space.svg);
}
#train li:before {
  content: url(../svg/train.svg);
}
#broadcast li:before {
  content: url(../svg/broadcast.svg);
}
#computer li:before {
  content: url(../svg/pc.svg);
}
#GDSC li:before {
  content: url(../svg/embet.svg);
}
#Math li:before {
  content: url(../svg/math.svg);
}
#Social li:before {
  content: url(../svg/social.svg);
}
#dennkenn li:before {
  content: url(../svg/robot_drone.svg);
}

/* フッター */
footer {
  position: relative;
  background-color: #333;
  color: #fff;
  margin-top: 5%;
}

footer p {
  color: white;
}

footer a {
  text-decoration: none;
  color: #fff;
}

footer a:hover {
  color: rgb(92, 207, 241);
  text-decoration: underline;
}

footer .primary,
footer .secondary {
  padding: 40px 20px;
}

footer .logo {
  font-size: 26px;
  font-weight: bold;
}

footer .navi-row {
  display: flex;
  margin-top: 40px;
}

footer .navi li {
  display: inline-block;
  margin-right: 20px;
}

footer .navi li:first-child {
  margin-left: 0;
}

footer .copyright {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background-color: black;
}