@charset "UTF-8";

/* ---------------------------------------
  header
-----------------------------------------*/
header .head_wrap_top {
	position: relative;
	height: auto;
}

header .head_wrap_top img {
	width: 100%;
}

header .head_wrap_top .wrap {
	height: auto;
	overflow: hidden;
}

header .head_wrap_top .logo {
	width: 100%;
	max-width: inherit;
	position: static;
	transform: none;
}


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

.anime {
	animation-name: anime;
	-webkit-animation-name: anime;

	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes anime {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}

	60% {
		transform: translateY(-100%) scaleY(1.1);
	}

	70% {
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}

	80% {
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}

	90% {
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}

	100% {
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

@-webkit-keyframes anime {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}

	60% {
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}

	70% {
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}

	80% {
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}

	90% {
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}

	100% {
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

.flash-anime {
	opacity: 0;
	animation: flash-anime 1s infinite;
}

@-webkit-keyframes flash-anime {

	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

@keyframes flash-anime {

	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}


/* ---------------------------------------
  contents
-----------------------------------------*/
main {
	background-color: transparent;
}


/* top_recommend
--------------------------------*/
#top_recommend {
	padding: 60px 0 65px;
}

#top_recommend .wrap {
	max-width: 1840px;
	padding-left: 20px;
	padding-right: 20px;
}

#top_recommend .ttl {
	position: relative;
	width: 59.132%;
	max-width: 1062px;
	margin: 0 auto 30px;
}

#top_recommend .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#top_recommend .list .item {
	width: 32.556%;
	max-width: 586px;
}

#top_recommend .list .item>img {
	display: block;
	width: 100%;
	border-radius: 22px;
	cursor: pointer;
	transition: opacity .4s ease;
}

#top_recommend .list .item a img {
	border-radius: 22px;
}

/*
#top_recommend .list .item:nth-child(n + 3):not(:nth-child(3n)) {
	margin-left: 1.166%;
}

#top_recommend .list .item:nth-child(n + 3) {
	margin-top: 1.166%;
}

#top_recommend .list .item:nth-child(1),
#top_recommend .list .item:nth-child(2) {
	width: 49.444%;
	max-width: 890px;
	margin-left: 0;
}

#top_recommend .list .item:nth-child(2) {
	margin-left: 1.112%;
}
*/

/*2カラム用*/
#top_recommend .list .item {
	width: 49.444%;
	max-width: 890px;
}

#top_recommend .list .item.w100 {
	width: 100%;
	max-width: inherit;
}

#top_recommend .list .item:nth-child(n + 2) {
	margin-top: 1.166%;
}

#top_recommend .list .item:nth-child(odd):not(.w100) {
	margin-left: 1.112%;
}

@media screen and (max-width: 1835px) {
	#top_recommend .list .item a {
		border-radius: 1.2vw;
	}
}

@media screen and (min-width: 769px) {

	#top_recommend .list .item>img:hover {
		opacity: 0.8;
	}
}

@media screen and (max-width: 1835px) {
	#top_recommend .list .item a {
		border-radius: 1.2vw;
	}
}

@media screen and (max-width: 768px) {
	#top_recommend {
		padding: 5.6vw 0;
	}

	#top_recommend .ttl {
		width: 100%;
		max-width: inherit;
		margin: 0 auto 3.2vw;
	}

	#top_recommend .sp_slider .slick-list {
		overflow: visible;
	}

	#top_recommend .sp_slider .item {
		width: 80vw !important;
		margin: 0 1.33vw;
	}

	#top_recommend .sp_slider .item>img {
		border-radius: 3.8vw;
	}

	#top_recommend .sp_slider .item a img {
		border-radius: 3.8vw;
	}

	#top_recommend .sp_slider .slick-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2.67vw;
	}

	#top_recommend .sp_slider .slick-dots li {
		margin: 0 2.8vw;
		font-size: 0;
	}

	#top_recommend .sp_slider .slick-dots button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
		border-radius: 0;
		resize: none;
		outline: none;
		background: none;
		font-size: 0;
		text-indent: -1000px;
		overflow: hidden;
		width: 2.13vw;
		height: 2.13vw;
		border-radius: 100%;
		padding: 0;
		background: #fff;
	}

	#top_recommend .sp_slider .slick-dots .slick-active button {
		background: #c50018;
	}
}



