/* CSS Document */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.woff") format("woff");
}

@font-face {
    font-family: "Kosugi Maru";
    font-style: normal;
    font-weight: 400;
    src: url("../font/KosugiMaru-Regular.ttf") format("ttf");
  }



html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* リセットCSS（Reset CSS） */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}




/* ページのボックスモデルを変更しない */
* {
  box-sizing: border-box;
}

ul, ol{
    list-style: none;
}

/* ページ全体に対する基本的なスタイル */
html {
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    height: 100%;
    text-align: justify;
    text-justify: inter-word;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
    background-repeat: repeat;
    background-size: auto;
}


/* リンクのスタイル */
a {
  text-decoration: none;
    color: #333;
    transition:  0.3s;
}

h2{
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #396EB7;
    display: flex;
    align-items: center;
}

h2 span{
    font-size: 0.5em;
    color:#6C7072;
    padding: 0 16px;
}



.container{
    width: calc(100% - 96px);
    max-width: 1480px;
    margin: 0 auto;

}


/*header */

header{
    padding: 8px;
    width: 100%;
    height: 120px;
    background-color: #396EB7;
    z-index: 10;
    position: fixed;
}


header .container{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.header_top{
    width: 100%;
  	display:flex;
	justify-content: space-between;
    align-items: center;
}

.header_right{
    display:flex;
	justify-content: space-between;
    align-items: center;
}

header .tokyo_logo{
    display: block;
}


header .tokyo_logo a{
    background: #fff;
    padding: 4px 16px;
    border-radius: 32px;
    display:inline-block;
}

header .tokyo_logo a:hover{
    opacity: 0.8;
}


header .tokyo_logo img{
    width: 160px;
}

header .ttl_logo{
    margin-left: 16px;
    font-size: 2em;
    color: #fff;
    font-weight: bold;
}

header .ttl_logo a{
    background: none;
    padding: 4px 0;
    color: #fff;
    text-align: center;
    display: inline-block;
}

header .ttl_logo a span{
    font-size: 0.9em;
    display: block;
    font-weight: bold;
    color: #FEEE38;
}


header .ttl_logo img{
    width: 320px;
}


header .submenu ul{
    display: flex;
    align-items: center;
    margin: 0 16px;
}

header .submenu ul li{
    margin: 0 16px
}

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

header .submenu ul li a:hover{
    color: #F8BC1A;
}


header .mypage a{
    border-radius: 32px;
    display: flex;
    align-items: center;
    padding: 8px 32px 8px 8px;
    background-color: #3BBFB3;
    color: #fff;
    font-weight: bold;
}

header .mypage a:hover{
    opacity: 0.8;
}

header .mypage a span{
    padding-left: 16px;
}




/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: relative;
  z-index : 3;
  right : 0;
  top   : 4px;
  width : 52px;
  height: 52px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 10px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 14px;
}
.hamburger span:nth-child(2) {
  top: 24px;
}
.hamburger span:nth-child(3) {
  top: 34px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 24px;
  left: 8px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 24px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
    position: fixed;
      z-index: 2;
      top: 120px !important; /* 修正：ヘッダーの下に固定 */
      left: 0;
      color: #fff;
      background-color: #396EB7;
      text-align: center;
      width: 100%;
      opacity: 0; /* 初期状態では透明 */
      transition: all 0.3s;
      display: none;
  }
  
  
  /* メニューがアクティブな時 */
  nav.globalMenuSp.active {
      opacity: 1; /* 表示状態に */
      transform: translateY(0); /* 上部からスライドイン */
      display: block;
  }
  
  
  /* メニュー内の要素を非表示にするためのCSS */
  nav.globalMenuSp  {
      width: 100%;
      margin: 0 auto;
      font-size: 1.1em;
  }
  
  nav.globalMenuSp ul{
      display: flex;
      -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      padding: 32px;
  }
  
  nav.globalMenuSp ul li{
      width: calc(100% / 3);
      margin: 16px 0;
  }
  
  nav.globalMenuSp ul li a{
      color: #fff;
  }
  



#login{
    padding-top: 150px;
    width: 100%;
    min-height: 90vh;
}

#login .container{
    padding: 160px 0;
}


#login .login_box{
    border-radius: 40px;
    background-color: #F5F5F5;
    padding: 80px 0;
}

#login .login_box dl{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    font-size: 2em;
    margin-bottom: 32px;
}

#login .login_box dl dt{
    width: 40%;
}

#login .login_box dl dd{
    width: 60%;
}



#login .login_box dl input{
    width: 100%;
    padding: 8px 24px;
    border-radius: 32px;
    font-size: 1em;
}

#login .login_box div{
    text-align: center;
    margin-top: 40px;
}


#login .login_box div input{
    margin: 0 8px;
    width: 240px;
    border: none;
    border-radius: 48px;
    padding: 16px;
    font-size: 1.2em;
    cursor: pointer;
}

#login .login_box div input:hover{
    opacity: 0.8;
}


#login .login_box div input[type=button]{
    background-color: #396EB7;
    color: #fff;
}

#login .login_box div input[type=reset]{
    background-color: #EEEEEE;
    color: #333;
}

