@charset "UTF-8";
/*======こういうファイル分けにした背景======*/
/*
本来は各ページで使うパーツはCSSを分けて書くべきなのかもしれませんが、
コピペして新ページを作るときにミスりやすそうなこと、パーツを使い回す
可能性があることなどをふまえこうしています。
classの命名とかもうちょいちゃんとしたほうが良かったのかもしれませんね。
(あと本当はSCSS使いたかったです。)
*/

/* 共通で利用する色・フォントはここに書く。 */
/* -- で始めること。*/
/* 書いた色は、var(変数)の形で利用。 */
html {
  --linkcolor: #045867;
  --linkhover: #8dbe07;
  --theme1: #01678d;
  --theme2: #0c7b9a;
  --theme3: #45d4fc;
  --light: #f6fafa;
  --title: "M plus 1p", sans-serif;
  --sentence: "Noto Sans JP", sans-serif;
}

/* ===index.html関連=== */
topcontents {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;  /*gamen-ippai*/
  width: calc(100%+8px);
}

topcontents img {
  vertical-align: top;
  /* こうすると画像の間に変な隙間ができない */
}

topcontents .pc-top {
  display: flex;
  flex-wrap: nowrap;
}

topcontents .top-60 {
  width: 60%;
}

topcontents .top-40 {
  width: 40%;
}

topcontents .top-100 {
  width: 100%;
}

.form_menu {
  width: 100%;
  border-top: 3px solid green;
  border-bottom: 3px solid green;
  text-decoration: none;
}

.formh:hover {
  transform: scale(1.05,1.05);
}
/* マウスオンで拡大するclass */

.img_expand {
  overflow: hidden;
}

.img_expand:hover img {
  transform: scale(1.02);
  opacity: 0.7;
  transition-duration: 0.5s;
}

.bottomcontents {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

@media only screen and (max-width:700px) {
  .bottomcontents {
    flex-wrap: wrap;
  }
}

.bottomcontents .container {
  width: 48%;
  font-family: var(--sentence);
  font-size: 14px;
}

@media only screen and (max-width:700px) {
  .bottomcontents .container {
    width: 100%;
  }
}

.bottomcontents .container .index-contents {
  font-family: var(--sentence);
  font-size: 14px;
  border-bottom: 1px #000000 solid;
  padding: 8px;
  overflow: scroll;
}

@media only screen and (max-width:700px) {
  .bottomcontents .container .index-contents {
    overflow: hidden;
  }
}

.download {
  max-height: 350px;
}

.news {
  max-height: 560px;
}

.topictitle {
  width: 100%;
  font-size: 24px;
  font-family: var(--title);
  font-weight: 400;
  color: #01678d;
  border-bottom: 1px #000000 solid;
}

@media only screen and (max-width:700px) {
  topictitle {
    font-size: 20px;
  }
}

.topic {
  display: grid;
  padding: 3px 0px;
  width: 100%;
  grid-template-rows: 1fr;
  grid-template-columns: 60px calc(100% - 60px);
  grid-template-areas: "date detail";
  border-bottom: 1px #666666 dotted;
}

.topic .date {
  grid-area: date;
  display: flex;
  text-align: center;
  align-items: center;
  font-family: var(--title);
  font-weight: 400;
  font-size: 16px;
  border-right: 2px #088cbe solid;
  color: #333333;
}

.topic .detail {
  grid-area: detail;
  margin-left: 3px;
  font-family: var(--sentence);
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}

/*contents*/
.conte {
  display: grid;
  margin: 0px;
  padding: 6px 0px;
  width: 100%;
  grid-template-rows: 1fr;
  grid-template-columns: 40% 60%;
  grid-template-areas: "obje capt";
  border-bottom: 1px #666666 dotted;
}

/*object*/
.obje {
  display: flex;
  align-items: center;
  grid-area: obje;
  font-family: var(--sentence);
  font-weight: 400;
  font-size: 16px;
  border-right: 2px #088cbe solid;
  color: #666666;
  text-align: left;
}

/*caption*/
.capt {
  margin-left: 3px;
  padding-left: 3px;
  display: flex;
  align-items: center;
  grid-area: capt;
  font-family: var(--sentence);
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}

/* ===index.html関連おわり=== */


.bottomcontents .container .imgtwitter {
  width: 95%;
}

.imgtwitter img {
  width: 100%;
  margin: 8px;
}


.bottomcontents .container .imgmikata {
  width: 95%;
}

.imgtwitter img {
  width: 100%;
  margin: 8px;
}

/*試合結果の表*/
table {
  width: 100%;
  border-collapse: collapse;
}

@media only screen and (min-width:701px) {
  table {
    max-width: 700px;
  }
}

th {
  padding: 2px 5px;
  border: solid 1px #666666;
  color: #000000;
  background-color: #ddf1fc;
  font-family: var(--sentence);
  font-weight: 500;
  font-size: 13px;
}

td {
  padding: 2px 5px;
  border: solid 1px #666666;
  color: #000000;
  background-color: #ffffff;
  text-align: center;
  vertical-align: middle;
  font-family: var(--sentence);
  font-size: 13px;
}

.left {
  text-align: left;
}

.narrow {
  width: 80px;
}

thead {
  border-bottom: solid 0px #666666;
}

/* 6th total */
table.total {
  border-width: 1px 1px 0 1px;
  border: solid #666666;
}

table.total th {
  padding: 5px 5px;
  font-size: 120%;
  border: none;
}

/* 各大学結果 */
table.every thead th {
  padding: 0px 0px;
  font-size: 150%;
}

/*お問い合わせの設定*/
inquiry {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 8px;
  border-bottom: 1px var(--theme1) dotted;
}

@media only screen and (max-width:700px) {
  inquiry {
    flex-wrap: wrap;
    margin: 0;
    border: none;
  }
}

inquiry .midasi {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  font-size: 28px;
  font-family: var(--title);
  color: var(--theme1);
}

@media only screen and (max-width:700px) {
  inquiry .midasi {
    width: 100%;
    height: 50px;
    font-size: 24px;
    color: #ffffff;
    background-color: #16a7be;
  }
}

inquiry .detail {
  flex: 1;
  font-size: 14px;
  font-family: var(--sentence);
  padding-left: 8px;
}

@media only screen and (max-width:700px) {
  inquiry .detail {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
  }
}

profile {
  display: flex;
  margin: 4px;
  height: 200px; /* 幅が足りなくなったらここを増やす （初めは160）*/
  font-family: var(--sentence);
  background-color: rgba(232, 244, 247, 0.92);
  min-height: 10vh;
  margin: 8px 4px;
  border: 1px var(--theme1) solid;
}

profile .photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 100%;
  overflow: hidden;
}