/* prize_list
--------------------------------*/
.prize img {
	vertical-align: middle;
}

.prize .prize_box .thumb img {
	/*    width: 154px;*/
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.prize .prize_thumb .ico {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30%;
}

.prize_box {
	position: relative;
	height: 100%;
	cursor: pointer;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
}


@media screen and (min-width: 769px) {
	.prize_box:hover {
		opacity: 0.8;
	}
}

@media screen and (max-width: 768px) {
	.prize .prize_thumb {
		height: 26.95vw;
		margin: 0 auto;
	}
}

.prize_name {
	display: flex;
	font-size: 1.2rem;
	line-height: 1.3;
}

.prize_box .prize_name {
	margin-top: 6px;
	align-items: flex-end;
	line-height: 1.5;
	word-break: normal;
	font-size: 1.0rem;
}

.prize_num {
	display: flex;
	background-color: #000;
	color: #fff;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 20px;
}

/* .prize_box .prize_num {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 3px;
} */

.prize_box .prize_name {
	margin-top: 10px;
}

.prize_box .select_size {
	width: 33%;
}

.prize_box .select_size span {
	width: 100%;
}

.prize_box .select_size span:last-child {
	background-color: #88B93D;
	color: #fff;
}

.prize_num span {
	width: 50%;
	padding-top: 2px;
	border: 2px solid #000;
	text-align: center;
	font-weight: 600;
	font-size: 1.2rem;
	white-space: nowrap;
}

.prize_num span:last-child {
	background-color: #fff;
	color: #000;
}

.prize_num .prize_truck {
	background-color: #f39800;
	border: 2px solid #f39800;
}

.prize_num .prize_kaden {
	background-color: #5A9FE7;
	border: 2px solid #5A9FE7;
}

.prize_num .prize_nitiyou {
	background-color: #88B93D;
	border: 2px solid #88B93D;
}

.prize_num .prize_syokuhin {
	background-color: #C50019;
	border: 2px solid #C50019;
}



@media screen and (max-width: 768px) {
	.prize_box .select_size {
		width: 100%;
	}

	.prize_box .prize_num {
		flex-wrap: wrap;
	}

	.prize_num span:last-child {
		width: 100%;
	}

	.prize_box .prize_name {
		margin-top: 5%;
	}
}

/* .prize_details */
.prize_details {
	visibility: hidden;
	position: fixed;
	z-index: 100000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 904px;
	width: 90%;
	max-height: 600px;
	height: calc(90% - 40px);
	transition: all .3s;
	opacity: 0;
}

.prize_details.on {
	visibility: visible;
	opacity: 1;
}

.bg,
.bnr_tigers_bg {
	visibility: hidden;
	position: fixed;
	z-index: 99999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 200%;
	background-color: rgba(0, 0, 0, 0.7);
	transition: all .2s;
}

.bg.on {
	visibility: visible;
	opacity: 1;
}

.details_box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 904px;
	width: 100%;
	max-height: 600px;
	height: 100%;
	background-color: #fff;
	border: 2px solid #CACACA;
}