#login .login_box p{
    text-align: center;
}




#topmain_first{
    background-color: #396EB7;
    padding-top:40px;
    width: 100%;

}

#topmain_first .top_hero{
    position: relative;
}


#topmain_first .top_slide{
    display: flex;
    justify-content: flex-end;
}

#topmain_first .slick_list {
    width: 100%;
    max-width: 1280px;
    padding-bottom: 80px;
}


#topmain_first ul img{
    border-radius: 40px;
    width: 100%;
}


#topmain_first .today_pickup{
    background-color: #fff;
    display: inline-block;
    padding: 32px;
    border-radius: 32px 32px 0 0;
    position: absolute;
    bottom: 0;
    max-width: 480px;
}

#topmain_first .today_pickup .corner {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    transform: translateX(-100%);
}
#topmain_first .today_pickup .corner::before {
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;

    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: 32px 32px 0 0 white;
    transform: translate(-50%, -50%);
}

#topmain_first .today_pickup .corner2 {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    transform: translateX(100%);
}
#topmain_first .today_pickup .corner2::before {
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden;

    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: -32px 32px 0 0 white;
    transform: translate(50%, -50%);
}




#topmain_first .today_pickup h3{
    font-size: 1.5em;
    color: #396EB7;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

#topmain_first .today_pickup a{
    margin-top: 8px;
}

#topmain_first .today_pickup a:hover{
    color: #3BBFB3;
}

#topmain_first .today_pickup img{
    object-fit: contain;
    width: 450px;
    height: 270px;
}


#topmain_first .teacher_img{
    position: absolute;
    bottom: -40px;
    right: 0;
}



#topmain_second{
    background-color: #fff;
    padding: 0;
}


#topmain_second .container{
    display: flex;
    align-items: flex-start;
}

#topmain_second .container .about p{
    letter-spacing: 0.1em;
    line-height: 2.5em;
    margin: 40px 0;
    font-size: 1.4em;
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
}



#topmain_second .container .news{
    background-color: #F5F5F5;
    border-radius: 40px;
}

#topmain_second .container .news .news_ttl{
    display: flex;
    justify-content: space-between;
}



#topmain_second .container .news .more a{
    background-color: #EF9188;
    color: #fff;
    padding: 8px 16px;
    border-radius: 32px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

#topmain_second .container .news .more a:hover{
    opacity: 0.8;
}

#topmain_second .container .news .more a img{
    padding-left: 16px;
}


#topmain_second .container .news ul{
    margin-top: 48px;
    padding-bottom: 16px;
}

#topmain_second .container .news ul li{
    padding: 32px 0;
    border-top: solid 1px #ddd;
}

#topmain_second .container .news ul li:last-child{
    border-bottom: solid 1px #ddd;
}



#topmain_second .container .news ul li span{
    color: #aaa;
    padding-right: 40px;
}

#topmain_second .container .news ul li a:hover{
    text-decoration: underline;
}




#topmain_third{
    padding: 16px 0 80px;
    background-color: #F5F5F5;
}


#topmain_third h2 span, #topmain_third h2{
    display: block;
    text-align: center;
}

#topmain_third h2 span{
    margin: 24px 0;
    padding: 0;
}

#topmain_third .category_list {
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    width: 100%;
  }
  
  #topmain_third .category_list li:first-child {
    grid-column: 1 / 5;
}
  
  #topmain_third .category_list li {
    box-sizing: border-box;
    margin-bottom: 16px;  
    padding: 8px;
  }



#topmain_third .category_list li:first-child a {
    flex-direction: row-reverse ;
    align-items: center;
}



#topmain_third .category_list li:first-child a img {
    width: 70px;
    height: auto;
}



#topmain_third .category_list li:first-child p {
    padding: 0 20px;
}

  
  #topmain_third .category_list li a {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    background-color: #fff;
    border-radius: 32px;
    padding: 32px;
    text-align: center;
    border: solid 2px #fff;
    width: 100%;  
    box-sizing: border-box;
  }
  
  #topmain_third .category_list li a:hover {
    border: solid 2px #4d78b1;
  }

  
  #topmain_third .category_list li p {
    font-weight: bold;
    padding-top: 16px;
    font-size: 1.4em;
    color: #4d78b1;
  }
  
  /* 最終行を左寄せにする */
  /* #topmain_third .category_list::after {
    content: "";
    grid-column: span 3;  
  } */
  
  #topmain_third .category_list {
    justify-content: start; 
  }
  
  

#topmain_third .more_button{
    margin: 80px 0 24px;
}

#topmain_third .more_button a{
    margin: 0 auto;
    background-color: #ef9188;
    padding: 24px 32px 24px 48px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
}

#topmain_third .more_button a:hover{
    opacity: 0.8;
}

#topmain_third .more_button a img{
    padding-left: 16px;
}


#topmain_forth{
    background-color: #f5f5f5;
    padding: 40px;

}

#topmain_forth .container .search_box .search_form .search_right{
    width: 100%;
}


