@charset "utf-8";
#header h1 {
    top: 15px;
    padding:0 30px;
    max-width:200px; height:124px;
    background: #fff;
}
#header h1 a { display: block;}
#header h1 img { width: 100%; height: auto;}

#nav { background: #8F8524;}
#nav ul li + li  { border-left: 1px solid #fff;}
#nav ul li a {color: #fff;}
@media only screen and (max-width:768px){
    #header h1 { height:119px;}
    #header h1 { padding: 0; width:100px; height: 100px;}
}
@media only screen and (max-width:468px){
    #header { min-height: 80px !important;}
    #header h1 { position: absolute; top:-5px; padding: 0; width:65px; height: 100px; background: none;}
    #nav ul li + li  { border-left:none;}
}



/*============================================================================
TOPPAGE
============================================================================*/
#toppage h3 { padding: 0 0 40px; text-align: center;}
#toppage h3 img { width: auto; height:95px; }
@media only screen and (min-width:468px){
    #toppage .scroll-up {
      opacity: 0; 
      visibility: hidden;
      transform: translateY(50px);
      transition: all 1s;
    }
    #toppage .scroll-up.is-show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
    }
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage h3 img { width: auto; height:75px; }
}

/* MAINIMG */
#toppage .mainimg {
    text-align: center;
    background: url("../../image/front_bg.png") no-repeat center center;
    background-size: cover;
}
#toppage .mainimg .main_slider { margin: auto; width: 100%; max-width: 1200px; background: #eee;}
#toppage .mainimg .main_slider img { width: 100%; height: auto;}

/* NEWS */
#toppage .news {
    background: url("../../image/frontNews_bg.png") no-repeat top left;
    background-size: contain;
}
#toppage .news .news_listl { margin: 20px 2%;}
#toppage .news .news_list dl { display: none;}
#toppage .news .news_list dl:nth-child(-n+5) { display: flex;}
#toppage .news .news_list dl {  flex-wrap: wrap; align-items: flex-start; padding: 20px 0; gap:20px; border-bottom: 1px solid #1B1464;}
#toppage .news .news_list dl dt { width: 200px;}
#toppage .news .news_list dl dd { width: calc(100% - 220px); padding: 5px 0;}
#toppage .news .news_list dl dt { display: flex; flex-wrap: wrap; align-items:center; gap:20px;}
#toppage .news .news_list dl dt span:nth-child(1){
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 150%;
    color: #1B1464;
}
#toppage .news .news_list dl dt span:nth-child(2){ 
    display: block;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 87.5%;
    background: #1B1464;
    border-radius: 5px;
}
#toppage .news .news_list dl dd a { color: #1B1464;}
#toppage .news .b_more {  margin: 60px auto 0; width:100%; max-width: 350px;}
#toppage .news .b_more a {
    display: block;
    padding:25px 20px;
    font-size: 112.5%;
    font-weight: bold;
    color: #1B1464;
    text-align: center;
    text-decoration: none;
    letter-spacing: 2px;
    border: 1px solid #1B1464;
}
@media only screen and (min-width:468px){
    #toppage .news .news_list dl dd a:hover { text-decoration: underline;}
    #toppage .news .b_more a:hover { color: #fff; background:#1B1464;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .news .news_list dl { flex-direction: column; gap:5px;}
    #toppage .news .news_list dl dt,
    #toppage .news .news_list dl dd { width: 100%; padding: 0;}
    #toppage .news .b_more a {padding:15px;}
}



/* PICKUP */
#toppage .pickup { 
    background: url("../../image/frontPickup_bg.png") no-repeat center center;
    background-size: cover;
}
#toppage .pickup .inner { padding: 70px 0; width: 100%; max-width: none;}
#toppage .pickup h3 {
    padding: 20px 0;
    background:#8F8524;
}
#toppage .pickup .pickup_list { 
    display: flex; flex-wrap: wrap; justify-content: center; gap:15px;
    margin: 60px auto 0; max-width: 1200px;
}
#toppage .pickup .pickup_list .bana { width: calc(33.3% - 10px); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 1);}
#toppage .pickup .pickup_list a { position: relative; display: block; color: #fff;}
#toppage .pickup .pickup_list a .mid {
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    width: 80%; height:120px;
    z-index: 99;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 1), -2px -2px 3px rgba(0, 0, 0, 1);
}
#toppage .pickup .pickup_list b,
#toppage .pickup .pickup_list small { display: block; padding:5px 0; text-align: center; letter-spacing: 2px;}
#toppage .pickup .pickup_list b {
    font-family: "Bebas Neue", sans-serif;
    font-size:40px;
    font-weight: 400;
    border-bottom:3px solid #fff;
}
#toppage .pickup .pickup_list small { font-size:112.5%;}
#toppage .pickup .pickup_list img { width: 100%; height: auto;}
@media only screen and (min-width:468px){
    #toppage .pickup .pickup_list a:hover { color: #fff;}
}
@media only screen and (max-width:1000px){
     #toppage .pickup .pickup_list b {font-size:30px;}
}
@media only screen and (max-width:468px){
    #toppage .pickup .pickup_list { flex-direction: column;}
    #toppage .pickup .pickup_list .bana { margin: auto; width:90%;}
    #toppage .pickup .pickup_list b {font-size:25px;}
}


/* SNS */
#toppage .sns { }
#toppage .banner_list { padding-bottom: 10px; overflow: hidden;}
#toppage .banner_list .bana { float: left; margin:20px 2%;}
#toppage .banner_list .bana.col1 { width: 96%;}
#toppage .banner_list .bana.col2 { width: 46%;}
#toppage .banner_list .bana.col3 { width: 29.3%;}
#toppage .banner_list .bana.col4 { width: 21%;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .banner_list .bana { margin:2% !important; width:46% !important;}
}


/* SPONSOR */
#toppage .sponsor {}
#toppage .sponsor_list { padding-bottom: 10px; overflow: hidden;}
#toppage .sponsor_list .bana { float: left; margin:20px 2%; border: 1px solid #ddd;}
#toppage .sponsor_list .bana.col2 { width: 46%;}
#toppage .sponsor_list .bana.col3 { width: 29.3%;}
#toppage .sponsor_list .bana.col4 { width: 21%;}
#toppage .sponsor_list .bana a {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; height: 100%; 
    text-align: center;
    background: #fff; 
}
#toppage .sponsor .sponsor_list + h3 { padding-top: 100px;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .sponsor_list .bana { margin:2% !important; width:46% !important;}
}