.details_wrap {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.prize_details .prize_img {
	display: flex;
	align-items: center;
	width: 50%;
	padding: 0 30px 0 20px;
	padding: 30px 50px 30px 60px;
	position: relative
}

.prize_details .prize_img span {
	display: block;
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
}

.prize_details .prize_img img {
	width: 100%;
	height: auto;
}

.prize_details .prize_img+div {
	width: 50%;
	padding: 30px 30px 0 0;
}

.prize_details .prize_wear {
	background-color: #88B93D;
}

.prize_details .prize_wear span:last-child {
	background-color: #88B93D;
	color: #fff;
}

.prize_details .prize_size {
	font-size: 2.6rem;
	line-height: 1.3;
	margin-left: 12px;
}

.prize_details .size_txt {
	display: inline-block;
	color: #B81C22;
	font-size: 1.5rem;
	vertical-align: text-top;
	padding: 12px 0;
}

.prize_details .flex {
	display: flex;
	align-items: center;
}

.prize_details .prize_num span,
.corporations span {
	padding: 5px 0.5em 2px;
	font-size: 1.7rem;
}

.corporations {
	background-color: #000;
	color: #fff;
	margin-left: 5px;
	white-space: nowrap;
}

.corporations span {
	display: block;
	border: 2px solid #000;
	font-weight: 600;
}

.prize_point {
	margin-top: 3px;
	color: #D80C18;
	font-size: 1.5rem;
	font-weight: 600;
	margin-left: auto;
	white-space: nowrap;
}

.prize_point span {
	font-size: 1.9rem;
}

.prize_details .prize_name {
	margin: 0.5em 0;
	font-size: 2.6rem;
	word-break: normal;
}

.prize_maker {
	padding-bottom: 8px;
	font-size: 1.8rem;
	line-height: 1.3;
	word-break: normal;
	overflow-wrap: break-word;
}

.prize_txt {
	padding: 10px 0 8px;
	border-top: 1px solid #CACACA;
	border-bottom: 1px solid #CACACA;
	font-size: 1.8rem;
	line-height: 1.3;
	word-break: normal;
	overflow-wrap: break-word;
}

.prize_details dl {
	margin-top: 10px;
	padding-bottom: 25px;
	text-align: right;
}

.prize_details dt {
	display: inline-block;
	width: 40px;
	color: #B81C22;
	line-height: 1.6;
	font-size: 1.5rem;
	vertical-align: text-top;
}

.prize_details dt+dd {
	font-size: 1.8rem;
	margin-bottom: 5px;
	line-height: 1.3;
	vertical-align: text-top;
}

.prize_details dd span {
	margin-right: 3px;
}

.prize_details dd {
	display: inline-block;
	width: calc(100% - 46px);
	margin-left: auto;
	line-height: 1.3;
	font-size: 1.5rem;
	word-break: normal;
}

.prize_details dd .btn {
	text-align: right;
	margin-top: 5px;
}

.prize_details .ramen_search {
	display: block;
	padding-bottom: 25px;
}

.prize_close {
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: -50px;
	left: 0;
	right: 0;
	margin: auto;
	cursor: pointer;
}

.prize_close::before {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	transform: rotate(45deg);
}

.prize_close::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	transform: rotate(-45deg);
}



@media screen and (max-width: 1024px) {
	.list_head {
		width: 100%;
		margin: 5px auto 0;
	}

	.prize_name {
		font-size: 1.1rem;
		bottom: 2.2em;
	}

	.prize_point {
		display: flex;
		flex-wrap: wrap;
		padding-left: 5px;
		justify-content: center;
	}

	.prize_list .pager {
		width: 90%;
		padding: 40px 0 20px;
	}
}