.selectbox {
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.selectbox::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox select {
    appearance: none;
    width: 100%;
    display: block;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
    border-radius: 8px;
}


#topmain_forth .container .search_box .search_form .search_right{
    display: flex;
    flex-wrap: wrap;
}

#topmain_forth .container .search_box .search_form .search_right dl{
    width: 50%;
    padding: 16px;
    font-size: 1.3em;
}

#topmain_forth .container .search_box .search_form .search_right dt{
    padding-bottom: 16px;
}


#topmain_forth .container .search_box .search_form .search_right .width100{
    width: 100%;
}

#topmain_forth .container .search_box .search_form .search_right .width100 input{
    width: 100%;
    border: 1px solid #ddd;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    font-size: 1em;
    background-color: #fff;
    color: #333333;
    border-radius: 8px;
}

#topmain_forth .container .search_box .search_form .search_right .search_button{
    text-align: center;
    margin: 40px 0;
    display: flex;
    justify-content: center;
    width: 100%;
}



#topmain_forth .container .search_box .search_form .search_right .search_button a{
    margin: 0 auto;
    background-color: #ef9188;
    padding: 16px 112px 16px 16px;
    font-size: 1.2em;
    font-weight: bold;
    color: #393939;
    border-radius: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 280px;
    text-align: center;
    margin: 16px;
    border: solid 1px #ef9188;
}

#topmain_forth .container .search_box .search_form .search_right .search_button a:hover{
    opacity: 0.8;
}

#topmain_forth .container .search_box .search_form .search_right .search_button a img{
    padding-right: 16px;
}


#topmain_forth .container .search_box .search_form .search_right .reset_button a{
    background-color: #EEEEEE;
    padding: 28px;
    text-align: center;
    display: inline-block;
    color: #000;
    font-size: 0.9em;
}




#topmain_fifth{
    padding: 160px 0 40px;
}

#topmain_fifth .rank_ttl{
    display: flex;
    justify-content: space-between;
}


#topmain_fifth .rank_ttl a{
    background-color: #EF9188;
    color: #393939;
    padding: 8px 16px;
    border-radius: 32px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

#topmain_fifth .rank_ttl a:hover{
    opacity: 0.8;
}

#topmain_fifth .rank_ttl a img{
    padding-left: 16px;
}


#topmain_fifth .ranking{
    display: flex;
}

#topmain_fifth .ranking .rank_box{
    width: 20%;
    padding: 16px;
}

#topmain_fifth .ranking .rank_box img{
    width: 100%;
    height:180px; 
    object-fit: contain;
    object-position: top; 
}

#topmain_fifth .ranking .rank_box div{
    position: relative;
}

#topmain_fifth .ranking .rank_box span img{
    width: 48px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

#topmain_fifth .ranking .rank_box p{
    margin: 16px 0;
}

#topmain_fifth .ranking .rank_box a:hover{
    text-decoration: underline;
    opacity: 0.8;
}

#topmain_sixth .pickup {
    margin: 20px 0 0;
    padding-bottom: 80px;
}

/*
#topmain_sixth .pickup ul{
    width: 100%;
    padding: 32px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#topmain_sixth .pickup ul .pick1 { grid-area: 1 / 1 / 3 / 2; }
#topmain_sixth .pickup ul .pick2 { grid-area: 1 / 2 / 2 / 3; }
#topmain_sixth .pickup ul .pick3 { grid-area: 2 / 2 / 3 / 3; }
*/
#topmain_sixth .pickup ul{
    width: 100%;
    padding: 32px 0 0 0;
    display: flex;
}




#topmain_sixth .pickup ul li{
    padding: 16px;
}

#topmain_sixth .pickup ul li p{
    margin: 8px 0;
}


#topmain_sixth .pickup ul li a{
    font-size: 1.2em;
    color: #4d78b1;
    font-weight: bold;
}

#topmain_sixth .pickup ul li a:hover{
    text-decoration: underline;
}


#topmain_sixth .pickup ul .pick1 img{
    width: 100%;
}

#topmain_sixth .pickup ul li span a{
    padding: 4px 8px;
    background-color: #EEEEEE;
    font-size: 0.9em;
    font-weight: normal;
    color: #333;
    border-radius: 3px;
}

#topmain_sixth .pickup ul li span a:hover{
    text-decoration: none;
    opacity: 0.8;
}

#topmain_sixth .pickup ul .pick1{
    width: 50%;
}



#topmain_sixth .pickup ul .pick2, #topmain_sixth .pickup ul .pick3{
    display: flex;
}

#topmain_sixth .pickup ul .pick2 div, #topmain_sixth .pickup ul .pick3 div{
    width: 50%;
    padding: 0 8px;
}

#topmain_sixth .pickup ul .pick1 div img, #topmain_sixth .pickup ul .pick2 div img, #topmain_sixth .pickup ul .pick3 div img{
    width: 100%;
    object-fit: contain;
    object-position: top;
}

#topmain_sixth .pickup ul .pick1 div img{
    height: 400px;
}

#topmain_sixth .pickup ul .pick2 div img, #topmain_sixth .pickup ul .pick3 div img{
    height: 200px;
}

/* #popup img{
    position:fixed;
    bottom:60px;
      right:30px;
    z-index: 1000;
}

#popup a:hover{
    opacity: 0.8;
} */

