@charset "utf-8";

/* ---------------- */
:root {
	--base-color-blue: #0771f2;
	--base-color-red: #ff0033;
	--tx_base-color-black: #000000;
	--tx_base-color-glay: #575757;
	
	--font-weight-regular:400;
	--font-weight-bold:700;
	--font-weight-black:900;
	
	--font-size-16px:clamp(0.813rem, 0.685rem + 0.34vw, 1rem);/* 13px-16px */
	--font-size-20px:clamp(1rem, 0.83rem + 0.45vw, 1.25rem);/* 16px-20px */
	--font-size-38px:clamp(1.2rem, 0.903rem + 1.59vw, 2.375rem);/* 24px-38px */
}

.wrap #right_side {
    padding-top: 0;
	/* font-weight: lighter; */
}




/* ページタイトル */
#all_present #present_header h1 {
    width: 100%;
    background-color: transparent;
    border-radius: 10px;
    margin: 2% auto;
    text-align: center;
    filter: drop-shadow(2px 2px 3px #fff);
    display: flex;
}



h1 span {
    font-size: min(5vw, 80px);
    font-weight: var(--font-weight-regular);
    align-self: center;
}

h1 img {
    /*    width: min(20vw, 380px);*/
    width: 800px;
}

h1 a {
    display: block;
    margin: 0 auto;
}


/*---------------------プレゼント一覧ここから---------------------*/
/* 全賞品をまとめたdiv */
#present_list {
	max-width: 950px;
    line-height: 1.6em;
}

/* 賞品ひとつ分のdiv */
#present_list .pre_set {
    background-color: #ffffff;
    /* border: solid 1px #bebebe; */
    margin: 0 auto 3% auto;
    padding: 4%;
    position: relative;
    text-align: left;
	box-shadow: 0px 0px 20px -10px rgba(115, 199, 255, 0.5);
	border-radius: min(2vw, 1em);
}

/* プレゼント無いとき */
#present_list .pre_set_close {
    min-height: 500px;
    padding: 5%;
    text-align: center;
}

@media screen and (max-width:980px) {
	#present_list .pre_set_close {
    min-height: 200px;
	}
}
/* 賞品名 */
#present_list .pre_set h3.pre_name {
    background-color: var(--base-color-red);
    border-radius: 5px;
    color: #fff;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 2% 3%;
    margin: 0 auto 3% auto;
	font-weight: var(--font-weight-bold);
	border-bottom: none;
}

/* 賞品詳細のdiv */
#present_list .pre_set .pre_detail {
    overflow: hidden;
    width: 100%;
}

/* 賞品画像＋説明文のdiv*/
#present_list .pre_set .pre_detail .pre_detail_top {
    width: 100%;
    overflow: hidden;
    padding-bottom: 3%;
}

/* 締切＋応募ボタンのdiv*/
#present_list .pre_set .pre_detail .pre_detail_bottom {
    clear: both;
    overflow: hidden;
    width: 100%;
}

/* 賞品画像 */
#present_list .pre_set .pre_detail .pre_detail_top .pre_pic {
    float: left;
    width: 40%;
}

#present_list .pre_set .pre_detail .pre_detail_top .pre_pic img {
    /* border-top: solid 1px #aaa; */
    /* border-left: solid 1px #aaa; */
    box-shadow: 1px 1px 5px #aaa;
    width: 100%;
}

/* 説明文 */
#present_list .pre_set .pre_detail .pre_detail_top .pre_memo {
    float: right;
    width: 54%;
	font-weight: var(--font-weight-regular);
}

/* 締切 */
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date {
    float: left;
    width: 40%;
}

/* 応募締切 */
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date span {
	color: #ff3e3e;
    display: block;
}

/* 応募ボタン */
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a {
    background: #ffaf38;
    display: inline-block;
    width: 100%;
}

#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:link {
    background-color: #116bfd;
    border-radius: 50px;
    display: block;
    float: right;
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    padding: 2% 3%;
    width: 48%;
}

#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:link,
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:visited {
    color: #fff;
    text-decoration: none;
}
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:hover {
	opacity: .7;
	transition: .3s;
}

@media screen and (max-width:600px) {
	#present_list .pre_set .pre_detail .pre_detail_top .pre_pic {
    float: none;
    width: 80%;
	margin: 4% auto;
	}
	#present_list .pre_set .pre_detail .pre_detail_top .pre_memo {
    float: none;
    width: 100%;
	font-weight: var(--font-weight-regular);
	}
	#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date {
    float: none;
    width: 100%;
	}
	#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:link {
    width: 100%;
	}
	#present_list {
    margin-bottom: clamp(3.125rem, 2.083rem + 4.5vw, 6.25rem);
	}
	.pre_btn {
		
	}
	.pre_btn a {
		margin: 8% 0;
		padding: 5%!important;
	}	
}


/*---------------------プレゼント一覧ここまで---------------------*/

#left{
	width: min(calc(100% - 320px), 980px);
}

@media screen and (max-width:980px) {
	#left{
	width: unset;
}
}