@media screen and (max-width: 768px) {
	.prize_list ul {
		padding: 0 4%;
	}

	.prize {
		width: 33.3%;
		height: auto;
		margin-right: 0%;
		margin-top: 0%;
		padding: 2% 2% 4% 2%;
	}

	/*
    .prize:nth-of-type(5n) {
        margin-right: 3.5%;
    }
*/

	.prize:nth-of-type(3n) {
		margin-right: 0;
	}


	.prize_name {
		font-size: 2.5vw;
	}

	/* .prize_box .prize_name {
        bottom: calc(4.5vw + 7px);
        padding-bottom: 65px;
    } */

	.prize_box .prize_num {
		bottom: calc(4.5vw + 7px);
	}

	.prize_num span {
		font-size: 2.5vw;
		margin-top: 0;
	}

	/* .prize_details */
	.details_wrap {
		flex-wrap: wrap;
	}

	.prize_details {
		max-height: 1000px;
		height: calc(90% - 50px);
	}

	.prize_details .prize_img {
		width: 100%;
		padding: 7vw calc(10% + 10px) 6vw;
	}

	.prize_details .prize_img span {
		bottom: 6vw;
		font-size: 2.8vw;
	}

	.prize_details .prize_img+div {
		width: 100%;
		padding: 0 4vw 5vw;
	}

	.prize_details .prize_num span,
	.corporations span {
		font-size: 3vw;
	}

	.prize_point {
		font-size: 3vw;
	}

	.prize_point span {
		font-size: 3.6vw;
	}

	.prize_details .prize_name {
		font-size: 4vw;
		margin: 0.8em 0;
	}

	.prize_maker {
		padding-bottom: 0.5em;
		font-size: 3.5vw;
	}

	.prize_txt {
		padding: 0.5em 0;
		font-size: 3.5vw;
	}

	.prize_details .size_box {
		margin-bottom: 4px;
	}

	.prize_details .prize_size {
		font-size: 4vw;
		line-height: 0.6;
		margin-left: 6px;
	}

	.prize_details .size_txt {
		font-size: 3.2vw;
	}

	.prize_details dl {
		padding-bottom: 0;
	}

	.prize_details dt {
		font-size: 3.2vw;
		vertical-align: top;
		line-height: 1.3;
	}

	.prize_details dt+dd {
		font-size: 3.5vw;
	}

	.prize_details dd {
		font-size: 3.2vw;
	}

	.prize_details .ramen_search {
		padding: 5vw 0;
	}

	.prize_close {
		bottom: -37px;
	}

	/* pager */
	.prize_list .pager {
		flex-wrap: nowrap;
		width: 92%;
		padding: 6vw 0 4vw;
	}

	.pager li {
		white-space: nowrap;
	}

	.pager li+li {
		margin-left: 0.2em;
	}

	.pager .prev a {
		padding-left: 0;
	}

	.pager .next a {
		padding-right: 0;
	}
}



/* top_recommend2
--------------------------------*/
#top_recommend2 {
	position: relative;
	padding: 0 0 80px;
}

#top_recommend2 .wrap {
	position: relative;
	max-width: inherit;
	background-color: #fff;
}

#top_recommend2 .ttl_obi {
	margin-bottom: 0;
}

#top_recommend2 .ttl_obi img {
	width: 30.15625%;
	max-width: 579px;
}

#top_recommend2 .prize_list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 20px 0;
}

#top_recommend2 .prize_list .prize {
	position: relative;
	width: 20%;
	max-width: 360px;
	padding: 15px 0 20px;
}

#top_recommend2 .prize_list .prize .ttl {
	text-align: center;
	min-height: 71px;
	margin-bottom: 35px;
}

#top_recommend2 .prize_list .prize:nth-child(1) .ttl img {
	width: 57.778%;
	max-width: 208px;
}

#top_recommend2 .prize_list .prize:nth-child(2) .ttl img {
	width: 57.778%;
	max-width: 208px;
}

#top_recommend2 .prize_list .prize:nth-child(3) .ttl img {
	width: 78.612%;
	max-width: 283px;
}

#top_recommend2 .prize_list .prize:nth-child(4) .ttl img {
	width: 67.778%;
	max-width: 244px;
}

#top_recommend2 .prize_list .prize:nth-child(5) .ttl img {
	width: 51.945%;
	max-width: 187px;
}

#top_recommend2 .prize_list .prize .prize_box {
	width: 90%;
	max-width: 230px;
	margin: 0 auto;
	position: relative;
	cursor: pointer;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

#top_recommend2 .prize_list .prize .prize_box .prize_thumb {
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1/1;
	margin: 0 auto;
}

#top_recommend2 .prize_list .prize .prize_box .prize_num span {
	display: inline-block;
	width: calc(100% / 3);
	font-size: 1.4rem;
	line-height: 1.5;
	white-space: nowrap;
}

#top_recommend2 .prize_list .prize .prize_box .prize_name {
	display: block;
	margin: 10px auto 0;
	font-size: 1.25rem;
}

@media screen and (min-width: 769px) {

	#top_recommend2 .prize_list .prize+.prize::after {
		content: "";
		background-size: 4px 4px;
		background-position: right top;
		background-image: radial-gradient(circle farthest-side, #c50018, #c50018 60%, transparent 60%, transparent);
		position: absolute;
		width: 4px;
		height: 100%;
		background-repeat: repeat-y;
		left: 0;
		top: 0;
	}
}