.Usersurvey{
    display: block;
    margin-bottom: 3rem;
}
.Usersurvey:hover{
    opacity: .8;
}
.Usersurvey img{
    margin: auto;
    display: block;
}




#lower{
    padding-top: 120px;
    width: 100%;
     background-color: #f5f5f5;
}




#breadcrumb {
  list-style: none;
    margin: 16px 0;
}

#breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
    padding: 0 8px 0 0
}

#breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0 0 8px;
}

#breadcrumb li:last-child:after {
  content: '';
}

#breadcrumb li a {
  text-decoration: none;
}

#breadcrumb li a:hover {
  text-decoration: underline;
}


#lower .search_list{
    background-color: #fff;
    padding: 48px;
    border-radius: 48px;
    display: flex;
}


#lower .search_list .sidemenu{
    width: 30%;
    padding: 0 24px 0 0;
}


#lower .search_list .result{
    width: 70%;
    padding: 0 0 0 24px;
}

#lower .search_list .sidemenu dl, #lower .search_list .sidemenu dt{
    margin: 8px 0;
}


#lower .search_list .sidemenu dl input[type=text]{
    width: 100%;
    border: 1px solid #ddd;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    font-size: 1.1em;
    background-color: #fff;
    color: #333333;
    border-radius: 8px;
}

#lower .search_list .sidemenu .search_button{
    text-align: center;
    margin: 40px 0;

}

#lower .search_list .sidemenu .search_button a{
    margin: 0 auto;
    background-color: #ef9188;
    color: #393939;
    padding: 8px;
    font-size: 1.2em;
    color: #393939;
    border-radius: 48px;
    width: 200px;
    text-align: center;
    display: inline-block;
}

#lower .search_list .sidemenu .search_button .reset a{
    background-color: #EEEEEE;
    color: #333;
}

#lower .search_list .sidemenu .search_button a:hover{
    opacity: 0.8;
    
}


#lower .search_list .result .search_terms ul{
    display: flex;
    margin: 8px 0;
}

#lower .search_list .result .search_terms ul li{
    margin: 0 8px 0 0;
}

#lower .search_list .result .search_terms ul li a:hover{
    text-decoration: underline;
}

#lower .search_list .result .site_number{
    text-align: center;
}

#lower .search_list .result .site_number span{
    font-weight: bold;
    color: #B04C56;
    margin-right: 4px;
}

#lower .search_list .result .site_list {
    margin: 40px 0;
}



#lower .search_list .result .site_list .site_box{
    display: flex;
    margin-bottom: 32px;
    border-bottom: dashed 1px #e2f2fe;
    padding-bottom: 32px;
}

#lower .search_list .result .site_list .site_box:last-child{
    border: none;
}

#lower .search_list .result .site_list .site_box .site_img{
    width: 30%;
}

#lower .search_list .result .site_list .site_box .site_img img{
    width: 100%;
    object-fit: contain;
    height: 160px;
    object-position: top;
}

#lower .search_list .result .site_list .site_box .site_detail{
    width: 70%;
    padding: 0 0 0 32px;
}

#lower .search_list .result .site_list .site_box .site_detail h3 a{
    color: #4d78b1;
    font-size: 1.3em;
    font-weight: bold;
}

#lower .search_list .result .site_list .site_box .site_detail h3 a:hover{
    text-decoration: underline;
}

#lower .search_list .result .site_list .site_box .site_detail p{
    margin: 8px 0;
}


#lower .search_list .result .site_list .site_box .site_detail ol{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#lower .search_list .result .site_list .site_box .site_detail ol li{
    margin:4px 8px 4px 0;
}


#lower .search_list .result .site_list .site_box .site_detail ol li a{
    padding: 4px 8px;
    background-color:#EEEEEE;
    font-size: 0.9em;
    border-radius: 3px;
}

#lower .search_list .result .site_list .site_box .site_detail ol li a:hover{
    opacity: 0.8;
}

#lower .search_list .result  .more_button{
    margin: 40px 0;
    text-align: center;
}

#lower .search_list .result  .more_button a{
    margin: 0 auto;
    background-color: #ef9188;
    padding: 16px;
    font-size: 1.2em;
    font-weight: bold;
    color: #393939;
    border-radius: 48px;
    width: 200px;
    text-align: center;
    display: inline-block;
}

#lower .search_list .result  .more_button a:hover{
    opacity: 0.8;
}

#lower .rank_list{
    display: block;
}

#lower .rank_list .result{
    width: 100%;;
}


#lower .rank_list .result .site_img{
    position: relative;
}

#lower .rank_list .result .site_img span img{
    position: absolute;
    top: 0;
    left: 0;
    width: 64px !important;
}

#lower .rank_list .result .site_list .site_box .site_img img{
    height: 240px;
}




#lower .news_list{
    background-color: #fff;
    padding: 48px;
    border-radius: 48px;
}


#lower .news_list ul{
    margin-top: 48px;
    padding-bottom: 16px;
}


#lower .news_list ul li{
    padding: 32px 0;
    width: 100%;
    border-top: solid 1px #ddd;
}

