/**********メディアクエリ設定開始**********/
@media screen and (max-width: 480px) {
  .mobile_header {
    height: 20vh;
  }
  .nav_none{
    display: none;
  }
    .menu-content {
    width: 100%;
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 0;
  }
}

@media screen and (min-width: 480px) and (max-width: 768px) {

  .nav_none{
    display: none;
  }
    .menu-content {
    width:100%;
  }
  #menu-btn-check:checked ~ .menu-content {
    left:0;
  }
 
}

@media screen and (min-width: 768px) {
  .menu-content {
    width: 30%;
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 70%;
  }
}

/**********メディアクエリ設定終了**********/


/**********初期設定開始**********/

html {
  height:100%;
}

body{
  margin: 0 0;
  font-size: 16px;
}

.list{
  background-color: #ffffff;
  margin: 0 5px;
}
/**********初期設定終了**********/


/**********背景設定開始**********/

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #fff 50%, #cff 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
/**********背景設定終了**********/


/**********ヘッダー設定開始**********/
header {
  height: 30vh;
  width: 100%;
  position: relative; /*navの親で絶対参照*/
}

.top_image{
  height:inherit;
  width: inherit;
}

.top_image img{
  height: 100%;
  width:100%;
  object-fit: fill; 
}

nav {
  position: absolute; /*headerから相対参照*/
  top: 0;
  width: inherit;
  height: 100px;
}

nav a {
  color: #000000;

}

nav a:hover {
  color: #6c272d;
}

.nav_left {
  display: flex;
  align-items: center;
  position: absolute; /*headerから相対参照*/
  left: 30px;
  height: 100%;
}

.nav_logo {
  width: 40px;
}

.nav_school {
  margin-left: 15px;
  color: #000000;
  text-shadow: 2px 2px #ffffff;
  font-family: "Kosugi Maru", sans-serif;
  font-size: 25px;
}

/**********ハンバーガーメニュー設定開始**********/
.menu-btn {
  position: fixed;
  top: 0px;
  right: 0px;
  display: flex;
  height: 100px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #ffffff;
}

.menu-btn span,/*ボタン内の真ん中の線の設定*/
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #421d07;
  position: absolute;
}

.menu-btn span:before {
  bottom: 8px;
}

.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(155,155,155,0);/*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none; /*チェックボックス非表示*/
}

.menu-content {
  height: 100%;
  padding: 100px 0;
  position: fixed;
  top: 0;
  left: 100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: rgba(255,255,255,0.9);
  transition: all 0.5s; /*アニメーション設定*/
}

.menu-content h3 {
  padding: 0 20px;
  font-weight: bold;
}

.menu-content li {
  margin-left: 50px;
  font-weight: normal;
  color: #000000;
  font-family: "Kosugi Maru", sans-serif;
}

/**********アコーディオン設定開始**********/
.acd-check{
    display: none;
}

.acd-label{
    background-color: #ffeeff;  
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}

.acd-label:after{
    background: #ffeeff;
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}

.acd-content{
    border: 0 solid #fff;
    background-color: rgba(255,255,255,0.5);
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}

.acd-check:checked + .acd-label:after{
    content: '\f068';
}

.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
/**********アコーディオン設定終了**********/
/**********ハンバーガーメニュー設定終了**********/
/**********ヘッダー設定終了**********/


/**********main設定開始**********/
main{
  margin: 0 0;
  padding-bottom: 100px;
  height: 100%;
}

/**********title(概要　News　活躍　教育課程・国際理解コース説明会　学習活動)設定開始**********/
.title {
  font-size: 26px;
  font-weight: bold;
  border-left-style: solid;
  border-left-width: 10px;
  border-left-color: #aedae7;
  color: #fa8072;
  padding-left: 15px;
  margin-bottom: 20px;
}
/**********title(概要　News　活躍　教育課程・国際理解コース説明会　学習活動)設定終了**********/