@media screen and (max-width: 1100px) {
	#top_recommend2 .prize_list .prize .prize_box .prize_num {
		flex-wrap: wrap;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_num span {
		width: 50%;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_num span:last-child {
		width: 100%;
	}
}

/*
@media screen and (min-width: 768px) and (max-width:1541px) {
	#top_recommend2 .prize_list .prize {
		width: 100%;
		padding: 30px 0 20px;
	}

	#top_recommend2 .prize_list .prize:nth-child(odd) {
		padding-right: 0;
	}

	#top_recommend2 .prize_list .prize:nth-child(even) {
		padding-left: 0;
	}

	#top_recommend2 .prize_list .prize:nth-child(even)::after {
		content: none;
	}
}
*/

@media screen and (max-width: 768px) {
	#top_recommend2 {
		padding: 0 0 8vw;
	}

	#top_recommend2 .wrap {
		padding: 0;
	}

	#top_recommend2 .ttl_obi img {
		width: 47.466vw;
	}

	#top_recommend2 .prize_list {
		justify-content: flex-start;
		padding: 2.9vw 0;
	}

	#top_recommend2 .prize_list .prize {
		width: calc(100% / 3);
		padding: 2.2vw 2.4vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(n + 4) {
		margin-top: 4.8vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(3n + 1):not(:nth-child(1)):before {
		content: "";
		width: 100vw;
		height: 4px;
		background-repeat: repeat-x;
		background-size: 4px 4px;
		background-position: right top;
		background-image: radial-gradient(circle farthest-side, #c50018, #c50018 60%, transparent 60%, transparent);
		position: absolute;
		left: 0;
		top: calc((2.4vw + 1px) * -1);
	}

	#top_recommend2 .prize_list .prize:not(:nth-child(3n)):after {
		content: "";
		width: 4px;
		height: 100%;
		background-repeat: repeat-y;
		background-size: 4px 4px;
		background-position: right top;
		background-image: radial-gradient(circle farthest-side, #c50018, #c50018 60%, transparent 60%, transparent);
		position: absolute;
		right: -2px;
		top: 0;
	}

	#top_recommend2 .prize_list .prize .ttl {
		text-align: center;
		min-height: 6.4vw;
		margin-bottom: 2.3vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(1) .ttl img {
		width: 19.8vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(2) .ttl img {
		width: 19.8vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(3) .ttl img {
		width: 26.67vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(4) .ttl img {
		width: 23.2vw;
	}

	#top_recommend2 .prize_list .prize:nth-child(5) .ttl img {
		width: 17.6vw;
	}

	#top_recommend2 .prize_list .prize .prize_box {
		max-width: inherit;
		height: auto;
	}

	#top_recommend2 .prize_list .prize .prize_box .ico {
		width: 14.93vw;
		margin: 0 auto 3vw;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_thumb {
		width: 26vw;
		height: 26vw;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_num {
		margin-top: 4vw;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_num span {
		width: 50%;
		font-size: 2.5vw;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_num span:last-child {
		width: 100%;
	}

	#top_recommend2 .prize_list .prize .prize_box .prize_name {
		display: block;
		margin: 1.5vw auto 0;
		font-size: 1rem;
		line-height: 1.5;
	}
}

/* ---------------------------------------
  footer
-----------------------------------------*/
footer .procedure {
	background: none;
}

footer .wrap {
	width: 100%;
	max-width: 1040px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0 auto !important;
}

footer .bg_white .wrap {
	padding: 50px 20px 42px !important;
}

footer .foot_logo {
	width: 355px;
}

footer .footer_box {
	width: 625px;
}

@media screen and (max-width: 1360px) {
	footer .footer_box ul {
		width: 92%;
		height: 32px;
	}
}

@media screen and (max-width: 1040px) {
	footer .bg_white .wrap {
		display: block;
	}
}

@media screen and (max-width: 768px) {
	footer .wrap {
		width: 100%;
		padding: 0 !important;
	}

	footer .bg_white .wrap {
		padding: 5vw 4% !important;
	}

	footer .foot_logo {
		width: 100%;
	}

	footer .footer_box {
		width: 100%;
	}

	footer .footer_box ul {
		width: 92%;
		height: initial;
	}
}