#lower .news_list ul li:last-child{
    border-bottom: solid 1px #ddd;
}



#lower .news_list ul li span{
    color: #aaa;
    padding-right: 40px;
}

#lower .news_list ul li a:hover{
    text-decoration: underline;
}


#lower .forms{
    background-color: #fff;
    padding: 48px 48px 160px;
}

#lower .forms p{
    font-size: 1.2em;
    margin: 24px 0;
}

#lower .forms p span{
    color: red;
}

#lower .forms dl{
    font-size: 1.1em;
    margin-bottom: 24px;
}

#lower .forms dl span{
    color: red;
}

#lower .forms dl dt{
    margin: 16px 0;
    font-weight: bold;
}

#lower .forms dl dd textarea{
    width: 100%;
    border: 1px solid #ddd;
    height: 10em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    font-size: 1.1em;
    background-color: #fff;
    color: #333333;
    border-radius: 8px;
}

#lower .forms div{
    text-align: center;
    margin: 40px 0;
}

#lower .forms div button{
    margin: 0 auto;
    border:none;
    background-color: #396EB7;
    padding: 16px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 48px;
    width: 200px;
    text-align: center;
    display: inline-block;
    color: #fff;
    cursor: pointer;
}

#lower .forms div button:hover{
    opacity: 0.8;
}


#lower .policy{
    background-color: #fff;
    padding: 48px;
    border-radius: 48px;
}

#lower .policy h3{
    font-size: 1.3em;
    border-left: solid 8px #EF9188;
    padding-left: 16px;
    font-weight: bold;
    margin: 1em 0;
}

#lower .policy h4{
    font-size: 1.1em;
    font-weight: bold;
    margin: 0.5em 0;
}

#lower .policy p{
    margin: 0.5em 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}




.back_button{
    padding: 120px 0 160px;
    text-align: center;
}


.back_button a{
    text-align: center;
    padding: 16px 64px;
    border-radius: 32px;
    color: #333;
    font-weight: bold;
    background: #fff;
    box-shadow: inset 1px 1px 1px #fff;
}

.pagetop{
    text-align: right;
    padding: 16px 0;
}



footer{
    position: relative;
    background-color: #396EB7;
    width: 100%;
}

footer .student_img{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



footer .container{
    padding: 16px 0 48px;
}

footer .f_menu{
    padding-top: 160px;
}

footer ul{
    display: flex;
    justify-content: center;
}

footer ul li{
    padding: 0 16px;

}


footer ul a{
    color: #fff;
}

footer ul a:hover{
    text-decoration: underline;
}

footer .f_submenu{
    margin-top: 80px;
}

footer .f_submenu li{
    position: relative;
}

footer .f_submenu li::after {
    position: absolute;
    top: 0;
    height: 1.5rem;
    content: '';
    border-right: solid 2px #fff;
    right: 0;
    transform: rotate(30deg);
}

footer .f_submenu li:last-child::after{
    display: none;
}





.margin_top{
    margin-top: 64px;
}

.copyright{
    text-align: center;
    padding: 32px 0;
    color: #fff;
}


.banner {
    position: fixed;
    margin: 15px 20px;
    z-index: 99998;
    bottom: 210px;
    right: 10px;
}
.banner-close {
    font-weight: bold;
    position: absolute;
    top: -2px;
    right: -4px;
    z-index: 99999;
    padding: 4px 8px;
    border: none;
    background-color: #f8f8f8;
    border-radius: 25px;
    cursor: pointer;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
    box-shadow: 0 0 7px rgb(0 0 0 / 40%);
}


#errorMessages{
    width: 100%;
    text-align: center;
    display: block;
}

#errorMessages p{
    text-align: left;
}




/* デスクトップ (Large devices) */
@media (min-width: 1200px) and (max-width: 1599px)  {

    h2{
        font-size: 1.8em;
    }
    .container {
        width: 1120px;
        margin: 0 auto;
    }
    header .tokyo_logo img{
        width: 120px;
    }

    header .ttl_logo{
        margin:0;
        font-size: 1.6em;
    }

    header .submenu ul{
        margin: 0 8px;
    }

    header .submenu ul li{
        margin: 0 8px
    }


    header .mypage a{
        padding: 8px
    }

    header .mypage a span{
        display: none;
    }


    #topmain_sixth .pickup ul .pick1 div img{
        height: 300px;
    }
    
    #topmain_sixth .pickup ul .pick2 div img, #topmain_sixth .pickup ul .pick3 div img{
        height: 160px;
    }
    

    #topmain_third .category_list {
        margin: 20px 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 10px; 
        width: 100%;
      }
      
      #topmain_third .category_list li {
        box-sizing: border-box;
        margin-bottom: 8px;  
        padding: 4px;
      }
      
      #topmain_third .category_list li a {
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        background-color: #fff;
        border-radius: 32px;
        padding: 16px;
        text-align: center;
        border: solid 2px #fff;
        width: 100%;  
        box-sizing: border-box;
      }
    





}

@media  (min-width: 1199px) {
    .sp{
        display: none;
    }


}