.photo_profile {
  width: 100%;
}

profile .textarea {
  flex: 1;
  flex-wrap: wrap;
  padding: 0 8px;
}

profile .name {
  font-weight: 300;
  font-size: 24px;
  border-bottom: 2px var(--theme1) solid;
  color: rgb(15, 58, 96)
}

profile .name .job {
  display: inline-block;
  min-width: 25%;
  margin-right: 8px;
  font-size: 18px;
}

profile .text {
  font-size: 14px;
  padding: 1px 0;
}

@media only screen and (max-width:700px) {
  profile {
    display: flex;
    margin: 4px;
    height: 250px; /* 幅が足りなくなったらここを増やす （前は150px）*/
    font-family: var(--sentence);
    background-color: rgba(232, 244, 247, 0.92);
    min-height: 10vh;
    margin: 4px;
    border: 1px var(--theme1) solid;
  }

  profile .photo {
    width: 108px;
  }

  profile .textarea {
    padding: 0 8px;
  }

  profile .name {
    font-size: 18px;
    padding: 2px 0;
  }

  profile .name .job {
    font-size: 15px;
  }

  profile .text {
    font-size: 13px;
  }
}

/* 新歓　faq.html */
q-and-a {
  display: flex;
  margin: 8px 4px 4px 0px;
  border: 2px solid;
}

.question {
  border-color: #c60a68;
}

.answer {
  border-color: #296dd9
}

q-and-a .mark {
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: var(--sentence);
  font-weight: 600;
  color: #ffffff;
}

@media only screen and (max-width:700px) {
  q-and-a .mark {
    font-size: 21px;
  }
}

q-and-a .Q {
  background-color: #d88eb3;
}

q-and-a .A {
  background-color: #8ebcd8;
}

q-and-a .description {
  flex: 1;
  font-size: 14px;
  padding: 5px;
  font-family: var(--sentence);
}

.ichiran {
  font-family: var(--sentence);
  font-weight: 400;
  color: #000000;
  border: 2px #c60a68 solid;
  border-radius: 10px;
  /*角丸*/
  margin: 0 4px;
  padding: 8px;
}

