@charset "utf-8";
/* CSS Document */

/* -------------------------------------------------

css

------------------------------------------------- */

/* MAIN
------------------------------------------------- */
.swiper-container {
  text-align: center;
}
.swiper-container .swiper-slide img {
  max-width: 100%;
  height: auto;
}
.swiper-container {
  padding-bottom: 20px;
}
.swiper-slide-prev {
  background: #FFFFFF;
}
.swiper-slide-prev img {
  opacity: 0.25;
  filter: alpha(opacity=25 style=0);
  -moz-opacity: 0.25;
}
.swiper-slide-next {
  background: #FFFFFF;
}
.swiper-slide-next img {
  opacity: 0.25;
  filter: alpha(opacity=25 style=0);
  -moz-opacity: 0.25;
}

#pc_only {
  display: block;
}
#sp_only {
    display: none;
}

@media screen and (max-width:900px) {
}
@media screen and (max-width:600px) {
  #pc_only {
    display: none;
  }
  #sp_only {
    display: block;
  }
}

/* ATTENTION
------------------------------------------------- */
#attention {
  padding: 30px 20px;
  background: #3074B5;
}
#attention div {
  max-width: 1500px;
  margin: 0 auto;
  border-bottom: 1px dotted #888888;
  background: #FFFFFF;
}
#attention .data {
  padding: 20px;
  float: left;
}
#attention .text {
  padding: 20px;
}

@media screen and (max-width:900px) {
    #attention .data {
      padding: 10px 10px 0;
      float: none;
    }
    #attention .text {
      padding: 0 10px 10px;
    }
}
@media screen and (max-width:600px) {
    #attention {
      padding: 15px 10px;
    }
    #attention .data {
      font-size: 15px;
    }
    #attention .text {
      font-size: 15px;
    }
}

/* PICKUP
------------------------------------------------- */
#pickup {
  width: 100%;
  padding: 100px 0;
  background: url(../../../common/images/new/contents_bg.png) no-repeat top center;
}
#pickup ul {
  width: calc( 100% - 30px ) ;
  margin: 0 0 0 30px;
}
#pickup ul li {
  width: calc( 33% - 30px ) ;
  margin: 50px 30px 0 0;
  border-top: 5px solid #00547D;
  text-align: center;
  overflow: hidden;
  float: left;
  position: relative;
}
#pickup ul li a {
  height: 250px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  background: #FFFFFF;
  display: block;
}
#pickup ul li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#pickup ul li .youtube {
  width: 135px;
  height: 35px;
  top: 0%;
  right: 0%;
  position: absolute;
}
#pickup ul li .object-fit{
  object-fit: contain;
  font-family: 'object-fit: contain;'
}
#pickup ul li img.cover, video.cover {
	object-fit: cover;
}

@media screen and (max-width:1100px) {
    #pickup ul li a {
      height: 150px;
    }
}
@media screen and (max-width:900px) {
    #pickup {
      padding: 60px 0 25px;
    }
    #pickup ul {
      width: calc( 100% - 20px ) ;
      margin: 0 0 0 20px;
    }
    #pickup ul li {
      width: calc( 50% - 20px ) ;
      margin: 50px 20px 0 0;
    }
    #pickup ul li a {
      height: 200px;
    }
    #pickup ul li .youtube {
      width: 115px;
      height: 30px;
    }
}
@media screen and (max-width:600px) {
    #pickup ul li {
      margin: 25px 20px 0 0;
      font-size: 15px;
      text-align: left;
    }
    #pickup ul li a {
      height: 150px;
    }
    #pickup ul li .youtube {
      width: 115px;
      height: 30px;
    }
}
@media screen and (max-width:450px) {
    #pickup ul li a {
      height: 100px;
    }
    #pickup ul li .youtube {
      width: 95px;
      height: 25px;
    }
}

/* NewsHyo
------------------------------------------------- */
#newshyo {
  max-width: 1500px;
  margin: 0 auto;
}

@media screen and (max-width:900px) {
}
@media screen and (max-width:600px) {
}