@media  (max-width: 1199px) {
    .container {
        width: calc(100% - 120px);
        margin: 0 auto;
    }

    header .mypage a{
    border-radius: 32px;
    display: flex;
    align-items: center;
    padding: 8px 32px 8px 8px;
    background-color: #3BBFB3;
    color: #fff;
    font-weight: bold;
}

header .mypage a:hover{
    opacity: 0.8;
}

header .mypage a span{
    display: none;
}


     nav.globalMenuSp ul {
        width: calc(100% - 32px);
    }


}




/* タブレット (Medium devices) */
@media (min-width: 768px) and (max-width: 1199px) {

    .sp{
        display: block;
    }

    .pc{
        display: none;
    }


    header .ttl_logo img {
        height: 48px;
        width: auto;
    }

    header .submenu ul{
        display: none;
    }




    header .mypage {
        margin-right: 40px;
    }

    header .mypage a{
        padding: 8px;
    }

    header .mypage a span{
        display: none;
    }


    #login .login_box dl{
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        font-size: 2em;
        margin-bottom: 32px;
    }

    #login .login_box dl dt{
        padding: 0 16px;
    }

    #login .login_box dl dd{
        padding: 0 16px;
    }



    #topmain_first .today_pickup{
        width: 320px;
    }

    #topmain_first .today_pickup img{
        width: 260px;
        height: 150px;
    }

    #topmain_first .today_pickup h3{
        font-size: 1.3em;
    }


    #topmain_second .container{
        display: block;
    }

    #topmain_second .container .about, #topmain_second .container .news{
        width: 100%;
    }

    #topmain_third .category_list {
        margin: 16px 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 8px; 
        width: 100%;
      }
      
      #topmain_third .category_list li {
        box-sizing: border-box;
        margin-bottom: 8px;  
        padding: 4px;
      }



    #topmain_third .category_list li a {
        font-size: 0.8em;
      }
      

    #topmain_forth .container .search_box {
        padding: 48px 0 16px;
        border-radius: 0 0 24px 24px;

    }

    #topmain_forth .container .search_box .corner,
    #topmain_forth .container .search_box .corner2 {
        width: 36px;
        height: 36px;
    }

    #topmain_forth .container .search_box .corner {
        left: -18px;
        top: -18px;
    }

    #topmain_forth .container .search_box .corner::before {
        width: 36px;
        height: 36px;
    }

    #topmain_forth .container .search_box .corner2 {
        right: -18px;
        top: -18px;
    }

    #topmain_forth .container .search_box .corner2::before {
        width: 36px;
        height: 36px;
    }



    #topmain_forth .container .search_box .search_form{
        display: block;
    }

    #topmain_forth .container .search_box .search_form .search_left{
        width: 100%;
        text-align: center;
    }

    #topmain_forth .container .search_box .search_form .search_left h2{
        text-align: center;
    }


    #topmain_forth .container .search_box .search_form .search_right{
        width: 100%
    }

    #topmain_fifth .ranking .rank_box img{
        height:100px;
    }


    #topmain_fifth .sp a{
        background-color: #EF9188;
        color: #393939;
        padding: 8px 16px;
        border-radius: 32px;
        font-size: 1em;
        width: 100%;
    }

    #topmain_fifth .sp a img{
        display: none;
    }



    #topmain_sixth .pickup {
        padding: 80px 24px 160px;

    }

/*
    #topmain_sixth .pickup ul{
        width: 100%;
        display: block; 
    grid-template-columns: none; 
    grid-template-rows: none; 
    grid-column-gap: 0; 
    grid-row-gap: 0; 
    }*/
/*
    #topmain_sixth .pickup ul li{
        grid-column: auto; 
        grid-row: auto; 
        grid-area: auto;
        width: 100%;
        margin-bottom: 40px;
    }
*/


    footer ul{
        margin-top: 32px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    footer ul li{
        margin: 8px 0;
    }


}

