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

.bg-slider {
	width: 100vw;
	height: 50vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
/*    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
	color: #fff;
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow:#333 1px 1px 8px, #333 -1px 1px 8px,
    #333 1px -1px 8px, #333 -1px -1px 8px;
}
@media (max-width: 768px){
    .bg-slider {
        height: 40vh;
    }
    .bg-slider__title{
        font-size: 1.125rem;
    }
}

@media (max-width: 576px){
    .bg-slider {
        height: 30vh;
    }
}


/* Controls
---------------------------------------------------------------------- */

.hijouji {
    padding: .5rem 1rem;
    background: #ffeaea;
    margin: .5rem 0;
    border: medium solid #ff0000;
    border-radius: .5rem;
}
.hijouji > dl {
    margin-bottom: 0;
}
.hijouji > dl > dt{
/*    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
    color: #ff0000;
    float: left;
    width: 150px;
    line-height: 2rem;
}
.hijouji > dl > dd{
    margin-left: 150px;
}
.hijouji > dl > dd > dl > dt {
    color: #ff0000;
}

.oshirase {
    padding: .5rem 1rem 0;
    background: #ffeaea;
    margin-top: 1rem;
    height: 120px;
    overflow: auto;
}

.oshirase > dl{
    overflow: hidden;
    margin: 0;
}

.oshirase > dl > dt{
/*    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
    float: left;
    width: 100px;
    line-height: 2rem;
}
.oshirase > dl > dd{
    margin-left: 100px;
}
@media (max-width: 768px){
    .oshirase > dl > dt{
        float: none;
        display: block;
    }
    .oshirase > dl > dd{
        margin-left: 0;
    }
}

.oshirase-post {
    margin-bottom: 0;
}
.oshirase-post > dt {
    float: left;
    width: 100px;
    line-height: 2rem;
}
.oshirase-post > dd {
    margin-left: 100px;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 2rem;
}
.oshirase-post > dd > a.bold {
    font-weight: bold;
}
.oshirase-post > dd > a.red {
    color: #ff0000;
}

.controls {
    padding: .5rem 1rem 0;
    background: #f1f1f1;
    margin-top: 1rem;
}

.controls dl{
    overflow: hidden;
    margin: 0;
}
.controls dl:nth-child(1){
    border-bottom: #cccccc dotted 1px;
    margin-bottom: .5em;
}
.controls dt{
/*    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
    float: left;
    width: 100px;
    line-height: 3rem;
}
.controls dd{
    margin-left: 100px;
}
@media (max-width: 768px){
    .controls dt{
        float: none;
        display: block;
    }
    .controls dd{
        margin-left: 0;
    }
}
.controls .btn{
    color: #ffffff;
    padding: .375rem 1.25rem;
    margin: .3rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.controls .btn:hover{
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;
}


.controls .btn[data-sort] {
    background: #6fb9d8;
}

.controls .btn[data-filter=".category-1"] {
    background: #F17373;
}

.controls .btn[data-filter=".category-2"] {
    background: #F0B671;
}

.controls .btn[data-filter=".category-3"] {
    background: #55D287;
}

.controls .btn[data-filter=".category-4"] {
    background: #949DE7;
}

.controls .btn[data-filter=".category-5"] {
    background: #00A1E9;
}

.controls .btn[data-filter="all"] {
    background: #00A1E9;
}

/* Container
---------------------------------------------------------------------- */

#container {
    padding: 1rem 0;
    text-align: justify;
    max-height: 900px;
    overflow: hidden;
}

#container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fff;
    border-radius: 2px;
    margin-bottom: 1rem;
    position: relative;
    border: #cccccc solid 1px;
}

.mix dl{
    margin: 0;
    padding: 0;
}
.mix dt{
    font-size: 0.875rem;
    padding:0 .5em;
}
.mix dd{
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
}
.mix dd .mix_img{
/*  position: relative;
  width: 100%;
  padding-top: 67%; /* 縦横比2:3でトリミング */
    overflow: hidden;
}
.mix dd img{
/*  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); */
    width:100%;
    height:auto;
    display: block;
	transition-duration: 0.3s;
}
.mix dd p{
    font-size: 0.875rem;
    padding: .5em;
    margin: 0;
}
.mix dd p span{
    display: block;
    font-weight: bold;
    padding: .2em 0;
}
.mix.category-1 {
    border-top: .5rem solid #F17373;
}
.mix.category-1 dt{
    color:#F17373;
}
.mix.category-2 {
    border-top: .5rem solid #F0B671;
}
.mix.category-2 dt{
    color:#F0B671;
}
.mix.category-3 {
    border-top: .5rem solid #55D287;
}
.mix.category-3 dt{
    color:#55D287;
}
.mix.category-4 {
    border-top: .5rem solid #949DE7;
}
.mix.category-4 dt{
    color:#949DE7;
}
.mix.category-5 {
    border-top: .5rem solid #00A1E9;
}
.mix.category-5 dt{
    color:#00A1E9;
}
.mix a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}
.mix a:hover{
    text-decoration: none;
}
.mix:hover img {
	transform: scale(1.3);
	transition-duration: 0.5s;
}

.mix.category-1 a:hover{
    border: #F17373 solid 3px;
}
.mix.category-2 a:hover {
    border: #F0B671 solid 3px;
}
.mix.category-3 a:hover {
    border: #55D287 solid 3px;
}
.mix.category-4 a:hover {
    border: #949DE7 solid 3px;
}
.mix.category-5 a:hover {
    border: #00A1E9 solid 3px;
}

/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}

/* 3 Columns */

@media screen and (min-width: 768px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
}

/* 4 Columns */

@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
}

.second_contents{
    background: #f1f1f1;
    padding: 4rem 0;;
}

.second_contents h3{
/*    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; */
    text-align: center;
    display: block;
    margin-bottom: 1.5em;
}
.second_contents h3 span{
    border-bottom: #666 dotted 1px;
    padding:.2em .5em;
}
.tab-content{
    background: #fff;
    border-width: 1px;
    border-style: solid;
    border-color:#fff #ccc #ccc;
    padding: 2em;
}
.nav-tabs .nav-link {
    border: 1px solid #ccc;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #495057;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #ccc #ccc #fff;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #ccc #ccc #fff;
    background-color: #fff;
}
@media (max-width: 576px){
    .nav-tabs .nav-item {
        display: block;
        flex-basis: 100%;
    }
}
.tab-content dl{
    overflow: hidden;
    margin: 0;
}
.tab-content dt{
   float: left;
   width: 100px;
   padding:.5em 0 ;
}
.tab-content dd{
    margin-left: 100px;
    padding:.5em 0 ;
 }
 .banner_block{
     margin: 0;
     padding: 0;
 }
 .banner_block li{
     list-style: none;
     margin-bottom: 1em;
 }
 .banner_block li img{
     width: 100%;
     height: auto;
 }