/**********概要設定開始**********/
.gaiyou {
  height: auto;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

.gaiyou table {
  background-color: #ffffff;
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  margin-bottom: 0 0;
  padding: 0 0 ;
}

.gaiyou th {
  border: solid 1px #000000;
  padding: 10px;
  background-color: #ffeeff;
  text-align: left;
  text-align: center;
}

.gaiyou td {
  border: solid 1px #000000;
  padding: 10px;
  text-align: left;
}
.gaiyou td img {
  margin: 0;
  width: 15px;
}
/**********概要設定終了**********/

/**********News設定開始**********/
.news {
  height: auto;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

.news table {
  background-color: #ffffff;
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  margin-bottom: 0 0;
  padding: 0 0 ;
}

.news th {
  border: solid 1px #000000;
  padding: 10px;
  background-color: #ffeeff;
  text-align: left;
  text-align: center;
}

.news td {
  border: solid 1px #000000;
  padding: 10px;
  text-align: left;
}

.news td img{ /**icon**/
  border-radius: 0;
  vertical-align: middle;
  margin-left: 5px;
  width: 15px;
}
/**********News設定終了**********/

/**********案件・連携活動の受け入れ状況**********/
.ukeirejyoukyou {
  height: auto;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

.ukeirejyoukyou .container {/*containerクラスをflexコンテナ化*/
  margin: 0 auto;
  padding-bottom: 10px;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.ukeirejyoukyou .list{/*containerクラスのflexアイテム*/
  width: 100%;
  flex: 1 0 258px; /*最小幅258px、画面サイズが2倍以上あれば横並び、その他引き延ばし*/
}

.ukeirejyoukyou h3 {/*flexboxにして文字中央*/
  padding: 15px 10px;
  height: 50px;
  background-color: #ffeeff;
  display: flex;
  font-weight: bold;
  align-items: center; /*垂直中央*/
  justify-content: center; /*水平中央*/
}

.ukeirejyoukyou ul {
  padding-left: 30px;
  list-style-type: disc;
  height: auto;
  width: 100%;
}
.ukeirejyoukyou ol {
  list-style-type:decimal;
  padding-left: 20px;
}

.ukeirejyoukyou li {
  padding: 5px 0px;
  text-align: left;
}

.ukeirejyoukyou table {
  table-layout: fixed;
  background-color: #ffffff;
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  padding: 0 5px ;
}

.ukeirejyoukyou th {
  padding: 15px 10px;
  height: 100%;
  background-color: #ffeeff;
  text-align: center;
}
.ukeirejyoukyou tr:nth-of-type(1){
  border-bottom: solid 2px #ffffff;
}
.ukeirejyoukyou td {
  border: solid 1px #000000;
  padding: 10px;
  text-align: center;
}

.ukeirejyoukyou img {
  flex:  1 0 230px;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}

/**********案件・連携活動の受け入れ状況**********/

/**********連携機関開始**********/
.renkeikikan {
  height: auto;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

.renkeikikan .container {  /*containerクラスをflexコンテナ化*/
  margin: 0 auto;
  padding-bottom: 10px;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.renkeikikan .list {
  width: 100%;
}

.renkeikikan h3 {
  padding: 15px 10px;
  background-color: #ffeeff;
  font-weight: bold;
  text-align: center;
}

.renkeikikan ul {
  margin: 0 5px;
  padding: 0 0px;
  height: auto;
  width: 100%;
  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.renkeikikan li {
  width: 230px;
  padding: 15px 0px;
  text-align: center;
  flex: 1 0 230px;
  }
/**********連携機関設定終了**********/

/**********活動実績設定開始**********/
.katudoujiseki {
  height: auto;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

.katudoujiseki .container {  /*containerクラスをflexコンテナ化*/
  margin: 0 auto;
  padding-bottom: 10px;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.katudoujiseki .list {/*containerクラスのflexアイテム*/
  margin-bottom: 10px;
  width: 25%;
  flex: 1 0 230px;
}

.katudoujiseki h3 {
  background-color: #ffeeff;
  font-weight: bold;  
  margin: 0 5px;
  padding: 15px 10px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.katudoujiseki ul {
  padding: 5px 10px;
  text-align: center;
}

.katudoujiseki li {
  padding: 5px 0px;
  text-align: left;
}

.katudoujiseki li:hover {
  border-radius: 10px;
  box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.5);
  transition: 0.25s;  transform: translateY(-3px);
}

.katudoujiseki img {
  border-radius: 5px;
  width: 100%;
  max-width: 230px;
  margin: 10px auto;
}

.katudoujiseki li img {
  margin: 0;
  width: 15px;
}
/**********活動実績設定終了**********/
/**********main設定終了**********/


/**********フッター設定開始**********/
footer {
  width: 100%;
  background-color: rgba(174, 218, 231, 0.9);
  font-size: 15px;
  font-family: "Kosugi Maru", sans-serif;
  color: #000000;
  text-align: center;
  bottom: 0;
}
/**********フッター設定終了**********/