/* スマートフォン (Large devices) */
@media (max-width: 899px) {

    .pc{
        display: none;
    }

    .sp{
        display: block;
    }

    .container{
        width: calc(100% - 24px);
        margin: 0 auto;
    }

    h2{
        font-size: 1.4em;
    }

    h2 span{
        font-size: 0.5em;
    }


    header{
        height: 120px;
    }

    
    /* メニュー背景　*/
    nav.globalMenuSp {
        top: 120px !important; /* 修正：ヘッダーの下に固定 */
    }
    


    .header_top .tokyo_logo{
        display: block;
        margin: 0;
        padding: 0;
    }

    header .tokyo_logo img{
        width: 140px;
    }

    header .ttl_logo{
        margin-left: 0px;
        font-size: 1.3em;
        color: #fff;
        text-align: center;
    }

    header .ttl_logo a span{
        font-size: 0.8em;
    }

    header .submenu ul{
        display: none;
    }

    header .mypage a{
        padding: 8px;
    }

    header .mypage a span{
        display: none;
    }

    nav.globalMenuSp ul{
        margin: 0;
        padding: 0;
    }

    nav.globalMenuSp ul li{
    width: calc(100% / 1);
    margin: 16px 0;
}




    #login .container{
        padding: 80px 0;
    }

    #login .login_box{
        text-align: center;
        padding:32px;
    }


    #login .login_box div input{
        width: 100%;
        margin: 16px 0;
    }


    #login .login_box dl{
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        display: block;
        font-size: 2em;
        margin-bottom: 32px;
    }

    #login .login_box dl dt{
        padding: 8px 0;
        width: 100%;
        text-align: left;
        font-size: 0.8em;
    }

    #login .login_box dl dd{
        padding: 0;
        width: 100%;
    }

    #topmain_first {
        padding-top: 160px;
        padding-bottom: 16px;
    }


    #topmain_first .top_slide{
        display: block;
    }

    #topmain_first .slick_list {
        padding-bottom: 0;
        height: 480px;

    }


    #topmain_first ul img{
        width: 100%;
        height: 480px;
        object-fit: cover;
        object-position:75% 50%;
        border-radius: 16px;
    }

    #topmain_first .today_pickup{
        width: 240px;
        padding: 16px;
        padding: 16px;
        border-radius: 16px 16px 0 0;
        position: absolute;
        bottom: -17px;
        left: -12px;
    }

    #topmain_first .today_pickup h3{
        font-size: 1em;
    }


    #topmain_first .today_pickup img{
        width: 200px;
        height: 120px;
    }


    #topmain_first .today_pickup .corner {
        display: none;
    }


    #topmain_first .today_pickup .corner2 {
        display: block;
        width: 16px;
        height: 16px;
    }
    #topmain_first .today_pickup .corner2::before {
        box-shadow: -16px 16px 0 0 white;
    }


    #topmain_first .teacher_img{
        display: none;
    }



    #topmain_second{
        display: block;
        padding: 0;
    }

    #topmain_second .container, #topmain_second .container .about, #topmain_second .container .news{
        width: 100%;
        display: block;
        margin: 0;
        padding: 16px;
    }

    #topmain_second .container .about p{
        letter-spacing: 0.1em;
        line-height: 2.5em;
        margin: 16px 0;
        font-size: 1.1em;
        font-family: "Kosugi Maru", sans-serif;
        font-weight: 400;
        font-style: normal;
    }


    #topmain_second .container .news{
        border-radius: 16px;
        margin-top: 24px;
    }

    #topmain_second .container .news .news_ttl{
        display: block;
    }

    #topmain_second .container .news .more a{
        background-color: #EF9188;
        color: #393939;
        padding: 8px 16px;
        border-radius: 32px;
        font-size: 1.1em;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    #topmain_second .container .news ul{
        margin-top: 32px;
        padding-bottom: 16px;
        line-height: 2em;
    }


    #topmain_second .container .news ul li span{
        padding-right: 16px;
    }



    #topmain_third .category_list{
        margin: 40px 0;
        display: block;
    }

    #topmain_third .category_list li {
        width: 100%;
        margin-bottom: 16px;
    }


    #topmain_third .category_list li a{
       font-size: 0.8em;
       display: block;
       padding: 8px;
       border-radius: 8px;
    }


    #topmain_third .category_list li:first-child a img {
        width: 40px;
    }


    #topmain_third .category_list li:first-child p {
        padding-top: 16px;
    }


    #topmain_third .category_list li a img{
        width: 40px;
    }


    #topmain_third .more_button{
        margin:64px 0 24px;
    }

    #topmain_third .more_button a{
        margin: 0 auto;
        background-color: #ef9188;
        padding: 12px 16px 12px 24px;
        font-size: 1em;
        width: 90%;
    }

    #topmain_third .more_button a:hover{
        opacity: 0.8;
    }

    #topmain_third .more_button a img{
        padding-left: 16px;
    }


    #topmain_forth .container .search_box {
        position: relative;
        background-color: #f5f5f5;
        border-radius: 0;

    }

    #topmain_forth .container .search_box .corner,
    #topmain_forth .container .search_box .corner2 {
        display: none;
    }



    #topmain_forth .container .search_box .search_form{
        display: block;
    }

    #topmain_forth .container .search_box .search_form .search_left{
        width: 100%;
    }


    #topmain_forth .container .search_box .search_form .search_right{
        width: 100%;
    }


    #topmain_forth .container .search_box .search_form .search_right{
        display: block;
        font-size: 0.9em;
    }

    #topmain_forth .container .search_box .search_form .search_right dl{
        width: 100%;
        padding: 0;
        margin: 16px 0;
    }

    #topmain_forth .container .search_box .search_form .search_right dt{
        width: 100%;
        padding: 0;
    }

    #topmain_forth .container .search_box .search_form .search_right .search_button{
        display: block;
    }


    #topmain_forth .container .search_box .search_form .search_right .search_button a{
        margin: 0 auto;
        background-color: #ef9188;
        padding: 8px 80px 8px 8px;
        font-size: 1em;
        border-radius: 64px;
        width: 100%;
        max-width: 200px;
        text-align: center;
        color: #393939;
    }

    #topmain_forth .container .search_box .search_form .search_right .search_button a:hover{
        opacity: 0.8;
    }

    #topmain_forth .container .search_box .search_form .search_right .search_button a img{
        padding-right: 16px;
    }

    #topmain_forth .container .search_box .search_form .search_right .reset_button a{
        background-color: #ccc;
        padding: 20px;
        text-align: center;
        display: inline-block;
        color: #000;
        margin-top: 32px;
        font-size: 0.9em;
    }

    #topmain_forth .container .search_box .search_form .search_right .sp{
        text-align: center;
    }
    
    #topmain_forth .container .search_box .search_form .search_right .sp img{
        width: 240px;
    }



    #topmain_fifth{
        padding: 140px 0 0;
    }
    #topmain_fifth .rank_ttl{
        display: block;
    }
    #topmain_fifth .container .sp a{
        background-color: #EF9188 !important;
        color: #000;
        padding: 8px 16px;
        border-radius: 32px;
        font-size: 1em;
        display: block;
        width: 100%;
        border: solid 1px #EF9188 !important;
        text-decoration: underline;
    }

    #topmain_fifth .rank_ttl a:hover{
        opacity: 0.8;
    }

    #topmain_fifth .sp a img{
        padding-left: 16px;
        display: none;
    }


    #topmain_fifth .ranking{
        display: block;
    }

    #topmain_fifth .ranking .rank_box{
        width: 100%;
        padding: 16px;
    }

    #topmain_fifth .ranking .rank_box img{
        height:200px;
    }




    #topmain_sixth{
        margin: 0;
        padding: 0;
    }

    #topmain_sixth .pickup {
        margin: 0;
        padding: 0 24px;
    }




    #topmain_sixth .pickup ul{
        width: 100%;
        padding:0;
        display: block;
    }


    #topmain_sixth .pickup ul li{
        padding: 32px 0;
        margin: 0;
        width: 100%;

    }

    #topmain_sixth .pickup ul .pick1{
        width: 100%;
    }




    #topmain_sixth .pickup ul .pick2, #topmain_sixth .pickup ul .pick3{
        display: block;
    }

    #topmain_sixth .pickup ul .pick2 div, #topmain_sixth .pickup ul .pick3 div{
        width: 100%;
        padding: 0 8px;
    }

    #topmain_sixth .pickup ul .pick1 div img{
        height: 240px;
    }

    
    #lower{
        padding-top: 120px;
    }


    
    #lower .search_list{
        padding: 32px 16px;
        flex-wrap: wrap-reverse;
    }



    #lower .search_list .sidemenu{
        width: 100%;
        padding: 0;
    }


    #lower .search_list .result{
        width: 100%;
        padding: 0;
    }

    #lower .search_list .sidemenu dl, #lower .search_list .sidemenu dt{
        margin: 8px 0;
    }

    #lower .search_list .search_terms ul{
        flex-wrap: wrap;
    }

    #lower .search_list .result .site_list .site_box{
        display: block;
    }

    #lower .search_list .result .site_list .site_box .site_img{
        width: 100%;
    }
    
    #lower .search_list .result .site_list .site_box .site_img img{
        height: 240px;
    }
    
    #lower .search_list .result .site_list .site_box .site_detail{
        width: 100%;
        padding: 0;
    }

    #lower .search_list .result .site_list .site_box .site_detail ol{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #lower .search_list .result .site_list .site_box .site_detail ol li{
        margin: 8px 8px 8px 0;
    }

    #lower .policy{
        padding: 32px 16px;
    }



    .pagetop{
        display: none;
    }

    #popup{
        margin: 24px 0;
        padding: 0 32px;
    }

    #popup img{
        position: static;
        width: 100%;
    }




    footer{
        position: relative;
        background-color: #396EB7;
        width: 100%;
    }

    footer .student_img{
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }


    footer .student_img img{
        width: 280px;
    }


    footer .f_menu ul{
        display: block;
    }


    footer .f_submenu li::after {
        display: none;
    }


}





