@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 710px){
.main_bnr_wrap {
    margin: 0;
}
}

.main_bnr_wrap {
    margin-top: 0;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-self: stretch;
}

/* SP横スクロール */
.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 12px 8px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 16px 0;
}

.horizontal_scroll li{
	position: relative; 
}


@media screen and (min-width: 711px) {
  .horizontal_scroll {
    overflow-x: inherit;
    padding: 0 8px 6px; } }

.horizontal_scroll > li {
  width: 100%;
  min-width: 80px; }

@media screen and (min-width: 711px) {
  .horizontal_scroll > li {
    min-width: inherit; } }

.horizontal_scroll > li:not(:last-child) {
  margin-right: 5px; }

/*.horizontal_scroll > li:last-child {
  padding-right: 5px; }*/

@media screen and (min-width: 711px) {
  .horizontal_scroll > li:last-child {
    padding-right: 0; } }

.horizontal_scroll img {
  vertical-align: bottom; }


.i_hot{
    position: absolute;
    right: -2px;
    width: 22px;
    height: 21px;
    border-radius: 50%;
	background-image: radial-gradient(circle at 100% 0%, rgba(243, 152, 0, 0.95) 15%, rgba(230, 0, 18, 1));
    color: white;
    font-size: 0.5rem;
    text-align: center;
	font-weight: bold;

}



/**--------------------------------------- 背景色設定 --*/
.bg-green {
    background: #EAF6DC;
}

.bg-gray {
    background: #F0F3F5;
}

.bg-white {
    background: #FFFFFF;
}

.bg-black {
    background: #333333;
}

.bg-gradation {
    background: -moz-linear-gradient(65deg, #E60012, #F39800);
    background: -webkit-linear-gradient(65deg, #E60012, #F39800);
    background: linear-gradient(25deg, #E60012, #F39800);
}

/**-------------------------------------- 余白設定 --*/
.p-1{
	padding: .25rem;
}

.p-2{
	padding: .5rem;
}

.p-3{
	padding: 1rem;
}

.p-4{
	padding: 1.5rem;
}
.p-5{
	padding: 2rem;
}


.px-1{
	padding: 0 .25rem;
}

.px-2{
	padding: 0 .5rem;
}

.px-3{
	padding: 0 1rem;
}

.px-4{
	padding: 0 1.5rem;
}

.px-5{
	padding: 0 2rem;
}


.py-1{
	padding: .25rem 0;
}

.py-2{
	padding: .5rem 0;
}

.py-3{
	padding: 1rem 0;
}

.py-4{
	padding: 1.5rem 0;
}

.py-5{
	padding: 2rem 0;
}

.pt-1{
	padding-top: .25rem;
}

.pt-2{
	padding-top: .5rem;
}
.pt-3{
	padding-top: 1rem;
}

.pt-4{
	padding-top: 1.5rem;
}

.pt-5{
	padding-top: 2rem;
}

.pb-1{padding-bottom: .25rem;
}

.pb-2{padding-bottom: .5rem;
}

.pb-3{padding-bottom: 1rem;
}

.pb-4{padding-bottom: 1.5rem;
}
.pb-5{padding-bottom: 2rem;
}

.mb-1{
	margin-bottom: .25rem;
}

.mb-2{
	margin-bottom: .5rem;
}

.mb-3{
	margin-bottom: 1rem;
}

.mb-4{
	margin-bottom: 1.5rem;
}

.mb-5{
	margin-bottom: 2rem;
}
.mt-1{
	margin-bottom: .25rem;
}

.mt-2{
	margin-bottom: .5rem;
}

.mt-3{
	margin-bottom: 1rem;
}

.mt-4{
	margin-bottom: 1.5rem;
}

.mt-5{
	margin-bottom: 2rem;
}

.my-1{
	padding: .25rem 0;
}

.my-2{
	padding: .5rem 0;
}

.my-3{
	padding: 1rem 0;
}

.my-4{
	padding: 1.5rem 0;
}

.my-5{
	padding: 2rem 0;
}



/**--------------------------------------- グリッドシステム --*/

.col-sm-6 {
    flex: 0 0 auto;
    width: 24%;
}


@media screen and (min-width: 711px) {
	.col-2 {
		flex: 0 0 auto;
		width: 16.66666666%;
	}

	.col-3 {
		flex: 0 0 auto;
		width: 24.99999999%;
	}

	.col-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.col-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.col-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.col-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.col-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.col-9 {
		flex: 0 0 auto;
		width: 74.99999999%;
	}

	.col-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.col-11 {
		flex: 0 0 auto;
		width: 91.66666666%;
	}

	.col-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}


@media screen and (max-width: 711px) {
	.col-sm-6{
		flex: 0 0 auto;
		width: 46%;
	}
	.col-sm-4{
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-sm-3{
		flex: 0 0 auto;
		width: 24.99999999%;
	}
}