@charset "utf-8";
/*--------------------------------------------------------*/
/*リセット*/
html{margin:0px;padding:0px;border:0px;scroll-behavior: smooth;}
*{box-sizing: border-box;margin:0;padding:0;border:0px;}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav{background:transparent;border:none;font-size:100%;font-weight:normal;margin:0;padding:0;vertical-align:bottom;word-break: break-word;}
ol, ul{list-style:none; list-style-type:none;}
.span{display: inline-block;}
img{border: none;}
a{color: #000000;}
a:link,a:visited{text-decoration:none;}
body{
background: #d6f9e8;
font-size: min(1.0em,3vw);
height:auto;
margin: 0;
padding: 0;
text-align: center;
width:100%;
}

/*パンくずリスト----------------------------------*/
nav.panlist{
overflow: hidden;
overflow: auto;
padding: 4px 0;
width: 100%;
}
nav.panlist a{
color:#13b064;
text-decoration: underline;
}
nav.panlist strong{
font-weight:normal;
}
nav.panlist ol {
color:#484848;
display: flex;
white-space: nowrap;
font-size: 0.8em;
list-style: none;
line-height:1.5;
margin: 0 auto 0.2em;
padding: 0;
max-width: 1270px;
width: 98%;
}
nav.panlist li + li::before {
content: ">";
margin: 0 0.5em;
}

/*-------ヘッダー---------*/
#header {
margin-bottom: 0.5em;
}
#sns_button {
margin: 0 auto 1em;
text-align: center;
}
.btn_sns{
margin: 0 2px;
}
.btn_twitter img,.btn_x img,.btn_facebook img,.btn_line img{height: 40px;width: 40px;}

/*-------右側---------*/
#right_side{
padding-top: 0 !important;
margin-left: 10px;
}
#right_side #rank ol li span {
height: 18px;
padding: 0!important;
}

/*-------コンテンツ---------*/
#mxId {
margin: 0 auto 1em;
width: 95%;
}
#mxId img{
height: auto;
max-width: 800px;
width: 100%;
}
#all_present{
margin: 0 auto 3%;
overflow: hidden;
width: 1280px;
}
/* ページタイトル */
#all_present #present_header .h1_img {
background-color: white;
border-radius: 10px;
display: grid;
font-family: "游ゴシック", serif;
font-size: min(3.5em, 6vw);
font-weight: bold;
grid-template-columns: 300px 1fr;
line-height: 2.2em;
margin: 0 auto 2%;
padding: 0.5em 15%;
text-align: center;
max-width: 1400px;
width: 100%;
}
#all_present #present_header .h1_img img {
height: auto;
width: 100%;
}

/*---------------------プレゼント一覧ここから---------------------*/
section.main {
display: grid;
gap: 1em;
grid-template-columns: 1fr 310px;
}

/* 全賞品をまとめたdiv */
#present_list{
line-height: 1.5;
width: 100%;
}
/* 賞品ひとつ分のdiv */
#present_list .pre_set{
background-color: white;
border: solid 1px #bebebe;
margin: 0 auto 3%;
padding: 4%;
text-align: left;
}
/* プレゼント無いとき */
#present_list .pre_set_close{
min-height: 900px;
padding: 5%;
text-align: center;
}
/* 賞品名 */
#present_list .pre_set .pre_name {
background-color: #29910d;
border-radius: 5px;
color: white;
font-size: min(1.2em, 4.5vw);
font-weight: bold;
line-height: 1.4;
padding: 0.6em;
margin: 0 auto 1em;
}
/* 賞品詳細のdiv */
#present_list .pre_set .pre_detail{
overflow: hidden;
width: 100%;
}
/* 賞品画像＋説明文のdiv*/
#present_list .pre_set .pre_detail .pre_detail_top{
display: grid;
grid-template-columns: 35% 1fr;
gap: 1em;
width: 100%;
}
/* 締切＋応募ボタンのdiv*/
#present_list .pre_set .pre_detail .pre_detail_bottom{
display: grid;
grid-template-columns: 35% 1fr;
gap: 1em;
margin: 1em 0 0;
width: 100%;
}
/* 賞品画像 */
#present_list .pre_set .pre_detail .pre_detail_top .pre_pic{}
#present_list .pre_set .pre_detail .pre_detail_top .pre_pic img{
box-shadow: 1px 1px 5px #aaa;
height: auto;
width: 100%;
}
/* 説明文 */
#present_list .pre_set .pre_detail .pre_detail_top .pre_memo,
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date{
font-size: min(1.0em, 4.0vw);
}
/* 応募締切 */
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date span{
color: #fe3980;
display: block;
}
/* 応募ボタン */
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a {
background: #ffbf2c;
border-radius: 5px;
display: block;
font-size: min(1.2em,4.0vw);
font-weight: bold;
margin: 0 0 0 auto;
padding: 0.5em 0;
text-align: center;
user-select: none;
width: 80%;
}
#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a:hover{
opacity: 0.6;
}
/*---------------------プレゼント一覧ここまで---------------------*/

/*-- ローディング ----------------------*/
#loader {
align-items: center;
background: #fff;
display: flex;
inset: 0;
justify-content: center;
position: fixed;
z-index: 9999;
}
.loader,.loader:before,.loader:after {
-webkit-animation: load1 1s infinite ease-in-out;animation: load1 1s infinite ease-in-out;
background: #aaa;
height: 4em;
/*top: 50%;*/
width: 1em;
}
.loader {
-webkit-animation-delay: -0.16s;animation-delay: -0.16s;
color: #ccc;
font-size: 11px;
margin: auto;
position: relative;
-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
text-indent: -9999em;
}
.loader:before,.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
	}
	@keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
}
/*--------------------------------------------------------*/
/* -------------------------------------- */
@media (width > 764px) {
	.onlyPc{}
	.onlySp{display: none;}
}

/* -------------------------------------- */
@media (width < 764px) {
	.onlyPc{display: none;}
	.onlySp{}
	nav.panlist ol{
	font-size: 1em;
	}
	#all_present {
	margin: 0 auto;
	width: 95%;
	}
	#all_present #present_header .h1_img {
	grid-auto-flow: row;
	grid-template-columns: none;
	margin: 0 auto 0.6em;
	text-align: center;
	}
	#mxId{
	width: 100%;
	}
	section.main,
	#present_list .pre_set .pre_detail .pre_detail_top,
	#present_list .pre_set .pre_detail .pre_detail_bottom{
	display: unset;
	}
	#present_list .pre_set .pre_detail .pre_detail_top .pre_pic img {
    box-shadow: 0px 0px 0.5em #aaa;
    margin: 0.5em 0.5em 2em;
    height: auto;
    width: 95%;
	}
	#present_list .pre_set .pre_detail_top .pre_memo,
	#present_list .pre_set .pre_detail .pre_detail_bottom .pre_date {
    font-size: 4vw !important;
    margin: 0 auto 1em;
    width: 95%;
	}
	#present_list .pre_set .pre_detail .pre_detail_bottom .pre_btn a{
	margin: 0 auto;
	padding: 1em 0;
	}
	#present_list .pre_set_close{
	min-height: 50vh;
	}
}