a#jump_about,
a#jump_news,
a#jump_category,
a#jump_search,
a#jump_ranking,
a#jump_pickup {
    display:block;
    padding-top:150px;
    margin-top: -150px;
}
.more_list li.list-hidden {
    visibility: hidden !important;
    opacity: 0;
    height: 0;
    margin: 0 10px !important;
    padding:0 !important;
}

.cat1 a{
    background-color: #EFF7FC !important;
    border: solid 1px #396EB7;
}

.cat2 a{
    background-color: #FBEEF1 !important;
    border: solid 1px #E7A1B1;
}

.cat3 a{
    background-color: #EEF0FB !important;
    border: solid 1px #A1ACE7;
}

.cat4 a{
    background-color: #E2F2CD !important;
    border: solid 1px #B6DC83;
}

.cat5 a{
    background-color: #FAEBD7 !important;
    border: solid 1px #F1C893;
}

.cat6 a{
    background-color: #FCFCEE !important;
    border: solid 1px #E1E164;
}

.cat7 a{
    background-color: #EDF6FB !important;
    border: solid 1px #64AFE1;
}

.cat8 a{
    background-color: #EDE6E9 !important;
    border: solid 1px #7D5D6C;
}

.cat9 a{
    background-color: #e6edea !important;
    border: solid 1px #5d7d71;
}