@charset "UTF-8";
/* ==========================================================================
//
// MODULE
//
========================================================================== */

/* ==========================================================================
// mod-rollover
========================================================================== */
.mod-rollover{
  position: relative;
}

.mod-rollover img,
.mod-rollover input {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	transition: 0.5s;
}
.mod-rollover:hover img:nth-of-type(2),
.mod-rollover:hover input:nth-of-type(2) {
	opacity: 0;
}

/* 透明部分を含む画像のロールオーバーに使用 */
.mod-rollover-transparent img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  height: auto;
	display: block;
	transition: 0.5s;
}
.mod-rollover-transparent img:nth-of-type(1) {
	opacity: 0;
}
.mod-rollover-transparent img:nth-of-type(2),
.mod-rollover-transparent:hover img:nth-of-type(1),
.mod-rollover-transparent:hover img:nth-of-type(2) {
	opacity: 1;
}


/* ==========================================================================
// mod-breadcrumbs
========================================================================== */
.mod-breadcrumbs{
  padding: 20px 0;
  border-top:dotted 1px var(--gray);
  border-bottom:dotted 1px var(--gray);
  max-width: 1200px;
}
.mod-breadcrumbs li{
  display: inline-block;
  font-size: 12px;
}
.mod-breadcrumbs li:before{
  content: "";
  display: inline-block;
  margin: 0 8px 0 2px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;
}
.mod-breadcrumbs a{
  color: var(--gray);
  transition: 0.15s;
}
.mod-breadcrumbs a:hover{
  opacity: 0.65;
}



/* ==========================================================================
//
// TABLET & SMARTPHONE
//
========================================================================== */

@media screen and (max-width:1024px) {
  /* ========================================================================
  // mod-breadcrumbs
  ======================================================================== */
  .mod-breadcrumbs{
    margin-bottom: 20px;
  }
  /* ========================================================================
  // mod-news-list
  ======================================================================== */
  .mod-news-list li dt{
    width: 105px;
  }
  /* ========================================================================
  // mod-sidebar
  ======================================================================== */
  .mod-sidebar{
    margin-bottom: 100px;
    width:100%;
  }
  .mod-sidebar .ttl-sidebar{
    height: 70px;
  }
  .mod-sidebar .list-main > li{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  .mod-sidebar .list-main > li:last-child{
    border-radius: 0 0 5px 5px;
  }
}




/* ==========================================================================
//
// SMARTPHONE
//
========================================================================== */

@media screen and (max-width:480px) {
  /* ========================================================================
  // mod-news-list
  ======================================================================== */
  .mod-news-list{
    border: none;
  }
  .mod-news-list li{
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .mod-news-list li + li{
    margin-top: 10px;
  }
  .mod-news-list li a{
    position: relative;
    padding: 10px;
  }
  .mod-news-list li dl{
    display: block;
  }
  .mod-news-list li dt,
  .mod-news-list li dd{
    display: inline-block;
  }
  .mod-news-list li dt{
    margin-right: 10px;
    width: 70px;
    border-right: none;
    text-align: left;
  }
  /* category */
  .mod-news-list li dd.category{
    padding: 0;
  }
  .mod-news-list li dd.category span{
    margin: 0;
    padding: 5px;
    max-width: 105px;
    font-size: 12px;
  }
  /* ttl */
  .mod-news-list li dd.ttl{
    position: static;
    width: 100%;
    padding:5px 30px 0 0;
    font-weight: bold;
  }
  .mod-news-list li dd.ttl:before{
    right: 20px;
  }
  /* ========================================================================
  // mod-sidebar
  ======================================================================== */
  .mod-sidebar .list-main > li > a{
    padding: 18px 20px;
  }
}