/*新歓ページ用*/
.thumbnail {
  text-decoration: none;
  margin: 8px;
  width: calc(50% - 30px);
  padding: 5px;
  border: 1px #05727b solid;
  border-radius: 5px;
  background-color: #f9ffff;
}

@media only screen and (max-width:700px) {
  .thumbnail {
    width: 95%;
  }
}

.thumbnail:hover {
  border: 1px #f873e9 solid;
  background-color: #f7ddf4;
}

.thumbnail,
.thumbnail::before,
.thumbnail::after {
  transition: all .3s;
}

.thu_title {
  display: flex;
  font-size: 22px;
  font-family: var(--title);
  font-weight: 500;
  color: #05727b;
  padding: 0px;
  object-fit: contain;
}

@media only screen and (max-width:700px) {
  .thu_title {
    font-size: 20px;
  }
}

.thu_detail {
  font-size: 14px;
  padding-left: 5px;
  font-family: var(--sentence);
  font-weight: 400;
  color: #777777;
  padding: 5px 0px 0px 0px;
}

annual {
  width:98%;
  display: flex;
  flex-wrap:nowrap;
  margin: 8px 0;
  font-family: var(--title);
  background-color: rgba(232, 244, 247, 0.92);
  min-height: 10vh;
  border: 1px var(--theme1) solid;
}

/*これは入れ物*/
annual .annual_image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*これは写真*/
.annual_pic {
  width: 180px;
  height: 180px;
  object-fit: cover;
}

@media only screen and (max-width:700px) {
  .annual_pic {
    width: 120px;
    height: 120px;
  }
}

annual .annual_text{
  flex:1;
  flex-wrap: wrap;
  padding: 0 4px;
}
.annual_title {
  width:100%;
  font-size: 24px;
  font-family: var(--title);
  border-bottom: 1px var(--theme1) solid;
  color: var(--theme1);
}

.annual_detail {
  width:100%;
  font-size: 14px;
  font-family: var(--sentence);
  color: #000000;
}
@media only screen and (max-width:700px) {
.annual_title {
    font-size: 20px;
  }
}

/*おすすめコンテンツ*/
recommend {
  display: grid;
  margin: 8px 0;
  color: #000000;
  font-family: var(--title);
  background-color: rgba(232, 244, 247, 0.92);
  min-height: 10vh;
  border: 1px var(--theme1) solid;
  max-width: 700px;
  grid-template-rows: 50px 70px;
  grid-template-columns: 120px 1fr;
  grid-template-areas:
    "rec_photo rec_title"
    "rec_photo rec_detail";
}

@media only screen and (max-width:700px) {
  recommend {
    grid-template-rows: 40px 60px;
    grid-template-columns: 100px 1fr;
  }
}

recommend:hover {
  border: 1px #51b100 solid;
  text-decoration: none;
  background-color: #f0f7dd;
}

.recom {
  text-decoration: none;
}

.rec_photo {
  width: 120px;
  height: 120px;
  grid-area: rec_photo;
  object-fit: cover;
  /*coverは強制的に枠に当てはめて、containはタテヨコ比を維持する*/
}

@media only screen and (max-width:700px) {
  .rec_photo {
    width: 100px;
    height: 100px;
  }
}

.rec_title {
  grid-area: rec_title;
  font-weight: 300;
  font-size: 25px;
  padding: 5px 0px 0px 5px;
  border-bottom: 2px var(--theme1) solid;
  color: rgb(15, 58, 96)
}

@media only screen and (max-width:700px) {
  .rec_title {
    font-size: 22px;
    padding: 0px 0px 0px 5px;
  }
}

.rec_detail {
  grid-area: rec_detail;
  font-size: 14px;
  padding: 0px 0px 0px 5px;
}

@media only screen and (max-width:700px) {
  backtotop {
    position: absolute;
    position: fixed;
    z-index: 10;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*角丸*/
    text-align: center;
    background-color: rgba(134, 214, 25, 0.55);
    border: 1px rgba(134, 214, 25) solid;
    color: #ffffff;
    font-size: 32px;
    font-family: var(--title);
    font-weight: 500;
  }

  backtotop a:link,
  backtotop a:visited,
  backtotop a:active,
  backtotop :hover {
    color: #ffffff;
  }
}

/* ===recruit関連=== */
.recruit_intro {
  display: flex;
  align-items: flex-start;
  align-content: center;
  margin: 24px auto;
  width: 100%;
  flex-wrap: nowrap;
  align-content: center;
}