/* NEWS
------------------------------------------------- */
#news {
  width: calc( 100% - 300px ) ;
  padding: 100px 0;
  background: url(../../../common/images/new/contents_bg.png) no-repeat top center;
  float: left;
}
#news ul {
  width: calc( 100% - 30px ) ;
  margin: 0 0 0 30px;
}
#news ul li {
  width: calc( 33% - 30px ) ;
  margin: 50px 30px 0 0;
  border-top: 5px solid #00547D;
  overflow: hidden;
  float: left;
}
#news ul li a.img {
  height: 250px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  background: #FFFFFF;
  display: block;
}
#news ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#news ul li span.icon {
  padding: 2px 0;
  margin: 0 10px 5px 0;
  width: 100px;
  color: #FFFFFF;
  font-size: 15px;
  text-align: center;
  border-radius: 5px;        /* CSS3草案 */  
  -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 5px;   /* Firefox用 */  
  display: block;
  float: left;
}
#news ul li .txt {
  padding: 10px 0 5px 0;
  line-height: 1.2em;
  display: block;
  float: left;
}
#news ul li .data {
  display: block;
  float: left;
}
#news ul li span.newicon {
  padding: 5px 10px;
  margin: 0 10px 5px 0;
  width: auto;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  border-radius: 0px;        /* CSS3草案 */  
  -webkit-border-radius: 0px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 0px;   /* Firefox用 */  
  display: block;
  float: left;
  background: #AA0000;
}
#news ul li span.new { background: #FF9000; }
#news ul li span.news { background: #51774B; }
#news ul li span.event { background: #46627E; }
#news ul li span.law { background: #337B83; }

@media screen and (max-width:900px) {
    #news {
      width: calc( 100% - 0px ) ;
      padding: 60px 0;
      float: none;
    }
    #news ul {
      width: calc( 100% - 20px ) ;
      margin: 0 0 0 20px;
    }
    #news ul li {
      width: calc( 50% - 20px ) ;
      margin: 50px 20px 0 0;
    }
}
@media screen and (max-width:600px) {
    #news {
      padding: 60px 0 10px;
    }
    #news ul li {
      margin: 25px 20px 0 0;
      font-size: 15px;
      text-align: left;
    }
    #news ul li a.img {
      height: 150px;
    }
    #news ul li span {
      float: none;
    }
}

/* LIST
------------------------------------------------- */
#list {
  width: 300px;
  padding: 50px 0 0;
  float: right;
}
#list #hyo {
  padding: 5px;
  background: #00405C;
}
#list #hyo ul {
  padding: 20px 0;
  border: 1px solid #97A6C3;
  background: #00537A;
}
#list #hyo ul li {
  margin: 0 0 1px;
  text-align: center;
}
#list #hyo ul li.title {
  margin: 0 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
}
#list #polarg {
  margin: 30px 0 0;
}

@media screen and (max-width:900px) {
    #list {
      width: auto;
      padding: 0 0 20px;
      float: none;
    }
    #list #hyo ul li {
      margin: 0 auto 5px;
    }
    #list #hyo ul li.title {
      width: 100%;
    }
    #list #polarg {
      margin: 20px 0 0;
      text-align: center;
    }
}
@media screen and (max-width:600px) {
}

/* BANNER
------------------------------------------------- */
#banner {
  width: calc( 100% -40px ) ;
  padding: 30px 20px;
}
#banner ul {
  text-align: center;
}
#banner ul li {
  width: calc( 25% - 25px ) ;
  padding: 0 10px;
  display: inline-block;
}
#banner ul li img {
  width: 100%;
  height: auto;
}

@media screen and (max-width:900px) {
    #banner ul li {
      width: auto;
      margin: 0 0 10px 0;
    }
}
@media screen and (max-width:600px) {
    #banner {
      width: calc( 100% - 0px ) ;
      padding: 30px 0px 30px 0;
    }
    #banner ul li {
      margin: 0 0 10px 0px;
    }
}

/* TEL
------------------------------------------------- */
#tel {
  max-width: 866px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 30px;
  text-align: center;
}
#tel img {
  width: 100%;
  height: auto;
}
@media screen and (max-width:600px) {
    #tel {
      max-width: 340px;
    }
}
#mainslide {
  margin-top: 208px;
}
@media screen and (max-width:900px) {
  #mainslide {
    margin-top: 0;
  }
}