.recruit_intro_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit_eyecatch {
  position: relative;
  margin: 36px auto;
  width: 100%;
  height: 400px;
  align-content: center;
}

@media only screen and (max-width:700px) {
  .recruit_eyecatch {
    height: 500px;
  }
}

.recruit_intro_content {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  top: 0px;
  left: 50%;
  background-color: rgba(211, 247, 250, 0.71);
}

@media only screen and (max-width:700px) {
  .recruit_intro_content {
    width: 100%;
    height: 70%;
    top: 30%;
    left: 0px;
  }
}

.recruit_top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.recruit_eye_title {
  font-weight: 400;
  color: #000000;
  margin: 0px;
}

.recruit_eye_font {
  font-family: var(--title);
  font-size: 18px;
  line-height: 36px;
  margin: 8px;
}

@media only screen and (max-width:700px) {
  .recruit_eye_font {
    text-align: center;
    font-size: 16px;
    line-height: 28px;
  }
}

.h1_recruit {
  margin: 16px auto;
  font-weight: 400;
}

.recruit_menu {
  display: inline-block;
  margin: 8px;
  padding: 8px;
  width: 45%;
  border: 5px solid var(--theme1);
  display: flex;
  flex-wrap: nowrap;
  text-decoration: none;
}

@media only screen and (max-width:700px) {
  .recruit_menu {
    width: 100%;
    align-content: flex-start;
  }
}

.recruit_menu::after {
  transition: all .5s;
}

.recruit_menu_icon {
  display: flex;
  width: 30%;
  max-width: 150px;
  flex-grow: 0;
  align-items: center;
  vertical-align: middle;
}

@media only screen and (max-width:700px) {
  .recruit_menu_icon {
    max-width: 120px;
  }
}

.recruit_menu_icon img {
  width: 100%;
  height: 100px;
  display: flex;
  object-fit: contain;
}

@media only screen and (max-width:700px) {
  .recruit_menu_icon img {
    height: 80px;
  }
}

.recruit_menu_text {
  width: calc(100% - 166px);
  padding: 0;
  text-decoration: none;
  color: #000000;
  padding-left: 16px;
  text-align: left;
  flex-grow: 1;
}

@media only screen and (max-width:700px) {
  .recruit_menu_text {
    width: calc(100% - 136px);
  }
}

.nopadding {
  padding: 0;
}

.green:hover {
  border-color: rgb(140, 240, 40);
}

.red:hover {
  border-color: rgb(240, 40, 140);
}

.yellow:hover {
  border-color: rgb(240, 220, 40);
}

.li_green {
  border-width: 3px;
  border-color: rgb(140, 240, 40);
}

.li_red {
  border-width: 3px;
  border-color: rgb(240, 40, 140);
}

.li_yellow {
  border-width: 3px;
  border-color: rgb(240, 220, 40);
}

.sns {
  margin: 24px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--light);
}

.sns_icon {
  width: 100px;
  padding: 16px;
  text-align: center;
  object-fit: content;
  margin: 0 16px;
}

.sns_icon img {
  height: 60px;
}

.sns_icon:hover {
  background-color: #f7ddf4;
}

.shooting_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.shooting {
  margin: 16px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid var(--theme1);
  max-width: 300px;
  background-color: var(--light);
}

.shooting_pic {
  width: 100%;
  height: 160px;
  background-color: rgba(134, 212, 26, 0.15);
}

.shooting_pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shooting_pic img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shooting_text {
  width: 100%;
  height: auto;
}

.shooting_text h2 {
  text-align: center;
}

img.whatis {
  height: 350px;
  width: auto;
}

@media only screen and (max-width:700px) {
  img.whatis {
    height: auto;
    width: 80%;
  }
}

/* ===recruit関連おわり=== */


/* ===sevenresult関連=== */

tr.sevenr td{
  background-color: #dcf3fa;
}

tr.sevenr th{
  background-color: #dcf3fa;
}

#csvTable {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
 }
 
 #csvTable th {
  padding: 10px;
  border: none;
  border-right:solid 1px #c4c4c4;
  border-left:solid 1px #c4c4c4;
 }
 
 #csvTable td {
  padding: 10px;
  border:none;
  border-right:solid 1px #c4c4c4;
  border-left:solid 1px #c4c4c4;
 }

#csvTable td:first-child{
  border-left:none;
}

#csvTable td:last-child {
  border-right: none;
 }

 #csvTable th:first-child{
  border-left:none;
}

#csvTable th:last-child {
  border-right: none;
 }